Adds Alert story using validation prop and unit test

trussworks · Jul 20, 2023 · 7a6a963 · 7a6a963
1 parent 3230085
commit 7a6a963
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -122,3 +122,12 @@ export const withCTA = (): React.ReactElement => (
     {testText}
   </Alert>
 )
+
+export const withValidation = (): React.ReactElement => (
+  <Alert type="info" heading="Code requirements" headingLevel="h4" validation>
+    <ul>
+      <li>Use at least one uppercase character</li>
+      <li>Use at least one number</li>
+    </ul>
+  </Alert>
+)
diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
@@ -24,6 +24,21 @@ describe('Alert component', () => {
     expect(queryByTestId('alert')).toContainHTML('p')
   })
 
+  it('renders custom children with validation prop', () => {
+    const { queryByTestId } = render(
+      <Alert type="success" headingLevel="h4" validation>
+        <ul>
+          <li>test 1</li>
+          <li>test 2</li>
+        </ul>
+      </Alert>
+    )
+    expect(queryByTestId('alert')).toHaveTextContent('test 1test 2')
+    expect(queryByTestId('alert')).toContainHTML('ul')
+    expect(queryByTestId('alert')).toContainHTML('li')
+    expect(queryByTestId('alert')).not.toContainHTML('p')
+  })
+
   it('renders validation style alert', () => {
     const { queryByTestId } = render(
       <Alert type="success" validation headingLevel="h4" className="myClass">