integrate prsima

Author: AlexFrazer

.gitignore

@@ -35,3 +35,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+.env*

__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+const mock = "file-mock";
+export default mock;

__mocks__/fileMock.ts

@@ -0,0 +1,3 @@
+export default function Link({ children, href }) {
+  return <children.type {...children.props} href={href} />;
+}

__mocks__/link.tsx

@@ -2,6 +2,7 @@ import { forwardRef } from "react";
 import type { ComponentProps } from "react";
 import clsx from "clsx";
 import useTranslation from "next-translate/useTranslation";
+import { useId } from "@reach/auto-id";
 
 interface Props extends ComponentProps<"button"> {
   readonly type?: "button" | "submit" | "reset";
@@ -18,8 +19,8 @@ const ToggleIcon = ({ isOpen }: Pick<Props, "isOpen">) => {
       className="w-6 h-6 text-white"
     >
       <path
-        x-show="open"
         fillRule="evenodd"
+        data-testid="nav-toggle-icon"
         d={
           isOpen
             ? "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
@@ -39,7 +40,6 @@ const NavToggle = forwardRef<HTMLButtonElement, Props>(
         {...props}
         type={type}
         ref={ref}
-        aria-label={t("sidebar.toggle.label")}
         aria-expanded={isOpen}
         className={clsx(
           "rounded-lg",
@@ -49,7 +49,7 @@ const NavToggle = forwardRef<HTMLButtonElement, Props>(
         )}
       >
         <ToggleIcon isOpen={isOpen} />
-        <span className="sr-only">Menu</span>
+        <span className="sr-only">{t("sidebar.toggle.label")}</span>
       </button>
     );
   },

components/Layout/Sidebar/NavToggle/NavToggle.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import NavToggle from "../NavToggle";
+
+test("it should have icon path when closed", async () => {
+  render(<NavToggle isOpen={false} />);
+  expect(await screen.findByTestId("nav-toggle-icon")).toHaveAttribute(
+    "d",
+    "M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z",
+  );
+});
+
+test("it should have different icon path when open", async () => {
+  render(<NavToggle isOpen />);
+  expect(await screen.findByTestId("nav-toggle-icon")).toHaveAttribute(
+    "d",
+    "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+  );
+});

components/Layout/Sidebar/NavToggle/__tests__/NavToggle.test.tsx

@@ -1,8 +1,14 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@test/test-utils";
+import userEvent from "@testing-library/user-event";
 import { axe } from "jest-axe";
 import Sidebar from "..";
 
 test("it should render with no violations", async () => {
   const { container } = render(<Sidebar />);
   expect(await axe(container)).toHaveNoViolations();
 });
+
+test("clicking the nav should toggle", async () => {
+  render(<Sidebar />);
+  userEvent.click(await screen.findByRole("button", { name: /menu/i }));
+});

components/Layout/Sidebar/__tests__/Sidebar.test.tsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import Layout from "..";
+
+test("it should render with no violations", async () => {
+  const { container } = render(<Layout />);
+  expect(await axe(container)).toHaveNoViolations();
+});

components/Layout/__tests__/Layout.test.tsx

@@ -1,28 +1,25 @@
 module.exports = {
+  testEnvironment: "jsdom",
   collectCoverageFrom: [
     "**/*.{js,jsx,ts,tsx}",
     "!**/*.d.ts",
     "!**/node_modules/**",
+    "!**/.next/**/*",
+    "!**/coverage/**/*",
+    "!*.config.js",
+    "!components/**/index.ts",
   ],
   moduleNameMapper: {
-    /* Handle CSS imports (with CSS modules)
-    https://jestjs.io/docs/webpack#mocking-css-modules */
     "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
-
-    // Handle CSS imports (without CSS modules)
-    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
-
-    /* Handle image imports
-    https://jestjs.io/docs/webpack#handling-static-assets */
     "^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$":
       "<rootDir>/__mocks__/fileMock.js",
+    "next/link": require.resolve("./__mocks__/Link.tsx"),
+    "^@test(/.*)$": "<rootDir>/test$1",
   },
   setupFilesAfterEnv: ["./jest.setup.ts"],
   testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
   testEnvironment: "jsdom",
   transform: {
-    /* Use babel-jest to transpile tests with the next/babel preset
-    https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */
     "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
   },
   transformIgnorePatterns: [

jest.config.js

@@ -5,8 +5,7 @@
       "blog": "blog"
     },
     "toggle": {
-      "label": "Mobile Navigation Menu",
-      "srLabel": "Menu"
+      "label": "Menu"
     }
   }
 }