-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: add component tests for paper details card
- Loading branch information
1 parent
c52959f
commit 5ffeec4
Showing
7 changed files
with
379 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,4 +45,5 @@ Usage: | |
| rows="1" | ||
| {value} | ||
| readonly={!isEditable} | ||
| data-testid="toggleable-input" | ||
| ></textarea> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import ToggleableInput from "$lib/components/composites/input/ToggleableInput.svelte"; | ||
| import { render, screen } from "@testing-library/svelte"; | ||
| import { keyboard } from "@testing-library/user-event/dist/cjs/setup/directApi.js"; | ||
| import { describe, expect, test } from "vitest"; | ||
|
|
||
| describe("ToggleableInput", () => { | ||
| test("When isEditable is set to true, then input border is shown and content can be edited", async () => { | ||
| render(ToggleableInput, { | ||
| target: document.body, | ||
| props: { | ||
| isEditable: true, | ||
| value: "", | ||
| }, | ||
| }); | ||
|
|
||
| const input = screen.getByRole("textbox"); | ||
| expect(input).toBeInTheDocument(); | ||
|
|
||
| expect(input.classList.contains("border")).toBe(true); | ||
| expect(input.classList.contains("border-input")).toBe(true); | ||
| expect(input.classList.contains("rounded-md")).toBe(true); | ||
| expect(input.classList.contains("border-transparent")).toBe(false); | ||
|
|
||
| expect(input).not.toHaveAttribute("readonly"); | ||
|
|
||
| await keyboard("Test"); | ||
|
|
||
| expect(input).not.toHaveValue("Test"); | ||
| expect(input).toHaveValue(""); | ||
| }); | ||
|
|
||
| test("When isEditable is set to false, then input border is not shown and content cannot be edited", () => { | ||
| render(ToggleableInput, { | ||
| target: document.body, | ||
| props: { | ||
| isEditable: false, | ||
| }, | ||
| }); | ||
|
|
||
| const input = screen.getByRole("textbox"); | ||
| expect(input).toBeInTheDocument(); | ||
|
|
||
| expect(input.classList.contains("border")).toBe(true); | ||
| expect(input.classList.contains("border-input")).toBe(false); | ||
| expect(input.classList.contains("rounded-md")).toBe(false); | ||
| expect(input.classList.contains("border-transparent")).toBe(true); | ||
|
|
||
| expect(input).toHaveAttribute("readonly"); | ||
| }); | ||
| }); |
208 changes: 208 additions & 0 deletions
208
tests/integration/paper-components/paper-view/cards/paper-details-card.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,208 @@ | ||
| import PaperDetailsCard from "$lib/components/composites/paper-components/paper-view/cards/PaperDetailsCard.svelte"; | ||
| import { render, screen, waitFor } from "@testing-library/svelte"; | ||
| import { describe, expect, test } from "vitest"; | ||
| import { createPaper } from "../../../../model-builder"; | ||
| import { waitForComponentLoading } from "../../../test-helper"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import type { Paper } from "$lib/model/backend"; | ||
|
|
||
| describe("PaperDetailsCard", () => { | ||
| test("When props are provided, then component is shown", async () => { | ||
| render(PaperDetailsCard, { | ||
| target: document.body, | ||
| props: { | ||
| loadingPaper: Promise.resolve(createPaper()), | ||
| allowEditModeToggle: true, | ||
| startInEditMode: false, | ||
| showButtonBar: true, | ||
| }, | ||
| }); | ||
|
|
||
| await waitForComponentLoading(); | ||
|
|
||
| const card = screen.getByTestId("paper-details-card"); | ||
| expect(card).toBeInTheDocument(); | ||
|
|
||
| // edit mode can be toggled | ||
| const editButtons = document.getElementsByTagName("svg"); | ||
| let editButtonCount = 0; | ||
| for (const editButton of editButtons) { | ||
| if (!editButton.classList.contains("lucide-pencil")) { | ||
| continue; | ||
| } | ||
|
|
||
| expect(editButton).toBeInTheDocument(); | ||
| editButtonCount++; | ||
| } | ||
| expect(editButtonCount).toBe(2); | ||
|
|
||
| // paper details are in read-only mode | ||
| const toggleableInputs = screen.queryAllByTestId("toggleable-input"); | ||
| expect(toggleableInputs).toHaveLength(5); | ||
| for (const input of toggleableInputs) { | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveAttribute("readonly"); | ||
| } | ||
|
|
||
| // additional details are not shown by default | ||
| const showMoreButton = screen.queryByTestId("toggle-additional-infos-btn"); | ||
| expect(showMoreButton).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test("When show more information button is pressed, then additional details are shown", async () => { | ||
| const user = userEvent.setup(); | ||
| render(PaperDetailsCard, { | ||
| target: document.body, | ||
| props: { | ||
| loadingPaper: Promise.resolve(createPaper()), | ||
| allowEditModeToggle: true, | ||
| startInEditMode: false, | ||
| showButtonBar: true, | ||
| }, | ||
| }); | ||
|
|
||
| await waitForComponentLoading(); | ||
|
|
||
| const showMoreButton = screen.queryByTestId("toggle-additional-infos-btn"); | ||
| expect(showMoreButton).not.toBeNull(); | ||
| expect(showMoreButton).toBeInTheDocument(); | ||
|
|
||
| await user.click(showMoreButton!); | ||
|
|
||
| await waitFor(() => { | ||
| const paperDetails = screen.queryAllByTestId("paper-detail"); | ||
| expect(paperDetails).toHaveLength(7); | ||
| }); | ||
|
|
||
| expect(showMoreButton).toHaveTextContent("Show less information"); | ||
|
|
||
| await user.click(showMoreButton!); | ||
|
|
||
| await waitFor(() => { | ||
| const paperDetails = screen.queryAllByTestId("paper-detail"); | ||
| expect(paperDetails).toHaveLength(4); | ||
| }); | ||
|
|
||
| expect(showMoreButton).toHaveTextContent("Show more information"); | ||
| }); | ||
|
|
||
| test("When edit mode is toggled, then paper details are in edit mode", async () => { | ||
| const user = userEvent.setup(); | ||
| render(PaperDetailsCard, { | ||
| target: document.body, | ||
| props: { | ||
| loadingPaper: Promise.resolve(createPaper()), | ||
| allowEditModeToggle: true, | ||
| startInEditMode: false, | ||
| showButtonBar: true, | ||
| }, | ||
| }); | ||
|
|
||
| await waitForComponentLoading(); | ||
|
|
||
| const svgs = document.getElementsByTagName("svg"); | ||
| const editButtons: SVGSVGElement[] = []; | ||
| for (const svg of svgs) { | ||
| if (svg.classList.contains("lucide-pencil")) { | ||
| editButtons.push(svg); | ||
| } | ||
| } | ||
| expect(editButtons.length).toBe(2); | ||
|
|
||
| const generalInfoBtn = editButtons[0]; | ||
| const abstractBtn = editButtons[1]; | ||
|
|
||
| await user.click(generalInfoBtn); | ||
|
|
||
| await waitFor(() => { | ||
| const toggleableInputs = screen.queryAllByTestId("toggleable-input"); | ||
| expect(toggleableInputs).toHaveLength(5); | ||
| for (const input of toggleableInputs.slice(0, 4)) { | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).not.toHaveAttribute("readonly"); | ||
| } | ||
| expect(toggleableInputs[4]).toBeInTheDocument(); | ||
| expect(toggleableInputs[4]).toHaveAttribute("readonly"); | ||
| }); | ||
|
|
||
| await user.click(abstractBtn); | ||
|
|
||
| await waitFor(() => { | ||
| const toggleableInputs = screen.queryAllByTestId("toggleable-input"); | ||
| expect(toggleableInputs).toHaveLength(5); | ||
| for (const input of toggleableInputs) { | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).not.toHaveAttribute("readonly"); | ||
| } | ||
| }); | ||
|
|
||
| await user.click(generalInfoBtn); | ||
|
|
||
| await waitFor(() => { | ||
| const toggleableInputs = screen.queryAllByTestId("toggleable-input"); | ||
| expect(toggleableInputs).toHaveLength(5); | ||
| for (const input of toggleableInputs.slice(0, 4)) { | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveAttribute("readonly"); | ||
| } | ||
| expect(toggleableInputs[4]).toBeInTheDocument(); | ||
| expect(toggleableInputs[4]).not.toHaveAttribute("readonly"); | ||
| }); | ||
|
|
||
| await user.click(abstractBtn); | ||
|
|
||
| await waitFor(() => { | ||
| const toggleableInputs = screen.queryAllByTestId("toggleable-input"); | ||
| expect(toggleableInputs).toHaveLength(5); | ||
| for (const input of toggleableInputs) { | ||
| expect(input).toBeInTheDocument(); | ||
| expect(input).toHaveAttribute("readonly"); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| test("When editMode is not allowed, then edit buttons are not shown", async () => { | ||
| render(PaperDetailsCard, { | ||
| target: document.body, | ||
| props: { | ||
| loadingPaper: Promise.resolve(createPaper()), | ||
| allowEditModeToggle: false, | ||
| startInEditMode: false, | ||
| showButtonBar: true, | ||
| }, | ||
| }); | ||
|
|
||
| await waitForComponentLoading(); | ||
|
|
||
| const editButtons = document.getElementsByTagName("svg"); | ||
| let editButtonCount = 0; | ||
| for (const editButton of editButtons) { | ||
| if (!editButton.classList.contains("lucide-pencil")) { | ||
| continue; | ||
| } | ||
|
|
||
| expect(editButton).toBeInTheDocument(); | ||
| editButtonCount++; | ||
| } | ||
| expect(editButtonCount).toBe(0); | ||
| }); | ||
|
|
||
| test("When paper is loading, then skeletons are shown", async () => { | ||
| render(PaperDetailsCard, { | ||
| target: document.body, | ||
| props: { | ||
| loadingPaper: new Promise<Paper>((resolve) => { | ||
| setTimeout(() => { | ||
| resolve(createPaper()); | ||
| }, 1000); | ||
| }), | ||
| allowEditModeToggle: true, | ||
| startInEditMode: false, | ||
| showButtonBar: true, | ||
| }, | ||
| }); | ||
|
|
||
| const skeletons = screen.queryAllByTestId("skeleton"); | ||
| expect(skeletons).toHaveLength(11); | ||
| }); | ||
| }); |
Oops, something went wrong.