('.page-prev')?.click();
- expect(onPage).to.have.been.calledWith(2);
- });
-});
diff --git a/src/queue/test/use-pref.test.ts b/src/queue/test/use-pref.test.ts
deleted file mode 100644
index 12403bc..0000000
--- a/src/queue/test/use-pref.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { renderHook } from '@neovici/testing';
-import { assert } from '@open-wc/testing';
-import { usePref } from '../use-pref';
-
-describe('use-pref', () => {
- it('default pref', async () => {
- const { result } = await renderHook(() => usePref('some', 'asdad'));
- assert.equal(result.current[0], 'asdad');
- });
-
- it('update pref', async () => {
- const { result, nextUpdate } = await renderHook(() =>
- usePref('somethingelse'),
- );
- assert.equal(result.current[0], undefined);
- setTimeout(() => result.current[1]('dads'));
- await nextUpdate();
- assert.equal(result.current[0], 'dads');
- });
-});
diff --git a/src/util/test/path.test.ts b/src/util/path.test.ts
similarity index 60%
rename from src/util/test/path.test.ts
rename to src/util/path.test.ts
index ad380d2..f5ba20d 100644
--- a/src/util/test/path.test.ts
+++ b/src/util/path.test.ts
@@ -1,104 +1,99 @@
-import { assert } from '@open-wc/testing';
-import { get, normalize, split } from '../path';
+import { describe, expect, it } from 'vitest';
+import { get, normalize, split } from './path';
describe('path', () => {
describe('normalize', () => {
it('returns string path as-is', () => {
- assert.equal(normalize('foo.bar.0.baz'), 'foo.bar.0.baz');
+ expect(normalize('foo.bar.0.baz')).toBe('foo.bar.0.baz');
});
it('returns empty string as-is', () => {
- assert.equal(normalize(''), '');
+ expect(normalize('')).toBe('');
});
it('converts array path to flattened string', () => {
- assert.equal(normalize(['foo.bar', 0, 'baz']), 'foo.bar.0.baz');
+ expect(normalize(['foo.bar', 0, 'baz'])).toBe('foo.bar.0.baz');
});
it('handles array with single element', () => {
- assert.equal(normalize(['foo']), 'foo');
+ expect(normalize(['foo'])).toBe('foo');
});
it('handles array with dotted strings and numbers', () => {
- assert.equal(normalize(['a.b', 1, 'c.d', 2]), 'a.b.1.c.d.2');
+ expect(normalize(['a.b', 1, 'c.d', 2])).toBe('a.b.1.c.d.2');
});
it('handles empty array', () => {
- assert.equal(normalize([]), '');
+ expect(normalize([])).toBe('');
});
});
describe('split', () => {
it('splits string path into array', () => {
- assert.deepEqual(split('foo.bar.0.baz'), ['foo', 'bar', '0', 'baz']);
+ expect(split('foo.bar.0.baz')).toEqual(['foo', 'bar', '0', 'baz']);
});
it('splits array path into flat array', () => {
- assert.deepEqual(split(['foo.bar', 0, 'baz']), [
- 'foo',
- 'bar',
- '0',
- 'baz',
- ]);
+ expect(split(['foo.bar', 0, 'baz'])).toEqual(['foo', 'bar', '0', 'baz']);
});
it('handles single segment string', () => {
- assert.deepEqual(split('foo'), ['foo']);
+ expect(split('foo')).toEqual(['foo']);
});
it('handles array with single element', () => {
- assert.deepEqual(split(['foo']), ['foo']);
+ expect(split(['foo'])).toEqual(['foo']);
});
it('handles empty string', () => {
- assert.deepEqual(split(''), ['']);
+ expect(split('')).toEqual(['']);
});
});
describe('get', () => {
it('retrieves nested value with string path', () => {
const obj = { foo: { bar: { baz: 'value' } } };
- assert.equal(get(obj, 'foo.bar.baz'), 'value');
+ expect(get(obj, 'foo.bar.baz')).toBe('value');
});
it('retrieves nested value with array path', () => {
const obj = { foo: { bar: { baz: 'value' } } };
- assert.equal(get(obj, ['foo', 'bar', 'baz']), 'value');
+ expect(get(obj, ['foo', 'bar', 'baz'])).toBe('value');
});
it('retrieves nested value with dotted string in array path', () => {
const obj = { foo: { bar: { baz: 'value' } } };
- assert.equal(get(obj, ['foo.bar', 'baz']), 'value');
+ expect(get(obj, ['foo.bar', 'baz'])).toBe('value');
});
it('retrieves array element by index', () => {
const obj = { items: ['a', 'b', 'c'] };
- assert.equal(get(obj, 'items.1'), 'b');
+ expect(get(obj, 'items.1')).toBe('b');
});
it('retrieves array element with array path', () => {
const obj = { items: ['a', 'b', 'c'] };
- assert.equal(get(obj, ['items', 0]), 'a');
+ expect(get(obj, ['items', 0])).toBe('a');
});
it('returns undefined for non-existent path', () => {
const obj = { foo: { bar: 'value' } };
- assert.equal(get(obj, 'foo.baz.qux'), undefined);
+ expect(get(obj, 'foo.baz.qux')).toBeUndefined();
});
it('returns undefined when intermediate property is undefined', () => {
const obj = { foo: undefined };
- assert.equal(get(obj, 'foo.bar'), undefined);
+ expect(get(obj, 'foo.bar')).toBeUndefined();
});
it('returns undefined when intermediate property is null', () => {
const obj = { foo: null };
- assert.equal(get(obj, 'foo.bar'), undefined);
+ expect(get(obj, 'foo.bar')).toBeUndefined();
});
it('returns undefined with empty string path', () => {
const obj = { foo: 'bar' };
- assert.equal(get(obj, ''), undefined);
+ expect(get(obj, '')).toBeUndefined();
});
it('handles complex nested structure', () => {
@@ -108,15 +103,15 @@ describe('path', () => {
{ name: 'Bob', address: { city: 'LA' } },
],
};
- assert.equal(get(obj, 'users.1.address.city'), 'LA');
+ expect(get(obj, 'users.1.address.city')).toBe('LA');
});
it('returns undefined for null root', () => {
- assert.equal(get(null, 'foo'), undefined);
+ expect(get(null, 'foo')).toBeUndefined();
});
it('returns undefined for undefined root', () => {
- assert.equal(get(undefined, 'foo'), undefined);
+ expect(get(undefined, 'foo')).toBeUndefined();
});
});
});
diff --git a/stories/item-click.stories.ts b/stories/item-click.stories.ts
new file mode 100644
index 0000000..5001ac2
--- /dev/null
+++ b/stories/item-click.stories.ts
@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit-html';
+import { expect, userEvent } from 'storybook/test';
+import { itemClick } from '../src/queue/item-click';
+
+const meta: Meta = {
+ title: 'Tests/ItemClick',
+};
+
+export default meta;
+
+export const FiresEvent: StoryObj = {
+ render: () => html`
+
+ `,
+ async play({ canvasElement }) {
+ const button = canvasElement.querySelector(
+ '#test-button',
+ ) as HTMLButtonElement;
+
+ let eventDetail: { index: number; activate: string } | null = null;
+ button.addEventListener('omnitable-item-click', ((e: CustomEvent) => {
+ eventDetail = e.detail;
+ }) as EventListener);
+
+ await userEvent.click(button);
+
+ expect(eventDetail).not.toBeNull();
+ expect(eventDetail!.index).toBe(2);
+ expect(eventDetail!.activate).toBe('queue');
+ },
+};
+
+export const PreventsDefault: StoryObj = {
+ render: () => html`
+
+ `,
+ async play({ canvasElement }) {
+ const button = canvasElement.querySelector(
+ '#test-button',
+ ) as HTMLButtonElement;
+
+ let eventDetail: { index: number; activate: string } | null = null;
+ let wasDefaultPrevented = false;
+
+ button.addEventListener('omnitable-item-click', ((e: CustomEvent) => {
+ eventDetail = e.detail;
+ e.preventDefault();
+ }) as EventListener);
+
+ button.addEventListener('click', (e: MouseEvent) => {
+ wasDefaultPrevented = e.defaultPrevented;
+ });
+
+ await userEvent.click(button);
+
+ expect(eventDetail).not.toBeNull();
+ expect(eventDetail!.index).toBe(3);
+ expect(eventDetail!.activate).toBe('list');
+ expect(wasDefaultPrevented).toBe(true);
+ },
+};
+
+export const DoesNotFireWithCtrlKey: StoryObj = {
+ render: () => html`
+
+ `,
+ async play({ canvasElement }) {
+ const button = canvasElement.querySelector(
+ '#test-button',
+ ) as HTMLButtonElement;
+
+ let eventFired = false;
+ button.addEventListener('omnitable-item-click', () => {
+ eventFired = true;
+ });
+
+ // Simulate ctrl+click using native MouseEvent
+ const ctrlClickEvent = new MouseEvent('click', {
+ bubbles: true,
+ cancelable: true,
+ ctrlKey: true,
+ });
+ button.dispatchEvent(ctrlClickEvent);
+
+ expect(eventFired).toBe(false);
+ },
+};
diff --git a/stories/render.stories.ts b/stories/render.stories.ts
new file mode 100644
index 0000000..c6579e7
--- /dev/null
+++ b/stories/render.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit-html';
+import { expect, fn, userEvent } from 'storybook/test';
+import { renderNav, renderPagination } from '../src/queue/render';
+
+const meta: Meta = {
+ title: 'Tests/Render',
+};
+
+export default meta;
+
+export const RenderNavTest: StoryObj = {
+ render: () => html`${renderNav({})}
`,
+ async play({ canvasElement }) {
+ const container = canvasElement.querySelector('#test-container');
+
+ // Both buttons should be disabled when no callbacks are provided
+ const buttons = container?.querySelectorAll('button.button-nav');
+ expect(buttons).toHaveLength(2);
+
+ const prevButton = container?.querySelector('.button-nav.prev');
+ const nextButton = container?.querySelector('.button-nav.next');
+ expect(prevButton).toHaveAttribute('disabled');
+ expect(nextButton).toHaveAttribute('disabled');
+ },
+};
+
+export const RenderNavWithCallbacks: StoryObj = {
+ args: {
+ prev: fn(),
+ next: fn(),
+ },
+ render: (args) =>
+ html`
+ ${renderNav(args as Parameters[0])}
+
`,
+ async play({ args, canvasElement }) {
+ const container = canvasElement.querySelector('#test-container');
+
+ const prevButton = container?.querySelector(
+ '.button-nav.prev',
+ ) as HTMLButtonElement;
+ const nextButton = container?.querySelector(
+ '.button-nav.next',
+ ) as HTMLButtonElement;
+
+ // Buttons should not be disabled when callbacks are provided
+ expect(prevButton).not.toHaveAttribute('disabled');
+ expect(nextButton).not.toHaveAttribute('disabled');
+
+ // Test clicking
+ await userEvent.click(prevButton);
+ expect(args.prev).toHaveBeenCalled();
+
+ await userEvent.click(nextButton);
+ expect(args.next).toHaveBeenCalled();
+ },
+};
+
+export const RenderPaginationNothing: StoryObj = {
+ render: () =>
+ html`
+ ${renderPagination() === nothing ? 'nothing' : renderPagination()}
+
`,
+ async play({ canvasElement }) {
+ const container = canvasElement.querySelector('#test-container');
+ expect(container?.textContent?.trim()).toBe('nothing');
+ },
+};
+
+export const RenderPaginationTest: StoryObj = {
+ args: {
+ onPage: fn(),
+ },
+ render: (args) =>
+ html`
+ ${renderPagination({
+ totalPages: 10,
+ pageNumber: 3,
+ onPage: args.onPage as (page: number) => void,
+ })}
+
`,
+ async play({ args, canvasElement }) {
+ const container = canvasElement.querySelector('#test-container');
+
+ const prevButton = container?.querySelector(
+ '.page-prev',
+ ) as HTMLButtonElement;
+ const nextButton = container?.querySelector(
+ '.page-next',
+ ) as HTMLButtonElement;
+
+ expect(prevButton).toBeTruthy();
+ expect(nextButton).toBeTruthy();
+
+ // Click next page
+ await userEvent.click(nextButton);
+ expect(args.onPage).toHaveBeenCalledWith(4);
+
+ // Reset and click prev page
+ (args.onPage as ReturnType).mockClear();
+ await userEvent.click(prevButton);
+ expect(args.onPage).toHaveBeenCalledWith(2);
+ },
+};
diff --git a/stories/use-pref.stories.ts b/stories/use-pref.stories.ts
new file mode 100644
index 0000000..ddadfba
--- /dev/null
+++ b/stories/use-pref.stories.ts
@@ -0,0 +1,44 @@
+import { renderHook } from '@neovici/testing';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit-html';
+import { expect } from 'storybook/test';
+import { usePref } from '../src/queue/use-pref';
+
+const meta: Meta = {
+ title: 'Tests/UsePref',
+};
+
+export default meta;
+
+export const DefaultPref: StoryObj = {
+ render: () => html``,
+ async play() {
+ localStorage.removeItem('pref-some');
+ const { result, unmount } = await renderHook(() =>
+ usePref('some', 'asdad'),
+ );
+
+ expect(result.current[0]).toBe('asdad');
+ unmount();
+ },
+};
+
+export const UpdatePref: StoryObj = {
+ render: () => html``,
+ async play() {
+ localStorage.removeItem('pref-update');
+ const { result, nextUpdate, unmount } = await renderHook(() =>
+ usePref('update'),
+ );
+
+ // Initial value should be undefined
+ expect(result.current[0]).toBeUndefined();
+
+ // Update the pref
+ result.current[1]('dads');
+ await nextUpdate();
+
+ expect(result.current[0]).toBe('dads');
+ unmount();
+ },
+};
diff --git a/test/fetch.test.ts b/test/fetch.test.ts
index 5112121..db1892c 100644
--- a/test/fetch.test.ts
+++ b/test/fetch.test.ts
@@ -1,27 +1,34 @@
-import { expect } from '@open-wc/testing';
-import { stub, type SinonStub } from 'sinon';
+import {
+ afterEach,
+ beforeEach,
+ describe,
+ expect,
+ it,
+ vi,
+ type MockInstance,
+} from 'vitest';
import { fetch, setBaseInit } from '../src/util/fetch/fetch';
describe('fetch', () => {
- let fetchStub: SinonStub;
+ let fetchSpy: MockInstance;
beforeEach(() => {
- fetchStub = stub(window, 'fetch').resolves(new Response());
+ fetchSpy = vi.spyOn(window, 'fetch').mockResolvedValue(new Response());
});
afterEach(() => {
- fetchStub.restore();
+ fetchSpy.mockRestore();
});
describe('getHeaders callback', () => {
it('invokes getHeaders on each request', async () => {
- const getHeaders = stub().returns({ 'X-Dynamic': 'value1' });
+ const getHeaders = vi.fn().mockReturnValue({ 'X-Dynamic': 'value1' });
setBaseInit({ getHeaders });
await fetch('/api/test1');
await fetch('/api/test2');
- expect(getHeaders.callCount).to.equal(2);
+ expect(getHeaders).toHaveBeenCalledTimes(2);
});
it('includes dynamic headers in request', async () => {
@@ -31,8 +38,8 @@ describe('fetch', () => {
await fetch('/api/test');
- const [, opts] = fetchStub.firstCall.args;
- expect(opts.headers).to.have.property('X-Dynamic', 'dynamic-value');
+ const [, opts] = fetchSpy.mock.calls[0];
+ expect(opts.headers).toHaveProperty('X-Dynamic', 'dynamic-value');
});
it('dynamic headers override static headers', async () => {
@@ -43,8 +50,8 @@ describe('fetch', () => {
await fetch('/api/test');
- const [, opts] = fetchStub.firstCall.args;
- expect(opts.headers).to.have.property('X-Header', 'dynamic');
+ const [, opts] = fetchSpy.mock.calls[0];
+ expect(opts.headers).toHaveProperty('X-Header', 'dynamic');
});
it('per-request headers override dynamic headers', async () => {
@@ -56,8 +63,8 @@ describe('fetch', () => {
headers: { 'X-Header': 'per-request' },
});
- const [, opts] = fetchStub.firstCall.args;
- expect(opts.headers).to.have.property('X-Header', 'per-request');
+ const [, opts] = fetchSpy.mock.calls[0];
+ expect(opts.headers).toHaveProperty('X-Header', 'per-request');
});
it('per-request headers override both static and dynamic headers', async () => {
@@ -70,8 +77,8 @@ describe('fetch', () => {
headers: { 'X-Header': 'per-request' },
});
- const [, opts] = fetchStub.firstCall.args;
- expect(opts.headers).to.have.property('X-Header', 'per-request');
+ const [, opts] = fetchSpy.mock.calls[0];
+ expect(opts.headers).toHaveProperty('X-Header', 'per-request');
});
it('returns different values on subsequent calls', async () => {
@@ -83,10 +90,10 @@ describe('fetch', () => {
await fetch('/api/test1');
await fetch('/api/test2');
- const [, opts1] = fetchStub.firstCall.args;
- const [, opts2] = fetchStub.secondCall.args;
- expect(opts1.headers).to.have.property('X-Request-Id', '1');
- expect(opts2.headers).to.have.property('X-Request-Id', '2');
+ const [, opts1] = fetchSpy.mock.calls[0];
+ const [, opts2] = fetchSpy.mock.calls[1];
+ expect(opts1.headers).toHaveProperty('X-Request-Id', '1');
+ expect(opts2.headers).toHaveProperty('X-Request-Id', '2');
});
it('merges static, dynamic, and per-request headers', async () => {
@@ -99,10 +106,10 @@ describe('fetch', () => {
headers: { 'X-Request': 'request-value' },
});
- const [, opts] = fetchStub.firstCall.args;
- expect(opts.headers).to.have.property('X-Static', 'static-value');
- expect(opts.headers).to.have.property('X-Dynamic', 'dynamic-value');
- expect(opts.headers).to.have.property('X-Request', 'request-value');
+ const [, opts] = fetchSpy.mock.calls[0];
+ expect(opts.headers).toHaveProperty('X-Static', 'static-value');
+ expect(opts.headers).toHaveProperty('X-Dynamic', 'dynamic-value');
+ expect(opts.headers).toHaveProperty('X-Request', 'request-value');
});
});
});
diff --git a/tsconfig.json b/tsconfig.json
index b8da42e..ed23677 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,18 @@
{
- "compilerOptions": {
- "allowSyntheticDefaultImports": true,
- "noEmit": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "strict": true,
- "target": "esnext",
- "allowJs": true,
- "types": ["node", "mocha"],
- "baseUrl": ".",
- "paths": {
- "@neovici/cosmoz-queue/*": ["./src/*"]
- }
- },
- "include": ["src/**/*", "test/**/*", "stories/**/*"]
+ "compilerOptions": {
+ "allowSyntheticDefaultImports": true,
+ "noEmit": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "strict": true,
+ "target": "esnext",
+ "allowJs": true,
+ "types": ["node"],
+ "baseUrl": ".",
+ "paths": {
+ "@neovici/cosmoz-queue/*": ["./src/*"]
+ },
+ "skipLibCheck": true
+ },
+ "include": ["src/**/*", "test/**/*", "stories/**/*"]
}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..e637f30
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,29 @@
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+ test: {
+ projects: [
+ {
+ test: {
+ name: 'unit',
+ include: ['test/**/*.test.ts', 'src/**/*.test.ts'],
+ environment: 'jsdom',
+ },
+ },
+ {
+ plugins: [storybookTest({ configDir: '.storybook' })],
+ test: {
+ name: 'storybook',
+ browser: {
+ enabled: true,
+ provider: playwright(),
+ instances: [{ browser: 'chromium' }],
+ },
+ setupFiles: ['.storybook/vitest.setup.ts'],
+ },
+ },
+ ],
+ },
+});
diff --git a/web-test-runner.config.mjs b/web-test-runner.config.mjs
deleted file mode 100644
index 359824d..0000000
--- a/web-test-runner.config.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-import { esbuildPlugin } from '@web/dev-server-esbuild';
-import { playwrightLauncher } from '@web/test-runner-playwright';
-
-export default {
- nodeResolve: true,
- files: ['test/**/*.test.ts', 'src/**/*.test.ts'],
- plugins: [esbuildPlugin({ ts: true, target: 'auto' })],
- browsers: [playwrightLauncher({ product: 'chromium' })],
- testFramework: { config: { ui: 'bdd' } },
- coverage: true,
- coverageConfig: {
- include: ['src/**/*.ts'],
- exclude: ['**/*.test.ts', '**/*.spec.ts'],
- },
-};