fix: rewrite tests for current version of the widget

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/e2e/SkipLink.spec.ts

@@ -50,6 +50,7 @@
         "@mendix/prettier-config-web-widgets": "workspace:*",
         "@mendix/run-e2e": "workspace:*",
         "@mendix/widget-plugin-hooks": "workspace:*",
-        "@mendix/widget-plugin-platform": "workspace:*"
+        "@mendix/widget-plugin-platform": "workspace:*",
+        "@mendix/widget-plugin-test-utils": "workspace:*"
     }
 }

packages/pluggableWidgets/skiplink-web/e2e/package.json

@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { SkipLinkContainerProps } from "../../typings/SkipLinkProps";
+import { SkipLink } from "../SkipLink";
+
+describe("SkipLink", () => {
+    let defaultProps: SkipLinkContainerProps;
+    let rootElement: HTMLElement;
+
+    beforeEach(() => {
+        // Set up the DOM structure that SkipLink expects
+        document.body.innerHTML = "";
+        rootElement = document.createElement("div");
+        rootElement.id = "root";
+        document.body.appendChild(rootElement);
+
+        defaultProps = {
+            name: "SkipLink1",
+            class: "mx-skiplink",
+            style: {},
+            linkText: "Skip to main content",
+            mainContentId: "main-content"
+        };
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+
+    it("renders skiplink widget and adds skip link to DOM", () => {
+        render(<SkipLink {...defaultProps} />);
+        
+        // Check that the skip link was added to the root element
+        const skipLink = rootElement.querySelector(".skip-link") as HTMLAnchorElement;
+        expect(skipLink).toBeInTheDocument();
+        expect(skipLink.textContent).toBe("Skip to main content");
+        expect(skipLink.href).toBe(`${window.location.origin}/#main-content`);
+        expect(skipLink.tabIndex).toBe(0);
+        
+        // Snapshot the actual root element that contains the skip link
+        expect(rootElement).toMatchSnapshot();
+    });
+
+    it("renders with custom link text", () => {
+        render(<SkipLink {...defaultProps} linkText="Jump to content" />);
+        
+        const skipLink = rootElement.querySelector(".skip-link") as HTMLAnchorElement;
+        expect(skipLink).toBeInTheDocument();
+        expect(skipLink.textContent).toBe("Jump to content");
+        
+        expect(rootElement).toMatchSnapshot();
+    });
+
+    it("renders with custom main content id", () => {
+        render(<SkipLink {...defaultProps} mainContentId="content-area" />);
+        
+        const skipLink = rootElement.querySelector(".skip-link") as HTMLAnchorElement;
+        expect(skipLink).toBeInTheDocument();
+        expect(skipLink.href).toBe(`${window.location.origin}/#content-area`);
+        
+        expect(rootElement).toMatchSnapshot();
+    });
+
+    it("renders with empty main content id", () => {
+        render(<SkipLink {...defaultProps} mainContentId="" />);
+        
+        const skipLink = rootElement.querySelector(".skip-link") as HTMLAnchorElement;
+        expect(skipLink).toBeInTheDocument();
+        expect(skipLink.href).toBe(`${window.location.origin}/#`);
+        
+        expect(rootElement).toMatchSnapshot();
+    });
+
+    it("cleans up skip link when component unmounts", () => {
+        const { unmount } = render(<SkipLink {...defaultProps} />);
+        
+        // Verify skip link is present
+        expect(rootElement.querySelector(".skip-link")).toBeInTheDocument();
+        
+        // Unmount and verify cleanup
+        unmount();
+        expect(rootElement.querySelector(".skip-link")).not.toBeInTheDocument();
+    });
+});

packages/pluggableWidgets/skiplink-web/package.json

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SkipLink renders skiplink widget and adds skip link to DOM 1`] = `
+<div
+  id="root"
+>
+  <a
+    class="skip-link"
+    href="#main-content"
+    tabindex="0"
+  >
+    Skip to main content
+  </a>
+</div>
+`;
+
+exports[`SkipLink renders with custom link text 1`] = `
+<div
+  id="root"
+>
+  <a
+    class="skip-link"
+    href="#main-content"
+    tabindex="0"
+  >
+    Jump to content
+  </a>
+</div>
+`;
+
+exports[`SkipLink renders with custom main content id 1`] = `
+<div
+  id="root"
+>
+  <a
+    class="skip-link"
+    href="#content-area"
+    tabindex="0"
+  >
+    Skip to main content
+  </a>
+</div>
+`;
+
+exports[`SkipLink renders with empty main content id 1`] = `
+<div
+  id="root"
+>
+  <a
+    class="skip-link"
+    href="#"
+    tabindex="0"
+  >
+    Skip to main content
+  </a>
+</div>
+`;