Merge pull request #46 from abolfazlcodes/stage

Stage

package.json

@@ -51,6 +51,7 @@
  "@types/react-dom": "^18",
  "@typescript-eslint/eslint-plugin": "^7.10.0",
  "@typescript-eslint/parser": "^7.10.0",
+ "@vitejs/plugin-react": "^4.3.0",
  "@vitest/coverage-istanbul": "^1.6.0",
  "@vitest/coverage-v8": "^1.6.0",
  "@vitest/ui": "^1.6.0",

setup.ts

@@ -1,6 +1,11 @@
-import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach } from "vitest";
+
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+
+expect.extend(matchers);
+
 // mock window matchMedia
 // Object.defineProperty(window, "matchMedia", {
 // writable: true,
@@ -33,3 +38,11 @@ afterEach(() => {
 // },
 // }));
 // });
+
+beforeEach(() => {
+ vi.mock("next/font/google", () => ({
+ Fira_Code: () => ({ className: "" }),
+ Alexandria: () => ({ className: "" }),
+ Ubuntu: () => ({ className: "" }),
+ }));
+});

src/components/__tests__/Header.test.tsx

@@ -0,0 +1,26 @@
+import { render } from "../../../utilities";
+import { screen } from "@testing-library/react";
+import Header from "../ui/Header";
+
+describe("Header Component Tests Suite", () => {
+ it("should render the header component", () => {
+ render(<Header title="Work" />);
+ });
+
+ it("should render the header component with the corresponding title", () => {
+ render(<Header title="Work" />);
+
+ const titleElement = screen.getByTestId("header-text");
+ expect(titleElement).toBeInTheDocument();
+ expect(titleElement).toHaveTextContent(/work/i);
+ });
+
+ it("should render the link if there is a href and linkText props", () => {
+ render(<Header title="Work" href="/work" linkText="see work" />);
+
+ const linkElement = screen.getByRole("link", { name: /see work/i });
+
+ expect(linkElement).toBeInTheDocument();
+ expect(linkElement).toHaveAttribute("href", "/work");
+ });
+});

src/components/__tests__/Section.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "../../../utilities";
+import Section from "../ui/Section";
+import { screen } from "@testing-library/react";
+
+describe("Section Component Test Suite", () => {
+ it("should render the section component", () => {
+ render(
+ <Section>
+ <span>section child</span>
+ </Section>,
+ );
+ });
+
+ it("should render the section component with Ellipsis if hasEllipse props is true and type of primary", () => {
+ render(
+ <Section type="primary" hasEllipse>
+ <span>section child</span>
+ </Section>,
+ );
+
+ const sectionElement = screen.getByTestId("section-component");
+
+ expect(sectionElement).toBeInTheDocument();
+ expect(sectionElement).toHaveClass("ellipse");
+ });
+
+ it("should render the section component without Ellipsis if hasEllipse props is false and type of primary", () => {
+ render(
+ <Section type="primary">
+ <span>section child</span>
+ </Section>,
+ );
+
+ const sectionElement = screen.getByTestId("section-component");
+
+ expect(sectionElement).toBeInTheDocument();
+ expect(sectionElement).not.toHaveClass("ellipse");
+ });
+});

src/components/ui/Header.tsx

@@ -25,7 +25,9 @@ const Header: React.FC<IHeaderProps> = ({ title, linkText, href }) => {
  <div
  className={`${firaCode.className} text-body1 font-bold capitalize leading-4 text-primary md:text-title3`}
  >
- <h2 className="tracking-wide">{title}</h2>
+ <h2 className="tracking-wide" data-testid="header-text">
+ {title}
+ </h2>
  <span className="relative inline-block w-full border border-primary bg-primary before:absolute before:-left-1 before:-top-[4px] before:h-2 before:w-2 before:rounded-full before:bg-primary after:absolute after:-right-1 after:-top-[4px] after:h-2 after:w-2 after:rounded-full after:bg-primary md:border-2 md:before:-top-[6px] md:before:h-3 md:before:w-3 md:after:-top-[6px] md:after:h-3 md:after:w-3"></span>
  </div>
 

src/components/ui/Section.tsx

@@ -17,6 +17,7 @@ const Section: React.FC<ISectionProps> = ({
  return (
  <section
  className={`${hasEllipse ? "ellipse" : ""} relative mt-8 px-4 md:mt-24 md:px-0 ${className}`}
+ data-testid="section-component"
  >
  {children}
  </section>
@@ -26,6 +27,7 @@ const Section: React.FC<ISectionProps> = ({
  if (type === "common") {
  return (
  <section
+ data-testid="section-component"
  className={`mt-11 space-y-4 px-4 md:mt-20 md:space-y-10 md:p-0 ${className}`}
  >
  {children}

tsconfig.json

@@ -1,16 +1,18 @@
 {
  "compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
- "allowJs": true,
+ "target": "ES2021",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
  "skipLibCheck": true,
  "strict": true,
  "noEmit": true,
  "esModuleInterop": true,
  "module": "esnext",
- "moduleResolution": "bundler",
+ "moduleResolution": "Node",
  "resolveJsonModule": true,
  "isolatedModules": true,
- "jsx": "preserve",
+ "jsx": "react-jsx",
  "incremental": true,
  "plugins": [
  {
@@ -19,10 +21,14 @@
  ],
  "paths": {
  "@/*": ["./src/*"],
- "@/public*": ["./public/*"]
+ "@/public*": ["./public/*"],
+ "$lib/*": ["./src/lib/*"],
+ "$components/*": ["./src/components/*"],
+ "test/*": ["./test/*"]
  },
  "types": ["vitest", "jsdom", "node", "@testing-library/jest-dom"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
+ "exclude": ["node_modules"],
+ "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}

utilities.ts

@@ -0,0 +1,16 @@
+// import type { ReactElement } from 'react';
+
+import userEvent from "@testing-library/user-event";
+import { ReactElement } from "react";
+import { render as renderComponent } from "@testing-library/react";
+
+export * from "@testing-library/react";
+
+type TRenderOptionProps = Parameters<typeof renderComponent>[1];
+
+export const render = (ui: ReactElement, option?: TRenderOptionProps) => {
+ return {
+ ...renderComponent(ui, option),
+ user: userEvent.setup(),
+ };
+};

vitest.config.ts

@@ -2,32 +2,51 @@
 /// <reference types="vitest/globals" />
 
 import { defineConfig } from "vitest/config";
+import path from "node:path";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+ plugins: [react()],
  test: {
- environment: "jsdom",
- setupFiles: "./setup.ts",
  globals: true,
+ alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
+ setupFiles: path.resolve(__dirname, "setup.ts"),
+ environmentMatchGlobs: [["**/*.test.tsx", "jsdom"]],
  reporters: "verbose",
- isolate: true,
  coverage: {
  provider: "v8",
- include: [
- // 'pages/**/*',
- "src/constants/**/*",
- "src/ui/**/*",
- // "src/layouts/**/*",
- // "src/features/**/*",
- ],
- reporter: ["text", "json", "html", "clover"],
- all: true,
  thresholds: {
- lines: 80,
- branches: 80,
- functions: 80,
- statements: 80,
+ lines: 90,
+ branches: 90,
+ functions: 90,
+ statements: 90,
  },
+ include: ["src/**/*"],
+ exclude: [
+ "test/**",
+ "**/*.d.ts",
+ "**/*.test.*",
+ "**/*.config.*",
+ "**/snapshot-tests/**",
+ "**/*.solution.tsx",
+ "**/coverage/**",
+ ],
+ all: true,
  },
+ // reporters: "verbose",
+ // isolate: true,
+ // coverage: {
+ // provider: "v8",
+ // include: ["src/**/*"],
+ // reporter: ["text", "json", "html", "clover"],
+ // all: true,
+ // thresholds: {
+ // lines: 80,
+ // branches: 80,
+ // functions: 80,
+ // statements: 80,
+ // },
+ // },
  },
 });