From e190053181a7fe8a20ad2bb9cacd0dc9251af5ec Mon Sep 17 00:00:00 2001 From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com> Date: Sun, 9 Jun 2024 03:28:55 +0200 Subject: [PATCH] Tests --- __tests__/Error/ErrorContent.test.tsx | 17 ----- __tests__/Layout/Layout.test.tsx | 66 ------------------- __tests__/Layout/MobileMenu-actions.test.tsx | 60 ----------------- __tests__/Layout/MobileMenu.test.tsx | 57 ---------------- __tests__/Layout/Navbar.test.tsx | 45 ------------- .../ProsjekterSingleProject.test.tsx | 37 ----------- .../Prosjekter/Prosjekterlistings.test.tsx | 40 ----------- __tests__/UI/Hamburger.test.tsx | 32 --------- package.json | 2 + pnpm-lock.yaml | 35 ++++++++++ 10 files changed, 37 insertions(+), 354 deletions(-) delete mode 100644 __tests__/Error/ErrorContent.test.tsx delete mode 100644 __tests__/Layout/Layout.test.tsx delete mode 100644 __tests__/Layout/MobileMenu-actions.test.tsx delete mode 100644 __tests__/Layout/MobileMenu.test.tsx delete mode 100644 __tests__/Layout/Navbar.test.tsx delete mode 100644 __tests__/Prosjekter/ProsjekterSingleProject.test.tsx delete mode 100644 __tests__/Prosjekter/Prosjekterlistings.test.tsx delete mode 100644 __tests__/UI/Hamburger.test.tsx diff --git a/__tests__/Error/ErrorContent.test.tsx b/__tests__/Error/ErrorContent.test.tsx deleted file mode 100644 index 7e803728..00000000 --- a/__tests__/Error/ErrorContent.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { render, screen } from "@testing-library/react"; - -import ErrorContent from "../../src/components/Error/ErrorContent.component"; - -jest.mock("react-dom"); - -describe("Error", () => { - it("ErrorContent laster inn og kan vises", () => { - render(); - const error = screen.getByRole("heading", { name: /side ikke funnet/i }); - expect(error).toBeInTheDocument(); - }); -}); diff --git a/__tests__/Layout/Layout.test.tsx b/__tests__/Layout/Layout.test.tsx deleted file mode 100644 index 43870125..00000000 --- a/__tests__/Layout/Layout.test.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { render, screen } from "@testing-library/react"; - -import Layout, { TTitle } from "../../src/components/Layout/Layout.component"; - -import linksmock from "../../__mocks__/links.json"; - -jest.mock("next/router", () => ({ - useRouter() { - return { - route: "/", - pathname: "", - query: "", - asPath: "" - }; - } -})); - -jest.mock("react-dom"); - -describe("Layout komponent", () => { - const title: TTitle = "Forside"; - - test("rendrer uten å krasje", () => { - render( - -
Test
- - ); - expect(screen.getByText("Test")).toBeInTheDocument(); - }); - - /* - test("rendrer Header med korrekte props", () => { - render( - -
Test
- - ); - - // Sjekk at hver lenke blir rendret - linksmock.forEach((link) => { - const linkElement = screen.queryByText(link.Text); - expect(linkElement).toBeInTheDocument(); - }); - }); -*/ - - test("rendrer barn", () => { - const testText = "Test barn"; - render( - - {testText} - - ); - expect(screen.getByText(testText)).toBeInTheDocument(); - }); - - test("rendrer Footer", () => { - render( - -
Test
- - ); - expect(screen.getByRole("contentinfo")).toBeInTheDocument(); - }); -}); diff --git a/__tests__/Layout/MobileMenu-actions.test.tsx b/__tests__/Layout/MobileMenu-actions.test.tsx deleted file mode 100644 index 72f441f9..00000000 --- a/__tests__/Layout/MobileMenu-actions.test.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import userEvent from "@testing-library/user-event"; -import { render, screen } from "@testing-library/react"; - -import MobileMenu from "../../src/components/Layout/MobileMenu.component"; - -import linksmock from "../../__mocks__/links.json"; - -describe("MobileMenu - test handlinger", () => { - const testidMenu = "mobile-menu"; - const user = userEvent.setup(); - beforeEach(() => { - render(); - }); - - it("Åpne mobilmeny og se at aria-hidden er false", async () => { - const mobilemenu = screen.getByTestId(testidMenu); - const hamburger = screen.getByRole("button", { - name: /hamburger/i - }); - - await user.click(hamburger); - expect(mobilemenu).toHaveAttribute("aria-hidden", "false"); - }); - - it("Lukk mobilmeny når vi klikker utenfor menyen", async () => { - const mobilemenu = screen.getByTestId(testidMenu); - const hamburger = screen.getByRole("button", { - name: /hamburger/i - }); - await user.click(hamburger); - await user.click(document.body); - expect(mobilemenu).toHaveAttribute("aria-hidden", "true"); - }); - - it("Hjem linken eksisterer i menyen", async () => { - const hamburger = screen.getByRole("button", { - name: /hamburger/i - }); - - await user.click(hamburger); - const hjem = screen.getByRole("link", { name: /hjem/i }); - - expect(hjem).toBeInTheDocument(); - }); - - it("Kontakt linken eksisterer i menyen", async () => { - const hamburger = screen.getByRole("button", { - name: /hamburger/i - }); - - await user.click(hamburger); - const kontakt = screen.getByRole("link", { name: /kontakt/i }); - - expect(kontakt).toBeInTheDocument(); - }); -}); diff --git a/__tests__/Layout/MobileMenu.test.tsx b/__tests__/Layout/MobileMenu.test.tsx deleted file mode 100644 index 1870242e..00000000 --- a/__tests__/Layout/MobileMenu.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { fireEvent, render, screen } from "@testing-library/react"; - -import MobileMenu from "../../src/components/Layout/MobileMenu.component"; - -import linksmock from "../../__mocks__/links.json"; - -describe("MobileMenu - elementer eksisterer", () => { - const testidMenu = "mobile-menu"; - - beforeEach(() => { - render(); - }); - - it("MobileMenu laster inn og kan vises", () => { - const mobilemenu = screen.getByTestId(testidMenu); - expect(mobilemenu).toBeInTheDocument(); - }); - - it("Ekspanderer hamburger meny", () => { - const hamburger = screen.getByTestId("hamburger"); - - expect(screen.getByRole("button", { name: /hamburger/i, expanded: false })).toBeInTheDocument(); - - fireEvent.click(hamburger); - - expect(screen.getByRole("button", { name: /hamburger/i, expanded: true })).toBeInTheDocument(); - - fireEvent.click(hamburger); - - expect(screen.getByRole("button", { name: /hamburger/i, expanded: false })).toBeInTheDocument(); - }); - - it("Viser riktig antall linker", () => { - const hamburger = screen.getByTestId("hamburger"); - - fireEvent.click(hamburger); - - const menuItems = screen.getAllByRole("link"); - - expect(menuItems.length).toBe(linksmock.length); - }); - - it("Åpner eksterne linker i ny fane", () => { - const hamburger = screen.getByTestId("hamburger"); - - fireEvent.click(hamburger); - - const externalLink = screen.getByRole("link", { name: /github/i }); - - expect(externalLink).toHaveAttribute("target", "_blank"); - expect(externalLink).toHaveAttribute("rel", "noreferrer"); - }); -}); diff --git a/__tests__/Layout/Navbar.test.tsx b/__tests__/Layout/Navbar.test.tsx deleted file mode 100644 index 31b729b9..00000000 --- a/__tests__/Layout/Navbar.test.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { render } from "@testing-library/react"; -import { useRouter } from "next/router"; -import Navbar from "../../src/components/Layout/Navbar.component"; - -jest.mock("next/router", () => ({ - useRouter: jest.fn() -})); - -jest.mock("react-dom"); - -const links = [ - { Text: "Home", Url: "/", id: 1, External: false }, - { Text: "About", Url: "/about", id: 2, External: false }, - { Text: "Blog", Url: "/blog", id: 3, External: false } -]; - -describe("Navbar", () => { - test("Legger til active class", () => { - useRouter.mockImplementation(() => ({ - pathname: "/about" - })); - - const { getByText } = render(); - - const activeLink = getByText("About"); - expect(activeLink).toHaveClass( - "hover:after:w-full after:transition-all after:bg-white after:bottom-[-0.45rem] after:block after:m-auto after:h-1 after:ease-in-out after:duration-500 inline-block text-xl text-white" - ); - }); - - test("Legger ikke til active class", () => { - useRouter.mockImplementation(() => ({ - pathname: "/about" - })); - - const { getByText } = render(); - - const nonActiveLink = getByText("Home"); - expect(nonActiveLink).not.toHaveClass("navbar-link-active"); - }); -}); diff --git a/__tests__/Prosjekter/ProsjekterSingleProject.test.tsx b/__tests__/Prosjekter/ProsjekterSingleProject.test.tsx deleted file mode 100644 index a2be437d..00000000 --- a/__tests__/Prosjekter/ProsjekterSingleProject.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { render, screen } from "@testing-library/react"; -import { mockIntersectionObserver } from "jsdom-testing-mocks"; - -import ProsjekterSingleProject from "../../src/components/Prosjekter/ProsjekterSingleProject.component"; - -import projects from "../../__mocks__/projects.json"; - -mockIntersectionObserver(); - -jest.mock("react-dom"); - -describe("ProsjekterSingleProject", () => { - beforeEach(() => { - render(); - }); - - it("ProsjekterSingleProject laster inn og kan vises", () => { - const prosjektersingleproject = screen.getByTestId("prosjektgrid"); - expect(prosjektersingleproject).toBeInTheDocument(); - }); - - it("Vi kan vise et enkelt prosjekt", () => { - const prosjektersingleproject = screen.getByTestId("projectdiv"); - expect(prosjektersingleproject).toBeInTheDocument(); - }); - - it("Vi kan vise bilde", async () => { - const bilde = await screen.findByRole("img", { - name: /statens vegvesen/i - }); - expect(bilde).toBeInTheDocument(); - }); -}); diff --git a/__tests__/Prosjekter/Prosjekterlistings.test.tsx b/__tests__/Prosjekter/Prosjekterlistings.test.tsx deleted file mode 100644 index 57215119..00000000 --- a/__tests__/Prosjekter/Prosjekterlistings.test.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import { render, screen } from "@testing-library/react"; -import userEvent from "@testing-library/user-event"; -import { mockIntersectionObserver } from "jsdom-testing-mocks"; - -import ProsjekterListings from "../../src/components/Prosjekter/ProsjekterListings.component"; - -import projects from "../../__mocks__/projects.json"; -import categories from "../../__mocks__/categories.json"; - -mockIntersectionObserver(); - -jest.mock("react-dom"); - -describe("ProsjekterListings", () => { - const user = userEvent.setup(); - beforeEach(() => { - render(); - }); - - it("ProsjekterListings laster inn og kan vises", () => { - const prosjekterlistings = screen.getByRole("main", { name: /innhold portefølje/i }); - expect(prosjekterlistings).toBeInTheDocument(); - }); - - it("Vi laster inn 5 kategorier i kategorifilter", () => { - const kategorifilter = screen.getByRole("combobox", { name: /kategorifilter/i }); - expect(kategorifilter.length).toBe(5); - }); - - it("Vi velger Typescript og tester at Typescript er valgt", async () => { - const kategorifilter = screen.getByRole("combobox", { name: /kategorifilter/i }); - const typescript = screen.getByRole("option", { name: "Typescript" }); - await user.selectOptions(kategorifilter, typescript); - expect(typescript.selected).toBe(true); - }); -}); diff --git a/__tests__/UI/Hamburger.test.tsx b/__tests__/UI/Hamburger.test.tsx deleted file mode 100644 index ce04a5bf..00000000 --- a/__tests__/UI/Hamburger.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/** - * @jest-environment jsdom - */ - -import userEvent from "@testing-library/user-event"; - -import { render, screen } from "@testing-library/react"; - -import Hamburger from "../../src/components/Layout/Hamburger.component"; - -describe("Hamburger", () => { - const onClick = jest.fn(); - const animatetoX = true; - const user = userEvent.setup(); - - beforeEach(() => { - render(); - }); - - it("Hamburger laster inn og kan vises", () => { - const hamburger = screen.getByRole("button", { name: /hamburger/i }); - expect(hamburger).toBeInTheDocument(); - }); - - it("Klikk på hamburger og test at aria-expanded endres på hamburger (hamburger animerer)", async () => { - const hamburger = screen.getByRole("button", { - name: /hamburger/i - }); - await user.click(hamburger); - expect(hamburger).toHaveAttribute("aria-expanded", "true"); - }); -}); diff --git a/package.json b/package.json index 308873b9..8002d4a0 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "sitemap": "^8.0.0" }, "devDependencies": { + "@testing-library/user-event": "^14.5.2", + "jsdom-testing-mocks": "^1.13.0", "@testing-library/jest-dom": "^6.4.5", "@testing-library/react": "^16.0.0", "@types/node": "^20.14.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c25e63d7..00a2f1f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ importers: '@testing-library/react': specifier: ^16.0.0 version: 16.0.0(@testing-library/dom@10.1.0)(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@testing-library/user-event': + specifier: ^14.5.2 + version: 14.5.2(@testing-library/dom@10.1.0) '@types/node': specifier: ^20.14.2 version: 20.14.2 @@ -78,6 +81,9 @@ importers: jest-environment-jsdom: specifier: ^29.7.0 version: 29.7.0 + jsdom-testing-mocks: + specifier: ^1.13.0 + version: 1.13.0 postcss: specifier: ^8.4.38 version: 8.4.38 @@ -1575,6 +1581,12 @@ packages: '@types/react-dom': optional: true + '@testing-library/user-event@14.5.2': + resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==} + engines: {node: '>=12', npm: '>=6'} + peerDependencies: + '@testing-library/dom': '>=7.21.4' + '@tootallnate/once@2.0.0': resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==} engines: {node: '>= 10'} @@ -1961,6 +1973,9 @@ packages: base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} + bezier-easing@2.1.0: + resolution: {integrity: sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==} + bidi-js@1.0.3: resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==} @@ -2243,6 +2258,9 @@ packages: css-in-js-utils@3.1.0: resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==} + css-mediaquery@0.1.2: + resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} + css-to-react-native@3.2.0: resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} @@ -3552,6 +3570,10 @@ packages: peerDependencies: jsdom: '>=10.0.0' + jsdom-testing-mocks@1.13.0: + resolution: {integrity: sha512-NALf9jUnvx3TF0HuHFcP6vjMmHZXqYMAB5GCmRd0heWvkIZyTx71ZdmSmTFfJopERaIIorU+Mbiue0YYd17Wkg==} + engines: {node: '>=14'} + jsdom@20.0.3: resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==} engines: {node: '>=14'} @@ -7203,6 +7225,10 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@testing-library/user-event@14.5.2(@testing-library/dom@10.1.0)': + dependencies: + '@testing-library/dom': 10.1.0 + '@tootallnate/once@2.0.0': {} '@types/aria-query@5.0.4': {} @@ -7671,6 +7697,8 @@ snapshots: base64-js@1.5.1: {} + bezier-easing@2.1.0: {} + bidi-js@1.0.3: dependencies: require-from-string: 2.0.2 @@ -7964,6 +7992,8 @@ snapshots: dependencies: hyphenate-style-name: 1.0.5 + css-mediaquery@0.1.2: {} + css-to-react-native@3.2.0: dependencies: camelize: 1.0.1 @@ -9671,6 +9701,11 @@ snapshots: dependencies: jsdom: 23.2.0 + jsdom-testing-mocks@1.13.0: + dependencies: + bezier-easing: 2.1.0 + css-mediaquery: 0.1.2 + jsdom@20.0.3: dependencies: abab: 2.0.6