refactor(flat-table): convert unit tests to RTL

src/components/flat-table/__internal__/build-position-map.ts

@@ -9,6 +9,8 @@ export default (
         acc[currentId] = 0;
       } else {
         const previousId = array[index - 1].getAttribute("id");
+
+        /* istanbul ignore else */
         if (previousId) {
           acc[currentId] = acc[previousId] + array[index - 1][propertyName];
         }

src/components/flat-table/components.test-pw.tsx

@@ -3006,3 +3006,28 @@ export const HighlightedRowWithLoadingState = (
     </div>
   );
 };
+
+export const FlatTableWithStickyColumn = () => (
+  <FlatTable width="260px" overflowX="auto">
+    <FlatTableHead>
+      <FlatTableRow>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableRowHeader>Foo</FlatTableRowHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+        <FlatTableHeader>Foo</FlatTableHeader>
+      </FlatTableRow>
+    </FlatTableHead>
+    <FlatTableBody>
+      <FlatTableRow>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableRowHeader>Bar</FlatTableRowHeader>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableCell>Bar</FlatTableCell>
+        <FlatTableCell>
+          <input />
+        </FlatTableCell>
+      </FlatTableRow>
+    </FlatTableBody>
+  </FlatTable>
+);

src/components/flat-table/flat-table-test.stories.tsx

@@ -36,7 +36,8 @@ export default {
     "FlatTableSizeFocus",
     "FlatTableInsideDrawer",
     "FlatRowHeaderWithNoPaddingAndButtons",
-    "MinimalDesign",
+    "FlatTableThemesWithAlternateHeaderBackground",
+    "FlatTableThemesWithStickyHead",
   ],
   parameters: {
     info: { disable: true },
@@ -790,3 +791,80 @@ export const FlatRowHeaderWithNoPaddingAndButtons = () => {
     </FlatTable>
   );
 };
+
+const themes: Array<FlatTableProps["colorTheme"]> = [
+  "dark",
+  "light",
+  "transparent-base",
+  "transparent-white",
+];
+
+export const FlatTableThemesWithAlternateHeaderBackground = () => (
+  <>
+    {themes.map((ftTheme, index) => (
+      <React.Fragment key={`${ftTheme}-with-alt-background-${index + 1}`}>
+        <FlatTable
+          aria-label={`${ftTheme}-with-alt-background`}
+          mt={1}
+          colorTheme={ftTheme}
+        >
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader alternativeBgColor>Name</FlatTableHeader>
+              <FlatTableHeader>Location</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+      </React.Fragment>
+    ))}
+  </>
+);
+FlatTableThemesWithAlternateHeaderBackground.parameters = {
+  chromatic: { disableSnapshot: false },
+};
+
+export const FlatTableThemesWithStickyHead = () => (
+  <>
+    {themes.map((ftTheme, index) => (
+      <React.Fragment key={`${ftTheme}-with-sticky-head-${index + 1}`}>
+        <FlatTable
+          aria-label={`${ftTheme}-with-sticky-head`}
+          height="100px"
+          mt={1}
+          colorTheme={ftTheme}
+          hasStickyHead
+        >
+          <FlatTableHead>
+            <FlatTableRow>
+              <FlatTableHeader>Name</FlatTableHeader>
+              <FlatTableHeader>Location</FlatTableHeader>
+            </FlatTableRow>
+          </FlatTableHead>
+          <FlatTableBody>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+            </FlatTableRow>
+            <FlatTableRow>
+              <FlatTableCell>John Doe</FlatTableCell>
+              <FlatTableCell>London</FlatTableCell>
+            </FlatTableRow>
+          </FlatTableBody>
+        </FlatTable>
+      </React.Fragment>
+    ))}
+  </>
+);
+FlatTableThemesWithStickyHead.parameters = {
+  chromatic: { disableSnapshot: false },
+};

src/components/flat-table/flat-table.component.tsx

@@ -11,8 +11,11 @@ import {
 import DrawerSidebarContext from "../drawer/__internal__/drawer-sidebar.context";
 import Events from "../../__internal__/utils/helpers/events/events";
 import FlatTableContext from "./__internal__/flat-table.context";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
 
-export interface FlatTableProps extends MarginProps {
+export interface FlatTableProps
+  extends MarginProps,
+    Omit<TagProps, "data-component"> {
   /** The HTML id of the element that contains a description of this table. */
   ariaDescribedby?: string;
   /** A string to render as the table's caption */
@@ -188,6 +191,7 @@ export const FlatTable = ({
         // it may be that an element within the row currently has focus
         const index = findParentIndexOfFocusedChild(focusableElementsArray);
 
+        /* istanbul ignore else */
         if (index !== -1 && index < focusableElementsArray.length) {
           (focusableElementsArray[index + 1] as HTMLElement)?.focus();
         }
@@ -228,7 +232,6 @@ export const FlatTable = ({
   return (
     <StyledFlatTableWrapper
       ref={wrapperRef}
-      data-component="flat-table-wrapper"
       data-role="flat-table-wrapper"
       isInSidebar={isInSidebar}
       hasStickyHead={hasStickyHead}
@@ -254,6 +257,7 @@ export const FlatTable = ({
       onKeyDown={handleKeyDown}
       isFocused={focused}
       {...rest}
+      data-component="flat-table-wrapper"
     >
       <StyledTableContainer
         ref={container}
@@ -266,6 +270,7 @@ export const FlatTable = ({
         tabIndex={0}
         overflowX={overflowX}
         width={width}
+        data-role="flat-table-container"
       >
         <StyledFlatTable
           ref={tableRef}
@@ -285,7 +290,10 @@ export const FlatTable = ({
         </StyledFlatTable>
       </StyledTableContainer>
       {footer && (
-        <StyledFlatTableFooter hasStickyFooter={hasStickyFooter}>
+        <StyledFlatTableFooter
+          hasStickyFooter={hasStickyFooter}
+          data-role="flat-table-footer"
+        >
           {footer}
         </StyledFlatTableFooter>
       )}

src/components/flat-table/flat-table.pw.tsx

@@ -33,6 +33,7 @@ import {
   FlatTableCheckboxComponent,
   FlatTableFirstColumnHasRowspan,
   FlatTableLastColumnHasRowspan,
+  FlatTableWithStickyColumn,
 } from "./components.test-pw";
 import Icon from "../icon";
 import { getDataElementByValue } from "../../../playwright/components";
@@ -666,6 +667,38 @@ test.describe("Prop tests", () => {
     ).toBeInViewport();
   });
 
+  test("should render with sticky columns when FlatTableRowHeader is used", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<FlatTableWithStickyColumn />);
+
+    const bodyCell1 = flatTableBodyRowByPosition(page, 0).locator("td").nth(0);
+    const bodyStickyCell = flatTableBodyRowByPosition(page, 0)
+      .locator("th")
+      .nth(0);
+    const input = flatTable(page).locator("input");
+
+    await expect(
+      flatTableHeaderRowByPosition(page, 0).locator("th").nth(0)
+    ).toHaveCSS("position", "sticky");
+    await expect(
+      flatTableHeaderRowByPosition(page, 0).locator("th").nth(0)
+    ).toHaveCSS("position", "sticky");
+    await expect(bodyCell1).toHaveCSS("position", "sticky");
+    await expect(bodyStickyCell).toHaveCSS("position", "sticky");
+
+    await expect(bodyCell1).toBeInViewport();
+    await expect(bodyStickyCell).toBeInViewport();
+    await expect(input).not.toBeInViewport();
+
+    await input.focus();
+
+    await expect(bodyCell1).toBeInViewport();
+    await expect(bodyStickyCell).toBeInViewport();
+    await expect(input).toBeInViewport();
+  });
+
   test(`should render with colSpan set to make cells span 4 columns`, async ({
     mount,
     page,