@orangesk/orange-design-system 2.0.0-beta.34 → 2.0.0-beta.36

package/src/components/Skeleton/tests/{Skeleton.conformance.test.js → Skeleton.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Skeleton } from "../";
 

package/src/components/SkipLink/tests/{SkipLink.unit.test.js → SkipLink.unit.test.jsx}

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 import React from "react";
 import { render, screen } from "@testing-library/react";
@@ -76,7 +76,7 @@ describe("keyboard navigation", () => {
     expect(screen.getByTestId("skip-link")).toHaveFocus();
   });
 
-  it.failing("focuses main on click", async () => {
+  it.fails("focuses main on click", async () => {
     render(<TestBase />);
 
     const { tab, keyboard } = userEvent.setup();

package/src/components/SocialButton/tests/{SocialButton.unit.test.js → SocialButton.unit.test.jsx}

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment jsdom
  */
 
 import React from "react";
@@ -64,7 +64,7 @@ describe("rendering SocialButton", () => {
     });
 
     it("passes onClick handler", () => {
-      const onClick = jest.fn();
+      const onClick = vi.fn();
       const { getByRole } = render(<SocialButton name="x" onClick={onClick} />);
       getByRole("button").click();
       expect(onClick).toHaveBeenCalled();

package/src/components/Stepbar/tests/{Stepbar.conformance.test.js → Stepbar.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Stepbar } from "../";
 

package/src/components/Sticker/tests/{Sticker.conformance.test.js → Sticker.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { axe } from 'vitest-axe';
 
 import { Sticker } from '../';
 

package/src/components/Table/styles/mixins.scss

@@ -36,10 +36,6 @@
   font-weight: 400;
 }
 
-@mixin rows-first-cell {
-  padding-left: 0;
-}
-
 @mixin body-sibling {
   border-top: config.$fat-border-size solid var(--color-border-strong);
 }

package/src/components/Table/styles/style.scss

@@ -27,10 +27,6 @@
       @include mixins.body-header-cells;
     }
 
-    tr > *:first-of-type {
-      @include mixins.rows-first-cell;
-    }
-
     tbody + tbody {
       @include mixins.body-sibling;
     }

package/src/components/Table/tests/{Table.conformance.test.js → Table.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import "../../../../__mocks__/resizeObserverMock";
 import { Table } from "../";

package/src/components/Tabs/tests/{Tabs.unit.test.js → Tabs.unit.test.jsx}

@@ -181,7 +181,7 @@ describe("rendering Tabs", () => {
       tabs = screen.getAllByRole("tab");
     });
     beforeAll(() => {
-      window.document.getSelection = jest.fn();
+      window.document.getSelection = vi.fn();
     });
     it('"ArrowLeft" moves focus left and loops from first to last item', async () => {
       expect.assertions(3);

package/src/components/Tag/tests/{Tag.conformance.test.js → Tag.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { colors } from "../Tag";
 import { Tag, TagButton } from "..";

package/src/components/Tag/tests/{Tag.unit.test.js → Tag.unit.test.jsx}

@@ -58,7 +58,7 @@ describe("rendering", () => {
     describe("interactive functionality", () => {
       describe("onClick prop", () => {
         it("renders as button when onClick is provided", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -67,7 +67,7 @@ describe("rendering", () => {
         });
 
         it("calls onClick when clicked", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -76,7 +76,7 @@ describe("rendering", () => {
         });
 
         it("does not call onClick when disabled", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick} isDisabled>
               Disabled Clickable Tag
@@ -87,7 +87,7 @@ describe("rendering", () => {
         });
 
         it("has button type set to 'button'", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );

package/src/components/Tag/tests/{TagButton.conformance.test.js → TagButton.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { TagButton } from "../TagButton";
 

package/src/components/Tag/tests/{TagButton.unit.test.js → TagButton.unit.test.jsx}

@@ -1,3 +1,4 @@
+import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 
 import { TagButton } from "../TagButton";
@@ -61,7 +62,7 @@ describe("TagButton", () => {
 
   describe("interaction", () => {
     it("calls onClick when clicked", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton iconName="close" ariaLabel="Close" onClick={handleClick} />,
       );
@@ -71,7 +72,7 @@ describe("TagButton", () => {
     });
 
     it("does not call onClick when disabled", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton
           iconName="close"

package/src/components/Testimonial/tests/{Testimonial.conformance.test.js → Testimonial.conformance.test.jsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
+import { axe } from 'vitest-axe';
 
 import { Testimonial } from '../';
 

package/src/components/Tile/tests/{Tile.conformance.test.js → Tile.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Tile } from "../";
 

package/src/components/Tile/tests/{Tile.unit.test.js → Tile.unit.test.jsx}

@@ -60,8 +60,8 @@ describe("rendering Tile", () => {
           backgroundImage={{ src: "./test.png", alt: "test" }}
         />,
       );
-      expect(container.querySelector("img").src).toBe(
-        "http://localhost/test.png",
+      expect(new URL(container.querySelector("img").src).pathname).toBe(
+        "/test.png",
       );
     });
     it("background image has alt set to backgroundImage.alt", () => {

package/src/components/Tooltip/tests/{Tooltip.conformance.test.js → Tooltip.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from 'vitest-axe';
 
 import { Button } from "../../Button";
 import { Tooltip } from "../";

package/src/components/Tooltip/tests/{Tooltip.unit.test.js → Tooltip.unit.test.jsx}

@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
 
 import { Tooltip } from "../Tooltip";
 
@@ -281,17 +281,21 @@ describe("rendering Tooltip", () => {
       fireEvent.mouseLeave(container.querySelector("button"));
       expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("has hidden attribute set to true after mouse leaves button", () => {
+    it("keeps hidden attribute unset after mouse leaves button", async () => {
       const { getByTestId, container } = tooltip;
       fireEvent.mouseEnter(container.querySelector("button"));
       fireEvent.mouseLeave(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
+      await waitFor(() => {
+        expect(getByTestId("test-id").hidden).toBe(false);
+      });
     });
-    it("has hidden attribute set to true after button blur", () => {
+    it("keeps hidden attribute unset after button blur", async () => {
       const { getByTestId, container } = tooltip;
       fireEvent.focus(container.querySelector("button"));
       fireEvent.blur(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
+      await waitFor(() => {
+        expect(getByTestId("test-id").hidden).toBe(false);
+      });
     });
   });
 });

package/src/components/index.ts

@@ -35,7 +35,7 @@ import {
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
 import { Card, CardSection, CardProductHeader } from "./Card";
-import { Icon, Pictogram } from "./Icon";
+import { Icon, Pictogram, SpritePathContext, SpritePathProvider } from "./Icon";
 import { Gauge } from "./Gauge";
 import { Grid, GridCol } from "./Grid";
 import { Image } from "./Image";
@@ -166,6 +166,8 @@ export {
   ModalTitle,
   Pagination,
   Pictogram,
+  SpritePathContext,
+  SpritePathProvider,
   Pill,
   Progress,
   PromoBanner,