[terra-table] Add missing ID to header cells. (#3336)

* Add missing ID to header cells. * Updated tests with unique IDs Co-authored-by: Matt Henkes <mjhenkes@gmail.com>
cerner · Jan 29, 2021 · d4ebaad · d4ebaad
1 parent 0d0d3b6
commit d4ebaad
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 11 deletions.
diff --git a/packages/terra-table/CHANGELOG.md b/packages/terra-table/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Fixed
+  * Fixed missing id mapping for header cells
+
 ## 4.20.0 - (January 5, 2021)
 
 * Changed

diff --git a/packages/terra-table/src/Table.jsx b/packages/terra-table/src/Table.jsx
@@ -339,6 +339,7 @@ const createHeader = (tableData) => {
         {tableData.headerData.cells.map((cellData, colIndex) => (
           <HeaderCell
             {...cellData.attrs}
+            id={cellData.id}
             key={cellData.key}
             refCallback={cellData.refCallback}
             metaData={cellData.metaData}

diff --git a/packages/terra-table/src/terra-dev-site/test/table/CustomCell.test.jsx b/packages/terra-table/src/terra-dev-site/test/table/CustomCell.test.jsx
@@ -15,17 +15,17 @@ const CustomCell = () => (
     headerData={{
       cells: [
         {
-          id: 'header-name',
+          id: 'header-name-1',
           key: 'name0',
           children: 'Column 0',
         },
         {
-          id: 'header-name',
+          id: 'header-name-2',
           key: 'name1',
           children: 'Column 1',
         },
         {
-          id: 'header-name',
+          id: 'header-name-3',
           key: 'name2',
           children: 'Column 2',
         },

diff --git a/packages/terra-table/src/terra-dev-site/test/table/HeaderCheckMark.test.jsx b/packages/terra-table/src/terra-dev-site/test/table/HeaderCheckMark.test.jsx
@@ -11,7 +11,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title' },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Default' }],
+        cells: [{ id: 'example-column-0', key: 'key-0', children: 'Default' }],
       }}
     />
     <Table
@@ -21,7 +21,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title', onCheckAction: () => {}, checkStatus: 'empty' },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Selectable Unchecked' }],
+        cells: [{ id: 'empty-column-0', key: 'key-0', children: 'Selectable Unchecked' }],
       }}
     />
     <Table
@@ -31,7 +31,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title', onCheckAction: () => {}, checkStatus: 'checked' },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Selectable Checked' }],
+        cells: [{ id: 'checked-column-0', key: 'key-0', children: 'Selectable Checked' }],
       }}
     />
     <Table
@@ -41,7 +41,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title', onCheckAction: () => {}, checkStatus: 'indeterminate' },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Selectable Indeterminate' }],
+        cells: [{ id: 'indeterminate-column-0', key: 'key-0', children: 'Selectable Indeterminate' }],
       }}
     />
     <Table
@@ -51,7 +51,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title', onCheckAction: () => {}, isDisabled: true },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Disabled' }],
+        cells: [{ id: 'disabled-column-0', key: 'key-0', children: 'Disabled' }],
       }}
     />
     <Table
@@ -61,7 +61,7 @@ const HeaderCheckMarkTest = () => (
       numberOfColumns={1}
       headerData={{
         selectAllColumn: { checkLabel: 'Column Example Title', onCheckAction: () => {}, checkAlignment: '1rem' },
-        cells: [{ id: 'column-0', key: 'key-0', children: 'Vertical Alignment 1rem' }],
+        cells: [{ id: 'alignment-column-0', key: 'key-0', children: 'Vertical Alignment 1rem' }],
       }}
     />
   </React.Fragment>

diff --git a/packages/terra-table/src/terra-dev-site/test/table/Padding.test.jsx b/packages/terra-table/src/terra-dev-site/test/table/Padding.test.jsx
@@ -10,7 +10,7 @@ const PaddingTable = () => (
       numberOfColumns={1}
       headerData={{
         cells: [
-          { id: 'header-name', key: 'name', children: 'Name' },
+          { id: 'compact-header-name', key: 'name', children: 'Name' },
         ],
       }}
       bodyData={[
@@ -33,7 +33,7 @@ const PaddingTable = () => (
       numberOfColumns={1}
       headerData={{
         cells: [
-          { id: 'header-name', key: 'name', children: 'Name' },
+          { id: 'standard-header-name', key: 'name', children: 'Name' },
         ],
       }}
       bodyData={[

diff --git a/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap b/packages/terra-table/tests/jest/__snapshots__/Table.test.jsx.snap
@@ -105,6 +105,7 @@ exports[`Table should render a Table with check style icon and row style toggle
       label="test-label"
     />
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -168,6 +169,7 @@ exports[`Table should render a Table with check style toggle 1`] = `
       label="test-label"
     />
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -231,6 +233,7 @@ exports[`Table should render a Table with check style toggle and row style discl
       label="test-label"
     />
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -398,6 +401,7 @@ exports[`Table should render a Table with header 1`] = `
     aria-rowindex={1}
   >
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -424,6 +428,7 @@ exports[`Table should render a Table with header with chevrons 1`] = `
     aria-rowindex={1}
   >
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -485,6 +490,7 @@ exports[`Table should render a Table with inners remove despite padding 1`] = `
     aria-rowindex={1}
   >
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -620,6 +626,7 @@ exports[`Table should render a Table with row style toggle 1`] = `
       label="test-label"
     />
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"
@@ -842,6 +849,7 @@ exports[`Table should render a Table with widths 1`] = `
     aria-rowindex={1}
   >
     <HeaderCell
+      id="cell-id"
       isSortActive={false}
       isSortDesc={false}
       key="cell-key"