add unit tests for new modifiers, update example

Author: kmcfaul

packages/react-table/src/components/Table/__tests__/Table.test.tsx

@@ -186,3 +186,39 @@ test(`Does not render with class ${styles.modifiers.noPlainOnGlass} when isNoPla
 
   expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.noPlainOnGlass);
 });
+
+test(`Renders with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is true`, () => {
+  render(<Table isStickyHeaderBase aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is false`, () => {
+  render(<Table isStickyHeaderBase={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderBase} when isStickyHeaderBase is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderBase);
+});
+
+test(`Renders with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is true`, () => {
+  render(<Table isStickyHeaderStuck aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is false`, () => {
+  render(<Table isStickyHeaderStuck={false} aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});
+
+test(`Does not render with class ${styles.modifiers.stickyHeaderStuck} when isStickyHeaderStuck is undefined`, () => {
+  render(<Table aria-label="Test table" />);
+
+  expect(screen.getByRole('grid', { name: 'Test table' })).not.toHaveClass(styles.modifiers.stickyHeaderStuck);
+});

packages/react-table/src/components/Table/examples/TableStickyHeaderDynamic.tsx

@@ -81,7 +81,7 @@ export const TableStickyHeaderDynamic: React.FunctionComponent = () => {
     <div style={{ height: '400px' }}>
       <InnerScrollContainer ref={scrollContainerRef}>
         <Table
-          aria-label="Sticky columns and header table"
+          aria-label="Dynamic sticky header table"
           gridBreakPoint=""
           isStickyHeaderBase
           isStickyHeaderStuck={isStuck}
@@ -102,13 +102,13 @@ export const TableStickyHeaderDynamic: React.FunctionComponent = () => {
           <Tbody>
             {facts.map((fact) => (
               <Tr key={fact.name}>
-                <Th modifier="nowrap" dataLabel={columnNames.name}>
+                <Td modifier="nowrap" dataLabel={columnNames.name}>
                   {fact.name}
-                </Th>
-                <Th modifier="nowrap" dataLabel={columnNames.state}>
+                </Td>
+                <Td modifier="nowrap" dataLabel={columnNames.state}>
                   <BlueprintIcon />
                   {` ${fact.state}`}
-                </Th>
+                </Td>
                 <Td modifier="nowrap" dataLabel={columnNames.header3}>
                   {fact.detail1}
                 </Td>