tests: Базовые e2e и unit тесты

.github/workflows/build.yaml

@@ -0,0 +1,24 @@
+name: Build
+run-name: ${{ github.actor }} is testing out Next building 🚀
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  building:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Starting Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install --force
+      - name: Build
+        run: npm run build

.github/workflows/lint.yml

@@ -0,0 +1,24 @@
+name: Lint
+run-name: ${{ github.actor }} is testing out Eslint ⚡
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+jobs:
+  linting:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Starting Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm install --force
+      - name: Lint
+        run: npm run lint

.husky/pre-commit

@@ -1,4 +1,3 @@
-git add .
-pnpm test
+pnpm unit
 pnpm fix
 pnpm build

app/(main)/components/found-сards.tsx

@@ -26,9 +26,10 @@ export default function FoundCards({ query }: { query: string | null }) {
 
   return (
     <div
+      data-testid="Search: found"
       className={clsx(
         styles["found-container"],
-        query ? "full:h-[446px] compact:h-[275px] mt-2.5" : "h-0 mt-0",
+        query ? styles["found-open"] : styles["found-close"],
       )}
     >
       Результаты поиска

app/(main)/components/header.module.scss

@@ -53,9 +53,20 @@
 
 .found-container {
   @apply w-full flex flex-col gap-2.5 box-border overflow-hidden text-2xl;
-  transition-duration: 500ms;
+  transition-duration: 300ms;
 }
 
 .found-anime {
   @apply flex justify-between gap-5 flex-nowrap;
-}
+}
+
+.found-open {
+  @apply full:h-[446px] mt-2.5;
+  @media (width >= 1000px) {
+    height: calc(20vw * 1.388888888 + 10px + 20px + 29px);
+  }
+}
+
+.found-close {
+  @apply h-0 mt-0;
+}

app/(main)/components/header.tsx

@@ -38,6 +38,7 @@ export default function Header() {
             )}
           />
           <input
+            data-testid="Search: input"
             type="text"
             placeholder={focus ? "" : "Найти..."}
             className={styles["search-input"]}

app/(main)/home/page.tsx

@@ -1,23 +1,25 @@
 "use server";
 
-import Banners from "@/app/ui/banners/banners";
 import getRecomended from "@/app/libs/user/getRecomended";
 import Carousel from "@/app/ui/carousel/carousel";
+import BannerShowing from "@/app/ui/banners/banners-showing";
+import getBanners from "@/app/libs/other/getBanners";
 import styles from "./home.module.scss";
 import Recomendations from "./components/recomendations";
 import NewsShow from "./components/news-show";
 
 export default async function Page() {
   const newsData = await getRecomended(); // потом сделаем отдельные запросы
   const trandData = await getRecomended();
+  const bannersData = await getBanners();
   return (
     <div className={styles.container}>
       <Recomendations /> {/* Потом сделаем проверку на авторизацию */}
       <div className="w-full flex flex-col gap-4 text-2xl">
         Сейчас в тренде
         <Carousel animeData={trandData} />
       </div>
-      <Banners />
+      <BannerShowing data={bannersData} />
       <div className="w-full flex flex-col gap-4 text-2xl">
         Новинки
         <NewsShow data={newsData} />

app/libs/anime/getAnimeData.ts

@@ -10,9 +10,9 @@ export default async function getAnimeData(id: number): Promise<AnimeData> {
     finishedOn: new Date("2023-09-23T00:00:00.000"),
     genre: "DRAMA",
     image_url:
-      "https://i.ibb.co/BHRrPJ8Y/bb3588279b31a01820543e196cbcf950e65e257d.jpg",
+      "https://i.ibb.co/7wQnztK/bb3588279b31a01820543e196cbcf950e65e257d-1.jpg",
     banner_url:
-      "https://i.ibb.co/YB47m8kb/2d66f78024e5da9e3dcfa55134644bdd90576ca4.png",
+      "https://i.ibb.co/KzWcM8Dv/2d66f78024e5da9e3dcfa55134644bdd90576ca4-1.png",
     average_rating: 7.53,
     type: "ТВ сериал",
     total_episodes: 24,

app/libs/anime/getRelated.ts

@@ -5,7 +5,7 @@ export default async function getSimilar(id: number) {
   console.log(id);
   try {
     const res = await axios.get<AnimeCardData[]>(
-      "http://localhost:3000/animeDetailsItems",
+      "http://localhost:3000/animeListItems",
     );
     return res.data;
   } catch (error) {

app/libs/anime/getSimilar.ts

@@ -5,7 +5,7 @@ export default async function getSimilar(id: number) {
   console.log(id);
   try {
     const res = await axios.get<AnimeCardData[]>(
-      "http://localhost:3000/animeDetailsItems",
+      "http://localhost:3000/animeListItems",
     );
     return res.data;
   } catch (error) {

app/libs/types/anime.ts

@@ -3,7 +3,7 @@ export type AnimeCardData = {
   genre: string;
   name: string;
   released_at: string;
-  id: number;
+  id: string;
 };
 
 export type AnimeData = {

app/ui/anime-card/__tests__/anime-card.test.tsx

@@ -0,0 +1,67 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
+import AnimeCard from "../anime-card";
+import CardSkeleton from "../card-skeleton";
+
+test("Проверка карточки аниме", () => {
+  render(
+    <AnimeCard
+      image_url="/empty_card.png"
+      genre="DRAMA"
+      id="anime-id"
+      name="Anime test Anime test Anime test Anime test Anime test Anime test Anime test"
+      released_at="2022-01-01T00:00:00.000"
+    />,
+  );
+
+  const card = screen.getByTestId("AnimeCard: anime-card");
+
+  // Тест градиента
+  const darkness = screen.getByTestId("AnimeCard: darkness");
+  expect(darkness).toHaveStyle("opacity: 30%;");
+  userEvent.hover(card);
+  expect(darkness).toHaveStyle("opacity: 100%;");
+
+  // Тест названия
+  const title = screen.getByTestId("AnimeCard: title");
+  expect(title).toBeVisible();
+
+  // Тест описания
+  const description = screen.getByTestId("AnimeCard: year&genre");
+  expect(description.textContent).toBe("2022Драма");
+});
+
+test("Проверка кнопки в карточки аниме", () => {
+  render(
+    <AnimeCard
+      image_url="/empty_card.png"
+      genre="DRAMA"
+      id="anime-id"
+      name="Anime test Anime test Anime test Anime test Anime test Anime test Anime test"
+      released_at="2022-01-01T00:00:00.000"
+      addToFavourite={() => {}}
+    />,
+  );
+
+  const card = screen.getByTestId("AnimeCard: anime-card");
+
+  // Проверяю появляется ли кнопка при ховере
+  const button = screen.getByTestId("AnimeCard: favourite");
+  expect(button).toHaveStyle("opacity: 0%;");
+  userEvent.hover(card);
+  expect(button).toHaveStyle("opacity: 100%;");
+});
+
+test("Проверка скелетона карточки", () => {
+  render(<CardSkeleton />);
+
+  const card = screen.getByTestId("AnimeSkeleton: container");
+  const bg = screen.getByTestId("AnimeSkeleton: bg");
+  const text = screen.getAllByTestId("AnimeSkeleton: text");
+
+  expect(card).toHaveClass("shimmer", "pulsing");
+  expect(bg).toHaveClass("shimmer");
+  text.forEach((el) => {
+    expect(el).toHaveClass("shimmer");
+  });
+});

app/ui/anime-card/anime-card.tsx

@@ -21,7 +21,7 @@ export default function AnimeCard({
   genre: string;
   name: string;
   released_at: string;
-  id: number;
+  id: string;
   classes?: string;
   style?: CSSProperties;
   addToFavourite?: () => void;
@@ -31,6 +31,7 @@ export default function AnimeCard({
       className={clsx(classes, styles.container)}
       style={style}
       href={`/anime/${id}`}
+      data-testid="AnimeCard: anime-card"
     >
       <Image
         src={image_url}
@@ -46,17 +47,28 @@ export default function AnimeCard({
         height={233}
         alt="anime image"
       />
-      <div className={styles.darkness} />
+      <div className={styles.darkness} data-testid="AnimeCard: darkness" />
       <div className={styles.text}>
-        <h1 className={clsx(styles.name, Display.className)}>{name}</h1>
-        <div className={styles["under-name"]}>
+        <h1
+          className={clsx(styles.name, Display.className)}
+          data-testid="AnimeCard: title"
+        >
+          {name}
+        </h1>
+        <div
+          className={styles["under-name"]}
+          data-testid="AnimeCard: year&genre"
+        >
           {new Date(released_at).getFullYear()}
           <div className={styles.line} />
           {AnimeGenre[genre as keyof typeof AnimeGenre]}
         </div>
       </div>
       {addToFavourite && (
-        <button className={styles.addToFavourite}>
+        <button
+          className={styles.addToFavourite}
+          data-testid="AnimeCard: favourite"
+        >
           <FavouriteButton />
         </button>
       )}

app/ui/anime-card/card-skeleton.tsx

@@ -4,12 +4,19 @@ import styles from "./card-skeleton.module.scss";
 
 export default function CardSkeleton({ style }: { style?: CSSProperties }) {
   return (
-    <div style={style} className={clsx(styles.container, "shimmer pulsing")}>
+    <div
+      data-testid="AnimeSkeleton: container"
+      style={style}
+      className={clsx(styles.container, "shimmer pulsing")}
+    >
       <div className={styles.under}>
-        <span className={clsx(styles.upperspan, "shimmer")} />
+        <span
+          data-testid="AnimeSkeleton: bg"
+          className={clsx(styles.upperspan, "shimmer")}
+        />
         <div className={styles.undercontainer}>
-          <span className="shimmer" />
-          <span className="shimmer" />
+          <span data-testid="AnimeSkeleton: text" className="shimmer" />
+          <span data-testid="AnimeSkeleton: text" className="shimmer" />
         </div>
       </div>
     </div>