piral-modals 1.3.3-beta.6190 → 1.3.3-beta.6201
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/Modals.test.tsx +109 -144
- package/src/actions.test.ts +31 -2
- package/src/create.test.ts +13 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-modals",
|
|
3
|
-
"version": "1.3.3-beta.
|
|
3
|
+
"version": "1.3.3-beta.6201",
|
|
4
4
|
"description": "Plugin for the display of modal dialogs in Piral.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"piral",
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@types/react": "^18.0.0",
|
|
65
|
-
"piral-core": "1.3.3-beta.
|
|
65
|
+
"piral-core": "1.3.3-beta.6201",
|
|
66
66
|
"react": "^18.0.0"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "6e9f4e6f83514b5c38960ce015e073efc668f3d6"
|
|
69
69
|
}
|
package/src/Modals.test.tsx
CHANGED
|
@@ -1,191 +1,156 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @vitest-environment jsdom
|
|
3
|
+
*/
|
|
1
4
|
import * as React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import { render, fireEvent } from '@testing-library/react';
|
|
5
|
+
import { describe, it, expect, vitest, afterEach } from 'vitest';
|
|
6
|
+
import { render, fireEvent, cleanup } from '@testing-library/react';
|
|
5
7
|
import { Modals } from './Modals';
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
return select(state.getState());
|
|
37
|
-
},
|
|
38
|
-
state,
|
|
39
|
-
dispatch(update) {
|
|
40
|
-
state.setState(update(state.getState()));
|
|
9
|
+
let registeredModals: Record<string, any> = {};
|
|
10
|
+
let openModals: Array<any> = [];
|
|
11
|
+
|
|
12
|
+
vitest.mock('piral-core', () => ({
|
|
13
|
+
getPiralComponent(name) {
|
|
14
|
+
switch (name) {
|
|
15
|
+
case 'ModalsHost':
|
|
16
|
+
return ({ open, children, close }) => (
|
|
17
|
+
<div role="host">
|
|
18
|
+
{open && (
|
|
19
|
+
<div role="overlay">
|
|
20
|
+
<button role="close" onClick={close}>
|
|
21
|
+
Close
|
|
22
|
+
</button>
|
|
23
|
+
{children}
|
|
24
|
+
</div>
|
|
25
|
+
)}
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
case 'ModalsDialog':
|
|
29
|
+
return ({ children }) => <>{children}</>;
|
|
30
|
+
default:
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
useGlobalState(select) {
|
|
35
|
+
return select({
|
|
36
|
+
registry: {
|
|
37
|
+
modals: registeredModals,
|
|
41
38
|
},
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
}
|
|
39
|
+
modals: openModals,
|
|
40
|
+
});
|
|
41
|
+
},
|
|
42
|
+
}));
|
|
46
43
|
|
|
47
44
|
describe('Modals Component Shell Module', () => {
|
|
45
|
+
afterEach(() => {
|
|
46
|
+
cleanup();
|
|
47
|
+
});
|
|
48
|
+
|
|
48
49
|
it('Should display nothing is nothing is there', () => {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<Modals />
|
|
53
|
-
</StateContext.Provider>,
|
|
54
|
-
);
|
|
50
|
+
registeredModals = {};
|
|
51
|
+
openModals = [];
|
|
52
|
+
const node = render(<Modals />);
|
|
55
53
|
expect(node.queryByRole('overlay')).toBe(null);
|
|
56
54
|
});
|
|
57
55
|
|
|
58
56
|
it('Should display something if something is there and wanted', () => {
|
|
59
|
-
|
|
57
|
+
registeredModals = {
|
|
58
|
+
foo: {
|
|
59
|
+
component: () => <div />,
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
openModals = [
|
|
60
63
|
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
},
|
|
64
|
+
name: 'foo',
|
|
65
|
+
options: {},
|
|
64
66
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
name: 'foo',
|
|
68
|
-
options: {},
|
|
69
|
-
},
|
|
70
|
-
],
|
|
71
|
-
);
|
|
72
|
-
const node = render(
|
|
73
|
-
<StateContext.Provider value={context}>
|
|
74
|
-
<Modals />
|
|
75
|
-
</StateContext.Provider>,
|
|
76
|
-
);
|
|
67
|
+
];
|
|
68
|
+
const node = render(<Modals />);
|
|
77
69
|
expect(node.queryByRole('overlay')).not.toBe(null);
|
|
78
70
|
});
|
|
79
71
|
|
|
80
72
|
it('Should display nothing if something is there and not wanted', () => {
|
|
81
|
-
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
component: () => <div />,
|
|
85
|
-
},
|
|
73
|
+
registeredModals = {
|
|
74
|
+
foo: {
|
|
75
|
+
component: () => <div />,
|
|
86
76
|
},
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
const node = render(
|
|
90
|
-
<StateContext.Provider value={context}>
|
|
91
|
-
<Modals />
|
|
92
|
-
</StateContext.Provider>,
|
|
93
|
-
);
|
|
77
|
+
};
|
|
78
|
+
openModals = [];
|
|
79
|
+
const node = render(<Modals />);
|
|
94
80
|
expect(node.queryByRole('overlay')).toBe(null);
|
|
95
81
|
});
|
|
96
82
|
|
|
97
83
|
it('Should display something if something is there and wanted even indirectly', () => {
|
|
98
|
-
|
|
84
|
+
registeredModals = {
|
|
85
|
+
'abc:foo': {
|
|
86
|
+
component: () => <div />,
|
|
87
|
+
name: 'bar',
|
|
88
|
+
},
|
|
89
|
+
};
|
|
90
|
+
openModals = [
|
|
99
91
|
{
|
|
100
|
-
'
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
},
|
|
92
|
+
name: 'xyz:foo',
|
|
93
|
+
alternative: 'bar',
|
|
94
|
+
options: {},
|
|
104
95
|
},
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
name: 'xyz:foo',
|
|
108
|
-
alternative: 'bar',
|
|
109
|
-
options: {},
|
|
110
|
-
},
|
|
111
|
-
],
|
|
112
|
-
);
|
|
113
|
-
const node = render(
|
|
114
|
-
<StateContext.Provider value={context}>
|
|
115
|
-
<Modals />
|
|
116
|
-
</StateContext.Provider>,
|
|
117
|
-
);
|
|
96
|
+
];
|
|
97
|
+
const node = render(<Modals />);
|
|
118
98
|
expect(node.queryByRole('overlay')).not.toBe(null);
|
|
119
99
|
});
|
|
120
100
|
|
|
121
101
|
it('Should display nothing is something is there and not wanted with indirection', () => {
|
|
122
|
-
|
|
102
|
+
registeredModals = {
|
|
103
|
+
'abc:foo': {
|
|
104
|
+
component: () => <div />,
|
|
105
|
+
name: 'qxz',
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
openModals = [
|
|
123
109
|
{
|
|
124
|
-
'
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
},
|
|
110
|
+
name: 'xyz:foo',
|
|
111
|
+
alternative: 'bar',
|
|
112
|
+
options: {},
|
|
128
113
|
},
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
name: 'xyz:foo',
|
|
132
|
-
alternative: 'bar',
|
|
133
|
-
options: {},
|
|
134
|
-
},
|
|
135
|
-
],
|
|
136
|
-
);
|
|
137
|
-
const node = render(
|
|
138
|
-
<StateContext.Provider value={context}>
|
|
139
|
-
<Modals />
|
|
140
|
-
</StateContext.Provider>,
|
|
141
|
-
);
|
|
114
|
+
];
|
|
115
|
+
const node = render(<Modals />);
|
|
142
116
|
expect(node.queryByRole('overlay')).toBe(null);
|
|
143
117
|
});
|
|
144
118
|
|
|
145
119
|
it('Should display nothing if nothing is available even if wanted', () => {
|
|
146
|
-
|
|
120
|
+
registeredModals = {};
|
|
121
|
+
openModals = [
|
|
147
122
|
{
|
|
148
123
|
name: 'foo',
|
|
149
124
|
options: {},
|
|
150
125
|
},
|
|
151
|
-
]
|
|
152
|
-
const node = render(
|
|
153
|
-
<StateContext.Provider value={context}>
|
|
154
|
-
<Modals />
|
|
155
|
-
</StateContext.Provider>,
|
|
156
|
-
);
|
|
126
|
+
];
|
|
127
|
+
const node = render(<Modals />);
|
|
157
128
|
expect(node.queryByRole('overlay')).toBe(null);
|
|
158
129
|
});
|
|
159
130
|
|
|
160
131
|
it('Should close all available dialogs', () => {
|
|
161
|
-
const close =
|
|
162
|
-
|
|
132
|
+
const close = vitest.fn();
|
|
133
|
+
registeredModals = {
|
|
134
|
+
foo: {
|
|
135
|
+
component: () => <div />,
|
|
136
|
+
},
|
|
137
|
+
bar: {
|
|
138
|
+
component: () => <div />,
|
|
139
|
+
},
|
|
140
|
+
};
|
|
141
|
+
openModals = [
|
|
163
142
|
{
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
143
|
+
name: 'foo',
|
|
144
|
+
options: {},
|
|
145
|
+
close,
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
name: 'bar',
|
|
149
|
+
options: {},
|
|
150
|
+
close,
|
|
170
151
|
},
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
name: 'foo',
|
|
174
|
-
options: {},
|
|
175
|
-
close,
|
|
176
|
-
},
|
|
177
|
-
{
|
|
178
|
-
name: 'bar',
|
|
179
|
-
options: {},
|
|
180
|
-
close,
|
|
181
|
-
},
|
|
182
|
-
],
|
|
183
|
-
);
|
|
184
|
-
const node = render(
|
|
185
|
-
<StateContext.Provider value={context}>
|
|
186
|
-
<Modals />
|
|
187
|
-
</StateContext.Provider>,
|
|
188
|
-
);
|
|
152
|
+
];
|
|
153
|
+
const node = render(<Modals />);
|
|
189
154
|
expect(close).toHaveBeenCalledTimes(0);
|
|
190
155
|
fireEvent.click(node.getByRole('close'));
|
|
191
156
|
expect(close).toHaveBeenCalledTimes(2);
|
package/src/actions.test.ts
CHANGED
|
@@ -1,8 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @vitest-environment jsdom
|
|
3
|
+
*/
|
|
1
4
|
import create from 'zustand';
|
|
2
|
-
import {
|
|
3
|
-
import { createActions } from 'piral-core';
|
|
5
|
+
import { describe, it, expect, vitest } from 'vitest';
|
|
4
6
|
import { registerModal, unregisterModal, openModal, closeModal } from './actions';
|
|
5
7
|
|
|
8
|
+
function createListener() {
|
|
9
|
+
return {
|
|
10
|
+
on: vitest.fn(),
|
|
11
|
+
off: vitest.fn(),
|
|
12
|
+
emit: vitest.fn(),
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function createActions(state, listener) {
|
|
17
|
+
const obj = {
|
|
18
|
+
...listener,
|
|
19
|
+
state: state.getState(),
|
|
20
|
+
defineActions(actions) {
|
|
21
|
+
Object.entries(actions).forEach(([name, cb]) => {
|
|
22
|
+
obj[name] = (cb as any).bind(obj, obj);
|
|
23
|
+
});
|
|
24
|
+
},
|
|
25
|
+
readState(select) {
|
|
26
|
+
return select(state.getState());
|
|
27
|
+
},
|
|
28
|
+
dispatch(change) {
|
|
29
|
+
state.setState(change(state.getState()));
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
return obj;
|
|
33
|
+
}
|
|
34
|
+
|
|
6
35
|
describe('Modals Actions Module', () => {
|
|
7
36
|
it('registerModal and unregisterModal', () => {
|
|
8
37
|
const state: any = create(() => ({
|
package/src/create.test.ts
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @vitest-environment jsdom
|
|
3
|
+
*/
|
|
1
4
|
import create from 'zustand';
|
|
5
|
+
import { describe, it, expect, vitest } from 'vitest';
|
|
2
6
|
import { createElement, FC } from 'react';
|
|
3
7
|
import { createModalsApi } from './create';
|
|
4
8
|
|
|
@@ -13,9 +17,9 @@ function createMockContainer() {
|
|
|
13
17
|
}));
|
|
14
18
|
return {
|
|
15
19
|
context: {
|
|
16
|
-
on:
|
|
17
|
-
off:
|
|
18
|
-
emit:
|
|
20
|
+
on: vitest.fn(),
|
|
21
|
+
off: vitest.fn(),
|
|
22
|
+
emit: vitest.fn(),
|
|
19
23
|
defineActions() {},
|
|
20
24
|
converters: {},
|
|
21
25
|
readState() {
|
|
@@ -46,8 +50,8 @@ const moduleMetadata = {
|
|
|
46
50
|
describe('Create Modals API Extensions', () => {
|
|
47
51
|
it('createModalsApi can register and unregister a modal', () => {
|
|
48
52
|
const container = createMockContainer();
|
|
49
|
-
container.context.registerModal =
|
|
50
|
-
container.context.unregisterModal =
|
|
53
|
+
container.context.registerModal = vitest.fn();
|
|
54
|
+
container.context.unregisterModal = vitest.fn();
|
|
51
55
|
const api = createApi(container);
|
|
52
56
|
api.registerModal('modal', StubComponent);
|
|
53
57
|
expect(container.context.registerModal).toHaveBeenCalledTimes(1);
|
|
@@ -59,8 +63,8 @@ describe('Create Modals API Extensions', () => {
|
|
|
59
63
|
|
|
60
64
|
it('createModalsApi showModal uses an action and leaves a disposer', async () => {
|
|
61
65
|
const container = createMockContainer();
|
|
62
|
-
container.context.openModal =
|
|
63
|
-
container.context.closeModal =
|
|
66
|
+
container.context.openModal = vitest.fn();
|
|
67
|
+
container.context.closeModal = vitest.fn();
|
|
64
68
|
const api = createApi(container);
|
|
65
69
|
const close = api.showModal('my-modal');
|
|
66
70
|
close();
|
|
@@ -71,8 +75,8 @@ describe('Create Modals API Extensions', () => {
|
|
|
71
75
|
|
|
72
76
|
it('createModalsApi can be disposed', async () => {
|
|
73
77
|
const container = createMockContainer();
|
|
74
|
-
container.context.registerModal =
|
|
75
|
-
container.context.unregisterModal =
|
|
78
|
+
container.context.registerModal = vitest.fn();
|
|
79
|
+
container.context.unregisterModal = vitest.fn();
|
|
76
80
|
const api = createApi(container);
|
|
77
81
|
const dispose = api.registerModal('modal', StubComponent);
|
|
78
82
|
expect(container.context.registerModal).toHaveBeenCalledTimes(1);
|