From 87b78e5bb3ec81a87ec4b8b36b3889bdc13d3f14 Mon Sep 17 00:00:00 2001 From: Dennis Konieczek Date: Thu, 21 Sep 2023 15:58:01 -0400 Subject: [PATCH 1/3] test: add initial component snapshot tests --- .../snap-preact-components/jest.config.js | 1 + packages/snap-preact-components/package.json | 1 + .../src/components/Atoms/Badge/Badge.test.tsx | 13 + .../Badge/__snapshots__/Badge.test.tsx.snap | 215 + .../Atoms/Breadcrumbs/Breadcrumbs.test.tsx | 11 + .../__snapshots__/Breadcrumbs.test.tsx.snap | 771 + .../components/Atoms/Button/Button.test.tsx | 29 + .../Button/__snapshots__/Button.test.tsx.snap | 805 + .../Atoms/Dropdown/Dropdown.test.tsx | 43 + .../__snapshots__/Dropdown.test.tsx.snap | 1928 + .../components/Atoms/Element/Element.test.tsx | 12 + .../__snapshots__/Element.test.tsx.snap | 108 + .../FormattedNumber/FormattedNumber.test.tsx | 11 + .../FormattedNumber.test.tsx.snap | 119 + .../src/components/Atoms/Icon/Icon.test.tsx | 13 + .../Icon/__snapshots__/Icon.test.tsx.snap | 243 + .../src/components/Atoms/Image/Image.test.tsx | 15 + .../Image/__snapshots__/Image.test.tsx.snap | 421 + .../Atoms/Loading/LoadingBar.test.tsx | 10 + .../__snapshots__/LoadingBar.test.tsx.snap | 932 + .../Merchandising/Banner/Banner.test.tsx | 7 + .../Banner/__snapshots__/Banner.test.tsx.snap | 261 + .../InlineBanner/InlineBanner.test.tsx | 8 + .../__snapshots__/InlineBanner.test.tsx.snap | 659 + .../Atoms/NoResults/NoResults.test.tsx | 17 + .../__snapshots__/NoResults.test.tsx.snap | 1958 + .../components/Atoms/Overlay/Overlay.test.tsx | 11 + .../__snapshots__/Overlay.test.tsx.snap | 243 + .../src/components/Atoms/Price/Price.test.tsx | 10 + .../Price/__snapshots__/Price.test.tsx.snap | 159 + .../Atoms/SearchHeader/SearchHeader.test.tsx | 21 + .../__snapshots__/SearchHeader.test.tsx.snap | 749 + .../Atoms/Skeleton/Skeleton.test.tsx | 11 +- .../__snapshots__/Skeleton.test.tsx.snap | 483 + .../src/components/Atoms/Terms/Terms.test.tsx | 16 + .../Terms/__snapshots__/Terms.test.tsx.snap | 1193 + .../utils/Container/Container.test.tsx | 27 + .../__snapshots__/Container.test.tsx.snap | 429 + .../Molecules/Carousel/Carousel.test.tsx | 66 + .../__snapshots__/Carousel.test.tsx.snap | 4096 + .../Molecules/Checkbox/Checkbox.test.tsx | 30 + .../__snapshots__/Checkbox.test.tsx.snap | 938 + .../ErrorHandler/ErrorHandler.test.tsx | 8 + .../__snapshots__/ErrorHandler.test.tsx.snap | 901 + .../FacetGridOptions.test.tsx | 11 + .../FacetGridOptions.test.tsx.snap | 1900 + .../FacetHierarchyOptions.test.tsx | 14 + .../FacetHierarchyOptions.test.tsx.snap | 3093 + .../FacetListOptions.test.tsx | 14 + .../FacetListOptions.test.tsx.snap | 3424 + .../FacetPaletteOptions.test.tsx | 15 + .../FacetPaletteOptions.test.tsx.snap | 3754 + .../FacetSlider/FacetSlider.test.tsx | 9 + .../__snapshots__/FacetSlider.test.tsx.snap | 1809 + .../Molecules/Filter/Filter.test.tsx | 13 + .../Filter/__snapshots__/Filter.test.tsx.snap | 1157 + .../Molecules/Pagination/Pagination.test.tsx | 14 + .../__snapshots__/Pagination.test.tsx.snap | 1019 + .../Molecules/Rating/Rating.test.tsx | 21 + .../Rating/__snapshots__/Rating.test.tsx.snap | 9405 ++ .../Molecules/Result/Result.test.tsx | 17 + .../Result/__snapshots__/Result.test.tsx.snap | 2759 + .../SearchInput/SearchInput.test.tsx | 10 + .../__snapshots__/SearchInput.test.tsx.snap | 546 + .../Molecules/Select/Select.test.tsx | 42 + .../Select/__snapshots__/Select.test.tsx.snap | 7048 ++ .../Molecules/Slideout/Slideout.test.tsx | 21 + .../__snapshots__/Slideout.test.tsx.snap | 991 + .../BranchOverride/BranchOverride.test.tsx | 21 + .../BranchOverride.test.tsx.snap | 2455 + .../components/Organisms/Facet/Facet.test.tsx | 298 +- .../Facet/__snapshots__/Facet.test.tsx.snap | 11300 +++ .../Organisms/Facets/Facets.test.tsx | 10 + .../Facets/__snapshots__/Facets.test.tsx.snap | 31010 ++++++ .../FilterSummary/FilterSummary.test.tsx | 19 + .../__snapshots__/FilterSummary.test.tsx.snap | 3599 + .../MobileSidebar/MobileSidebar.test.tsx | 55 + .../__snapshots__/MobileSidebar.test.tsx.snap | 82844 ++++++++++++++++ .../Organisms/Results/Results.test.tsx | 16 + .../__snapshots__/Results.test.tsx.snap | 25710 +++++ .../Organisms/Sidebar/Sidebar.test.tsx | 14 + .../__snapshots__/Sidebar.test.tsx.snap | 37692 +++++++ .../Organisms/Toolbar/Toolbar.test.tsx | 12 + .../__snapshots__/Toolbar.test.tsx.snap | 5673 ++ .../Autocomplete/Autocomplete.test.tsx | 33 +- .../__snapshots__/Autocomplete.test.tsx.snap | 25426 +++++ .../Recommendation/Recommendation.test.tsx | 33 + .../Recommendation.test.tsx.snap | 2033 + .../RecommendationProfileTracker.test.tsx | 4 + ...RecommendationProfileTracker.test.tsx.snap | 779 + .../RecommendationResultTracker.test.tsx | 4 + .../RecommendationResultTracker.test.tsx.snap | 1077 + 92 files changed, 285220 insertions(+), 5 deletions(-) create mode 100644 packages/snap-preact-components/src/components/Atoms/Badge/__snapshots__/Badge.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Button/__snapshots__/Button.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Element/__snapshots__/Element.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/FormattedNumber/__snapshots__/FormattedNumber.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Icon/__snapshots__/Icon.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Image/__snapshots__/Image.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Loading/__snapshots__/LoadingBar.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/__snapshots__/Banner.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Merchandising/InlineBanner/__snapshots__/InlineBanner.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/NoResults/__snapshots__/NoResults.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Overlay/__snapshots__/Overlay.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Price/__snapshots__/Price.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/SearchHeader/__snapshots__/SearchHeader.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Skeleton/__snapshots__/Skeleton.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Atoms/Terms/__snapshots__/Terms.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Layouts/utils/Container/__snapshots__/Container.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Carousel/__snapshots__/Carousel.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Checkbox/__snapshots__/Checkbox.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/ErrorHandler/__snapshots__/ErrorHandler.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/FacetGridOptions/__snapshots__/FacetGridOptions.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/FacetHierarchyOptions/__snapshots__/FacetHierarchyOptions.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/FacetListOptions/__snapshots__/FacetListOptions.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/FacetPaletteOptions/__snapshots__/FacetPaletteOptions.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/FacetSlider/__snapshots__/FacetSlider.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Filter/__snapshots__/Filter.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Pagination/__snapshots__/Pagination.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Rating/__snapshots__/Rating.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Result/__snapshots__/Result.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/SearchInput/__snapshots__/SearchInput.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Select/__snapshots__/Select.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Molecules/Slideout/__snapshots__/Slideout.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/BranchOverride/__snapshots__/BranchOverride.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/Facet/__snapshots__/Facet.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/Facets/__snapshots__/Facets.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/FilterSummary/__snapshots__/FilterSummary.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/MobileSidebar/__snapshots__/MobileSidebar.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/Results/__snapshots__/Results.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/Sidebar/__snapshots__/Sidebar.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Organisms/Toolbar/__snapshots__/Toolbar.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Templates/Autocomplete/__snapshots__/Autocomplete.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Templates/Recommendation/__snapshots__/Recommendation.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Trackers/Recommendation/ProfileTracker/__snapshots__/RecommendationProfileTracker.test.tsx.snap create mode 100644 packages/snap-preact-components/src/components/Trackers/Recommendation/ResultTracker/__snapshots__/RecommendationResultTracker.test.tsx.snap diff --git a/packages/snap-preact-components/jest.config.js b/packages/snap-preact-components/jest.config.js index bdab68d03..5357b9b4f 100644 --- a/packages/snap-preact-components/jest.config.js +++ b/packages/snap-preact-components/jest.config.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires const rootConfig = require('../../jest.base.config.json'); module.exports = { ...rootConfig, diff --git a/packages/snap-preact-components/package.json b/packages/snap-preact-components/package.json index 904ec3f1c..bb7559073 100644 --- a/packages/snap-preact-components/package.json +++ b/packages/snap-preact-components/package.json @@ -38,6 +38,7 @@ "preact": "10.9.0" }, "devDependencies": { + "@emotion/jest": "11.9.0", "@searchspring/snap-client": "^0.46.0", "@searchspring/snap-controller": "^0.46.0", "@searchspring/snap-event-manager": "^0.46.0", diff --git a/packages/snap-preact-components/src/components/Atoms/Badge/Badge.test.tsx b/packages/snap-preact-components/src/components/Atoms/Badge/Badge.test.tsx index ce2ab1109..ab7051885 100644 --- a/packages/snap-preact-components/src/components/Atoms/Badge/Badge.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Badge/Badge.test.tsx @@ -17,24 +17,28 @@ describe('Badge Component', () => { let styles = getComputedStyle(badge)!; expect(styles.right).toEqual('0px'); + expect(rendered.asFragment()).toMatchSnapshot(); const newPosition = { left: 0 }; rendered.rerender({CHILDREN}); styles = getComputedStyle(badge); expect(styles.left).toEqual('0px'); + expect(rendered.asFragment()).toMatchSnapshot(); const bottomPosition = { bottom: 0 }; rendered.rerender({CHILDREN}); styles = getComputedStyle(badge); expect(styles.bottom).toEqual('0px'); + expect(rendered.asFragment()).toMatchSnapshot(); const topPosition = { top: 0 }; rendered.rerender({CHILDREN}); styles = getComputedStyle(badge); expect(styles.top).toEqual('0px'); + expect(rendered.asFragment()).toMatchSnapshot(); }); describe('Badge with content', () => { @@ -47,6 +51,7 @@ describe('Badge Component', () => { const BadgeElement = rendered.getByText(CONTENT); expect(BadgeElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('Badge has correct classes', () => { @@ -55,6 +60,7 @@ describe('Badge Component', () => { expect(badge.classList.length).toBe(3); expect(badge.classList[0]).toMatch(/^ss__badge/); expect(badge).toHaveClass(CLASSNAME); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -69,6 +75,7 @@ describe('Badge Component', () => { const BadgeElement = badge.getByText(CONTENT); expect(BadgeElement).toBeInTheDocument(); + expect(badge.asFragment()).toMatchSnapshot(); }); it('Badge has correct number of classes', () => { @@ -76,6 +83,7 @@ describe('Badge Component', () => { expect(BadgeElement.classList.length).toBe(2); expect(BadgeElement.classList[0]).toMatch(/^ss__badge/); + expect(badge.asFragment()).toMatchSnapshot(); }); }); @@ -89,12 +97,14 @@ describe('Badge Component', () => { const BadgeElement = badge.getByText(CONTENT); expect(BadgeElement).toBeInTheDocument(); + expect(badge.asFragment()).toMatchSnapshot(); }); it('Badge has correct number of classes', () => { const BadgeElement = badge.getByText(CONTENT); expect(BadgeElement?.classList.length).toBe(1); + expect(badge.asFragment()).toMatchSnapshot(); }); }); @@ -116,6 +126,7 @@ describe('Badge Component', () => { const element = rendered.container.querySelector('.ss__badge'); expect(element).toBeInTheDocument(); expect(element).toHaveClass(globalTheme.components.badge.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -135,6 +146,7 @@ describe('Badge Component', () => { const element = rendered.container.querySelector('.ss__badge'); expect(element).toBeInTheDocument(); expect(element).toHaveClass(propTheme.components.badge.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is theme prop overrides ThemeProvider', () => { @@ -169,6 +181,7 @@ describe('Badge Component', () => { expect(element).not.toHaveClass(globalTheme.components.badge.className); expect(element).toHaveTextContent(propTheme.components.badge.content); expect(element).not.toHaveTextContent(globalTheme.components.badge.content); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Badge/__snapshots__/Badge.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Badge/__snapshots__/Badge.test.tsx.snap new file mode 100644 index 000000000..b9d3be2c1 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Badge/__snapshots__/Badge.test.tsx.snap @@ -0,0 +1,215 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badge Component Badge theming works is theme prop overrides ThemeProvider 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+ ahhhh +
+ +`; + +exports[`Badge Component Badge theming works is themeable with ThemeProvider 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component Badge theming works is themeable with theme prop 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component Badge with children Badge has correct number of classes 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component Badge with children renders Badge 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component Badge with content Badge has correct classes 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + top: 0; + left: 0; +} + +
+ sale +
+ +`; + +exports[`Badge Component Badge with content renders Badge 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + top: 0; + left: 0; +} + +
+ sale +
+ +`; + +exports[`Badge Component Badge with disableStyles Badge has correct number of classes 1`] = ` + +
+ sale +
+ +`; + +exports[`Badge Component Badge with disableStyles renders Badge 1`] = ` + +
+ sale +
+ +`; + +exports[`Badge Component positions badge based on prop 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + right: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component positions badge based on prop 2`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + left: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component positions badge based on prop 3`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + bottom: 0; +} + +
+
+ sale +
+
+ +`; + +exports[`Badge Component positions badge based on prop 4`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + top: 0; +} + +
+
+ sale +
+
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/Breadcrumbs.test.tsx b/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/Breadcrumbs.test.tsx index e15c37b1a..0eaab3498 100644 --- a/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/Breadcrumbs.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/Breadcrumbs.test.tsx @@ -31,6 +31,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbElement = rendered.container.querySelector('.ss__breadcrumbs'); expect(breadcrumbElement).toBeInTheDocument(); expect(breadcrumbElement?.classList.length).toBe(2); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('uses links when url is present in data', () => { @@ -46,6 +47,7 @@ describe('Breadcrumbs Component', () => { expect(anchorElement).toBeInTheDocument(); expect(anchorElement).toHaveAttribute('href', url); expect(anchorElement).toHaveTextContent(label); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('does not use links when url is not present in data', () => { @@ -58,12 +60,14 @@ describe('Breadcrumbs Component', () => { expect(anchorElement).not.toBeInTheDocument(); expect(breadcrumbElement).toHaveTextContent(args.data[args.data.length - 1].label); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has all crumbs and separators', () => { const rendered = render(); const breadcrumbElements = rendered.container.querySelectorAll('.ss__breadcrumbs li'); expect(breadcrumbElements.length).toEqual(args.data.length * 2 - 1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has custom string separator', () => { @@ -73,6 +77,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbSeparatorElements = rendered.container.querySelectorAll('.ss__breadcrumbs li:nth-child(even)'); expect(breadcrumbSeparatorElements.length).toEqual(args.data.length - 1); expect(breadcrumbSeparatorElements[0].textContent).toEqual('>>'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has custom component separator', () => { @@ -82,6 +87,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbSeparatorElements = rendered.container.querySelectorAll('.ss__breadcrumbs li:nth-child(even)'); expect(breadcrumbSeparatorElements.length).toEqual(args.data.length - 1); expect(breadcrumbSeparatorElements[0].textContent).toEqual('|'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with additional style using prop', () => { @@ -94,6 +100,7 @@ describe('Breadcrumbs Component', () => { const styles = getComputedStyle(breadcrumbElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('respects disableStyles prop when true', () => { @@ -101,6 +108,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbElement = rendered.container.querySelector('.ss__breadcrumbs'); expect(breadcrumbElement?.classList.length).toBe(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -120,6 +128,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbElement = rendered.container.querySelector('.ss__breadcrumbs'); expect(breadcrumbElement).toHaveClass(globalTheme.components.breadcrumbs.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -135,6 +144,7 @@ describe('Breadcrumbs Component', () => { const breadcrumbElement = rendered.container.querySelector('.ss__breadcrumbs'); expect(breadcrumbElement).toHaveClass(propTheme.components.breadcrumbs.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -163,5 +173,6 @@ describe('Breadcrumbs Component', () => { const breadcrumbElement = rendered.container.querySelector('.ss__breadcrumbs'); expect(breadcrumbElement).toHaveClass(propTheme.components.breadcrumbs.className); expect(breadcrumbElement).not.toHaveClass(globalTheme.components.breadcrumbs.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap new file mode 100644 index 000000000..8da27a7dc --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap @@ -0,0 +1,771 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumbs Component does not use links when url is not present in data 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component has all crumbs and separators 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component has custom component separator 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component has custom string separator 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component is themeable and theme prop overrides ThemeProvider 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component is themeable with ThemeProvider 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component is themeable with theme prop 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component renders 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component renders with additional style using prop 1`] = ` + + .emotion-0 { + padding: 20px; +} + +.emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; + +exports[`Breadcrumbs Component respects disableStyles prop when true 1`] = ` + +
+ +
+ +`; + +exports[`Breadcrumbs Component uses links when url is present in data 1`] = ` + + .emotion-0 .ss__breadcrumbs__crumbs { + padding: 0; +} + +.emotion-0 .ss__breadcrumbs__crumbs__crumb, +.emotion-0 .ss__breadcrumbs__crumbs__separator { + padding: 0 5px; + display: inline-block; +} + +
+ +
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Button/Button.test.tsx b/packages/snap-preact-components/src/components/Atoms/Button/Button.test.tsx index b8b5560ec..279692c9d 100644 --- a/packages/snap-preact-components/src/components/Atoms/Button/Button.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Button/Button.test.tsx @@ -14,6 +14,7 @@ describe('Button Component', () => { const buttonElement = rendered.container.querySelector('.ss__button'); expect(buttonElement).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with content prop', () => { @@ -27,6 +28,7 @@ describe('Button Component', () => { const buttonElementByContent = rendered.getByText(content); expect(buttonElementByContent).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with children prop', () => { @@ -41,6 +43,7 @@ describe('Button Component', () => { const childElementAltSelector = rendered.getByText('childbutton'); expect(childElementAltSelector).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with children and content props', () => { @@ -50,6 +53,7 @@ describe('Button Component', () => { const buttonElement = rendered.getByText(content + childrenContent); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with className prop', () => { @@ -60,6 +64,7 @@ describe('Button Component', () => { const button = rendered.container.querySelector(`.${className}`); expect(button).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with colors prop', () => { @@ -81,6 +86,7 @@ describe('Button Component', () => { expect(styles.backgroundColor).toBe(backgroundColor); expect(styles.borderColor).toBe(borderColor); expect(button).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with icon prop', () => { @@ -94,6 +100,7 @@ describe('Button Component', () => { expect(iconElem).toBeInTheDocument(); expect(button).toBeInTheDocument(); expect(iconElem).toHaveClass('ss__icon--close-thin'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('fires onClick prop when clicked', () => { @@ -103,10 +110,12 @@ describe('Button Component', () => { const rendered = render(); const buttonElement = rendered.container.querySelector('.ss__button'); + expect(rendered.asFragment()).toMatchSnapshot(); if (buttonElement) userEvent.click(buttonElement); expect(clickFn).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('adds class "ss__button--disabled" and prevents onClick when disabled by prop', () => { @@ -117,9 +126,11 @@ describe('Button Component', () => { const buttonElement = rendered.container.querySelector(`.ss__button.ss__button--disabled`); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); if (buttonElement) userEvent.click(buttonElement); expect(clickFn).not.toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with additional style using prop', () => { @@ -133,6 +144,7 @@ describe('Button Component', () => { const styles = getComputedStyle(buttonElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styles', () => { @@ -143,6 +155,7 @@ describe('Button Component', () => { const buttonElement = rendered!.container.querySelector('.ss__button'); expect(buttonElement?.classList.length).toBe(1); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -167,6 +180,7 @@ describe('Button Component', () => { expect(styles.color).toBe(globalTheme.components.button.color); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -187,6 +201,7 @@ describe('Button Component', () => { expect(styles.color).toBe(propTheme.components.button.color); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -219,6 +234,7 @@ describe('Button Component', () => { expect(styles.color).toBe(propTheme.components.button.color); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -229,6 +245,7 @@ describe('Button Component', () => { const buttonElement = rendered.container.querySelector('.ss__button'); expect(buttonElement).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with content prop', () => { @@ -242,6 +259,7 @@ describe('Button Component', () => { const buttonElementByContent = rendered.getByText(content); expect(buttonElementByContent).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with icon prop', () => { @@ -259,6 +277,7 @@ describe('Button Component', () => { expect(iconElem).toBeInTheDocument(); expect(button).toBeInTheDocument(); expect(iconElem).toHaveClass('ss__icon--close-thin'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('Can enable/disable useAlly with disableA11y prop', () => { @@ -269,11 +288,13 @@ describe('Button Component', () => { expect(buttonElement).toBeInTheDocument(); expect(buttonElement).toHaveAttribute('ssA11y'); + expect(rendered.asFragment()).toMatchSnapshot(); const rendered2 = render( + +`; + +exports[`Button Component native adds class "ss__button--disabled" and prevents onClick when disabled by prop 2`] = ` + + + +`; + +exports[`Button Component native does not render with colors prop 1`] = ` + + + +`; + +exports[`Button Component native does not render without children or content props 1`] = ``; + +exports[`Button Component native fires onClick prop when clicked 1`] = ` + + + +`; + +exports[`Button Component native fires onClick prop when clicked 2`] = ` + + + +`; + +exports[`Button Component native renders with children and content props 1`] = ` + + + +`; + +exports[`Button Component native renders with children prop 1`] = ` + + + +`; + +exports[`Button Component native renders with className prop 1`] = ` + + + +`; + +exports[`Button Component native renders with content prop 1`] = ` + + + +`; + +exports[`Button Component native renders with icon prop 1`] = ` + + .emotion-1 { + width: 16px; + height: 16px; + position: relative; +} + + + +`; + +exports[`Button Component styled adds class "ss__button--disabled" and prevents onClick when disabled by prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ disabled button +
+ +`; + +exports[`Button Component styled adds class "ss__button--disabled" and prevents onClick when disabled by prop 2`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ disabled button +
+ +`; + +exports[`Button Component styled can disable styles 1`] = ` + +
+ styleless button +
+ +`; + +exports[`Button Component styled does not render without children or content props 1`] = ``; + +exports[`Button Component styled fires onClick prop when clicked 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ clickable button +
+ +`; + +exports[`Button Component styled fires onClick prop when clicked 2`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ clickable button +
+ +`; + +exports[`Button Component styled is themeable and theme prop overrides ThemeProvider 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + color: red; + outline: 0; + background-color: #fff; + border: 1px solid red; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ themed button +
+ +`; + +exports[`Button Component styled is themeable with ThemeProvider 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + color: blue; + outline: 0; + background-color: #fff; + border: 1px solid blue; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ themed button +
+ +`; + +exports[`Button Component styled is themeable with theme prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + color: blue; + outline: 0; + background-color: #fff; + border: 1px solid blue; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ themed button +
+ +`; + +exports[`Button Component styled renders with additional style using prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; + padding: 20px; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ styled button +
+ +`; + +exports[`Button Component styled renders with children and content props 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ contenttextbuttontext +
+ +`; + +exports[`Button Component styled renders with children prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+

+ childbutton +

+
+ +`; + +exports[`Button Component styled renders with className prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ classy button +
+ +`; + +exports[`Button Component styled renders with colors prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + color: blue; + outline: 0; + background-color: green; + border: 1px solid red; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ colorful button +
+ +`; + +exports[`Button Component styled renders with content prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +
+ button1 +
+ +`; + +exports[`Button Component styled renders with icon prop 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + outline: 0; + background-color: #fff; + border: 1px solid #333; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #f8f8f8; +} + +.emotion-0.ss__button--disabled { + opacity: 0.7; + border-color: rgba(51,51,51,0.7); + background-color: initial; +} + +.emotion-0.ss__button--disabled:hover { + cursor: default; +} + +.emotion-1 { + width: 16px; + height: 16px; + position: relative; +} + +
+ colorful button + + + +
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Dropdown/Dropdown.test.tsx b/packages/snap-preact-components/src/components/Atoms/Dropdown/Dropdown.test.tsx index 18329b544..dd954002e 100644 --- a/packages/snap-preact-components/src/components/Atoms/Dropdown/Dropdown.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Dropdown/Dropdown.test.tsx @@ -13,6 +13,7 @@ describe('Dropdown Component', () => { const dropdownElement = rendered.container.querySelector('.ss__dropdown'); expect(dropdownElement).toBeInTheDocument(); expect(dropdownElement?.classList).toHaveLength(2); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with className prop', () => { @@ -21,6 +22,7 @@ describe('Dropdown Component', () => { const dropdownElement = rendered.container.querySelector(`.ss__dropdown.${className}`); expect(dropdownElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with additional style using prop', () => { @@ -34,6 +36,7 @@ describe('Dropdown Component', () => { const styles = getComputedStyle(dropdownElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders button prop', () => { @@ -42,6 +45,7 @@ describe('Dropdown Component', () => { const buttonElement = rendered.getByText(buttonText); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders content prop', () => { @@ -50,6 +54,7 @@ describe('Dropdown Component', () => { const contentElement = rendered.getByText(contentText); expect(contentElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders children prop', () => { @@ -58,6 +63,7 @@ describe('Dropdown Component', () => { const childElement = rendered.getByText(child); expect(childElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('Can enable/disable useAlly with disableA11y prop', () => { @@ -69,6 +75,7 @@ describe('Dropdown Component', () => { expect(buttonElement).toBeInTheDocument(); expect(buttonElement).toHaveAttribute('ssA11y'); + expect(rendered.asFragment()).toMatchSnapshot(); const rendered2 = render( @@ -78,6 +85,7 @@ describe('Dropdown Component', () => { const buttonElement2 = rendered2.container.querySelector('.ss__dropdown__button'); expect(buttonElement2).not.toHaveAttribute('ssA11y'); + expect(rendered2.asFragment()).toMatchSnapshot(); }); it('renders content and children props', () => { @@ -91,6 +99,7 @@ describe('Dropdown Component', () => { const buttonElement = rendered.getByText(contentText + child); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders button prop with props', async () => { @@ -102,11 +111,13 @@ describe('Dropdown Component', () => { let buttonElement = rendered.container.querySelector('.button-with-props'); expect(buttonElement).toBeInTheDocument(); expect(buttonElement?.innerHTML).toBe('open me'); + expect(rendered.asFragment()).toMatchSnapshot(); await (buttonElement as HTMLElement).click(); buttonElement = rendered.container.querySelector('.button-with-props'); expect(buttonElement?.innerHTML).toBe('close me'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders children prop with props', async () => { @@ -134,14 +145,17 @@ describe('Dropdown Component', () => { let childElement = rendered.container.querySelector('.child-with-props'); expect(childElement).toBeInTheDocument(); expect(childElement?.innerHTML).toBe('im closed'); + expect(rendered.asFragment()).toMatchSnapshot(); await buttonElement.click(); childElement = rendered.container.querySelector('.child-with-props'); expect(childElement?.innerHTML).toBe('im open'); + expect(rendered.asFragment()).toMatchSnapshot(); await (childElement as HTMLElement).click(); childElement = rendered.container.querySelector('.child-with-props'); expect(childElement?.innerHTML).toBe('im closed'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders content prop with props', async () => { @@ -165,14 +179,17 @@ describe('Dropdown Component', () => { let contentElement = rendered.container.querySelector('.content-with-props'); expect(contentElement).toBeInTheDocument(); expect(contentElement?.innerHTML).toBe('im closed'); + expect(rendered.asFragment()).toMatchSnapshot(); await buttonElement.click(); contentElement = rendered.container.querySelector('.content-with-props'); expect(contentElement?.innerHTML).toBe('im open'); + expect(rendered.asFragment()).toMatchSnapshot(); await (contentElement as HTMLElement).click(); contentElement = rendered.container.querySelector('.content-with-props'); expect(contentElement?.innerHTML).toBe('im closed'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('fires onToggle prop when clicked outside (while opened)', () => { @@ -190,12 +207,15 @@ describe('Dropdown Component', () => { const button = rendered.container.querySelector('.ss__dropdown__button')!; const outside = rendered.container.querySelector('.outside')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(clickFn).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(outside); expect(toggleFn).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('does not fire onToggle prop when clicked outside (while opened) when disableClickOutside prop is true', () => { @@ -211,9 +231,11 @@ describe('Dropdown Component', () => { ); const outside = rendered.container.querySelector('.outside')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(outside); expect(toggleFn).not.toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('fires onClick prop when clicked', () => { @@ -222,9 +244,11 @@ describe('Dropdown Component', () => { const rendered = render(); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(clickFn).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('does not fire onClick prop when disabled', () => { @@ -233,9 +257,11 @@ describe('Dropdown Component', () => { const rendered = render(); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(clickFn).not.toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('disables styles', () => { @@ -245,6 +271,7 @@ describe('Dropdown Component', () => { const dropdown = rendered.container.querySelector('.ss__dropdown'); expect(dropdown?.classList).toHaveLength(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -264,6 +291,7 @@ describe('Dropdown Component', () => { const dropdownElement = rendered.container.querySelector('.ss__dropdown'); expect(dropdownElement).toHaveClass(globalTheme.components.dropdown.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -279,6 +307,7 @@ describe('Dropdown Component', () => { const dropdownElement = rendered.container.querySelector('.ss__dropdown'); expect(dropdownElement).toHaveClass(propTheme.components.dropdown.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -307,6 +336,7 @@ describe('Dropdown Component', () => { const dropdownElement = rendered.container.querySelector('.ss__dropdown'); expect(dropdownElement).toHaveClass(propTheme.components.dropdown.className); expect(dropdownElement).not.toHaveClass(globalTheme.components.dropdown.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); describe('internal state', () => { @@ -316,9 +346,11 @@ describe('Dropdown Component', () => { const rendered = render(); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(toggleFn).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('does not fire onToggle prop when disabled', () => { @@ -327,9 +359,11 @@ describe('Dropdown Component', () => { const rendered = render(); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(toggleFn).not.toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('starts closed', () => { @@ -338,6 +372,7 @@ describe('Dropdown Component', () => { const dropdown = rendered.container.querySelector('.ss__dropdown'); expect(dropdown).not.toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can start open', () => { @@ -346,6 +381,7 @@ describe('Dropdown Component', () => { const dropdown = rendered.container.querySelector('.ss__dropdown'); expect(dropdown).toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('keeps its own internal state and passes it to onToggle', async () => { @@ -354,14 +390,17 @@ describe('Dropdown Component', () => { const rendered = render(); const dropdown = rendered.container.querySelector('.ss__dropdown'); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); await userEvent.click(button); expect(toggleFn).toHaveBeenCalledWith(expect.anything(), true); expect(dropdown).toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); await userEvent.click(button); expect(toggleFn).toHaveBeenCalledWith(expect.anything(), false); expect(dropdown).not.toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -372,9 +411,11 @@ describe('Dropdown Component', () => { const rendered = render(); const button = rendered.container.querySelector('.ss__dropdown__button')!; + expect(rendered.asFragment()).toMatchSnapshot(); userEvent.click(button); expect(toggleFn).not.toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('uses prop open for state', () => { @@ -382,9 +423,11 @@ describe('Dropdown Component', () => { const dropdown = rendered.container.querySelector('.ss__dropdown'); expect(dropdown).toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); rendered.rerender(); expect(dropdown).not.toHaveClass('ss__dropdown--open'); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap new file mode 100644 index 000000000..68b050222 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -0,0 +1,1928 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dropdown Component Can enable/disable useAlly with disableA11y prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+ this is the child +
+
+ +`; + +exports[`Dropdown Component Can enable/disable useAlly with disableA11y prop 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+ this is the child +
+
+ +`; + +exports[`Dropdown Component disables styles 1`] = ` + +
+ +
+ this is the content +
+
+ +`; + +exports[`Dropdown Component does not fire onClick prop when disabled 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component does not fire onClick prop when disabled 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component does not fire onToggle prop when clicked outside (while opened) when disableClickOutside prop is true 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ + outside + +
+
+ click me +
+
+ this is the content +
+
+
+ +`; + +exports[`Dropdown Component does not fire onToggle prop when clicked outside (while opened) when disableClickOutside prop is true 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ + outside + +
+
+ click me +
+
+ this is the content +
+
+
+ +`; + +exports[`Dropdown Component external state does not fire onToggle prop when clicked 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ +`; + +exports[`Dropdown Component external state does not fire onToggle prop when clicked 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ +`; + +exports[`Dropdown Component external state uses prop open for state 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ +`; + +exports[`Dropdown Component external state uses prop open for state 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component fires onClick prop when clicked 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component fires onClick prop when clicked 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component fires onToggle prop when clicked outside (while opened) 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ + outside + +
+ +
+ this is the content +
+
+
+ +`; + +exports[`Dropdown Component fires onToggle prop when clicked outside (while opened) 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ + outside + +
+ +
+ this is the content +
+
+
+ +`; + +exports[`Dropdown Component fires onToggle prop when clicked outside (while opened) 3`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ + outside + +
+ +
+ this is the content +
+
+
+ +`; + +exports[`Dropdown Component internal state can start open 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ +`; + +exports[`Dropdown Component internal state does not fire onToggle prop when disabled 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state does not fire onToggle prop when disabled 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state fires onToggle prop when clicked 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state fires onToggle prop when clicked 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state keeps its own internal state and passes it to onToggle 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state keeps its own internal state and passes it to onToggle 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ +`; + +exports[`Dropdown Component internal state keeps its own internal state and passes it to onToggle 3`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component internal state starts closed 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component is themeable and theme prop overrides ThemeProvider 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component is themeable with ThemeProvider 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component is themeable with theme prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component renders 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component renders button prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component renders button prop with props 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component renders button prop with props 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+
+ close me +
+
+
+
+ +`; + +exports[`Dropdown Component renders children prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+ this is the child +
+
+ +`; + +exports[`Dropdown Component renders children prop with props 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ im closed +
+
+
+ +`; + +exports[`Dropdown Component renders children prop with props 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ im open +
+
+
+ +`; + +exports[`Dropdown Component renders children prop with props 3`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ im closed +
+
+
+ +`; + +exports[`Dropdown Component renders content and children props 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+ this is the contentthis is the child +
+
+ +`; + +exports[`Dropdown Component renders content prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+ this is the content +
+
+ +`; + +exports[`Dropdown Component renders content prop with props 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ im closed +
+
+
+ +`; + +exports[`Dropdown Component renders content prop with props 2`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+
+ open me +
+
+
+ im open +
+
+
+ +`; + +exports[`Dropdown Component renders content prop with props 3`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ im closed +
+
+
+ +`; + +exports[`Dropdown Component renders with additional style using prop 1`] = ` + + .emotion-0 { + position: relative; + padding: 20px; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component renders with className prop 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + visibility: visible; + opacity: 1; +} + +.emotion-0 .ss__dropdown__button { + cursor: pointer; +} + +.emotion-0 .ss__dropdown__content { + position: absolute; + min-width: 100%; + visibility: hidden; + opacity: 0; + top: auto; + left: 0; +} + +
+ +
+
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Element/Element.test.tsx b/packages/snap-preact-components/src/components/Atoms/Element/Element.test.tsx index 0a4f8c179..aa16f1250 100644 --- a/packages/snap-preact-components/src/components/Atoms/Element/Element.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Element/Element.test.tsx @@ -14,6 +14,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('div.ss__element'); expect(element).toBeInTheDocument(); expect(element).toHaveTextContent(text); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders as span', () => { @@ -22,6 +23,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('span.ss__element'); expect(element).toBeInTheDocument(); expect(element).toHaveTextContent(text); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders as label', () => { @@ -30,6 +32,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('label.ss__element'); expect(element).toBeInTheDocument(); expect(element).toHaveTextContent(text); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders as p', () => { @@ -38,6 +41,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('p.ss__element'); expect(element).toBeInTheDocument(); expect(element).toHaveTextContent(text); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('doesnt render without type prop', () => { @@ -46,6 +50,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('.ss__element'); expect(element).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with attributes', () => { @@ -63,6 +68,7 @@ describe('Element Component', () => { expect(element).toHaveAttribute('attribute1', attributes.attribute1); expect(element).toHaveAttribute('attribute2', attributes.attribute2); expect(element).toHaveAttribute('attribute3', attributes.attribute3.toString()); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('ignores onClick attribute', () => { @@ -81,6 +87,7 @@ describe('Element Component', () => { expect(element).not.toHaveAttribute('onClick'); expect(element).toHaveAttribute('attribute2', attributes.attribute2); expect(element).toHaveAttribute('attribute3', attributes.attribute3.toString()); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with className prop', () => { @@ -89,6 +96,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector(`.ss__element.${className}`); expect(element).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('disables styles', () => { @@ -96,6 +104,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector('.ss__element'); expect(element?.classList).toHaveLength(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -115,6 +124,7 @@ describe('Element Component', () => { const dropdownElement = rendered.container.querySelector('.ss__element'); expect(dropdownElement).toHaveClass(globalTheme.components.element.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -130,6 +140,7 @@ describe('Element Component', () => { const dropdownElement = rendered.container.querySelector('.ss__element'); expect(dropdownElement).toHaveClass(propTheme.components.element.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -158,5 +169,6 @@ describe('Element Component', () => { const dropdownElement = rendered.container.querySelector('.ss__element'); expect(dropdownElement).toHaveClass(propTheme.components.element.className); expect(dropdownElement).not.toHaveClass(globalTheme.components.element.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Element/__snapshots__/Element.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Element/__snapshots__/Element.test.tsx.snap new file mode 100644 index 000000000..18074eaf7 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Element/__snapshots__/Element.test.tsx.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Element Component disables styles 1`] = ` + +
+ +`; + +exports[`Element Component doesnt render without type prop 1`] = ``; + +exports[`Element Component ignores onClick attribute 1`] = ` + +
+ some text +
+ +`; + +exports[`Element Component is themeable and theme prop overrides ThemeProvider 1`] = ` + +
+ +`; + +exports[`Element Component is themeable with ThemeProvider 1`] = ` + +
+ +`; + +exports[`Element Component is themeable with theme prop 1`] = ` + +
+ +`; + +exports[`Element Component renders as div 1`] = ` + +
+ some text +
+ +`; + +exports[`Element Component renders as label 1`] = ` + + + +`; + +exports[`Element Component renders as p 1`] = ` + +

+ some text +

+ +`; + +exports[`Element Component renders as span 1`] = ` + + + some text + + +`; + +exports[`Element Component renders with attributes 1`] = ` + +
+ some text +
+ +`; + +exports[`Element Component renders with className prop 1`] = ` + +
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/FormattedNumber/FormattedNumber.test.tsx b/packages/snap-preact-components/src/components/Atoms/FormattedNumber/FormattedNumber.test.tsx index 8ee67162f..52d70a5f5 100644 --- a/packages/snap-preact-components/src/components/Atoms/FormattedNumber/FormattedNumber.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/FormattedNumber/FormattedNumber.test.tsx @@ -9,6 +9,7 @@ describe('FormattedNumber Component', () => { const rendered = render(); const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has default formatting', () => { @@ -20,6 +21,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); const formattednumber = formattednumberElement?.textContent; expect(formattednumber).toBe('1099.999mm'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has support for custom options', () => { @@ -35,6 +37,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); const formattednumber = formattednumberElement?.textContent; expect(formattednumber).toBe('1.099,99 £'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('pads digits when it needs to', () => { @@ -45,6 +48,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); const formattednumber = formattednumberElement?.textContent; expect(formattednumber).toBe('1099.000'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('does not pads digits when prop specified', () => { @@ -56,6 +60,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); const formattednumber = formattednumberElement?.textContent; expect(formattednumber).toBe('1099'); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with additional style using prop', () => { @@ -68,6 +73,7 @@ describe('FormattedNumber Component', () => { const styles = getComputedStyle(formattednumberElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styling', () => { @@ -82,6 +88,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number')!; const styles = getComputedStyle(formattednumberElement); expect(styles.background).not.toBe(args.style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('uses custom className', () => { @@ -92,6 +99,7 @@ describe('FormattedNumber Component', () => { const rendered = render(); const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement?.classList).toContain(args.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -111,6 +119,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement).toHaveClass(globalTheme.components.formattedNumber.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -126,6 +135,7 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement).toHaveClass(propTheme.components.formattedNumber.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -154,5 +164,6 @@ describe('FormattedNumber Component', () => { const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement).toHaveClass(propTheme.components.formattedNumber.className); expect(formattednumberElement).not.toHaveClass(globalTheme.components.formattedNumber.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/FormattedNumber/__snapshots__/FormattedNumber.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/FormattedNumber/__snapshots__/FormattedNumber.test.tsx.snap new file mode 100644 index 000000000..ad772ca0c --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/FormattedNumber/__snapshots__/FormattedNumber.test.tsx.snap @@ -0,0 +1,119 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormattedNumber Component can disable styling 1`] = ` + + .emotion-0 { + padding: 20px; +} + + + 1099.990 + + +`; + +exports[`FormattedNumber Component does not pads digits when prop specified 1`] = ` + + + 1099 + + +`; + +exports[`FormattedNumber Component has default formatting 1`] = ` + + + 1099.999mm + + +`; + +exports[`FormattedNumber Component has support for custom options 1`] = ` + + + 1.099,99 £ + + +`; + +exports[`FormattedNumber Component is themeable and theme prop overrides ThemeProvider 1`] = ` + + + 33.333 + + +`; + +exports[`FormattedNumber Component is themeable with ThemeProvider 1`] = ` + + + 33.333 + + +`; + +exports[`FormattedNumber Component is themeable with theme prop 1`] = ` + + + 33.333 + + +`; + +exports[`FormattedNumber Component pads digits when it needs to 1`] = ` + + + 1099.000 + + +`; + +exports[`FormattedNumber Component renders 1`] = ` + + + 1099.990 + + +`; + +exports[`FormattedNumber Component renders with additional style using prop 1`] = ` + + .emotion-0 { + padding: 20px; +} + + + 100.000 + + +`; + +exports[`FormattedNumber Component uses custom className 1`] = ` + + + 1099.990 + + +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Icon/Icon.test.tsx b/packages/snap-preact-components/src/components/Atoms/Icon/Icon.test.tsx index 2b812d004..422886c60 100644 --- a/packages/snap-preact-components/src/components/Atoms/Icon/Icon.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Icon/Icon.test.tsx @@ -24,6 +24,7 @@ describe('Icon Component', () => { const svg = rendered.container.querySelector('svg'); expect(svg).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with icon prop', () => { @@ -33,6 +34,7 @@ describe('Icon Component', () => { const iconElement = rendered.container.querySelector('.ss__icon'); expect(iconElement?.classList.length).toBe(3); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with classname', () => { @@ -44,6 +46,7 @@ describe('Icon Component', () => { expect(iconElement).toHaveClass(className); expect(iconElement?.classList.length).toBe(4); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with additional style using prop', () => { @@ -57,6 +60,7 @@ describe('Icon Component', () => { const styles = getComputedStyle(iconElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders cog icon with default props', () => { @@ -76,6 +80,7 @@ describe('Icon Component', () => { const path = svg.querySelector('path'); expect(path).toHaveAttribute('d', iconPaths[icon]); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders cog icon with sizing', () => { @@ -95,6 +100,7 @@ describe('Icon Component', () => { const path = svg!.querySelector('path'); expect(path).toHaveAttribute('d', iconPaths[icon]); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders cog icon with custom props', () => { @@ -119,6 +125,7 @@ describe('Icon Component', () => { const path = svg.querySelector('path'); expect(path).toHaveAttribute('d', iconPaths[icon]); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders custom path with default props', () => { @@ -139,6 +146,7 @@ describe('Icon Component', () => { const path = svg.querySelector('path'); expect(path).toHaveAttribute('d', svgPath); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders custom path with custom props', () => { @@ -164,6 +172,7 @@ describe('Icon Component', () => { const path = svg.querySelector('path'); expect(path).toHaveAttribute('d', svgPath); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styles', () => { @@ -183,6 +192,7 @@ describe('Icon Component', () => { const path = svg?.querySelector('path'); expect(path).toHaveAttribute('d', iconPaths[icon]); expect(path).toHaveAttribute('fill', color); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -202,6 +212,7 @@ describe('Icon Component', () => { const iconElement = rendered.container.querySelector('.ss__icon'); expect(iconElement).toHaveClass(globalTheme.components.icon.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -217,6 +228,7 @@ describe('Icon Component', () => { const iconElement = rendered.container.querySelector('.ss__icon'); expect(iconElement).toHaveClass(propTheme.components.icon.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable and theme prop overrides ThemeProvider', () => { @@ -245,5 +257,6 @@ describe('Icon Component', () => { const iconElement = rendered.container.querySelector('.ss__icon'); expect(iconElement).toHaveClass(propTheme.components.icon.className); expect(iconElement).not.toHaveClass(globalTheme.components.icon.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Icon/__snapshots__/Icon.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Icon/__snapshots__/Icon.test.tsx.snap new file mode 100644 index 000000000..debc2aa74 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Icon/__snapshots__/Icon.test.tsx.snap @@ -0,0 +1,243 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Icon Component can disable styles 1`] = ` + + + + + +`; + +exports[`Icon Component does not render without icon or path props 1`] = ``; + +exports[`Icon Component is themeable and theme prop overrides ThemeProvider 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component is themeable with ThemeProvider 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component is themeable with theme prop 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders cog icon with custom props 1`] = ` + + .emotion-0 { + fill: #ff0000; + width: 30em; + height: 30em; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders cog icon with default props 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders cog icon with sizing 1`] = ` + + .emotion-0 { + width: 10px; + height: 15px; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders custom path with custom props 1`] = ` + + .emotion-0 { + fill: #3a23ad; + width: 3em; + height: 3em; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders custom path with default props 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders with additional style using prop 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; + padding: 20px; +} + + + + + +`; + +exports[`Icon Component renders with classname 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; + +exports[`Icon Component renders with icon prop 1`] = ` + + .emotion-0 { + width: 16px; + height: 16px; + position: relative; +} + + + + + +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Image/Image.test.tsx b/packages/snap-preact-components/src/components/Atoms/Image/Image.test.tsx index 10671555c..c0831834c 100644 --- a/packages/snap-preact-components/src/components/Atoms/Image/Image.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Image/Image.test.tsx @@ -26,6 +26,7 @@ describe('image Component', () => { expect(imageElement).toHaveAttribute('src', result?.thumbnailImageUrl); expect(imageElement).toHaveAttribute('alt', result?.name); expect(imageElement).toHaveAttribute('title', result?.name); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with classname', () => { @@ -34,6 +35,7 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image'); expect(imageElement).toHaveClass(className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('disables styles', () => { @@ -41,6 +43,7 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image'); expect(imageElement?.classList).toHaveLength(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); describe('Working Image', () => { @@ -49,6 +52,7 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image img'); expect(imageElement).toBeInTheDocument(); expect(imageElement).toHaveAttribute('src', result?.thumbnailImageUrl); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -57,6 +61,7 @@ describe('image Component', () => { const rendered = render({badResult?.name!}); const imageElement = rendered.container.querySelector('.ss__image img'); expect(imageElement).toHaveAttribute('src', FALLBACK_IMAGE_URL); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('should display custom fallback image', () => { @@ -64,6 +69,7 @@ describe('image Component', () => { const rendered = render({badResult?.name!}); const imageElement = rendered.container.querySelector('.ss__image img'); expect(imageElement).toHaveAttribute('src', fallbackImage); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -74,9 +80,12 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image img')!; expect(imageElement).toHaveAttribute('src', result?.thumbnailImageUrl); + expect(rendered.asFragment()).toMatchSnapshot(); + userEvent.hover(imageElement); await waitFor(() => expect(onHoverFunc).toHaveBeenCalled()); expect(imageElement).toHaveAttribute('src', rolloverImage); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -88,8 +97,11 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image img')!; expect(imageElement).toHaveAttribute('src', result?.thumbnailImageUrl); + expect(rendered.asFragment()).toMatchSnapshot(); + userEvent.click(imageElement); expect(clickfunc).toHaveBeenCalled(); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); }); @@ -113,6 +125,7 @@ describe('Image theming works', () => { const image = rendered.container.querySelector('.ss__image'); expect(image).toBeInTheDocument(); expect(image?.classList.length).toBe(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -127,6 +140,7 @@ describe('Image theming works', () => { const image = rendered.container.querySelector('.ss__image'); expect(image).toBeInTheDocument(); expect(image?.classList.length).toBe(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is theme prop overrides ThemeProvider', () => { @@ -153,5 +167,6 @@ describe('Image theming works', () => { const image = rendered.container.querySelector('.ss__image'); expect(image).toBeInTheDocument(); expect(image?.classList.length).toBe(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Image/__snapshots__/Image.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Image/__snapshots__/Image.test.tsx.snap new file mode 100644 index 000000000..a2c579340 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Image/__snapshots__/Image.test.tsx.snap @@ -0,0 +1,421 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Image theming works is theme prop overrides ThemeProvider 1`] = ` + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`Image theming works is themeable with ThemeProvider 1`] = ` + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`Image theming works is themeable with theme prop 1`] = ` + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component Broken Image should display custom fallback image 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component Broken Image should display default fallback image 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component Working Image renders image 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Freezing Point Cream Turtleneck Sweater +
+ +`; + +exports[`image Component click func custom onclick src on hover 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component click func custom onclick src on hover 2`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component disables styles 1`] = ` + +
+ Freezing Point Cream Turtleneck Sweater +
+ +`; + +exports[`image Component hover src should change src on hover & run a custom onhoverfunc prop 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component hover src should change src on hover & run a custom onhoverfunc prop 2`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Play For Keeps Burgundy Velvet Bralette +
+ +`; + +exports[`image Component renders 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Freezing Point Cream Turtleneck Sweater +
+ +`; + +exports[`image Component renders with classname 1`] = ` + + .emotion-0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: auto; +} + +.emotion-0 img { + visibility: hidden; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + object-fit: contain; + max-width: 100%; + max-height: 100%; +} + +
+ Freezing Point Cream Turtleneck Sweater +
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Loading/LoadingBar.test.tsx b/packages/snap-preact-components/src/components/Atoms/Loading/LoadingBar.test.tsx index 0d32b8026..65b022287 100644 --- a/packages/snap-preact-components/src/components/Atoms/Loading/LoadingBar.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Loading/LoadingBar.test.tsx @@ -21,6 +21,7 @@ describe('LoadingBar Component', () => { const loadingbarElement = rendered.container.querySelector('.ss__loading-bar'); expect(loadingbarElement).toBeInTheDocument(); expect(loadingbarElement?.classList.length).toBe(2); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('displays loading bar when active', () => { @@ -30,6 +31,7 @@ describe('LoadingBar Component', () => { const rendered = render(); const loadingbarElement = rendered.container.querySelector('.ss__loading-bar'); expect(loadingbarElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('hides loading bar when inactive', () => { @@ -39,6 +41,7 @@ describe('LoadingBar Component', () => { const rendered = render(); const loadingbarElement = rendered.container.querySelector('.ss__loading-bar'); expect(loadingbarElement).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('uses custom height', () => { @@ -50,6 +53,7 @@ describe('LoadingBar Component', () => { const loadingbarElement = rendered.container.querySelector('.ss__loading-bar')!; const styles = getComputedStyle(loadingbarElement); expect(styles.height).toBe(args.height); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can use custom colors', () => { @@ -66,6 +70,7 @@ describe('LoadingBar Component', () => { const barElement = loadingbarElement.querySelector('.ss__loading-bar__bar')!; const barElementStyles = getComputedStyle(barElement); expect(barElementStyles.background).toBe(args.color); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styling', () => { @@ -76,6 +81,7 @@ describe('LoadingBar Component', () => { const rendered = render(); const loadingbarElement = rendered.container.querySelector('.ss__loading-bar'); expect(loadingbarElement?.classList.length).toBe(1); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can custom className', () => { @@ -86,6 +92,7 @@ describe('LoadingBar Component', () => { const rendered = render(); const loadingbarElement = rendered.container.querySelector('.ss__loading-bar'); expect(loadingbarElement?.classList).toContain(args.className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -98,6 +105,7 @@ describe('LoadingBar Component', () => { const loadingbarElement = rendered.container.querySelector('.ss__loading-bar .ss__loading-bar__bar')!; const styles = getComputedStyle(loadingbarElement); expect(styles.backgroundColor).toBe(theme.components.loadingBar.color); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -106,6 +114,7 @@ describe('LoadingBar Component', () => { const loadingbarElement = rendered.container.querySelector('.ss__loading-bar .ss__loading-bar__bar')!; const styles = getComputedStyle(loadingbarElement); expect(styles.backgroundColor).toBe(theme.components.loadingBar.color); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop overrides ThemeProvider', () => { @@ -125,5 +134,6 @@ describe('LoadingBar Component', () => { const loadingbarElement = rendered.container.querySelector('.ss__loading-bar .ss__loading-bar__bar')!; const styles = getComputedStyle(loadingbarElement); expect(styles.backgroundColor).toBe(themeOverride.components.loadingBar.color); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Loading/__snapshots__/LoadingBar.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Loading/__snapshots__/LoadingBar.test.tsx.snap new file mode 100644 index 000000000..b7b7601c6 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Loading/__snapshots__/LoadingBar.test.tsx.snap @@ -0,0 +1,932 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LoadingBar Component can custom className 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: #ccc; + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component can disable styling 1`] = ` + +
+
+
+ +`; + +exports[`LoadingBar Component can use custom colors 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: rgb(204, 204, 204); +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: blue; + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component displays loading bar when active 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: #ccc; + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component hides loading bar when inactive 1`] = ``; + +exports[`LoadingBar Component is themeable with ThemeProvider 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: rgb(200, 100, 50); + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component is themeable with theme prop 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: rgb(200, 100, 50); + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component is themeable with theme prop overrides ThemeProvider 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: rgb(123, 123, 123); + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component renders 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 5px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: #ccc; + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; + +exports[`LoadingBar Component uses custom height 1`] = ` + + @keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +@keyframes animation-0 { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } +} + +.emotion-0 { + height: 10px; + position: fixed; + top: 0; + left: 0; + right: 0; + margin: auto; + -webkit-transition: opacity 0.3s ease; + transition: opacity 0.3s ease; + opacity: 1; + visibility: visible; + z-index: 10000; + background: #f8f8f8; +} + +.emotion-0 .ss__loading-bar__bar { + position: absolute; + top: 0; + left: -200px; + height: 100%; + background: #ccc; + -webkit-animation: animation-0 2s linear infinite; + animation: animation-0 2s linear infinite; +} + +
+
+
+ +`; diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx index e4af93b06..a13a68d27 100644 --- a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/Banner.test.tsx @@ -31,6 +31,7 @@ describe('Merchandising Banner Component', () => { const merchBannerElement = rendered.container.querySelector(`.ss__banner.ss__banner--${type}`); expect(merchBannerElement).toBeInTheDocument(); expect(merchBannerElement?.innerHTML).toBe(searchResponse.merchandising?.content![type]!.join('')); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -39,12 +40,14 @@ describe('Merchandising Banner Component', () => { const rendered = render(); const merchBannerElement = rendered.container.querySelector('.ss__banner.ss__banner--left'); expect(merchBannerElement).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styling', () => { const rendered = render(); const loadingbarElement = rendered.container.querySelector('.ss__banner'); expect(loadingbarElement?.classList.length).toBe(2); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with classname', () => { @@ -53,6 +56,7 @@ describe('Merchandising Banner Component', () => { const merchBannerElement = rendered.container.querySelector('.ss__banner.ss__banner--banner'); expect(merchBannerElement).toBeInTheDocument(); expect(merchBannerElement).toHaveClass(className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with ThemeProvider', () => { @@ -68,6 +72,7 @@ describe('Merchandising Banner Component', () => { const bannerElement = rendered.container.querySelector('.ss__banner')!; const styles = getComputedStyle(bannerElement); expect(styles.backgroundColor).toBe(theme.components.banner.style.backgroundColor); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop', () => { @@ -79,6 +84,7 @@ describe('Merchandising Banner Component', () => { const bannerElement = rendered.container.querySelector('.ss__banner')!; const styles = getComputedStyle(bannerElement); expect(styles.backgroundColor).toBe(theme.components.banner.style.backgroundColor); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('is themeable with theme prop overrides ThemeProvider', () => { @@ -103,5 +109,6 @@ describe('Merchandising Banner Component', () => { const bannerElement = rendered.container.querySelector('.ss__banner')!; const styles = getComputedStyle(bannerElement); expect(styles.backgroundColor).toBe(themeOverride.components.banner.style.backgroundColor); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); diff --git a/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/__snapshots__/Banner.test.tsx.snap b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/__snapshots__/Banner.test.tsx.snap new file mode 100644 index 000000000..f42d01276 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/__snapshots__/Banner.test.tsx.snap @@ -0,0 +1,261 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Merchandising Banner Component can disable styling 1`] = ` + +
+