@omicronenergy/oscd-shell 0.0.5

package/utils/testing.spec.ts

@@ -0,0 +1,210 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import sinon from 'sinon';
+
+import {
+  findButtonByIcon,
+  getFirstTextNodeContent,
+  querySelectorContainingText,
+  simulateKeypressOnElement,
+  waitForDialogState,
+} from './testing.js';
+
+describe('querySelectorContainingText', () => {
+  it('returns the element matching selector and exact text', async () => {
+    const el = await fixture<HTMLDivElement>(html`
+      <div>
+        <span class="item">Apple</span>
+        <span class="item">Banana</span>
+        <span class="item">Cherry</span>
+      </div>
+    `);
+
+    const result = querySelectorContainingText(el, '.item', 'Banana');
+    expect(result).to.exist;
+    expect(result?.textContent?.trim()).to.equal('Banana');
+  });
+
+  it('returns undefined if no element matches the text', async () => {
+    const el = await fixture<HTMLDivElement>(html`
+      <div>
+        <span class="item">Apple</span>
+        <span class="item">Banana</span>
+      </div>
+    `);
+
+    const result = querySelectorContainingText(el, '.item', 'Orange');
+    expect(result).to.be.undefined;
+  });
+
+  it('returns undefined if no element matches the selector', async () => {
+    const el = await fixture<HTMLDivElement>(html`
+      <div>
+        <span class="item">Apple</span>
+      </div>
+    `);
+
+    const result = querySelectorContainingText(el, '.notfound', 'Apple');
+    expect(result).to.be.undefined;
+  });
+
+  it('matches only the first text node content', async () => {
+    const el = await fixture<HTMLDivElement>(html`
+      <div>
+        <span class="item">Apple <b>Bold</b></span>
+        <span class="item">Banana</span>
+      </div>
+    `);
+
+    const result = querySelectorContainingText(el, '.item', 'Apple');
+    expect(result).to.exist;
+    expect(result?.textContent?.includes('Apple')).to.be.true;
+  });
+
+  it('ignores whitespace differences in text nodes', async () => {
+    const el = await fixture<HTMLDivElement>(html`
+      <div>
+        <span class="item"> Apple </span>
+      </div>
+    `);
+
+    const result = querySelectorContainingText(el, '.item', 'Apple');
+    expect(result).to.exist;
+  });
+});
+describe('getFirstTextNodeContent', () => {
+  it('returns the trimmed text content of the first text node', async () => {
+    const el = document.createElement('div');
+    el.appendChild(document.createTextNode('  Hello  '));
+    el.appendChild(document.createElement('span'));
+    expect(getFirstTextNodeContent(el)).to.equal('Hello');
+  });
+
+  it('returns undefined if there are no text nodes', () => {
+    const el = document.createElement('div');
+    el.appendChild(document.createElement('span'));
+    expect(getFirstTextNodeContent(el)).to.be.undefined;
+  });
+
+  it('returns empty string if element is null', () => {
+    expect(getFirstTextNodeContent(null)).to.equal('');
+  });
+
+  it('ignores empty text nodes', () => {
+    const el = document.createElement('div');
+    el.appendChild(document.createTextNode('   '));
+    el.appendChild(document.createTextNode('Text'));
+    expect(getFirstTextNodeContent(el)).to.equal('Text');
+  });
+
+  it('returns an empty string if no element is passed in', () => {
+    expect(getFirstTextNodeContent(null)).to.equal('');
+  });
+});
+
+describe('simulateKeypressOnElement', () => {
+  it('dispatches a keydown event with the correct key and ctrlKey', () => {
+    const spy = sinon.spy();
+    document.addEventListener('keydown', spy, { once: true });
+    simulateKeypressOnElement('a', true);
+    expect(spy.calledOnce).to.be.true;
+    const event = spy.firstCall.args[0];
+    expect(event).to.have.property('key', 'a');
+    expect(event).to.have.property('ctrlKey', true);
+  });
+});
+
+describe('waitForDialogState', () => {
+  it('resolves immediately if dialog is already open', async () => {
+    const dialog = document.createElement('dialog');
+    dialog.setAttribute('open', '');
+    let resolved = false;
+    await waitForDialogState(dialog, 'open').then(() => {
+      resolved = true;
+    });
+    expect(resolved).to.be.true;
+  });
+
+  it('waits for dialog to become open', async () => {
+    const dialog = document.createElement('dialog');
+    setTimeout(() => dialog.setAttribute('open', ''), 10);
+    await waitForDialogState(dialog, 'open');
+    expect(dialog.hasAttribute('open')).to.be.true;
+  });
+
+  it('resolves immediately if dialog is already closed', async () => {
+    const dialog = document.createElement('dialog');
+    let resolved = false;
+    await waitForDialogState(dialog, 'closed').then(() => {
+      resolved = true;
+    });
+    expect(resolved).to.be.true;
+  });
+
+  it('waits for dialog to emit closed event', async () => {
+    const dialog = document.createElement('dialog');
+    dialog.setAttribute('open', '');
+    setTimeout(() => {
+      dialog.removeAttribute('open');
+      dialog.dispatchEvent(new Event('closed'));
+    }, 10);
+    await waitForDialogState(dialog, 'closed');
+    expect(dialog.hasAttribute('open')).to.be.false;
+  });
+});
+
+describe('findButtonByIcon', () => {
+  it('returns the button with the matching icon name', () => {
+    const root = document.createElement('div');
+    const btn1 = document.createElement('button');
+    btn1.classList.add('icon-btn');
+    const icon1 = document.createElement('oscd-icon');
+    icon1.textContent = 'foo';
+    btn1.appendChild(icon1);
+
+    const btn2 = document.createElement('button');
+    btn2.classList.add('icon-btn');
+    const icon2 = document.createElement('oscd-icon');
+    icon2.textContent = 'bar';
+    btn2.appendChild(icon2);
+
+    root.appendChild(btn1);
+    root.appendChild(btn2);
+
+    const found = findButtonByIcon(root, '.icon-btn', 'bar');
+    expect(found).to.equal(btn2);
+  });
+
+  it('returns null if no button matches the icon name', () => {
+    const root = document.createElement('div');
+    const btn = document.createElement('oscd-icon-button');
+    const icon = document.createElement('oscd-icon');
+    icon.textContent = 'foo';
+    btn.appendChild(icon);
+    root.appendChild(btn);
+
+    const found = findButtonByIcon(root, 'oscd-icon-button', 'bar');
+    expect(found).to.be.undefined;
+  });
+
+  it('returns null if no button matches the selector', () => {
+    const root = document.createElement('div');
+    const btn = document.createElement('oscd-text-button');
+    const icon = document.createElement('oscd-icon');
+    icon.textContent = 'foo';
+    root.appendChild(btn);
+
+    const found = findButtonByIcon(root, 'oscd-icon-button', 'foo');
+    expect(found).to.be.undefined;
+  });
+
+  it('returns null if oscd-icon is missing', () => {
+    const root = document.createElement('div');
+    const btn = document.createElement('oscd-text-button');
+    const icon = document.createElement('oscd-emoji');
+    icon.textContent = 'foo';
+    root.appendChild(btn);
+
+    const found = findButtonByIcon(root, 'oscd-text-button', 'foo');
+    expect(found).to.be.undefined;
+  });
+});

package/utils/testing.ts

@@ -0,0 +1,65 @@
+import { OscdDialog } from '@omicronenergy/oscd-ui/dialog/oscd-dialog.js';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { waitUntil } from '@open-wc/testing';
+
+export function getFirstTextNodeContent(
+  element: Element | null,
+): string | undefined {
+  if (!element) {
+    return '';
+  }
+  return Array.from(element.childNodes)
+    .filter(node => node.nodeType === Node.TEXT_NODE)
+    .map(node => node.textContent?.trim())
+    .filter(node => node !== '')[0];
+}
+
+export function querySelectorContainingText(
+  scope: Element,
+  selector: string,
+  text: string,
+) {
+  const elements = Array.from(scope.querySelectorAll(selector));
+  return elements.find(e => {
+    const textContent = getFirstTextNodeContent(e);
+    return textContent === text;
+  });
+}
+
+export function simulateKeypressOnElement(key: string, ctrlKey: boolean) {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    ctrlKey,
+  });
+  document.dispatchEvent(event);
+}
+
+export async function waitForDialogState(
+  dialog: Element,
+  state: 'open' | 'closed',
+) {
+  await waitUntil(
+    () => (dialog as OscdDialog)?.open === (state === 'open'),
+    `Dialog did not ${state} within the expected time`,
+  );
+  return dialog;
+}
+
+/**
+ * Finds a control, typically a button (but in theory could be some other component) by selector + enclosed icon name (inside an oscd-icon).
+ * @param root The root element to search within.
+ * @param buttonSelector The selector (e.g. 'oscd-filled-icon-button').
+ * @param iconName The icon name to match (text content of enclosed oscd-icon).
+ * @returns The matching button element or null.
+ */
+export function findButtonByIcon(
+  root: ParentNode,
+  buttonSelector: string,
+  iconName: string,
+): HTMLElement | null {
+  const buttons = Array.from(root.querySelectorAll(buttonSelector));
+  return buttons.find(btn => {
+    const icon = btn.querySelector('oscd-icon');
+    return icon && icon.textContent?.trim() === iconName;
+  }) as HTMLElement | null;
+}

package/web-dev-server.config.js

@@ -0,0 +1,24 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.js

@@ -0,0 +1,180 @@
+import { visualRegressionPlugin } from '@web/test-runner-visual-regression/plugin';
+import { playwrightLauncher } from '@web/test-runner-playwright';
+
+import pixelmatch from 'pixelmatch';
+import { PNG } from 'pngjs';
+
+const fuzzy = ['win32', 'darwin'].includes(process.platform); // allow for 1% difference on non-linux OSs
+const local = !process.env.CI;
+
+console.assert(local, 'Running in CI!');
+console.assert(!fuzzy, 'Running on OS with 1% test pixel diff threshold!');
+
+const thresholdPercentage = fuzzy && local ? 1 : 0;
+
+const filteredLogs = [
+  'Running in dev mode',
+  'Lit is in dev mode',
+  'scheduled an update',
+];
+
+const browsers = [
+  playwrightLauncher({ product: 'chromium' }),
+  playwrightLauncher({ product: 'firefox' }),
+  playwrightLauncher({ product: 'webkit' }),
+];
+
+function defaultGetImageDiff({ baselineImage, image, options }) {
+  let error = '';
+  let basePng = PNG.sync.read(baselineImage);
+  let png = PNG.sync.read(image);
+  let { width, height } = png;
+
+  if (basePng.width !== png.width || basePng.height !== png.height) {
+    error =
+      `Screenshot is not the same width and height as the baseline. ` +
+      `Baseline: { width: ${basePng.width}, height: ${basePng.height} }` +
+      `Screenshot: { width: ${png.width}, height: ${png.height} }`;
+    width = Math.max(basePng.width, png.width);
+    height = Math.max(basePng.height, png.height);
+    let oldPng = basePng;
+    basePng = new PNG({ width, height });
+    oldPng.data.copy(basePng.data, 0, 0, oldPng.data.length);
+    oldPng = png;
+    png = new PNG({ width, height });
+    oldPng.data.copy(png.data, 0, 0, oldPng.data.length);
+  }
+
+  const diff = new PNG({ width, height });
+
+  const numDiffPixels = pixelmatch(
+    basePng.data,
+    png.data,
+    diff.data,
+    width,
+    height,
+    options,
+  );
+  const diffPercentage = (numDiffPixels / (width * height)) * 100;
+
+  return {
+    error,
+    diffImage: PNG.sync.write(diff),
+    diffPercentage,
+  };
+}
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  plugins: [
+    visualRegressionPlugin({
+      update: process.argv.includes('--update-visual-baseline'),
+      getImageDiff: options => {
+        const result = defaultGetImageDiff(options);
+        if (result.diffPercentage < thresholdPercentage) {
+          result.diffPercentage = 0;
+        }
+        return result;
+      },
+    }),
+  ],
+
+  files: 'dist/**/*.spec.js',
+
+  coverageConfig: {
+    exclude: [
+      '**/node_modules/**',
+      '**/__wds-outside-root__/**', // Exclude external modules like oscd-ui
+    ],
+  },
+
+  groups: [
+    {
+      name: 'visual',
+      files: 'dist/**/*.test.js',
+      testRunnerHtml: testFramework => `
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&family=Roboto:wght@300;400;500&display=swap" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" >
+  </head>
+  <body>
+    <style class="deanimator">
+    *, *::before, *::after {
+     -moz-transition: none !important;
+     transition: none !important;
+     -moz-animation: none !important;
+     animation: none !important;
+    }
+    </style>
+    <script>window.process = { env: ${JSON.stringify(process.env)} }</script>
+    <script type="module" src="${testFramework}"></script>
+    <script>
+    function descendants(parent) {
+      return (Array.from(parent.childNodes)).concat(
+        ...Array.from(parent.children).map(child => descendants(child))
+      );
+    }
+    const deanimator = document.querySelector('.deanimator');
+    function deanimate(element) {
+      if (!element.shadowRoot) return;
+      if (element.shadowRoot.querySelector('.deanimator')) return;
+      const style = deanimator.cloneNode(true);
+      element.shadowRoot.appendChild(style);
+      descendants(element.shadowRoot).forEach(deanimate);
+    }
+    const observer = new MutationObserver((mutationList, observer) => {
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          descendants(document.body).forEach(deanimate);
+        }
+      }
+    });
+    observer.observe(document.body, {childList: true, subtree:true});
+    </script>
+    <style>
+    * {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    oscd-shell {
+      display: block;
+      height: 600px;
+    }
+    </style>
+  </body>
+</html>`,
+    },
+  ],
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  concurrentBrowsers: 3,
+
+  /** Amount of test files per browser to test concurrently */
+  concurrency: 1,
+
+  /** Browsers to run tests on */
+  browsers,
+
+  // See documentation for all available options
+});