piral-core 0.15.0-alpha.4396 → 0.15.0-alpha.4399
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/esm/defaults/DefaultErrorInfo.js +1 -1
- package/esm/defaults/DefaultErrorInfo.js.map +1 -1
- package/lib/defaults/DefaultErrorInfo.js +1 -1
- package/lib/defaults/DefaultErrorInfo.js.map +1 -1
- package/package.json +4 -4
- package/src/Piral.test.tsx +7 -18
- package/src/RootListener.test.tsx +4 -7
- package/src/actions/app.test.ts +16 -16
- package/src/components/ExtensionSlot.test.tsx +44 -47
- package/src/components/ForeignComponentContainer.test.tsx +18 -33
- package/src/components/Mediator.test.tsx +2 -2
- package/src/components/PiralRoutes.test.tsx +35 -35
- package/src/components/PiralView-server.test.tsx +3 -3
- package/src/components/PiralView.test.tsx +25 -25
- package/src/components/ResponsiveLayout.test.tsx +8 -8
- package/src/components/SwitchErrorInfo.test.tsx +23 -25
- package/src/defaults/DefaultErrorInfo.test.tsx +15 -18
- package/src/defaults/DefaultErrorInfo.tsx +1 -1
- package/src/defaults/DefaultLayout.test.tsx +7 -7
- package/src/defaults/DefaultLoadingIndicator.test.tsx +3 -3
- package/src/hooks/setter.test.ts +2 -3
- package/src/setters/SetComponent.test.tsx +2 -2
- package/src/setters/SetError.test.tsx +2 -2
- package/src/setters/SetErrors.test.tsx +2 -2
- package/src/setters/SetLayout.test.tsx +2 -2
- package/src/setters/SetProvider.test.tsx +2 -2
- package/src/setters/SetRedirect.test.tsx +2 -2
- package/src/setters/SetRoute.test.tsx +2 -2
- package/src/state/withApi.test.tsx +39 -39
- package/src/utils/extension.test.tsx +7 -8
- package/src/utils/state.test.ts +0 -2
|
@@ -5,6 +5,6 @@ import { ExtensionSlot, SwitchErrorInfo } from '../components';
|
|
|
5
5
|
* Leverage the default one by registration of respective extensions using
|
|
6
6
|
* the "error" name.
|
|
7
7
|
*/
|
|
8
|
-
export const DefaultErrorInfo = (props) => (React.createElement(ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(SwitchErrorInfo, Object.assign({
|
|
8
|
+
export const DefaultErrorInfo = (props) => (React.createElement(ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(SwitchErrorInfo, Object.assign({}, props)) }));
|
|
9
9
|
DefaultErrorInfo.displayName = 'DefaultErrorInfo';
|
|
10
10
|
//# sourceMappingURL=DefaultErrorInfo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,eAAe,
|
|
1
|
+
{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG/D;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,aAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,eAAe,oBAAK,KAAK,EAAI,GAAI,CAC3F,CAAC;AACF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
|
|
@@ -8,7 +8,7 @@ const components_1 = require("../components");
|
|
|
8
8
|
* Leverage the default one by registration of respective extensions using
|
|
9
9
|
* the "error" name.
|
|
10
10
|
*/
|
|
11
|
-
const DefaultErrorInfo = (props) => (React.createElement(components_1.ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(components_1.SwitchErrorInfo, Object.assign({
|
|
11
|
+
const DefaultErrorInfo = (props) => (React.createElement(components_1.ExtensionSlot, { name: "error", params: props, empty: () => React.createElement(components_1.SwitchErrorInfo, Object.assign({}, props)) }));
|
|
12
12
|
exports.DefaultErrorInfo = DefaultErrorInfo;
|
|
13
13
|
exports.DefaultErrorInfo.displayName = 'DefaultErrorInfo';
|
|
14
14
|
//# sourceMappingURL=DefaultErrorInfo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,8CAA+D;AAG/D;;;;GAIG;AACI,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,0BAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,4BAAe,
|
|
1
|
+
{"version":3,"file":"DefaultErrorInfo.js","sourceRoot":"","sources":["../../src/defaults/DefaultErrorInfo.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,8CAA+D;AAG/D;;;;GAIG;AACI,MAAM,gBAAgB,GAA6B,CAAC,KAAK,EAAE,EAAE,CAAC,CACnE,oBAAC,0BAAa,IAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,oBAAC,4BAAe,oBAAK,KAAK,EAAI,GAAI,CAC3F,CAAC;AAFW,QAAA,gBAAgB,oBAE3B;AACF,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "piral-core",
|
|
3
|
-
"version": "0.15.0-alpha.
|
|
3
|
+
"version": "0.15.0-alpha.4399",
|
|
4
4
|
"description": "The core library for creating a Piral instance.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"portal",
|
|
@@ -71,8 +71,8 @@
|
|
|
71
71
|
"test": "echo \"Error: run tests from root\" && exit 1"
|
|
72
72
|
},
|
|
73
73
|
"dependencies": {
|
|
74
|
-
"piral-base": "0.15.0-alpha.
|
|
75
|
-
"piral-debug-utils": "0.15.0-alpha.
|
|
74
|
+
"piral-base": "0.15.0-alpha.4399",
|
|
75
|
+
"piral-debug-utils": "0.15.0-alpha.4399",
|
|
76
76
|
"zustand": "^3.0.0"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"history",
|
|
101
101
|
"tslib"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "34be0cac6948a92981ab4994b01b34e44462e7a0"
|
|
104
104
|
}
|
package/src/Piral.test.tsx
CHANGED
|
@@ -1,30 +1,19 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { act } from '
|
|
3
|
-
import { mount, ReactWrapper } from 'enzyme';
|
|
2
|
+
import { render, act } from '@testing-library/react';
|
|
4
3
|
import { Piral } from './Piral';
|
|
5
|
-
import { RegisteredRouter } from './components';
|
|
6
4
|
import { createInstance } from './createInstance';
|
|
7
5
|
|
|
8
|
-
function resolveAfter(time = 5) {
|
|
9
|
-
return new Promise<void>((resolve) => setTimeout(resolve, time));
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
async function waitForComponentToPaint<P = {}>(wrapper: ReactWrapper<P>, amount = 5) {
|
|
13
|
-
await act(resolveAfter);
|
|
14
|
-
wrapper.update();
|
|
15
|
-
}
|
|
16
|
-
|
|
17
6
|
describe('Piral Component', () => {
|
|
18
7
|
it('renders the Piral instance with default settings', async () => {
|
|
19
|
-
const node =
|
|
20
|
-
await
|
|
21
|
-
expect(node.
|
|
8
|
+
const node = render(<Piral />);
|
|
9
|
+
await act(() => Promise.resolve());
|
|
10
|
+
expect(node.container.childNodes.length).toBe(1);
|
|
22
11
|
});
|
|
23
12
|
|
|
24
13
|
it('renders the Piral instance with custom settings', async () => {
|
|
25
14
|
const instance = createInstance();
|
|
26
|
-
const node =
|
|
27
|
-
await
|
|
28
|
-
expect(node.
|
|
15
|
+
const node = render(<Piral instance={instance} />);
|
|
16
|
+
await act(() => Promise.resolve());
|
|
17
|
+
expect(node.container.childNodes.length).toBe(1);
|
|
29
18
|
});
|
|
30
19
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { render } from 'react
|
|
3
|
-
import { act } from 'react-dom/test-utils';
|
|
2
|
+
import { render, act } from '@testing-library/react';
|
|
4
3
|
import { RootListener } from './RootListener';
|
|
5
4
|
|
|
6
5
|
jest.mock('./hooks/globalState', () => ({
|
|
@@ -18,8 +17,7 @@ describe('RootListener Component', () => {
|
|
|
18
17
|
const element = document.createElement('div');
|
|
19
18
|
const removed = jest.fn();
|
|
20
19
|
document.body.appendChild(element);
|
|
21
|
-
|
|
22
|
-
render(<RootListener />, container);
|
|
20
|
+
render(<RootListener />);
|
|
23
21
|
document.body.removeEventListener = removed;
|
|
24
22
|
await act(() => {
|
|
25
23
|
const event = new CustomEvent('render-html', {
|
|
@@ -37,12 +35,11 @@ describe('RootListener Component', () => {
|
|
|
37
35
|
});
|
|
38
36
|
|
|
39
37
|
it('removes the RootListener successfully', async () => {
|
|
40
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
41
38
|
const removed = jest.fn();
|
|
42
|
-
render(<RootListener
|
|
39
|
+
const container = render(<RootListener />);
|
|
43
40
|
document.body.removeEventListener = removed;
|
|
44
41
|
await act(resolveAfter);
|
|
45
|
-
|
|
42
|
+
container.unmount();
|
|
46
43
|
await act(resolveAfter);
|
|
47
44
|
expect(removed).toHaveBeenCalled();
|
|
48
45
|
});
|
package/src/actions/app.test.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import create from 'zustand';
|
|
2
|
-
import {
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
3
|
import { createElement } from 'react';
|
|
4
4
|
import { createListener, Pilet } from 'piral-base';
|
|
5
5
|
import {
|
|
@@ -104,9 +104,9 @@ describe('App Actions Module', () => {
|
|
|
104
104
|
const NewProvider = state.getState().provider;
|
|
105
105
|
expect(NewProvider).not.toBeUndefined();
|
|
106
106
|
|
|
107
|
-
const node =
|
|
108
|
-
expect(node.
|
|
109
|
-
expect(node.
|
|
107
|
+
const node = render(createElement(NewProvider, undefined, 'Some text'));
|
|
108
|
+
expect(node.container.querySelectorAll('div').length).toBe(1);
|
|
109
|
+
expect(node.container.textContent).toBe('Some text');
|
|
110
110
|
});
|
|
111
111
|
|
|
112
112
|
it('allows using includeProvider twice', () => {
|
|
@@ -122,10 +122,10 @@ describe('App Actions Module', () => {
|
|
|
122
122
|
const NewProvider = state.getState().provider;
|
|
123
123
|
expect(NewProvider).not.toBeUndefined();
|
|
124
124
|
|
|
125
|
-
const node =
|
|
126
|
-
expect(node.
|
|
127
|
-
expect(node.
|
|
128
|
-
expect(node.
|
|
125
|
+
const node = render(createElement(NewProvider, undefined, 'Some text'));
|
|
126
|
+
expect(node.container.querySelectorAll('b').length).toBe(1);
|
|
127
|
+
expect(node.container.querySelectorAll('i').length).toBe(1);
|
|
128
|
+
expect(node.container.textContent).toBe('Some text');
|
|
129
129
|
});
|
|
130
130
|
|
|
131
131
|
it('allows using includeProvider with props', () => {
|
|
@@ -139,10 +139,10 @@ describe('App Actions Module', () => {
|
|
|
139
139
|
const NewProvider = state.getState().provider;
|
|
140
140
|
expect(NewProvider).not.toBeUndefined();
|
|
141
141
|
|
|
142
|
-
const node =
|
|
143
|
-
expect(node.
|
|
144
|
-
expect(node.
|
|
145
|
-
expect(node.
|
|
142
|
+
const node = render(createElement(NewProvider, undefined, 'Some text'));
|
|
143
|
+
expect(node.container.querySelectorAll('b').length).toBe(0);
|
|
144
|
+
expect(node.container.querySelectorAll('i').length).toBe(1);
|
|
145
|
+
expect(node.container.textContent).toBe('IcecreamSome text');
|
|
146
146
|
});
|
|
147
147
|
|
|
148
148
|
it('allows multiple includeProvider with props', () => {
|
|
@@ -158,9 +158,9 @@ describe('App Actions Module', () => {
|
|
|
158
158
|
const NewProvider = state.getState().provider;
|
|
159
159
|
expect(NewProvider).not.toBeUndefined();
|
|
160
160
|
|
|
161
|
-
const node =
|
|
162
|
-
expect(node.
|
|
163
|
-
expect(node.
|
|
164
|
-
expect(node.
|
|
161
|
+
const node = render(createElement(NewProvider, undefined, 'Some text'));
|
|
162
|
+
expect(node.container.querySelectorAll('b').length).toBe(1);
|
|
163
|
+
expect(node.container.querySelectorAll('i').length).toBe(1);
|
|
164
|
+
expect(node.container.textContent).toBe('IcecreamChocolateSome text');
|
|
165
165
|
});
|
|
166
166
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { render } from '@testing-library/react';
|
|
3
3
|
import { ExtensionSlot } from './ExtensionSlot';
|
|
4
4
|
|
|
5
5
|
jest.mock('../hooks/globalState', () => ({
|
|
@@ -15,18 +15,19 @@ jest.mock('../hooks/globalState', () => ({
|
|
|
15
15
|
},
|
|
16
16
|
},
|
|
17
17
|
},
|
|
18
|
+
destroyPortal: jest.fn(),
|
|
18
19
|
}),
|
|
19
20
|
}));
|
|
20
21
|
|
|
21
22
|
(React as any).useMemo = (cb) => cb();
|
|
22
23
|
|
|
23
|
-
const StubComponent1: React.FC = (props) => <div children={props.children} />;
|
|
24
|
+
const StubComponent1: React.FC<any> = (props) => <div role="stub1" children={props.children} />;
|
|
24
25
|
StubComponent1.displayName = 'StubComponent1';
|
|
25
26
|
|
|
26
|
-
const StubComponent2: React.FC = (props) => <div children={props.children} />;
|
|
27
|
+
const StubComponent2: React.FC<any> = (props) => <div role="stub2" children={props.children} />;
|
|
27
28
|
StubComponent2.displayName = 'StubComponent2';
|
|
28
29
|
|
|
29
|
-
const StubComponent3: React.FC = (props) => <div children={props.children} />;
|
|
30
|
+
const StubComponent3: React.FC<any> = (props) => <div role="stub3" children={props.children} />;
|
|
30
31
|
|
|
31
32
|
const state = {
|
|
32
33
|
portals: {},
|
|
@@ -60,10 +61,9 @@ const state = {
|
|
|
60
61
|
|
|
61
62
|
describe('Extension Module', () => {
|
|
62
63
|
it('is able to default render not available extension with no name', () => {
|
|
63
|
-
const node =
|
|
64
|
-
expect(node.
|
|
65
|
-
expect(node.
|
|
66
|
-
expect(node.find('div').length).toBe(0);
|
|
64
|
+
const node = render(<ExtensionSlot />);
|
|
65
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
66
|
+
expect(node.container.querySelectorAll('div').length).toBe(0);
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
it('is able to default render given component with no name', () => {
|
|
@@ -71,81 +71,78 @@ describe('Extension Module', () => {
|
|
|
71
71
|
type: 'html',
|
|
72
72
|
component: {
|
|
73
73
|
mount(element) {
|
|
74
|
-
const container = document.createElement('
|
|
74
|
+
const container = document.createElement('strong');
|
|
75
75
|
container.textContent = 'Hello!';
|
|
76
76
|
element.appendChild(container);
|
|
77
77
|
},
|
|
78
78
|
},
|
|
79
79
|
};
|
|
80
|
-
const node =
|
|
81
|
-
expect(node.
|
|
82
|
-
expect(node.
|
|
83
|
-
expect(node.
|
|
84
|
-
expect(node.text()).toContain('Hello!');
|
|
80
|
+
const node = render(<ExtensionSlot params={{ component }} />);
|
|
81
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
82
|
+
expect(node.container.querySelectorAll('strong').length).toBe(1);
|
|
83
|
+
expect(node.container.textContent).toContain('Hello!');
|
|
85
84
|
});
|
|
86
85
|
|
|
87
86
|
it('is able to default render not available extension', () => {
|
|
88
|
-
const node =
|
|
89
|
-
expect(node.
|
|
90
|
-
expect(node.find(StubComponent1).length).toBe(0);
|
|
87
|
+
const node = render(<ExtensionSlot name="qxz" />);
|
|
88
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
91
89
|
});
|
|
92
90
|
|
|
93
91
|
it('is able to (default) render empty extension', () => {
|
|
94
|
-
const node =
|
|
95
|
-
expect(node.
|
|
96
|
-
expect(node.find(StubComponent1).length).toBe(0);
|
|
92
|
+
const node = render(<ExtensionSlot name="foo" />);
|
|
93
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
97
94
|
});
|
|
98
95
|
|
|
99
96
|
it('is able to custom render not available extension', () => {
|
|
100
|
-
const node =
|
|
101
|
-
expect(node.
|
|
97
|
+
const node = render(<ExtensionSlot name="qxz" render={() => <StubComponent1 />} />);
|
|
98
|
+
expect(node.queryAllByRole("stub1").length).toBe(1);
|
|
102
99
|
});
|
|
103
100
|
|
|
104
101
|
it('is able to (custom) render empty extension', () => {
|
|
105
|
-
const node =
|
|
106
|
-
expect(node.
|
|
102
|
+
const node = render(<ExtensionSlot name="foo" render={() => <StubComponent1 />} />);
|
|
103
|
+
expect(node.queryAllByRole("stub1").length).toBe(1);
|
|
107
104
|
});
|
|
108
105
|
|
|
109
106
|
it('is able to render extension with multiple entries', () => {
|
|
110
|
-
const node =
|
|
111
|
-
expect(node.
|
|
112
|
-
expect(node.
|
|
113
|
-
expect(node.
|
|
107
|
+
const node = render(<ExtensionSlot name="bar" />);
|
|
108
|
+
expect(node.queryAllByRole("stub1").length).toBe(2);
|
|
109
|
+
expect(node.queryAllByRole("stub2").length).toBe(1);
|
|
110
|
+
expect(node.queryAllByRole("stub3").length).toBe(0);
|
|
114
111
|
});
|
|
115
112
|
|
|
116
113
|
it('is able to render extension without displayName', () => {
|
|
117
|
-
const node =
|
|
118
|
-
expect(node.
|
|
119
|
-
expect(node.
|
|
120
|
-
expect(node.
|
|
114
|
+
const node = render(<ExtensionSlot name="bla" />);
|
|
115
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
116
|
+
expect(node.queryAllByRole("stub2").length).toBe(0);
|
|
117
|
+
expect(node.queryAllByRole("stub3").length).toBe(1);
|
|
121
118
|
});
|
|
122
119
|
|
|
123
120
|
it('overrides the empty renderer on not available extension', () => {
|
|
124
|
-
const node =
|
|
125
|
-
expect(node.
|
|
126
|
-
expect(node.
|
|
121
|
+
const node = render(<ExtensionSlot name="qxz" empty={() => <StubComponent1 key="empty" />} />);
|
|
122
|
+
expect(node.queryAllByRole("stub1").length).toBe(1);
|
|
123
|
+
expect(node.queryAllByRole("stub2").length).toBe(0);
|
|
127
124
|
});
|
|
128
125
|
|
|
129
126
|
it('overrides the empty renderer on an available extension', () => {
|
|
130
|
-
const node =
|
|
131
|
-
expect(node.
|
|
132
|
-
expect(node.
|
|
127
|
+
const node = render(<ExtensionSlot name="foo" empty={() => <StubComponent2 key="empty" />} />);
|
|
128
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
129
|
+
expect(node.queryAllByRole("stub2").length).toBe(1);
|
|
133
130
|
});
|
|
134
131
|
|
|
135
132
|
it('overrides the empty and default renderer on an available extension', () => {
|
|
136
|
-
const node =
|
|
133
|
+
const node = render(
|
|
137
134
|
<ExtensionSlot
|
|
138
135
|
name="foo"
|
|
139
136
|
empty={() => <StubComponent2 key="empty" />}
|
|
140
137
|
render={(nodes) => <StubComponent1 children={nodes} />}
|
|
141
138
|
/>,
|
|
142
139
|
);
|
|
143
|
-
expect(node.
|
|
144
|
-
expect(node.
|
|
140
|
+
expect(node.queryAllByRole("stub1").length).toBe(1);
|
|
141
|
+
expect(node.queryAllByRole("stub2").length).toBe(1);
|
|
145
142
|
});
|
|
146
143
|
|
|
147
144
|
it('does not use the render function with empty when emptySkipsRender is set', () => {
|
|
148
|
-
const node =
|
|
145
|
+
const node = render(
|
|
149
146
|
<ExtensionSlot
|
|
150
147
|
name="foo"
|
|
151
148
|
emptySkipsRender
|
|
@@ -153,12 +150,12 @@ describe('Extension Module', () => {
|
|
|
153
150
|
render={(nodes) => <StubComponent1 children={nodes} />}
|
|
154
151
|
/>,
|
|
155
152
|
);
|
|
156
|
-
expect(node.
|
|
157
|
-
expect(node.
|
|
153
|
+
expect(node.queryAllByRole("stub1").length).toBe(0);
|
|
154
|
+
expect(node.queryAllByRole("stub2").length).toBe(1);
|
|
158
155
|
});
|
|
159
156
|
|
|
160
157
|
it('does use the render function without empty independent if emptySkipsRender is set', () => {
|
|
161
|
-
const node =
|
|
158
|
+
const node = render(
|
|
162
159
|
<ExtensionSlot
|
|
163
160
|
name="lol"
|
|
164
161
|
emptySkipsRender
|
|
@@ -166,7 +163,7 @@ describe('Extension Module', () => {
|
|
|
166
163
|
render={(nodes) => <StubComponent1 children={nodes} />}
|
|
167
164
|
/>,
|
|
168
165
|
);
|
|
169
|
-
expect(node.
|
|
170
|
-
expect(node.
|
|
166
|
+
expect(node.queryAllByRole("stub1").length).toBe(2);
|
|
167
|
+
expect(node.queryAllByRole("stub2").length).toBe(0);
|
|
171
168
|
});
|
|
172
169
|
});
|
|
@@ -1,79 +1,66 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { render
|
|
3
|
-
import { act } from 'react-dom/test-utils';
|
|
2
|
+
import { render, act } from '@testing-library/react';
|
|
4
3
|
import { ForeignComponentContainer } from './ForeignComponentContainer';
|
|
5
4
|
|
|
6
5
|
function resolveAfter(time = 5) {
|
|
7
6
|
return new Promise<void>((resolve) => setTimeout(resolve, time));
|
|
8
7
|
}
|
|
9
8
|
|
|
10
|
-
async function render(element: any, container: Element) {
|
|
11
|
-
renderDom(element, container);
|
|
12
|
-
await act(resolveAfter);
|
|
13
|
-
return () => renderDom(<div />, container);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
9
|
describe('ForeignComponentContainer component', () => {
|
|
17
10
|
it('mounts an HTML component', async () => {
|
|
18
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
19
11
|
const mount = jest.fn();
|
|
20
12
|
const component = { mount };
|
|
21
|
-
|
|
13
|
+
const container = render(
|
|
22
14
|
<ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
|
|
23
|
-
container,
|
|
24
15
|
);
|
|
16
|
+
await act(resolveAfter);
|
|
25
17
|
expect(mount).toHaveBeenCalled();
|
|
26
|
-
container.
|
|
18
|
+
container.unmount();
|
|
27
19
|
});
|
|
28
20
|
|
|
29
21
|
it('unmounts an HTML component', async () => {
|
|
30
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
31
22
|
const mount = jest.fn();
|
|
32
23
|
const unmount = jest.fn();
|
|
33
24
|
const component = { mount, unmount };
|
|
34
|
-
const
|
|
25
|
+
const container = render(
|
|
35
26
|
<ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={{}} />,
|
|
36
|
-
container,
|
|
37
27
|
);
|
|
28
|
+
await act(resolveAfter);
|
|
38
29
|
expect(mount).toHaveBeenCalled();
|
|
39
30
|
expect(unmount).not.toHaveBeenCalled();
|
|
40
|
-
|
|
31
|
+
container.unmount();
|
|
41
32
|
expect(unmount).toHaveBeenCalled();
|
|
42
|
-
container.remove();
|
|
43
33
|
});
|
|
44
34
|
|
|
45
35
|
it('updates an HTML component', async () => {
|
|
46
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
47
36
|
const mount = jest.fn();
|
|
48
37
|
const update = jest.fn();
|
|
49
38
|
const component = { mount, update };
|
|
50
|
-
|
|
39
|
+
const container = render(
|
|
51
40
|
<ForeignComponentContainer
|
|
52
41
|
$component={component}
|
|
53
42
|
$context={undefined}
|
|
54
43
|
$portalId="foo"
|
|
55
44
|
innerProps={{ a: 'bar' }}
|
|
56
45
|
/>,
|
|
57
|
-
container,
|
|
58
46
|
);
|
|
47
|
+
await act(resolveAfter);
|
|
59
48
|
expect(mount).toHaveBeenCalled();
|
|
60
49
|
expect(update).not.toHaveBeenCalled();
|
|
61
|
-
|
|
50
|
+
container.rerender(
|
|
62
51
|
<ForeignComponentContainer
|
|
63
52
|
$component={component}
|
|
64
53
|
$context={undefined}
|
|
65
54
|
$portalId="foo"
|
|
66
55
|
innerProps={{ a: 'foo' }}
|
|
67
56
|
/>,
|
|
68
|
-
container,
|
|
69
57
|
);
|
|
70
58
|
await act(resolveAfter);
|
|
71
59
|
expect(update).toHaveBeenCalled();
|
|
72
|
-
container.
|
|
60
|
+
container.unmount();
|
|
73
61
|
});
|
|
74
62
|
|
|
75
63
|
it('forces re-rendering of an HTML component', async () => {
|
|
76
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
77
64
|
const componentDidMount = ForeignComponentContainer.prototype.componentDidMount;
|
|
78
65
|
ForeignComponentContainer.prototype.componentDidMount = function () {
|
|
79
66
|
componentDidMount.call(this);
|
|
@@ -85,49 +72,47 @@ describe('ForeignComponentContainer component', () => {
|
|
|
85
72
|
const update = jest.fn();
|
|
86
73
|
const unmount = jest.fn();
|
|
87
74
|
const component = { mount, update, unmount };
|
|
88
|
-
|
|
75
|
+
const container = render(
|
|
89
76
|
<ForeignComponentContainer
|
|
90
77
|
$component={component}
|
|
91
78
|
$context={undefined}
|
|
92
79
|
$portalId="foo"
|
|
93
80
|
innerProps={{ a: 'bar' }}
|
|
94
81
|
/>,
|
|
95
|
-
container,
|
|
96
82
|
);
|
|
83
|
+
await act(resolveAfter);
|
|
97
84
|
expect(mount).toHaveBeenCalled();
|
|
98
85
|
expect(unmount).not.toHaveBeenCalled();
|
|
99
86
|
expect(update).not.toHaveBeenCalled();
|
|
100
|
-
|
|
87
|
+
container.rerender(
|
|
101
88
|
<ForeignComponentContainer
|
|
102
89
|
$component={component}
|
|
103
90
|
$context={undefined}
|
|
104
91
|
$portalId="foo"
|
|
105
92
|
innerProps={{ a: 'foo' }}
|
|
106
93
|
/>,
|
|
107
|
-
container,
|
|
108
94
|
);
|
|
109
95
|
await act(resolveAfter);
|
|
110
96
|
expect(update).not.toHaveBeenCalled();
|
|
111
97
|
expect(unmount).toHaveBeenCalled();
|
|
112
|
-
container.
|
|
98
|
+
container.unmount();
|
|
113
99
|
});
|
|
114
100
|
|
|
115
101
|
it('listens to render-html', async () => {
|
|
116
|
-
const container = document.body.appendChild(document.createElement('div'));
|
|
117
102
|
const mount = jest.fn();
|
|
118
103
|
const renderHtmlExtension = jest.fn();
|
|
119
104
|
const component = { mount };
|
|
120
105
|
const props = { piral: { renderHtmlExtension }, meta: {} };
|
|
121
|
-
|
|
106
|
+
const container = render(
|
|
122
107
|
<ForeignComponentContainer $component={component} $context={undefined} $portalId="foo" innerProps={props} />,
|
|
123
|
-
container,
|
|
124
108
|
);
|
|
109
|
+
await act(resolveAfter);
|
|
125
110
|
expect(mount).toHaveBeenCalled();
|
|
126
111
|
const node = document.querySelector('[data-portal-id=foo]');
|
|
127
112
|
expect(renderHtmlExtension).not.toHaveBeenCalled();
|
|
128
113
|
node?.dispatchEvent(new CustomEvent('render-html', { detail: {} }));
|
|
129
114
|
await act(resolveAfter);
|
|
130
115
|
expect(renderHtmlExtension).toHaveBeenCalled();
|
|
131
|
-
container.
|
|
116
|
+
container.unmount();
|
|
132
117
|
});
|
|
133
118
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import create from 'zustand';
|
|
3
|
+
import { render } from '@testing-library/react';
|
|
3
4
|
import { Mediator } from './Mediator';
|
|
4
|
-
import { mount } from 'enzyme';
|
|
5
5
|
import { StateContext } from '../state';
|
|
6
6
|
import { PiletMetadata } from '../types';
|
|
7
7
|
|
|
@@ -50,7 +50,7 @@ describe('Component Mediator', () => {
|
|
|
50
50
|
},
|
|
51
51
|
};
|
|
52
52
|
const { context } = createMockContainer();
|
|
53
|
-
|
|
53
|
+
render(
|
|
54
54
|
<StateContext.Provider value={context}>
|
|
55
55
|
<Mediator options={options} />
|
|
56
56
|
</StateContext.Provider>,
|