From 789ed64e884c8540d3ad91269924f6353b980868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20D=C4=9Bdi=C4=8D?= Date: Thu, 9 Jan 2025 15:38:45 +0100 Subject: [PATCH] Migrated App test to vitest --- .../{__tests__ => tests}/App.test.tsx | 42 +- .../__snapshots__/App.test.tsx.snap | 1429 ++++------------- 2 files changed, 384 insertions(+), 1087 deletions(-) rename packages/frontend/{__tests__ => tests}/App.test.tsx (73%) rename packages/frontend/{__tests__ => tests}/__snapshots__/App.test.tsx.snap (75%) diff --git a/packages/frontend/__tests__/App.test.tsx b/packages/frontend/tests/App.test.tsx similarity index 73% rename from packages/frontend/__tests__/App.test.tsx rename to packages/frontend/tests/App.test.tsx index 1d828ad00..2c8fa8878 100644 --- a/packages/frontend/__tests__/App.test.tsx +++ b/packages/frontend/tests/App.test.tsx @@ -1,95 +1,111 @@ import { render } from "@testing-library/react"; -import { mocked } from "jest-mock"; import { MemoryRouter } from "react-router-dom"; import * as swr from "swr"; +import { beforeAll, describe, expect, test, vi } from "vitest"; import { App } from "../src/App"; import { testData } from "./testData"; -jest.mock("swr"); +vi.mock("swr"); describe("App", () => { beforeAll(() => { - window.scrollTo = jest.fn(); + // eslint-disable-next-line @typescript-eslint/no-empty-function -- Function mock + vi.spyOn(window, "scrollTo").mockImplementation(() => {}); }); test("should render correctly", () => { - mocked(swr).default.mockReturnValue({ + expect.assertions(1); + + vi.mocked(swr).default.mockReturnValue({ data: testData, error: undefined, isLoading: false, isValidating: false, - mutate: jest.fn(), + mutate: vi.fn(), }); const { container } = render( , ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render projects correctly", () => { - mocked(swr).default.mockReturnValue({ + expect.assertions(1); + + vi.mocked(swr).default.mockReturnValue({ data: testData, error: undefined, isLoading: false, isValidating: false, - mutate: jest.fn(), + mutate: vi.fn(), }); const { container } = render( , ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render project listing correctly", () => { - mocked(swr).default.mockReturnValue({ + expect.assertions(1); + + vi.mocked(swr).default.mockReturnValue({ data: testData, error: undefined, isLoading: false, isValidating: false, - mutate: jest.fn(), + mutate: vi.fn(), }); const { container } = render( , ); + expect(container.firstChild).toMatchSnapshot(); }); test("should render issue listing correctly", () => { - mocked(swr).default.mockReturnValue({ + expect.assertions(1); + + vi.mocked(swr).default.mockReturnValue({ data: testData, error: undefined, isLoading: false, isValidating: false, - mutate: jest.fn(), + mutate: vi.fn(), }); const { container } = render( , ); + expect(container.firstChild).toMatchSnapshot(); }); test("should handle error gracefully", () => { - mocked(swr).default.mockReturnValue({ + expect.assertions(1); + + vi.mocked(swr).default.mockReturnValue({ data: undefined, error: true, isLoading: false, isValidating: false, - mutate: jest.fn(), + mutate: vi.fn(), }); const { container } = render( , ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap b/packages/frontend/tests/__snapshots__/App.test.tsx.snap similarity index 75% rename from packages/frontend/__tests__/__snapshots__/App.test.tsx.snap rename to packages/frontend/tests/__snapshots__/App.test.tsx.snap index ae48d5427..3496adae8 100644 --- a/packages/frontend/__tests__/__snapshots__/App.test.tsx.snap +++ b/packages/frontend/tests/__snapshots__/App.test.tsx.snap @@ -1,164 +1,29 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`App should handle error gracefully 1`] = ` +exports[`App > should handle error gracefully 1`] = `
Nepodařilo se načíst data webu.
`; -exports[`App should render correctly 1`] = ` -.emotion-0 { - max-width: 1000px; - padding: 0 16px; - margin: 0 auto; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 60px; - margin: 0 auto; - padding: 16px 0; -} - -.emotion-2 { - max-height: 100%; -} - -.emotion-3 { - font-family: themix; - font-size: 20px; - margin: 0 0 0 24px; -} - -.emotion-4 { - list-style: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-bottom: 24px; - padding: 0 16px; - border-bottom: 1px solid #294885; -} - -.emotion-5 { - display: block; - padding: 0.2em 0.8em; - margin-bottom: -1px; - border: 1px solid transparent; - border-radius: 5px 5px 0 0; -} - -.emotion-5.active { - border-top: 1px solid #294885; - border-right: 1px solid #294885; - border-left: 1px solid #294885; - background-color: #fff; -} - -.emotion-7 { - margin: 0 0 16px; - padding-bottom: 24px; - border-bottom: 1px solid #29488510; - max-width: 600px; -} - -.emotion-8 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-9 { - margin: 0 0 0.6em; -} - -.emotion-9 * { - font-size: 0.8rem; -} - -.emotion-10 { - margin: 0 0 16px; -} - -.emotion-10 img { - max-width: 100%; -} - -.emotion-11 { - background-color: #894cc033; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-12 { - background-color: #6d52b833; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-13 { - background-color: #8b843b33; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-14 { - background-color: #d293ff33; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-110 { - background-color: #6317e833; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - +exports[`App > should render correctly 1`] = `
logo

IT poptávky

@@ -168,17 +33,17 @@ exports[`App should render correctly 1`] = `
`; -exports[`App should render issue listing correctly 1`] = ` -.emotion-0 { - max-width: 1000px; - padding: 0 16px; - margin: 0 auto; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 60px; - margin: 0 auto; - padding: 16px 0; -} - -.emotion-2 { - max-height: 100%; -} - -.emotion-3 { - font-family: themix; - font-size: 20px; - margin: 0 0 0 24px; -} - -@media (min-width: 850px) { - .emotion-4 { - display: grid; - grid-template-columns: 1fr 300px; - -webkit-column-gap: 36px; - column-gap: 36px; - } -} - -.emotion-5 { - margin: 0 0 16px; - padding-bottom: 24px; - grid-column: 1/span 2; -} - -.emotion-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #999; - font-size: 0.8em; -} - -.emotion-6 svg { - margin-right: 0.2em; -} - -.emotion-7 { - color: #294885; - margin: 0 0 16px; - font-family: themix; - font-size: 2em; -} - -.emotion-8 { - color: #999; - font-weight: normal; -} - -.emotion-9 { - margin-top: -16px; -} - -.emotion-10 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-11 { - max-width: 750px; -} - -.emotion-12 { - margin: 0 0 16px; - font-size: 18px; - margin: 0; -} - -.emotion-12 img { - max-width: 100%; -} - -.emotion-14 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: inline-block; - font-size: 1.2rem; - background-color: #294885; - color: white; - margin-top: 0.2rem; - padding: 0.6rem 1.2rem; - border-radius: 10px; - box-shadow: 0 0 0 #999; - -webkit-transition: box-shadow 300ms; - transition: box-shadow 300ms; -} - -.emotion-15 { - margin: 0 0 16px; - padding-bottom: 24px; - max-width: 600px; - grid-column: 1/1; -} - -.emotion-16 { - color: white; - background-color: #294885; - margin-left: -10px; - margin-right: -10px; - padding: 20px; - border-radius: 10px; -} - -.emotion-16 * { - color: white; -} - -.emotion-16 *::selection { - background-color: white; - color: #294885; -} - -.emotion-18 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-19 { - margin: 0 0 16px; -} - -.emotion-19 img { - max-width: 100%; -} - -.emotion-21 { - background-color: #894cc033; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-22 { - background-color: #6d52b833; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-23 { - background-color: #8b843b33; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-24 { - background-color: #d293ff33; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-25 { - margin: 0 0 16px; - padding-bottom: 24px; - max-width: 500px; - grid-column: 2/2; -} - -@media (min-width: 850px) { - .emotion-25 { - border: none; - } -} - -.emotion-28 a { - display: block; - font-size: 0.9em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.emotion-54 { - margin: 0 0 16px; - padding-bottom: 24px; - max-width: 450px; - grid-column: 1/1; -} - -.emotion-56 { - margin: 12px 0 24px; -} - -.emotion-56 img { - max-width: 100%; -} - +exports[`App > should render issue listing correctly 1`] = `
logo

IT poptávky

@@ -1572,33 +1194,33 @@ exports[`App should render issue listing correctly 1`] = `
Poptávka:

Editing doesn't check path validity   # 3

When opening the editor which contains a gallery that is made from a folder that has been renamed or deleted, the editor breaks. It shows: @@ -1640,12 +1262,12 @@ exports[`App should render issue listing correctly 1`] = `

Zaujala tě poptávka?
Projekt:

Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu.

Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

wordpress php javascript google
Další poptávky projektu:
`; -exports[`App should render project listing correctly 1`] = ` -.emotion-0 { - max-width: 1000px; - padding: 0 16px; - margin: 0 auto; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 60px; - margin: 0 auto; - padding: 16px 0; -} - -.emotion-2 { - max-height: 100%; -} - -.emotion-3 { - font-family: themix; - font-size: 20px; - margin: 0 0 0 24px; -} - -@media (min-width: 850px) { - .emotion-4 { - display: grid; - grid-template-columns: 1fr 300px; - -webkit-column-gap: 36px; - column-gap: 36px; - } -} - -.emotion-5 { - margin: 0 0 16px; - padding-bottom: 24px; - grid-column: 1/span 2; -} - -.emotion-6 { - color: white; - background-color: #294885; - margin-left: -10px; - margin-right: -10px; - padding: 20px; - border-radius: 10px; -} - -.emotion-6 * { - color: white; -} - -.emotion-6 *::selection { - background-color: white; - color: #294885; -} - -.emotion-7 { - color: #294885; - margin: 0 0 16px; - font-family: themix; - font-size: 2em; - color: white; -} - -.emotion-8 { - max-width: 750px; -} - -.emotion-9 { - margin: 0 0 16px; - font-size: 18px; - margin: 0; -} - -.emotion-9 img { - max-width: 100%; -} - -.emotion-11 { - background-color: #894cc033; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-12 { - background-color: #6d52b833; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-13 { - background-color: #8b843b33; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-14 { - background-color: #d293ff33; - color: white; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; - border: 1px solid #ffffff55; -} - -.emotion-15 { - margin: 0 0 16px; - padding-bottom: 24px; - max-width: 500px; - grid-column: 2/2; -} - -.emotion-16 { - margin: 0 0 16px; -} - -.emotion-16 img { - max-width: 100%; -} - -.emotion-17 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #999; - font-size: 0.8em; -} - -.emotion-17 svg { - margin-right: 0.2em; -} - -.emotion-18 a { - display: block; - font-size: 0.9em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.emotion-19 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.emotion-44 { - margin: 0 0 16px; - padding-bottom: 24px; - grid-column: 1/1; - grid-row: 2/2; -} - -.emotion-46 { - margin: 12px 0 24px; -} - -.emotion-46 img { - max-width: 100%; -} - -.emotion-47 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-48 { - color: #999; - font-weight: normal; -} - +exports[`App > should render project listing correctly 1`] = `
logo

IT poptávky

@@ -2663,51 +2079,51 @@ exports[`App should render project listing correctly 1`] = `

WordPress plugin: Galerie obrázků a videí z Google Disku

Plugin pro WordPress, který ze složek s fotkami na Google Disku dělá galerie na webu.

Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

wordpress php javascript google @@ -2715,13 +2131,13 @@ exports[`App should render project listing correctly 1`] = `
Poptávky u projektu:
`; -exports[`App should render projects correctly 1`] = ` -.emotion-0 { - max-width: 1000px; - padding: 0 16px; - margin: 0 auto; -} - -.emotion-1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - height: 60px; - margin: 0 auto; - padding: 16px 0; -} - -.emotion-2 { - max-height: 100%; -} - -.emotion-3 { - font-family: themix; - font-size: 20px; - margin: 0 0 0 24px; -} - -.emotion-4 { - list-style: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-bottom: 24px; - padding: 0 16px; - border-bottom: 1px solid #294885; -} - -.emotion-5 { - display: block; - padding: 0.2em 0.8em; - margin-bottom: -1px; - border: 1px solid transparent; - border-radius: 5px 5px 0 0; -} - -.emotion-5.active { - border-top: 1px solid #294885; - border-right: 1px solid #294885; - border-left: 1px solid #294885; - background-color: #fff; -} - -.emotion-7 { - margin: 0 0 16px; - padding-bottom: 24px; - border-bottom: 1px solid #29488510; - max-width: 600px; -} - -.emotion-8 { - color: #294885; - margin: 0 0 12px; - font-family: themix; -} - -.emotion-9 { - margin: 0 0 0.6em; -} - -.emotion-9 * { - font-size: 0.8rem; -} - -.emotion-10 { - margin: 0 0 16px; -} - -.emotion-10 img { - max-width: 100%; -} - -.emotion-11 { - background-color: #894cc033; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-12 { - background-color: #6d52b833; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-13 { - background-color: #8b843b33; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-14 { - background-color: #d293ff33; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - -.emotion-22 { - background-color: #6317e833; - color: #444; - font-family: themix; - font-size: 0.8rem; - margin-right: 8px; - padding: 0.2rem 0.4rem; - border-radius: 4px; -} - +exports[`App > should render projects correctly 1`] = `
logo

IT poptávky

@@ -3633,17 +2914,17 @@ exports[`App should render projects correctly 1`] = `

Galerie obrázků a videí z Google Disku je plugin pro WordPress, který propojí web s Google Diskem. V pluginu se dá vybrat libovolná složku na Google Disku nebo ve Sdíleném disku a plugin z ní vytvoří galerii s obrázky a videi na libovolné stránce či příspěvku na webu. Ze všech složek a podsložek jsou navíc vytvořeny vnořené “podgalerie”. Plugin vzniknul primárně pro potřeby Junáka, oddílů a středisek, ale vyvíjíme ho tzv. Open-Source (otevřeně pro veřejnost) a nabízíme ho v oficiální databázi pluginů pro WordPress. V tuto chvíli (léto 2021) podle statistik WordPressu plugin běží na víc jak 4 000 webových stránek a z kontaktů s uživateli víme, že ho využívají jak oddíly a střediska v Junáku, tak i "náhodná veřejnost" - zvlášť oblíbený se zdá být u skautů z celého světa a profesionálních fotografů, prezentujících svoje fotky.

wordpress php javascript google