Merge pull request #6912 from Sage/FE-6612-navigationbar-rtl

refactor(navigation-bar): convert enzyme tests to RTL

src/components/global-header/global-header.pw.tsx

@@ -13,7 +13,7 @@ import {
 import { checkAccessibility } from "../../../playwright/support/helper";
 
 test.describe("Global Header component", () => {
-  test("should render without causing a ResiveObserver related error", async ({
+  test("should render without causing a ResizeObserver related error", async ({
     mount,
     page,
   }) => {

src/components/global-header/global-header.test.tsx

@@ -1,46 +1,45 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import GlobalHeader, { GlobalHeaderProps } from "./global-header.component";
+import GlobalHeader from "./global-header.component";
 
-function renderer(props?: GlobalHeaderProps) {
-  return render(<GlobalHeader {...props}>foobar</GlobalHeader>);
-}
+test("should be visible with correct accessible name", () => {
+  render(<GlobalHeader>foobar</GlobalHeader>);
 
-describe("Global Header", () => {
-  it("should be visible with correct accessible name", () => {
-    renderer();
-    expect(screen.getByRole("navigation")).toHaveAccessibleName(
-      "Global Header"
-    );
-  });
+  const globalHeader = screen.getByRole("navigation");
 
-  it("should be visible with correct styling", () => {
-    renderer();
-    expect(screen.getByRole("navigation")).toHaveStyle({
-      backgroundColor: "var(--colorsComponentsMenuWinterStandard500)",
-      color: "var(--colorsComponentsMenuYang100)",
-      position: "fixed",
-    });
-  });
+  expect(globalHeader).toBeVisible();
+  expect(globalHeader).toHaveAccessibleName("Global Header");
+});
+
+test("should render with 'data-component' set to 'global-header'", () => {
+  render(<GlobalHeader>foobar</GlobalHeader>);
+
+  expect(screen.getByRole("navigation")).toHaveAttribute(
+    "data-component",
+    "global-header"
+  );
+});
 
-  it("should have correct z-index", () => {
-    renderer();
-    expect(screen.getByRole("navigation")).toHaveStyle("z-index: 2999");
+test("should have correct z-index", () => {
+  render(<GlobalHeader>foobar</GlobalHeader>);
+
+  expect(screen.getByRole("navigation")).toHaveStyle("z-index: 2999");
+});
+
+describe("when logo prop is passed", () => {
+  it("and logo is an img element, logo is visible with correct alt text", () => {
+    const logo = <img src="foobar" alt="Carbon logo" />;
+    render(<GlobalHeader logo={logo}>foobar</GlobalHeader>);
+
+    expect(screen.getByRole("img")).toHaveAccessibleName("Carbon logo");
   });
 
-  describe("when logo prop is passed", () => {
-    it("and logo is an img element, logo is visible with correct alt text", () => {
-      const logo = <img src="foobar" alt="Carbon logo" />;
-      renderer({ logo });
-      expect(screen.getByAltText("Carbon logo")).toBeInTheDocument();
-    });
-
-    it("and logo is a svg element, logo is visible with correct accessible name", () => {
-      const logo = <svg aria-label="Carbon logo" data-role="carbon-logo" />;
-      renderer({ logo });
-      expect(screen.getByTestId("carbon-logo")).toHaveAccessibleName(
-        "Carbon logo"
-      );
-    });
+  it("and logo is a svg element, logo is visible with correct accessible name", () => {
+    const logo = <svg aria-label="Carbon logo" data-role="carbon-logo" />;
+    render(<GlobalHeader logo={logo}>foobar</GlobalHeader>);
+
+    expect(screen.getByTestId("carbon-logo")).toHaveAccessibleName(
+      "Carbon logo"
+    );
   });
 });

src/components/navigation-bar/navigation-bar-test.stories.tsx

@@ -4,7 +4,11 @@ import { Menu, MenuItem } from "../menu";
 
 export default {
   title: "Navigation Bar/Test",
-  includeStories: ["DefaultStory", "NavigationBarWithSubmenuAndChangingHeight"],
+  includeStories: [
+    "DefaultStory",
+    "NavigationBarWithSubmenuAndChangingHeight",
+    "ResponsivePadding",
+  ],
   parameters: {
     info: { disable: true },
     chromatic: {
@@ -22,8 +26,9 @@ DefaultStory.args = {
   navigationType: "light",
   isLoading: false,
   children: "Example content",
-  ariaLabel: undefined,
-  position: undefined,
+  ariaLabel: "",
+  position: "",
+  orientation: "",
   offset: "0",
 };
 
@@ -68,3 +73,14 @@ export const NavigationBarWithSubmenuAndChangingHeight = () => {
     </div>
   );
 };
+
+export const ResponsivePadding = () => {
+  return <NavigationBar>Example content</NavigationBar>;
+};
+
+ResponsivePadding.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    viewports: [599, 959, 1259],
+  },
+};