chore: added tests to 3d-viewer and video #2391

package.json

@@ -69,7 +69,7 @@
         "extends @ebay/browserslist-config"
     ],
     "dependencies": {
-        "@floating-ui/dom": "^1.6.12",
+        "@floating-ui/dom": "^1.6.13",
         "@google/model-viewer": "^4.0.0",
         "@marko-tags/subscribe": "^0.5.1",
         "highcharts": "^11.4.8",
@@ -88,7 +88,7 @@
     "devDependencies": {
         "@babel/cli": "^7.26.4",
         "@babel/core": "^7.26.0",
-        "@babel/eslint-parser": "^7.25.9",
+        "@babel/eslint-parser": "^7.26.5",
         "@babel/plugin-syntax-import-assertions": "^7.26.0",
         "@babel/plugin-transform-runtime": "^7.25.9",
         "@babel/preset-env": "^7.26.0",
@@ -104,45 +104,45 @@
         "@marko/compiler": "^5.39.10",
         "@marko/prettyprint": "^3.0.1",
         "@marko/testing-library": "^6",
-        "@marko/type-check": "^1.3.12",
-        "@marko/vite": "^4.1.20",
-        "@storybook/addon-a11y": "^8.3.6",
-        "@storybook/addon-docs": "^8.3.6",
-        "@storybook/addon-essentials": "^8.3.6",
-        "@storybook/addon-links": "^8.3.6",
-        "@storybook/addon-storysource": "^8.3.6",
-        "@storybook/manager-api": "^8.3.6",
+        "@marko/type-check": "^1.3.13",
+        "@marko/vite": "^5.0.13",
+        "@storybook/addon-a11y": "^8.5.0",
+        "@storybook/addon-docs": "^8.5.0",
+        "@storybook/addon-essentials": "^8.5.0",
+        "@storybook/addon-links": "^8.5.0",
+        "@storybook/addon-storysource": "^8.5.0",
+        "@storybook/manager-api": "^8.5.0",
         "@storybook/marko": "~9.0.2",
         "@storybook/marko-vite": "^2.0.3",
         "@storybook/mdx2-csf": "^1.1.0",
-        "@vitest/browser": "^2.1.8",
-        "@vitest/coverage-istanbul": "^2.1.8",
-        "@vitest/ui": "^2.1.8",
+        "@vitest/browser": "^3.0.3",
+        "@vitest/coverage-istanbul": "^3.0.3",
+        "@vitest/ui": "^3.0.3",
         "babel-plugin-add-module-exports": "^1.0.4",
         "cheerio": "^1.0.0",
         "cldr-dates-full": "^46.1.0",
         "coveralls": "^3.1.1",
         "del": "^8.0.0",
         "eslint": "^9",
         "eslint-config-ebay": "^1.2.0",
-        "eslint-config-prettier": "^9.1.0",
+        "eslint-config-prettier": "^10.0.1",
         "html-minifier": "^4.0.0",
         "husky": "^9.1.7",
-        "less": "^4.2.1",
-        "libphonenumber-js": "^1.11.17",
-        "lint-staged": "^15.2.11",
+        "less": "^4.2.2",
+        "libphonenumber-js": "^1.11.18",
+        "lint-staged": "^15.4.1",
         "lintspaces-cli": "^1.0.0",
-        "marko": "^5.37.10",
+        "marko": "^5.37.11",
         "playwright": "^1.49.1",
         "postcss-less": "^6.0.0",
         "prettier": "^3.4.2",
-        "prettier-plugin-packagejson": "^2.5.6",
+        "prettier-plugin-packagejson": "^2.5.8",
         "rimraf": "^6.0.1",
-        "storybook": "^8.3.6",
-        "stylelint": "^16.10.0",
-        "stylelint-config-standard": "^36",
+        "storybook": "^8.5.0",
+        "stylelint": "^16.13.2",
+        "stylelint-config-standard": "^37",
         "stylelint-prettier": "^5",
-        "vitest": "^2.1.8"
+        "vitest": "^3.0.3"
     },
     "peerDependencies": {
         "@ebay/skin": "~18.6.0",

src/components/ebay-3d-viewer/3d-viewer.stories.ts

@@ -23,22 +23,6 @@ export default {
             control: { type: "text" },
             description: "The asset to load",
         },
-        cdnVersion: {
-            control: { type: "text" },
-            table: {
-                category: "",
-                defaultValue: {
-                    summary: "2.1.1",
-                },
-            },
-            description:
-                "The version of the assets to load from CDN. This can be overriden in case the current verion has issues",
-        },
-        cdnUrl: {
-            control: { type: "text" },
-            description:
-                "This will override the whole URL used for downloading the media player assets. This is mainly used if you want to use your own CDN.",
-        },
         a11yText: {
             control: { type: "text" },
             table: {

src/components/ebay-3d-viewer/test/__snapshots__/test.server.js.snap

@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`3d-viewer > renders default 1`] = `
+"<DocumentFragment>
+  <div
+    class="three-d-player"
+  >
+    <model-viewer
+      alt="View these shoes for sale."
+      camera-controls=""
+      src="https://ir.ebaystatic.com/cr/v/c1/ebayui/3d/v1/image.glb"
+      touch-action="pan-y"
+    />
+    <div
+      class="three-d-player__overlay three-d-player__overlay--hidden"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon icon--24"
+        focusable="false"
+      >
+        <defs>
+          <symbol
+            id="icon-attention-24"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.994 5.375 18.625.006 12 0Zm0 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c-.006 5.52-4.48 9.994-10 10ZM11 7a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V7Zm1 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+            />
+          </symbol>
+        </defs>
+        <use
+          href="#icon-attention-24"
+        />
+      </svg>
+      <div
+        class="three-d-player__overlay-text"
+      >
+        An error has occurred
+      </div>
+    </div>
+    <div
+      class="three-d-player__overlay three-d-player__overlay--hidden"
+    >
+      <svg
+        aria-labelledby="s0-5-0-text"
+        class="icon icon--64-colored"
+        focusable="false"
+        role="img"
+      >
+        <defs>
+          <symbol
+            id="icon-play-filled-64-colored"
+            viewBox="0 0 64 64"
+          >
+            <circle
+              cx="32"
+              cy="32"
+              fill="#fff"
+              fill-opacity=".88"
+              r="32"
+            />
+            <path
+              d="m26.131 16.41 21.6 13.33a2.648 2.648 0 0 1 0 4.52l-21.6 13.33C24.333 48.7 22 47.425 22 45.33V18.67c0-2.094 2.333-3.37 4.131-2.26Z"
+              fill="#191919"
+            />
+          </symbol>
+        </defs>
+        <title
+          id="s0-5-0-text"
+        >
+          Click to start
+        </title>
+        <use
+          href="#icon-play-filled-64-colored"
+        />
+      </svg>
+    </div>
+  </div>
+</DocumentFragment>"
+`;

src/components/ebay-3d-viewer/test/test.browser.js

@@ -0,0 +1,26 @@
+import { afterEach, beforeEach, describe, it, expect } from "vitest";
+import { composeStories } from "@storybook/marko";
+import { render, cleanup, waitFor } from "@marko/testing-library";
+import * as stories from "../3d-viewer.stories";
+
+const { Default } = composeStories(stories);
+
+afterEach(cleanup);
+
+let component;
+
+describe("3d-viewer", () => {
+    beforeEach(async () => {
+        component = await render(Default);
+    });
+    describe("renders default", () => {
+        it("should render", async () => {
+            await waitFor(
+                () => {
+                    expect(component.emitted("load")).to.have.length(1);
+                },
+                { timeout: 5000 },
+            );
+        });
+    });
+});

src/components/ebay-3d-viewer/test/test.server.js

@@ -0,0 +1,14 @@
+import { describe, it } from "vitest";
+import { composeStories } from "@storybook/marko";
+import { snapshotHTML } from "../../../common/test-utils/snapshots";
+import * as stories from "../3d-viewer.stories";
+
+const { Default } = composeStories(stories);
+
+const htmlSnap = snapshotHTML(__dirname);
+
+describe("3d-viewer", () => {
+    it("renders default", async () => {
+        await htmlSnap(Default);
+    });
+});

src/components/ebay-video/component.ts

@@ -59,9 +59,6 @@ interface VideoInput extends Omit<Marko.Input<"video">, `on${string}`> {
     sources: Marko.AttrTag<Marko.Input<"source">>;
     "report-text"?: AttrString;
     "spinner-timeout"?: number;
-    "cdn-url"?: string;
-    "css-url"?: string;
-    version?: string;
     thumbnail?: string;
     track?: Marko.AttrTag<Marko.Input<"track">>;
     "error-text"?: AttrString;

src/components/ebay-video/examples/custom-error.marko

@@ -3,7 +3,6 @@ class {}
 <ebay-video
     width=460
     height=300
-    cdnUrl="Fake-url-to-fail"
     a11yLoadText="This video is loading now"
     a11yPlayText="Click to start this video"
     errorText="Oh man, something bad happened. Sorry!"

src/components/ebay-video/index.marko

@@ -4,7 +4,6 @@ static const isBrowser = typeof window !== "undefined";
 
 $ const {
     sources = [],
-    cdnUrl,
     thumbnail,
     playView,
     a11yPlayText = "Click to play",
@@ -37,7 +36,7 @@ $ const {
             no-controls
             poster=thumbnail
             ...processHtmlAttributes(htmlInput)>
-            <for|src| of=sources>
+                <for|src| of=sources>
                 <source ...src/>
             </for>
             <for|track| of=tracks>