Add unit test to Header component and create CI workflow

.github/workflows/continuous-integration.yml

@@ -0,0 +1,43 @@
+name: "[CI] Continuous Integration"
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Repository Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: v18.x
+      - name: Install Dependencies
+        working-directory: ./web
+        run: yarn install
+      - name: Lint
+        working-directory: ./web
+        run: yarn lint
+      - name: Lint Fix
+        working-directory: ./web
+        run: yarn lint:fix
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Repository Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: v18.x
+      - name: Install Dependencies
+        working-directory: ./web
+        run: yarn install
+      - name: Test - Jest
+        working-directory: ./web
+        run: yarn test

web/.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  plugins: ["react", "prettier", "jest"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:jest/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:prettier/recommended",
+  ],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  ignorePatterns: ["node_modules/"],
+  rules: {
+    "no-console": "error",
+    "react/no-unknown-property": ["error", { ignore: ["jsx", "global"] }],
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/prefer-to-have-length": "warn",
+    "jest/valid-expect": "error",
+    "prettier/prettier": 0,
+  },
+};

web/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "editorconfig": true
+}

web/jest.config.mjs

@@ -0,0 +1,19 @@
+// jest.config.mjs
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const config = {
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+
+  testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config);

web/next.config.js

@@ -4,14 +4,14 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'www.datocms-assets.com',
+        protocol: "https",
+        hostname: "www.datocms-assets.com",
       },
     ],
   },
   experimental: {
-    scrollRestoration: true
-  }
-}
+    scrollRestoration: true,
+  },
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

web/package.json

@@ -6,13 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "yarn lint -- --fix",
+    "test:watch": "jest --watchAll",
+    "test": "jest"
   },
   "dependencies": {
     "@vercel/analytics": "^1.0.0",
     "@vercel/og": "^0.5.1",
-    "eslint": "8.36.0",
-    "eslint-config-next": "13.2.4",
     "graphql": "^16.6.0",
     "graphql-request": "^5.2.0",
     "next": "13.2.4",
@@ -23,9 +24,24 @@
     "yet-another-react-lightbox": "^3.2.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "autoprefixer": "^10.4.14",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.21",
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.2.7"
   }
 }

web/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

web/prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+};

web/src/components/Header/Header.test.js

@@ -0,0 +1,70 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Header } from ".";
+import { Hamburguer } from "../icons/Hamburger";
+import { Logo } from "../icons/Logo";
+import { Xmark } from "../icons/Xmark";
+
+describe("Header component", () => {
+  it("should render a h1 title", () => {
+    render(<Header />);
+
+    const header1 = screen.getByText("Studio Amanda Borges");
+    expect(header1).toHaveClass("sr-only");
+    expect(header1).toBeInTheDocument();
+  });
+
+  it("should render a link to the Home page", () => {
+    render(<Header />);
+
+    const homeLink = screen.getByLabelText("Navegar para a página Home");
+    expect(homeLink).toHaveAttribute("href", "/");
+    expect(homeLink).toBeInTheDocument();
+  });
+
+  it("should render a logo svg", () => {
+    const { container } = render(<Logo />);
+
+    const logoElement = container.querySelector("svg");
+    expect(logoElement).toHaveAttribute("name", "logo");
+    expect(logoElement).toBeVisible();
+    expect(logoElement).toBeInTheDocument();
+  });
+
+  it("should render a button with a X mark icon or Hamburger icon", async () => {
+    const user = userEvent.setup();
+
+    render(<Header />);
+
+    const navMenuButton = screen.getByRole("button");
+    expect(navMenuButton).toHaveAttribute("name", "menu-button");
+    expect(navMenuButton).toHaveAttribute("type", "button");
+    expect(navMenuButton).toBeInTheDocument();
+
+    await user.click(navMenuButton);
+
+    const { container: hamburger } = render(<Hamburguer />);
+    const hamburgerElement = hamburger.querySelector("svg");
+    expect(hamburgerElement).toHaveAttribute("name", "hamburger");
+    expect(hamburgerElement).toBeVisible();
+
+    await user.click(navMenuButton);
+
+    const { container: xMark } = render(<Xmark />);
+    const xMarkElement = xMark.querySelector("svg");
+    expect(xMarkElement).toHaveAttribute("name", "x-mark");
+    expect(xMarkElement).toBeVisible();
+  });
+
+  it("should render 4 links with their correctly styles", () => {
+    render(<Header />);
+
+    const links = screen.getAllByRole("link");
+
+    links.forEach((link) => {
+      expect(link).toHaveAttribute("href");
+      expect(link).toBeInTheDocument();
+    });
+  });
+});

web/src/components/Header/index.jsx

@@ -0,0 +1,81 @@
+/* eslint-disable react/prop-types */
+import Link from "next/link";
+
+import { Hamburguer } from "@/components/icons/Hamburger";
+import { Logo } from "@/components/icons/Logo";
+import { Xmark } from "@/components/icons/Xmark";
+
+export function Header({ navMenuIsOpened, handleNavMenuChange }) {
+  return (
+    <header className="bg-pink">
+      <div
+        className={
+          navMenuIsOpened
+            ? "container mx-auto pb-6 lg:flex lg:items-center lg:justify-between lg:p-0"
+            : "container mx-auto lg:flex lg:items-center lg:justify-between lg:p-0"
+        }
+      >
+        <div className="flex items-center justify-between pr-6 text-white-white1 lg:flex-none lg:p-0">
+          <h1 className="sr-only">Studio Amanda Borges</h1>
+
+          <Link href="/" aria-label="Navegar para a página Home">
+            <Logo className="w-[150px]" />
+          </Link>
+
+          <button
+            type="button"
+            className="lg:hidden"
+            name="menu-button"
+            aria-label={`${
+              navMenuIsOpened ? "Botão contendo a letra X" : "Botão hambúrguer"
+            }`}
+            onClick={handleNavMenuChange}
+          >
+            {navMenuIsOpened ? (
+              <Xmark className="w-12" aria-expanded="true" />
+            ) : (
+              <Hamburguer className="w-12" aria-expanded="false" />
+            )}
+          </button>
+        </div>
+
+        <nav className={navMenuIsOpened ? "block" : "hidden lg:block"}>
+          <ul className="text-white-white1 lg:flex lg:px-6 lg:py-5">
+            <li className="text-lg font-bold">
+              <Link
+                href="/"
+                className="flex h-12 items-center justify-center px-6 duration-100 hover:opacity-50 hover:transition-all lg:h-11 lg:hover:border-b lg:hover:opacity-100"
+              >
+                Home
+              </Link>
+            </li>
+            <li className="text-lg font-bold">
+              <a
+                href="#projetos"
+                className="flex h-12 items-center justify-center px-6 duration-100 hover:opacity-50 hover:transition-all lg:h-11 lg:hover:border-b lg:hover:opacity-100"
+              >
+                Projetos
+              </a>
+            </li>
+            <li className="text-lg font-bold">
+              <a
+                href="#sobre"
+                className="flex h-12 items-center justify-center px-6 duration-100 hover:opacity-50 hover:transition-all lg:h-11 lg:hover:border-b lg:hover:opacity-100"
+              >
+                Sobre
+              </a>
+            </li>
+            <li className="text-lg font-bold">
+              <a
+                href="#contato"
+                className="flex h-12 items-center justify-center px-6 duration-100 hover:opacity-50 hover:transition-all lg:h-11 lg:hover:border-b lg:hover:opacity-100"
+              >
+                Contato
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

web/src/components/LightboxNextJsImage/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import Image from "next/image";
 import {
   isImageFitCover,

web/src/components/ProjectCard/index.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import Image from "next/image";
 import Link from "next/link";
 
@@ -17,15 +18,15 @@ export function ProjectCard({
         height={351}
         placeholder="blur"
         blurDataURL={imgUrl}
-        className="aspect-square rounded-[5px] object-center object-cover"
+        className="aspect-square rounded-[5px] object-cover object-center"
       />
 
-      <div className="flex flex-col items-start space-y-1 p-6 w-full bg-gradient-to-t from-gray-900 absolute bottom-0">
-        <h3 className="text-white-white1 text-xl font-bold break-all">
+      <div className="absolute bottom-0 flex w-full flex-col items-start space-y-1 bg-gradient-to-t from-gray-900 p-6">
+        <h3 className="break-all text-xl font-bold text-white-white1">
           {projectTitle}
         </h3>
 
-        <span className="text-white-white1 text-base">{projectYear}</span>
+        <span className="text-base text-white-white1">{projectYear}</span>
       </div>
     </Link>
   );

web/src/components/ScrollUpButton/index.jsx

@@ -24,7 +24,7 @@ export function ScrollUpButton() {
 
   return (
     <button
-      className={`rounded-full text-center p-3 bg-gray-200 hover:bg-gray-200/75 fixed bottom-5 right-4 text-black ${
+      className={`fixed bottom-5 right-4 rounded-full bg-gray-200 p-3 text-center text-black hover:bg-gray-200/75 ${
         visible ? "block" : "hidden"
       }`}
       onClick={() => scrollToTop()}

web/src/components/icons/Hamburger.jsx

@@ -4,6 +4,7 @@ export function Hamburguer(props) {
       viewBox="0 0 48 48"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      name="hamburger"
       {...props}
     >
       <path

web/src/components/icons/Logo.jsx

@@ -5,6 +5,7 @@ export function Logo(props) {
       x="0px"
       y="0px"
       viewBox="0 0 1500 1500"
+      name="logo"
       {...props}
     >
       <path

web/src/components/icons/Xmark.jsx

@@ -4,6 +4,7 @@ export function Xmark(props) {
       viewBox="0 0 48 48"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      name="x-mark"
       {...props}
     >
       <path