chore: add basic jsdom support (#10606)

package.json

@@ -47,7 +47,7 @@
     "ci:deploy:nightly": "DEPLOY_NIGHTLY=true yarn ci:testbuild && yarn generateAPI && yarn workspace @ui5/webcomponents-website ci:build:nightly",
 
     "ci:test:base": "yarn workspace @ui5/webcomponents-base test",
-    "ci:test:main:suite-1": "yarn workspace @ui5/webcomponents test:ssr && yarn workspace @ui5/webcomponents test:suite-1",
+    "ci:test:main:suite-1": "yarn workspace @ui5/webcomponents test:ssr && yarn workspace @ui5/webcomponents test:vitest && yarn workspace @ui5/webcomponents test:suite-1",
     "ci:test:main:suite-2": "yarn workspace @ui5/webcomponents test:cypress && yarn workspace @ui5/webcomponents test:suite-2",
     "ci:test:fiori": "yarn workspace @ui5/webcomponents-fiori test:ssr && yarn workspace @ui5/webcomponents-fiori test:cypress && yarn workspace @ui5/webcomponents-fiori test",
     "ci:test:compat": "yarn workspace @ui5/webcomponents-compat test:ssr && yarn workspace @ui5/webcomponents-compat test",

packages/base/src/ssr-dom-shim.ts

@@ -10,3 +10,56 @@ globalThis.Node ??= NodeShim as object as typeof Node;
 
 class FileListShim {}
 globalThis.FileList ??= FileListShim as object as typeof FileList;
+
+// ------- JS DOM shims -------
+
+// Polyfill `adoptedStyleSheets` globally for both `Document` and `ShadowRoot`
+const adoptedSheetsStore = new WeakMap();
+
+if (globalThis.Document && !("adoptedStyleSheets" in Document.prototype)) {
+  Object.defineProperty(Document.prototype, "adoptedStyleSheets", {
+    get() {
+      return adoptedSheetsStore.get(this) || [];
+    },
+    set(sheets: CSSStyleSheet[]) {
+      adoptedSheetsStore.set(this, sheets);
+    },
+  });
+}
+
+if (globalThis.ShadowRoot && !("adoptedStyleSheets" in ShadowRoot.prototype)) {
+  Object.defineProperty(ShadowRoot.prototype, "adoptedStyleSheets", {
+    get() {
+      return adoptedSheetsStore.get(this) || [];
+    },
+    set(sheets: CSSStyleSheet[]) {
+      adoptedSheetsStore.set(this, sheets);
+    },
+  });
+}
+
+// Polyfill CSSStyleSheet to provide `replaceSync`
+if (globalThis.CSSStyleSheet && !("replaceSync" in CSSStyleSheet.prototype)) {
+    Object.defineProperty(CSSStyleSheet.prototype, "replaceSync", {
+      value(cssText: string) {
+        this.cssText = cssText;
+        return cssText;
+      },
+    });
+  }
+
+// Empty resize observer
+globalThis.ResizeObserver = class ResizeObserver {
+    observe() {
+      // do nothing
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {
+      // do nothing
+    }
+};
+
+// empty showPopover method
+globalThis.HTMLElement.prototype.showPopover = function () {};

packages/main/.eslintignore

@@ -10,4 +10,5 @@ wdio.conf.cjs
 cypress.config.js
 postcss.config.cjs
 package-scripts.cjs
-.eslintrc.cjs
+.eslintrc.cjs
+vitest.config.js

packages/main/package.json

@@ -31,6 +31,7 @@
     "test:suite-2": "wc-dev test-suite-2",
     "test:cypress": "nps test-cy-ci",
     "test:cypress:open": "nps test-cy-open",
+    "test:vitest": "yarn vitest run",
     "create-ui5-element": "wc-create-ui5-element",
     "prepublishOnly": "tsc -b"
   },
@@ -60,6 +61,8 @@
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.7.0-rc.0",
     "chromedriver": "^131.0.0",
-    "lit": "^2.0.0"
+    "jsdom": "^26.0.0",
+    "lit": "^2.0.0",
+    "vitest": "^3.0.2"
   }
 }

packages/main/test/unit/vitest.test.js

@@ -0,0 +1,16 @@
+// vitest and jsdom and not supported for component development, use cypress instead
+// this test is purely to make sure jsdom does not fail when used with web components
+import { expect, test } from 'vitest'
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Dialog.js";
+
+test('ui5-button should be a real web component instance', () => {
+  const button = document.createElement("ui5-button");
+  expect(button).toBeTruthy();
+  expect(button.constructor.getMetadata().getTag()).toBe("ui5-button");
+
+  const dialog = document.createElement("ui5-dialog");
+  document.body.appendChild(dialog);
+  dialog.open = true;
+  expect(dialog).toBeTruthy();
+})

packages/main/vitest.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    include: ['test/unit/**.test.js'],
+    globals: true,
+    environment: 'jsdom',
+  },
+});