diff --git a/packages/fuselage/src/components/Modal/Modal.spec.tsx b/packages/fuselage/src/components/Modal/Modal.spec.tsx index e866df83e7..bfecd135c2 100644 --- a/packages/fuselage/src/components/Modal/Modal.spec.tsx +++ b/packages/fuselage/src/components/Modal/Modal.spec.tsx @@ -1,10 +1,31 @@ +import { composeStories } from '@storybook/testing-react'; import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; import React from 'react'; -import Modal from '.'; +import * as stories from './Modal.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [ + Story.storyName || 'Story', + Story, +]); describe('[Modal Component]', () => { - it('renders without crashing', () => { - render(); - }); + test.each(testCases)( + `renders %s without crashing`, + async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); + } + ); + + test.each(testCases)( + '%s should have no a11y violations', + async (_storyname, Story) => { + const { container } = render(); + + const results = await axe(container); + expect(results).toHaveNoViolations(); + } + ); }); diff --git a/packages/fuselage/src/components/Modal/Modal.stories.tsx b/packages/fuselage/src/components/Modal/Modal.stories.tsx index 4e727ad0a8..7859842ee4 100644 --- a/packages/fuselage/src/components/Modal/Modal.stories.tsx +++ b/packages/fuselage/src/components/Modal/Modal.stories.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import type { ComponentStory } from '@storybook/react'; import type { ComponentProps } from 'react'; import React from 'react'; @@ -12,7 +13,7 @@ export default { }, }; -export const Default = () => ( +export const Default: ComponentStory = () => ( @@ -32,7 +33,7 @@ export const Default = () => ( ); -export const _WithThumb = () => ( +export const _WithThumb: ComponentStory = () => ( @@ -53,7 +54,7 @@ export const _WithThumb = () => ( ); -export const _WithIcon = () => ( +export const _WithIcon: ComponentStory = () => ( @@ -74,7 +75,7 @@ export const _WithIcon = () => ( ); -export const _WithTagline = () => ( +export const _WithTagline: ComponentStory = () => ( @@ -95,7 +96,7 @@ export const _WithTagline = () => ( ); -export const _WithIconAndTagline = () => ( +export const _WithIconAndTagline: ComponentStory = () => ( @@ -117,7 +118,7 @@ export const _WithIconAndTagline = () => ( ); -export const _WithAnnotation = () => ( +export const _WithAnnotation: ComponentStory = () => ( @@ -138,7 +139,7 @@ export const _WithAnnotation = () => ( ); -export const _WithHeroImage = () => ( +export const _WithHeroImage: ComponentStory = () => ( @@ -181,7 +182,7 @@ const FormContainer = (props: ComponentProps) => ( /> ); -export const WithForm = () => ( +export const _WithForm: ComponentStory = () => ( diff --git a/packages/fuselage/src/components/Modal/Modal.tsx b/packages/fuselage/src/components/Modal/Modal.tsx index 30117d14ae..ea582bc6e9 100644 --- a/packages/fuselage/src/components/Modal/Modal.tsx +++ b/packages/fuselage/src/components/Modal/Modal.tsx @@ -27,7 +27,7 @@ export const Modal = forwardRef( } as const; return ( - + {wrapperFunction ? wrapperFunction(wrapperProps) : createElement(wrapper, wrapperProps)} diff --git a/packages/fuselage/src/components/Modal/ModalTitle.tsx b/packages/fuselage/src/components/Modal/ModalTitle.tsx index 6e948d15e7..feac2f89e9 100644 --- a/packages/fuselage/src/components/Modal/ModalTitle.tsx +++ b/packages/fuselage/src/components/Modal/ModalTitle.tsx @@ -6,7 +6,7 @@ import Box from '../Box'; export type ModalTitleProps = ComponentProps; export const ModalTitle = ({ children, ...props }: ModalTitleProps) => ( - + {children} ); diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap new file mode 100644 index 0000000000..fea35179ff --- /dev/null +++ b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap @@ -0,0 +1,743 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = ` + +
+ +
+
+
+
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ Anototation +
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithForm without crashing 1`] = ` + +
+ +
+
+
+
+

+ Modal Header +

+
+ +
+
+
+
+
+
+ + + + +
+
+
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = ` + +
+ +
+
+
+
+

+ Modal Header +

+
+ +
+
+
+
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non urna posuere, tempor urna nec, lacinia lacus. Vivamus ac lobortis arcu. Morbi malesuada, diam sed congue aliquet, dui elit tincidunt leo, a fermentum ante augue nec ex. Vestibulum feugiat aliquam sem vel porta. Praesent varius aliquet consequat. Mauris id nisl egestas, egestas ipsum sit amet, vestibulum elit. Cras vel dapibus lacus. Sed congue interdum lobortis. In vitae consectetur enim, eu varius leo. Quisque rhoncus nulla a rhoncus lobortis. Sed eu nulla libero. Donec lacus ante, vehicula eget eros molestie, ullamcorper tincidunt arcu. Suspendisse eget pulvinar lacus. +
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithIcon without crashing 1`] = ` + +
+ +
+
+
+
+ +
+
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = ` + +
+ +
+
+
+
+ +
+
+
+ Tagline +
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithTagline without crashing 1`] = ` + +
+ +
+
+
+
+
+ Tagline +
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders _WithThumb without crashing 1`] = ` + +
+ +
+
+
+
+
+ +
+
+
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ + +
+
+
+ +
+ +`; + +exports[`[Modal Component] renders Default without crashing 1`] = ` + +
+ +
+
+
+
+

+ Modal Header +

+
+ +
+
+
+
+ Modal Body +
+
+
+
+ + +
+
+
+ +
+ +`;