diff --git a/packages/snap-preact-components/jest.config.js b/packages/snap-preact-components/jest.config.js index bdab68d03..fa3860f1f 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, @@ -10,4 +11,5 @@ module.exports = { }, setupFilesAfterEnv: ['/src/setupTests.ts'], testTimeout: 10000, + snapshotSerializers: ['@emotion/jest/serializer'], }; diff --git a/packages/snap-preact-components/package.json b/packages/snap-preact-components/package.json index 3423a77a7..e972af80d 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.47.0", "@searchspring/snap-controller": "^0.47.0", "@searchspring/snap-event-manager": "^0.47.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..439931eb7 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 @@ -2,7 +2,7 @@ import { h } from 'preact'; import { render } from '@testing-library/preact'; import { ThemeProvider } from '../../../providers'; - +import themes from '../../../themes'; import { Badge } from './Badge'; const CONTENT = 'sale'; @@ -10,6 +10,13 @@ const CLASSNAME = 'sale-badge'; const CHILDREN =
{CONTENT}
; describe('Badge Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render({CHILDREN}); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); it('positions badge based on prop', () => { const position = { right: 0 }; const rendered = render({CHILDREN}); @@ -17,24 +24,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 +58,7 @@ describe('Badge Component', () => { const BadgeElement = rendered.getByText(CONTENT); expect(BadgeElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('Badge has correct classes', () => { @@ -55,6 +67,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 +82,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 +90,7 @@ describe('Badge Component', () => { expect(BadgeElement.classList.length).toBe(2); expect(BadgeElement.classList[0]).toMatch(/^ss__badge/); + expect(badge.asFragment()).toMatchSnapshot(); }); }); @@ -89,12 +104,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 +133,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 +153,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 +188,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..6493460d5 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Badge/__snapshots__/Badge.test.tsx.snap @@ -0,0 +1,234 @@ +// 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 +
+
+ +`; + +exports[`Badge Component uses bocachica theme 1`] = ` + + .emotion-0 { + display: inline-block; + position: absolute; + top: 0; + left: 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..248c018a9 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 @@ -4,6 +4,7 @@ import { render } from '@testing-library/preact'; import { Breadcrumbs } from './Breadcrumbs'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('Breadcrumbs Component', () => { const args = { @@ -26,11 +27,20 @@ describe('Breadcrumbs Component', () => { ], }; + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); + it('renders', () => { const rendered = render(); 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 +56,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 +69,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 +86,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 +96,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 +109,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 +117,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 +137,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 +153,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 +182,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..406360fe4 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap @@ -0,0 +1,841 @@ +// 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 bocachica theme 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 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 855d54ef7..676bcf368 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 @@ -5,8 +5,16 @@ import userEvent from '@testing-library/user-event'; import { Button } from './Button'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('Button Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + 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', () => { @@ -124,9 +141,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', () => { @@ -140,6 +159,7 @@ describe('Button Component', () => { const styles = getComputedStyle(buttonElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styles', () => { @@ -150,6 +170,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', () => { @@ -174,6 +195,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', () => { @@ -194,6 +216,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', () => { @@ -226,6 +249,7 @@ describe('Button Component', () => { expect(styles.color).toBe(propTheme.components.button.color); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); }); @@ -236,6 +260,7 @@ describe('Button Component', () => { const buttonElement = rendered.container.querySelector('.ss__button'); expect(buttonElement).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with content prop', () => { @@ -249,6 +274,7 @@ describe('Button Component', () => { const buttonElementByContent = rendered.getByText(content); expect(buttonElementByContent).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with icon prop', () => { @@ -266,6 +292,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', () => { @@ -276,11 +303,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 + + + +
+ +`; + +exports[`Button Component uses bocachica theme 1`] = ` + + .emotion-0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + padding: 5px 10px; + position: relative; + color: #6d7175; + outline: 0; + background-color: #fff; + border: 1px solid #6d7175; + border-radius: 3px; +} + +.emotion-0:hover { + cursor: pointer; + background-color: #000000; + color: #ffffff; + border-color: #ffffff; +} + +.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; +} + +
+ hello world +
+ +`; 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..b31419f83 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 @@ -5,14 +5,23 @@ import userEvent from '@testing-library/user-event'; import { Dropdown } from './Dropdown'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('Dropdown Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); it('renders', () => { const rendered = render(); 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 +30,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 +44,7 @@ describe('Dropdown Component', () => { const styles = getComputedStyle(dropdownElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders button prop', () => { @@ -42,6 +53,7 @@ describe('Dropdown Component', () => { const buttonElement = rendered.getByText(buttonText); expect(buttonElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders content prop', () => { @@ -50,6 +62,7 @@ describe('Dropdown Component', () => { const contentElement = rendered.getByText(contentText); expect(contentElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders children prop', () => { @@ -58,6 +71,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 +83,7 @@ describe('Dropdown Component', () => { expect(buttonElement).toBeInTheDocument(); expect(buttonElement).toHaveAttribute('ssA11y'); + expect(rendered.asFragment()).toMatchSnapshot(); const rendered2 = render( @@ -78,6 +93,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 +107,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 +119,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 +153,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 +187,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 +215,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 +239,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 +252,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 +265,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 +279,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 +299,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 +315,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 +344,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 +354,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 +367,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 +380,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 +389,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 +398,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 +419,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 +431,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..64bd6e752 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -0,0 +1,1975 @@ +// 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; +} + +
+ +
+
+ +`; + +exports[`Dropdown Component uses bocachica theme 1`] = ` + + .emotion-0 { + position: relative; +} + +.emotion-0.ss__dropdown--open .ss__dropdown__content { + -webkit-transition: opacity .5s ease; + transition: opacity .5s ease; + 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; +} + +
+ +
+ content +
+
+ +`; 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..9c508d67f 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 @@ -4,16 +4,25 @@ import { render } from '@testing-library/preact'; import { Element } from './Element'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('Element Component', () => { const text = 'some text'; + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); it('renders as div', () => { const rendered = render(); 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 +31,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 +40,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 +49,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 +58,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 +76,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 +95,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 +104,7 @@ describe('Element Component', () => { const element = rendered.container.querySelector(`.ss__element.${className}`); expect(element).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('disables styles', () => { @@ -96,6 +112,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 +132,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 +148,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 +177,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..fa5af98dd --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Element/__snapshots__/Element.test.tsx.snap @@ -0,0 +1,122 @@ +// 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`] = ` + +
+ +`; + +exports[`Element Component uses bocachica theme 1`] = ` + + .emotion-0 { + color: #6d7175; +} + +
+ some text +
+ +`; 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..1a476b944 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 @@ -3,12 +3,21 @@ import { render } from '@testing-library/preact'; import { FormattedNumber } from './FormattedNumber'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('FormattedNumber Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); it('renders', () => { const rendered = render(); const formattednumberElement = rendered.container.querySelector('.ss__formatted-number'); expect(formattednumberElement).toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('has default formatting', () => { @@ -20,6 +29,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 +45,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 +56,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 +68,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 +81,7 @@ describe('FormattedNumber Component', () => { const styles = getComputedStyle(formattednumberElement); expect(styles.padding).toBe(style.padding); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styling', () => { @@ -82,6 +96,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 +107,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 +127,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 +143,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 +172,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..b4bea5557 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/FormattedNumber/__snapshots__/FormattedNumber.test.tsx.snap @@ -0,0 +1,129 @@ +// 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 bocachica theme 1`] = ` + + + 1099.990 + + +`; + +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..e3bb064ec 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 @@ -5,6 +5,7 @@ import { render } from '@testing-library/preact'; import { Icon } from './Icon'; import { iconPaths } from './paths'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; const defaultProps = { className: '', @@ -18,12 +19,20 @@ const defaultProps = { }; describe('Icon Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); it('does not render without icon or path props', () => { const rendered = render(); expect(rendered.container).toBeInTheDocument(); const svg = rendered.container.querySelector('svg'); expect(svg).not.toBeInTheDocument(); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('renders with icon prop', () => { @@ -33,6 +42,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 +54,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 +68,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 +88,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 +108,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 +133,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 +154,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 +180,7 @@ describe('Icon Component', () => { const path = svg.querySelector('path'); expect(path).toHaveAttribute('d', svgPath); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('can disable styles', () => { @@ -183,6 +200,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 +220,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 +236,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 +265,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..811eee91f --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Icon/__snapshots__/Icon.test.tsx.snap @@ -0,0 +1,264 @@ +// 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; +} + + + + + +`; + +exports[`Icon Component uses bocachica theme 1`] = ` + + .emotion-0 { + fill: #6d7175; + 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..fa3d34497 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 @@ -1,6 +1,7 @@ import { h } from 'preact'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; import { render, waitFor } from '@testing-library/preact'; import { Image, FALLBACK_IMAGE_URL } from './Image'; @@ -19,6 +20,14 @@ describe('image Component', () => { badResult!.thumbnailImageUrl = ''; const rolloverImage = searchResponse.results![2].mappings?.core?.thumbnailImageUrl; + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render({result?.name!}); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); + it('renders', () => { const rendered = render({result?.name!}); const imageElement = rendered.container.querySelector('.ss__image img'); @@ -26,6 +35,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 +44,7 @@ describe('image Component', () => { const imageElement = rendered.container.querySelector('.ss__image'); expect(imageElement).toHaveClass(className); + expect(rendered.asFragment()).toMatchSnapshot(); }); it('disables styles', () => { @@ -41,6 +52,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 +61,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 +70,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 +78,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 +89,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 +106,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 +134,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 +149,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 +176,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..1444fe414 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Image/__snapshots__/Image.test.tsx.snap @@ -0,0 +1,461 @@ +// 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 +
+ +`; + +exports[`image Component uses bocachica theme 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..ccc97fbb2 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 @@ -3,8 +3,17 @@ import { render } from '@testing-library/preact'; import { LoadingBar } from './LoadingBar'; import { ThemeProvider } from '../../../providers'; +import themes from '../../../themes'; describe('LoadingBar Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); + const theme = { components: { loadingBar: { @@ -21,6 +30,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 +40,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 +50,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 +62,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 +79,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 +90,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 +101,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 +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', () => { @@ -106,6 +123,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 +143,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..9a0fd4285 --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Loading/__snapshots__/LoadingBar.test.tsx.snap @@ -0,0 +1,1212 @@ +// 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%; + } +} + +@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%; + } +} + +@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%; + } +} + +@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%; + } +} + +@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%; + } +} + +@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%; + } +} + +@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%; + } +} + +@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 bocachica theme 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: #6d7175; + -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%; + } +} + +@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..68e1989cd 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 @@ -5,6 +5,7 @@ import { render } from '@testing-library/preact'; import { Banner } from './Banner'; import { ContentType } from '@searchspring/snap-store-mobx'; import { ThemeProvider } from '../../../../providers'; +import themes from '../../../../themes'; import { MockData } from '@searchspring/snap-shared'; import { SearchResponseModel } from '@searchspring/snapi-types'; @@ -14,6 +15,14 @@ mockData.updateConfig({ search: 'merchandising' }); const searchResponse: SearchResponseModel = mockData.search(); describe('Merchandising Banner Component', () => { + Object.keys(themes || {}).forEach((themeName) => { + it(`uses ${themeName} theme`, () => { + const theme = themes[themeName as keyof typeof themes]; + const rendered = render(); + expect(rendered.asFragment()).toMatchSnapshot(); + }); + }); + const theme = { components: { banner: { @@ -31,6 +40,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 +49,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 +65,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 +81,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 +93,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 +118,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..90481e41f --- /dev/null +++ b/packages/snap-preact-components/src/components/Atoms/Merchandising/Banner/__snapshots__/Banner.test.tsx.snap @@ -0,0 +1,294 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Merchandising Banner Component can disable styling 1`] = ` + +
+