Add html tests

seek-oss · Dec 17, 2024 · de6aa00 · de6aa00
1 parent b10bb17
commit de6aa00
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 1 deletion.
diff --git a/packages/braid-design-system/src/lib/components/Table/Table.test.tsx b/packages/braid-design-system/src/lib/components/Table/Table.test.tsx
@@ -0,0 +1,148 @@
+import '@testing-library/jest-dom';
+import 'html-validate/jest';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { BraidTestProvider } from '../../../entries/test';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHeadCell,
+  TableHeader,
+  TableRow,
+  Text,
+} from '..';
+import { render } from '@testing-library/react';
+
+describe('Table', () => {
+  it('should have accessible label', () => {
+    const { getByLabelText } = render(
+      <BraidTestProvider>
+        <Table label="Table label">
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <Text>Content</Text>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </BraidTestProvider>,
+    );
+    const tableEl = getByLabelText('Table label');
+    expect(tableEl.tagName).toBe('TABLE');
+  });
+
+  describe('should render valid html structure', () => {
+    it('with all sections', () => {
+      expect(
+        renderToStaticMarkup(
+          <BraidTestProvider>
+            <Table label="Table label">
+              <TableHeader>
+                <TableRow>
+                  <TableHeadCell>
+                    <Text>Content</Text>
+                  </TableHeadCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <Text>Content</Text>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+              <TableFooter>
+                <TableRow>
+                  <TableCell>
+                    <Text>Content</Text>
+                  </TableCell>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </BraidTestProvider>,
+        ),
+      ).toHTMLValidate({
+        extends: ['html-validate:recommended'],
+      });
+    });
+
+    it('with body only', () => {
+      expect(
+        renderToStaticMarkup(
+          <BraidTestProvider>
+            <Table label="Table label">
+              <TableBody>
+                <TableRow>
+                  <TableCell>
+                    <Text>Content</Text>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </BraidTestProvider>,
+        ),
+      ).toHTMLValidate({
+        extends: ['html-validate:recommended'],
+      });
+    });
+
+    it('with row headers and no column headers', () => {
+      expect(
+        renderToStaticMarkup(
+          <BraidTestProvider>
+            <Table label="Table label">
+              <TableBody>
+                <TableRow>
+                  <TableHeadCell>
+                    <Text>Content</Text>
+                  </TableHeadCell>
+                  <TableCell>
+                    <Text>Content</Text>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </BraidTestProvider>,
+        ),
+      ).toHTMLValidate({
+        extends: ['html-validate:recommended'],
+      });
+    });
+
+    it('with column and row headers', () => {
+      expect(
+        renderToStaticMarkup(
+          <BraidTestProvider>
+            <Table label="Table label">
+              <TableHeader>
+                <TableRow>
+                  <TableHeadCell>
+                    <Text>Content</Text>
+                  </TableHeadCell>
+                  <TableHeadCell>
+                    <Text>Content</Text>
+                  </TableHeadCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableHeadCell>
+                    <Text>Content</Text>
+                  </TableHeadCell>
+                  <TableCell>
+                    <Text>Content</Text>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </BraidTestProvider>,
+        ),
+      ).toHTMLValidate({
+        extends: ['html-validate:recommended'],
+      });
+    });
+  });
+});
diff --git a/packages/braid-design-system/src/lib/hooks/useIsomorphicLayoutEffect.ts b/packages/braid-design-system/src/lib/hooks/useIsomorphicLayoutEffect.ts
@@ -1,5 +1,8 @@
 import { useEffect, useLayoutEffect } from 'react';
 
+const isJSDom =
+  typeof navigator !== 'undefined' && navigator?.userAgent?.includes('jsdom');
+
 // `useLayoutEffect` will show a warning if used during SSR
 export const useIsomorphicLayoutEffect =
-  typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+  typeof document !== 'undefined' && !isJSDom ? useLayoutEffect : useEffect;