From d84bfa758034aa636637517fd915e5ce27061280 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Fri, 7 Feb 2020 11:30:18 -0600 Subject: [PATCH 1/5] Hides section contents instead of unmounting them --- packages/venia-ui/lib/components/Accordion/section.css | 5 +++++ packages/venia-ui/lib/components/Accordion/section.js | 6 ++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/venia-ui/lib/components/Accordion/section.css b/packages/venia-ui/lib/components/Accordion/section.css index c6be44269b..ef36e02a46 100644 --- a/packages/venia-ui/lib/components/Accordion/section.css +++ b/packages/venia-ui/lib/components/Accordion/section.css @@ -9,6 +9,11 @@ .contents_container { padding: 0 1.5rem 1.5rem; } + +.contents_container_closed { + display: none; +} + .contents_container:empty { display: none; } diff --git a/packages/venia-ui/lib/components/Accordion/section.js b/packages/venia-ui/lib/components/Accordion/section.js index 9f720c1587..97f55daafa 100644 --- a/packages/venia-ui/lib/components/Accordion/section.js +++ b/packages/venia-ui/lib/components/Accordion/section.js @@ -18,11 +18,13 @@ const Section = props => { ); const isOpen = openSectionIds.has(id); - const contents = isOpen ? children : null; const titleIconSrc = isOpen ? ArrowUp : ArrowDown; const titleIcon = ; const classes = mergeClasses(defaultClasses, props.classes); + const contentsContainerClass = isOpen + ? classes.contents_container + : classes.contents_container_closed; const titleContainerClass = isOpen ? classes.title_container_open : classes.title_container; @@ -36,7 +38,7 @@ const Section = props => {
{title}
{titleIcon} -
{contents}
+
{children}
); }; From 47f4c33873fc41c0e204cf6b468dcbc5136960e1 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Fri, 7 Feb 2020 11:41:14 -0600 Subject: [PATCH 2/5] Fixes up tests. Closes all price adjustement sections by default. --- .../__snapshots__/accordion.spec.js.snap | 46 ++++++++++++++----- .../Accordion/__tests__/accordion.spec.js | 6 ++- .../priceAdjustments.spec.js.snap | 26 +++++++++-- .../PriceAdjustments/priceAdjustments.js | 2 - 4 files changed, 61 insertions(+), 19 deletions(-) diff --git a/packages/venia-ui/lib/components/Accordion/__tests__/__snapshots__/accordion.spec.js.snap b/packages/venia-ui/lib/components/Accordion/__tests__/__snapshots__/accordion.spec.js.snap index 19180b51d0..311908faea 100644 --- a/packages/venia-ui/lib/components/Accordion/__tests__/__snapshots__/accordion.spec.js.snap +++ b/packages/venia-ui/lib/components/Accordion/__tests__/__snapshots__/accordion.spec.js.snap @@ -1,15 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`it renders a closed Section correctly 1`] = ` -
-
+
+
-
+
+ This section is closed. Its className should match. +
`; exports[`it renders an open Section correctly 1`] = ` -
-
+
+
-
- This section is open. You should see this content. +
+ This section is open. Its className should match.
diff --git a/packages/venia-ui/lib/components/Accordion/__tests__/accordion.spec.js b/packages/venia-ui/lib/components/Accordion/__tests__/accordion.spec.js index f9d8c45edd..6acf118694 100644 --- a/packages/venia-ui/lib/components/Accordion/__tests__/accordion.spec.js +++ b/packages/venia-ui/lib/components/Accordion/__tests__/accordion.spec.js @@ -4,12 +4,14 @@ import { createTestInstance } from '@magento/peregrine'; import Accordion from '../accordion'; import Section from '../section'; +jest.mock('../../../classify'); + test('it renders a closed Section correctly', () => { // Act. const instance = createTestInstance(
- This section is closed. You should not see this content. + This section is closed. Its className should match.
); @@ -23,7 +25,7 @@ test('it renders an open Section correctly', () => { const instance = createTestInstance(
- This section is open. You should see this content. + This section is open. Its className should match.
); diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap index 79e2a6e4fc..8ee17b7ee6 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap @@ -28,7 +28,13 @@ exports[`it renders Venia price adjustments 1`] = ` -
-
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js index cbc0934adf..4ddade695c 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js @@ -9,7 +9,6 @@ import CouponCode from './CouponCode'; const PriceAdjustments = props => { const classes = mergeClasses(defaultClasses, props.classes); - // TODO: Minimizing accordion views actually unmounts the components. If a component does things, like make a query, on mount, it may make unnecessary queries. Can we just hide the content? return (
@@ -23,7 +22,6 @@ const PriceAdjustments = props => {
From a4f5f994d5de5bf51331ede900bebd42ce7cde5c Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Fri, 7 Feb 2020 13:22:31 -0600 Subject: [PATCH 3/5] Runs prettier --- .../components/CartPage/PriceAdjustments/priceAdjustments.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js index 4ddade695c..f249388f05 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js @@ -20,10 +20,7 @@ const PriceAdjustments = props => { Shipping Methods to be completed by PWA-239.
-
+
From 91ef9f3932fa7ae63698bbab84d7096716706dae Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Mon, 10 Feb 2020 10:00:49 -0600 Subject: [PATCH 4/5] Updates priceAdjustments snapshot. All section children should be present. --- .../priceAdjustments.spec.js.snap | 41 +------------------ 1 file changed, 2 insertions(+), 39 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap index 6a72dc1083..f6f647ed66 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap @@ -23,7 +23,7 @@ exports[`it renders Venia price adjustments 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -62,44 +62,7 @@ exports[`it renders Venia price adjustments 1`] = ` -
-
- -
From 3ed75efc76cabd9ca637c0e01624a5b99aa446e7 Mon Sep 17 00:00:00 2001 From: Andrew Terranova Date: Mon, 10 Feb 2020 14:01:00 -0600 Subject: [PATCH 5/5] Updates priceAdjustments unit test and snapshot --- .../__snapshots__/priceAdjustments.spec.js.snap | 14 ++++++++------ .../__tests__/priceAdjustments.spec.js | 2 ++ .../CartPage/PriceAdjustments/priceAdjustments.js | 5 ++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap index 5a561620d7..2a0a1d22c1 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap @@ -28,7 +28,13 @@ exports[`it renders Venia price adjustments 1`] = ` -
diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js index 0814a84fb1..9b46cf97b4 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js @@ -3,7 +3,9 @@ import { createTestInstance } from '@magento/peregrine'; import PriceAdjustments from '../priceAdjustments'; +jest.mock('../CouponCode', () => 'CouponCode'); jest.mock('../giftCardSection', () => 'GiftCardSection'); +jest.mock('../GiftOptions', () => 'GiftOptions'); test('it renders Venia price adjustments', () => { // Act. diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js index 0df109c3e9..472d52a8e7 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/priceAdjustments.js @@ -1,13 +1,12 @@ import React from 'react'; import { Accordion, Section } from '../../Accordion'; - +import CouponCode from './CouponCode'; +import GiftCardSection from './giftCardSection'; import GiftOptions from './GiftOptions'; import { mergeClasses } from '../../../classify'; import defaultClasses from './priceAdjustments.css'; -import CouponCode from './CouponCode'; -import GiftCardSection from './giftCardSection'; const PriceAdjustments = props => { const classes = mergeClasses(defaultClasses, props.classes);