piral-modals 1.3.3-beta.6187 → 1.3.3-beta.6201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-modals",
-  "version": "1.3.3-beta.6187",
+  "version": "1.3.3-beta.6201",
   "description": "Plugin for the display of modal dialogs in Piral.",
   "keywords": [
     "piral",
@@ -62,8 +62,8 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
-    "piral-core": "1.3.3-beta.6187",
+    "piral-core": "1.3.3-beta.6201",
     "react": "^18.0.0"
   },
-  "gitHead": "3da0780821a0aeef693b36d08dcf45eeb462d599"
+  "gitHead": "6e9f4e6f83514b5c38960ce015e073efc668f3d6"
 }

package/src/Modals.test.tsx

@@ -1,191 +1,156 @@
+/**
+ * @vitest-environment jsdom
+ */
 import * as React from 'react';
-import create from 'zustand';
-import { StateContext } from 'piral-core';
-import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vitest, afterEach } from 'vitest';
+import { render, fireEvent, cleanup } from '@testing-library/react';
 import { Modals } from './Modals';
 
-function createMockContainer(registeredModals: Record<string, any>, openModals: Array<any>) {
-  const state = create(() => ({
-    components: {
-      ModalsHost: ({ open, children, close }) => (
-        <div role="host">
-          {open && (
-            <div role="overlay">
-              <button role="close" onClick={close}>
-                Close
-              </button>
-              {children}
-            </div>
-          )}
-        </div>
-      ),
-    },
-    registry: {
-      modals: registeredModals,
-    },
-    modals: openModals,
-  }));
-  return {
-    context: {
-      on: jest.fn(),
-      off: jest.fn(),
-      emit: jest.fn(),
-      defineActions() {},
-      converters: {},
-      readState(select) {
-        return select(state.getState());
-      },
-      state,
-      dispatch(update) {
-        state.setState(update(state.getState()));
+let registeredModals: Record<string, any> = {};
+let openModals: Array<any> = [];
+
+vitest.mock('piral-core', () => ({
+  getPiralComponent(name) {
+    switch (name) {
+      case 'ModalsHost':
+        return ({ open, children, close }) => (
+          <div role="host">
+            {open && (
+              <div role="overlay">
+                <button role="close" onClick={close}>
+                  Close
+                </button>
+                {children}
+              </div>
+            )}
+          </div>
+        );
+      case 'ModalsDialog':
+        return ({ children }) => <>{children}</>;
+      default:
+        return null;
+    }
+  },
+  useGlobalState(select) {
+    return select({
+      registry: {
+        modals: registeredModals,
       },
-    } as any,
-    api: {} as any,
-  };
-}
+      modals: openModals,
+    });
+  },
+}));
 
 describe('Modals Component Shell Module', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   it('Should display nothing is nothing is there', () => {
-    const { context } = createMockContainer({}, []);
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    registeredModals = {};
+    openModals = [];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display something if something is there and wanted', () => {
-    const { context } = createMockContainer(
+    registeredModals = {
+      foo: {
+        component: () => <div />,
+      },
+    };
+    openModals = [
       {
-        foo: {
-          component: () => <div />,
-        },
+        name: 'foo',
+        options: {},
       },
-      [
-        {
-          name: 'foo',
-          options: {},
-        },
-      ],
-    );
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    ];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).not.toBe(null);
   });
 
   it('Should display nothing if something is there and not wanted', () => {
-    const { context } = createMockContainer(
-      {
-        foo: {
-          component: () => <div />,
-        },
+    registeredModals = {
+      foo: {
+        component: () => <div />,
       },
-      [],
-    );
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    };
+    openModals = [];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display something if something is there and wanted even indirectly', () => {
-    const { context } = createMockContainer(
+    registeredModals = {
+      'abc:foo': {
+        component: () => <div />,
+        name: 'bar',
+      },
+    };
+    openModals = [
       {
-        'abc:foo': {
-          component: () => <div />,
-          name: 'bar',
-        },
+        name: 'xyz:foo',
+        alternative: 'bar',
+        options: {},
       },
-      [
-        {
-          name: 'xyz:foo',
-          alternative: 'bar',
-          options: {},
-        },
-      ],
-    );
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    ];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).not.toBe(null);
   });
 
   it('Should display nothing is something is there and not wanted with indirection', () => {
-    const { context } = createMockContainer(
+    registeredModals = {
+      'abc:foo': {
+        component: () => <div />,
+        name: 'qxz',
+      },
+    };
+    openModals = [
       {
-        'abc:foo': {
-          component: () => <div />,
-          name: 'qxz',
-        },
+        name: 'xyz:foo',
+        alternative: 'bar',
+        options: {},
       },
-      [
-        {
-          name: 'xyz:foo',
-          alternative: 'bar',
-          options: {},
-        },
-      ],
-    );
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    ];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should display nothing if nothing is available even if wanted', () => {
-    const { context } = createMockContainer({}, [
+    registeredModals = {};
+    openModals = [
       {
         name: 'foo',
         options: {},
       },
-    ]);
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    ];
+    const node = render(<Modals />);
     expect(node.queryByRole('overlay')).toBe(null);
   });
 
   it('Should close all available dialogs', () => {
-    const close = jest.fn();
-    const { context } = createMockContainer(
+    const close = vitest.fn();
+    registeredModals = {
+      foo: {
+        component: () => <div />,
+      },
+      bar: {
+        component: () => <div />,
+      },
+    };
+    openModals = [
       {
-        foo: {
-          component: () => <div />,
-        },
-        bar: {
-          component: () => <div />,
-        },
+        name: 'foo',
+        options: {},
+        close,
+      },
+      {
+        name: 'bar',
+        options: {},
+        close,
       },
-      [
-        {
-          name: 'foo',
-          options: {},
-          close,
-        },
-        {
-          name: 'bar',
-          options: {},
-          close,
-        },
-      ],
-    );
-    const node = render(
-      <StateContext.Provider value={context}>
-        <Modals />
-      </StateContext.Provider>,
-    );
+    ];
+    const node = render(<Modals />);
     expect(close).toHaveBeenCalledTimes(0);
     fireEvent.click(node.getByRole('close'));
     expect(close).toHaveBeenCalledTimes(2);

package/src/actions.test.ts

@@ -1,8 +1,37 @@
+/**
+ * @vitest-environment jsdom
+ */
 import create from 'zustand';
-import { createListener } from 'piral-base';
-import { createActions } from 'piral-core';
+import { describe, it, expect, vitest } from 'vitest';
 import { registerModal, unregisterModal, openModal, closeModal } from './actions';
 
+function createListener() {
+  return {
+    on: vitest.fn(),
+    off: vitest.fn(),
+    emit: vitest.fn(),
+  };
+}
+
+function createActions(state, listener) {
+  const obj = {
+    ...listener,
+    state: state.getState(),
+    defineActions(actions) {
+      Object.entries(actions).forEach(([name, cb]) => {
+        obj[name] = (cb as any).bind(obj, obj);
+      });
+    },
+    readState(select) {
+      return select(state.getState());
+    },
+    dispatch(change) {
+      state.setState(change(state.getState()));
+    },
+  };
+  return obj;
+}
+
 describe('Modals Actions Module', () => {
   it('registerModal and unregisterModal', () => {
     const state: any = create(() => ({

package/src/create.test.ts

@@ -1,4 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
 import create from 'zustand';
+import { describe, it, expect, vitest } from 'vitest';
 import { createElement, FC } from 'react';
 import { createModalsApi } from './create';
 
@@ -13,9 +17,9 @@ function createMockContainer() {
   }));
   return {
     context: {
-      on: jest.fn(),
-      off: jest.fn(),
-      emit: jest.fn(),
+      on: vitest.fn(),
+      off: vitest.fn(),
+      emit: vitest.fn(),
       defineActions() {},
       converters: {},
       readState() {
@@ -46,8 +50,8 @@ const moduleMetadata = {
 describe('Create Modals API Extensions', () => {
   it('createModalsApi can register and unregister a modal', () => {
     const container = createMockContainer();
-    container.context.registerModal = jest.fn();
-    container.context.unregisterModal = jest.fn();
+    container.context.registerModal = vitest.fn();
+    container.context.unregisterModal = vitest.fn();
     const api = createApi(container);
     api.registerModal('modal', StubComponent);
     expect(container.context.registerModal).toHaveBeenCalledTimes(1);
@@ -59,8 +63,8 @@ describe('Create Modals API Extensions', () => {
 
   it('createModalsApi showModal uses an action and leaves a disposer', async () => {
     const container = createMockContainer();
-    container.context.openModal = jest.fn();
-    container.context.closeModal = jest.fn();
+    container.context.openModal = vitest.fn();
+    container.context.closeModal = vitest.fn();
     const api = createApi(container);
     const close = api.showModal('my-modal');
     close();
@@ -71,8 +75,8 @@ describe('Create Modals API Extensions', () => {
 
   it('createModalsApi can be disposed', async () => {
     const container = createMockContainer();
-    container.context.registerModal = jest.fn();
-    container.context.unregisterModal = jest.fn();
+    container.context.registerModal = vitest.fn();
+    container.context.unregisterModal = vitest.fn();
     const api = createApi(container);
     const dispose = api.registerModal('modal', StubComponent);
     expect(container.context.registerModal).toHaveBeenCalledTimes(1);