test: legg til test for tag komponent

packages/jokul/src/components/tag/Tag.test.tsx

@@ -1,23 +1,35 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import UserEventModule from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
 import React from "react";
-import { describe, expect, it, vi } from "vitest";
-import { Tag } from "./Tag.js";
-
-// https://github.com/testing-library/user-event/issues/1146
-// @ts-ignore typecheck liker ikke at default muligens ikke finnes
-const userEvent = UserEventModule.default ?? UserEventModule;
+import { Tag, SuccessTag, ErrorTag, WarningTag, InfoTag } from "./Tag.js";
 
 describe("Tag", () => {
-    it("handles clicking the dismiss button", async () => {
-        const dismissed = vi.fn();
-        render(<Tag dismissAction={{ label: "Fjern", onClick: dismissed }} />);
+    it("skal rendre en standard tag", () => {
+        render(<Tag>Standard Tag</Tag>);
+        expect(screen.getByText("Standard Tag")).toBeInTheDocument();
+        expect(screen.getByText("Standard Tag")).toHaveClass("jkl-tag");
+    });
+
+    it("skal rendre en info tag", () => {
+        render(<InfoTag>Info Tag</InfoTag>);
+        expect(screen.getByText("Info Tag")).toBeInTheDocument();
+        expect(screen.getByText("Info Tag")).toHaveClass("jkl-tag--info");
+    });
 
-        const button = screen.getByRole("button");
-        userEvent.click(button);
+    it("skal rendre en error tag", () => {
+        render(<ErrorTag>Error Tag</ErrorTag>);
+        expect(screen.getByText("Error Tag")).toBeInTheDocument();
+        expect(screen.getByText("Error Tag")).toHaveClass("jkl-tag--error");
+    });
+
+    it("skal rendre en warning tag", () => {
+        render(<WarningTag>Warning Tag</WarningTag>);
+        expect(screen.getByText("Warning Tag")).toBeInTheDocument();
+        expect(screen.getByText("Warning Tag")).toHaveClass("jkl-tag--warning");
+    });
 
-        await waitFor(() => {
-            expect(dismissed).toHaveBeenCalled();
-        });
+    it("skal rendre en success tag", () => {
+        render(<SuccessTag>Success Tag</SuccessTag>);
+        expect(screen.getByText("Success Tag")).toBeInTheDocument();
+        expect(screen.getByText("Success Tag")).toHaveClass("jkl-tag--success");
     });
 });

packages/tag-react/src/Tag.test.tsx

@@ -1,18 +1,35 @@
-import { render, screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/react";
 import React from "react";
-import { Tag } from ".";
+import { Tag, SuccessTag, ErrorTag, WarningTag, InfoTag } from "./Tag";
 
 describe("Tag", () => {
-    it("handles clicking the dismiss button", async () => {
-        const dismissed = jest.fn();
-        render(<Tag dismissAction={{ label: "Fjern", onClick: dismissed }} />);
+    it("skal rendre en standard tag", () => {
+        render(<Tag>Standard Tag</Tag>);
+        expect(screen.getByText("Standard Tag")).toBeInTheDocument();
+        expect(screen.getByText("Standard Tag")).toHaveClass("jkl-tag");
+    });
+
+    it("skal rendre en info tag", () => {
+        render(<InfoTag>Info Tag</InfoTag>);
+        expect(screen.getByText("Info Tag")).toBeInTheDocument();
+        expect(screen.getByText("Info Tag")).toHaveClass("jkl-tag--info");
+    });
 
-        const button = screen.getByRole("button");
-        userEvent.click(button);
+    it("skal rendre en error tag", () => {
+        render(<ErrorTag>Error Tag</ErrorTag>);
+        expect(screen.getByText("Error Tag")).toBeInTheDocument();
+        expect(screen.getByText("Error Tag")).toHaveClass("jkl-tag--error");
+    });
+
+    it("skal rendre en warning tag", () => {
+        render(<WarningTag>Warning Tag</WarningTag>);
+        expect(screen.getByText("Warning Tag")).toBeInTheDocument();
+        expect(screen.getByText("Warning Tag")).toHaveClass("jkl-tag--warning");
+    });
 
-        await waitFor(() => {
-            expect(dismissed).toHaveBeenCalled();
-        });
+    it("skal rendre en success tag", () => {
+        render(<SuccessTag>Success Tag</SuccessTag>);
+        expect(screen.getByText("Success Tag")).toBeInTheDocument();
+        expect(screen.getByText("Success Tag")).toHaveClass("jkl-tag--success");
     });
 });