@modern-js/plugin-garfish 1.4.7 → 1.4.8
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/CHANGELOG.md +18 -0
- package/package.json +8 -8
- package/tests/__snapshots__/cli.test.tsx.snap +0 -79
- package/tests/cli.test.tsx +0 -245
- package/tests/hooks.test.tsx +0 -57
- package/tests/index.test.tsx +0 -252
- package/tests/resource/dashboard.ts +0 -44
- package/tests/resource/table.ts +0 -43
- package/tests/resource/userInfo.ts +0 -44
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @modern-js/plugin-garfish
|
|
2
2
|
|
|
3
|
+
## 1.4.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 36e702f8: fix(plugin-garfish): fix useModules component props type and cors config
|
|
8
|
+
- 04ae5262: chore: bump @modern-js/utils to v1.4.1 in dependencies
|
|
9
|
+
- 60f7d8bf: feat: add tests dir to npmignore
|
|
10
|
+
- e4cec1ce: types: fix config hook type
|
|
11
|
+
- d558d4b5: fix: should not import from @modern-js/utils
|
|
12
|
+
- Updated dependencies [b8599d09]
|
|
13
|
+
- Updated dependencies [6cffe99d]
|
|
14
|
+
- Updated dependencies [04ae5262]
|
|
15
|
+
- Updated dependencies [60f7d8bf]
|
|
16
|
+
- Updated dependencies [3bf4f8b0]
|
|
17
|
+
- @modern-js/utils@1.5.0
|
|
18
|
+
- @modern-js/plugin-router@1.2.10
|
|
19
|
+
- @modern-js/runtime-core@1.4.2
|
|
20
|
+
|
|
3
21
|
## 1.4.6
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
package/package.json
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"modern",
|
|
12
12
|
"modern.js"
|
|
13
13
|
],
|
|
14
|
-
"version": "1.4.
|
|
14
|
+
"version": "1.4.8",
|
|
15
15
|
"jsnext:source": "./src/index.ts",
|
|
16
16
|
"types": "./dist/types/runtime/index.d.ts",
|
|
17
17
|
"typesVersions": {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@babel/runtime": "^7",
|
|
53
|
-
"@modern-js/utils": "^1.
|
|
53
|
+
"@modern-js/utils": "^1.5.0",
|
|
54
54
|
"@types/debug": "^4.1.7",
|
|
55
55
|
"@types/react-loadable": "^5.5.6",
|
|
56
56
|
"debug": "^4.3.2",
|
|
@@ -59,10 +59,10 @@
|
|
|
59
59
|
"react-loadable": "^5.5.0"
|
|
60
60
|
},
|
|
61
61
|
"devDependencies": {
|
|
62
|
-
"@modern-js/core": "1.
|
|
63
|
-
"@modern-js/plugin-router": "^1.2.
|
|
64
|
-
"@modern-js/runtime-core": "1.4.
|
|
65
|
-
"@modern-js/types": "^1.
|
|
62
|
+
"@modern-js/core": "1.8.0",
|
|
63
|
+
"@modern-js/plugin-router": "^1.2.10",
|
|
64
|
+
"@modern-js/runtime-core": "1.4.2",
|
|
65
|
+
"@modern-js/types": "^1.5.0",
|
|
66
66
|
"@scripts/build": "0.0.0",
|
|
67
67
|
"@scripts/jest-config": "0.0.0",
|
|
68
68
|
"@testing-library/jest-dom": "^5.16.1",
|
|
@@ -83,8 +83,8 @@
|
|
|
83
83
|
"webpack-chain": "^6.5.1"
|
|
84
84
|
},
|
|
85
85
|
"peerDependencies": {
|
|
86
|
-
"@modern-js/plugin-router": "^1.2.
|
|
87
|
-
"@modern-js/runtime-core": "^1.4.
|
|
86
|
+
"@modern-js/plugin-router": "^1.2.10",
|
|
87
|
+
"@modern-js/runtime-core": "^1.4.2",
|
|
88
88
|
"react": "^17"
|
|
89
89
|
},
|
|
90
90
|
"sideEffects": false,
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
-
|
|
3
|
-
exports[`plugin-garfish cli cli addRuntimeExports 1`] = `
|
|
4
|
-
Array [
|
|
5
|
-
"export { default as garfish, default as masterApp } from '@modern-js/test/plugin-garfish'",
|
|
6
|
-
"export * from '@modern-js/test/plugin-garfish'",
|
|
7
|
-
]
|
|
8
|
-
`;
|
|
9
|
-
|
|
10
|
-
exports[`plugin-garfish cli cli get runtime config 1`] = `
|
|
11
|
-
Object {
|
|
12
|
-
"masterApp": Object {
|
|
13
|
-
"basename": "/test",
|
|
14
|
-
},
|
|
15
|
-
}
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
exports[`plugin-garfish cli cli get runtime features config 1`] = `
|
|
19
|
-
Object {
|
|
20
|
-
"masterApp": Object {
|
|
21
|
-
"basename": "/test2",
|
|
22
|
-
},
|
|
23
|
-
}
|
|
24
|
-
`;
|
|
25
|
-
|
|
26
|
-
exports[`plugin-garfish cli cli makeRender function 1`] = `
|
|
27
|
-
Object {
|
|
28
|
-
"renderByProvider": true,
|
|
29
|
-
"routerConfig": Object {
|
|
30
|
-
"basename": "/test",
|
|
31
|
-
"historyOptions": Object {
|
|
32
|
-
"basename": "/test",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
|
|
38
|
-
exports[`plugin-garfish cli cli set runtime config 1`] = `
|
|
39
|
-
Object {
|
|
40
|
-
"masterApp": true,
|
|
41
|
-
}
|
|
42
|
-
`;
|
|
43
|
-
|
|
44
|
-
exports[`plugin-garfish cli cli set runtime features config 1`] = `
|
|
45
|
-
Object {
|
|
46
|
-
"features": Object {
|
|
47
|
-
"masterApp": true,
|
|
48
|
-
},
|
|
49
|
-
}
|
|
50
|
-
`;
|
|
51
|
-
|
|
52
|
-
exports[`plugin-garfish cli webpack config close external and use js entry 1`] = `
|
|
53
|
-
Object {
|
|
54
|
-
"externals": Object {
|
|
55
|
-
"react": "react",
|
|
56
|
-
"react-dom": "react-dom",
|
|
57
|
-
},
|
|
58
|
-
"optimization": Object {
|
|
59
|
-
"runtimeChunk": false,
|
|
60
|
-
"splitChunks": Object {
|
|
61
|
-
"chunks": "async",
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
"output": Object {
|
|
65
|
-
"filename": "index.js",
|
|
66
|
-
"libraryTarget": "umd",
|
|
67
|
-
"publicPath": "//localhost:8080/",
|
|
68
|
-
},
|
|
69
|
-
}
|
|
70
|
-
`;
|
|
71
|
-
|
|
72
|
-
exports[`plugin-garfish cli webpack config default micro config 1`] = `
|
|
73
|
-
Object {
|
|
74
|
-
"output": Object {
|
|
75
|
-
"libraryTarget": "umd",
|
|
76
|
-
"publicPath": "//localhost:8080/",
|
|
77
|
-
},
|
|
78
|
-
}
|
|
79
|
-
`;
|
package/tests/cli.test.tsx
DELETED
|
@@ -1,245 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom';
|
|
2
|
-
import { Hooks, manager, ToRunners } from '@modern-js/core';
|
|
3
|
-
import WebpackChain from 'webpack-chain';
|
|
4
|
-
import GarfishPlugin, { externals } from '../src/cli';
|
|
5
|
-
import { getRuntimeConfig, makeRenderFunction, setRuntimeConfig } from '../src/cli/utils';
|
|
6
|
-
|
|
7
|
-
const addExportList = [];
|
|
8
|
-
jest.mock('@modern-js/utils', () => {
|
|
9
|
-
const originalModule = jest.requireActual('@modern-js/utils');
|
|
10
|
-
return {
|
|
11
|
-
__esModule: true,
|
|
12
|
-
...originalModule,
|
|
13
|
-
createRuntimeExportsUtils: ()=>({
|
|
14
|
-
addExport: (val: any)=> {
|
|
15
|
-
addExportList.push(val);
|
|
16
|
-
},
|
|
17
|
-
getPath: ()=> 'test',
|
|
18
|
-
}),
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
describe('plugin-garfish cli', () => {
|
|
23
|
-
test('cli garfish basename', async () => {
|
|
24
|
-
expect(GarfishPlugin().name).toBe('@modern-js/plugin-garfish');
|
|
25
|
-
|
|
26
|
-
const main = manager.clone().usePlugin(GarfishPlugin);
|
|
27
|
-
const runner = await main.init();
|
|
28
|
-
await runner.prepare();
|
|
29
|
-
const configHistoryOptions: any = await runner.resolvedConfig({
|
|
30
|
-
resolved: {
|
|
31
|
-
runtime: {
|
|
32
|
-
router: {
|
|
33
|
-
historyOptions: { basename: '/test' }
|
|
34
|
-
},
|
|
35
|
-
masterApp: {}
|
|
36
|
-
},
|
|
37
|
-
}
|
|
38
|
-
} as any);
|
|
39
|
-
|
|
40
|
-
expect(configHistoryOptions.resolved.runtime.masterApp.basename).toBe('/test');
|
|
41
|
-
|
|
42
|
-
const configHistory: any = await runner.resolvedConfig({
|
|
43
|
-
resolved: {
|
|
44
|
-
runtime: {
|
|
45
|
-
router: {
|
|
46
|
-
basename: '/test2'
|
|
47
|
-
},
|
|
48
|
-
masterApp: {}
|
|
49
|
-
},
|
|
50
|
-
}
|
|
51
|
-
} as any);
|
|
52
|
-
|
|
53
|
-
expect(configHistory.resolved.runtime.masterApp.basename).toBe('/test2');
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
test('cli get runtime config', ()=>{
|
|
57
|
-
const runtimeConfig = getRuntimeConfig({
|
|
58
|
-
runtime: {
|
|
59
|
-
masterApp: {
|
|
60
|
-
basename: '/test'
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
expect(runtimeConfig).toMatchSnapshot();
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
test('cli get runtime features config', ()=>{
|
|
68
|
-
const runtimeConfig = getRuntimeConfig({
|
|
69
|
-
runtime: {
|
|
70
|
-
masterApp: {
|
|
71
|
-
basename: '/test'
|
|
72
|
-
},
|
|
73
|
-
features: {
|
|
74
|
-
masterApp: {
|
|
75
|
-
basename: '/test2'
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
expect(runtimeConfig).toMatchSnapshot();
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
test('cli set runtime config', ()=>{
|
|
85
|
-
const runtimeConfig = {
|
|
86
|
-
runtime: {
|
|
87
|
-
masterApp: {
|
|
88
|
-
basename: '/test'
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
};
|
|
92
|
-
|
|
93
|
-
setRuntimeConfig(runtimeConfig, 'masterApp', true);
|
|
94
|
-
|
|
95
|
-
expect(runtimeConfig.runtime).toMatchSnapshot();
|
|
96
|
-
});
|
|
97
|
-
|
|
98
|
-
test('cli set runtime features config', ()=>{
|
|
99
|
-
const runtimeConfig = {
|
|
100
|
-
runtime: {
|
|
101
|
-
features: {
|
|
102
|
-
masterApp: {
|
|
103
|
-
basename: '/test'
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
setRuntimeConfig(runtimeConfig, 'masterApp', true);
|
|
110
|
-
|
|
111
|
-
expect(runtimeConfig.runtime).toMatchSnapshot();
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
test('cli makeRender function', ()=>{
|
|
115
|
-
const code = `
|
|
116
|
-
const router = (config)=> config;
|
|
117
|
-
const App = {};
|
|
118
|
-
const routerConfig = router({...App?.config?.router, ...App?.config?.features?.router});
|
|
119
|
-
const resultConfig = {
|
|
120
|
-
routerConfig,
|
|
121
|
-
renderByProvider: true,
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
if (IS_BROWSER) {
|
|
125
|
-
resultConfig.renderByProvider = false;
|
|
126
|
-
}
|
|
127
|
-
return resultConfig;
|
|
128
|
-
`;
|
|
129
|
-
const generateNewRenderFn = new Function('appInfo', 'IS_BROWSER', '__GARFISH_EXPORTS__', makeRenderFunction(code));
|
|
130
|
-
|
|
131
|
-
// render byGarfish but don't provider appInfo
|
|
132
|
-
expect(generateNewRenderFn(undefined, true, false)).toBe(null);
|
|
133
|
-
|
|
134
|
-
// run alone
|
|
135
|
-
expect(generateNewRenderFn(undefined, true)).toMatchObject({
|
|
136
|
-
renderByProvider: false
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
// render ByGarfish and provider appInfo
|
|
140
|
-
expect(generateNewRenderFn({ basename: '/test' }, true, true)).toMatchSnapshot();
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
test('webpack config close external and use js entry', async ()=>{
|
|
145
|
-
const resolveConfig: any = {
|
|
146
|
-
deploy: {
|
|
147
|
-
microFrontend: {
|
|
148
|
-
externalBasicLibrary: true,
|
|
149
|
-
enableHtmlEntry: false,
|
|
150
|
-
},
|
|
151
|
-
},
|
|
152
|
-
server: {
|
|
153
|
-
port: 8080
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
const main = manager.clone({
|
|
158
|
-
useResolvedConfigContext: ()=>resolveConfig
|
|
159
|
-
}).usePlugin(GarfishPlugin);
|
|
160
|
-
|
|
161
|
-
const runner = await main.init();
|
|
162
|
-
await runner.prepare();
|
|
163
|
-
const config: any = await runner.config();
|
|
164
|
-
const webpackConfig = new WebpackChain();
|
|
165
|
-
|
|
166
|
-
config[0].tools.webpack({}, {
|
|
167
|
-
chain: webpackConfig,
|
|
168
|
-
webpack: jest.fn(),
|
|
169
|
-
env: 'development'
|
|
170
|
-
});
|
|
171
|
-
|
|
172
|
-
const generateConfig = webpackConfig.toConfig();
|
|
173
|
-
expect(generateConfig).toMatchSnapshot();
|
|
174
|
-
expect(generateConfig).toMatchObject({
|
|
175
|
-
output: {
|
|
176
|
-
libraryTarget: 'umd',
|
|
177
|
-
publicPath: '//localhost:8080/',
|
|
178
|
-
filename: 'index.js'
|
|
179
|
-
},
|
|
180
|
-
externals,
|
|
181
|
-
optimization: { runtimeChunk: false, splitChunks: { chunks: 'async' } }
|
|
182
|
-
});
|
|
183
|
-
})
|
|
184
|
-
|
|
185
|
-
test('webpack config default micro config', async ()=>{
|
|
186
|
-
const resolveConfig: any = {
|
|
187
|
-
deploy: {
|
|
188
|
-
microFrontend: true,
|
|
189
|
-
},
|
|
190
|
-
server: {
|
|
191
|
-
port: '8080'
|
|
192
|
-
}
|
|
193
|
-
};
|
|
194
|
-
|
|
195
|
-
const main = manager.clone({
|
|
196
|
-
useResolvedConfigContext: ()=>resolveConfig
|
|
197
|
-
}).usePlugin(GarfishPlugin);
|
|
198
|
-
const runner = await main.init();
|
|
199
|
-
await runner.prepare();
|
|
200
|
-
const config: any = await runner.config();
|
|
201
|
-
const webpackConfig = new WebpackChain();
|
|
202
|
-
|
|
203
|
-
config[0].tools.webpack({}, {
|
|
204
|
-
chain: webpackConfig,
|
|
205
|
-
webpack: jest.fn(),
|
|
206
|
-
env: 'development'
|
|
207
|
-
});
|
|
208
|
-
|
|
209
|
-
const generateConfig = webpackConfig.toConfig();
|
|
210
|
-
expect(config[0].tools.devServer).toMatchObject({
|
|
211
|
-
headers: {
|
|
212
|
-
'Access-Control-Allow-Origin': '*',
|
|
213
|
-
},
|
|
214
|
-
});
|
|
215
|
-
|
|
216
|
-
expect(generateConfig).toMatchSnapshot();
|
|
217
|
-
expect(generateConfig).toMatchObject({
|
|
218
|
-
output: {
|
|
219
|
-
libraryTarget: 'umd',
|
|
220
|
-
publicPath: '//localhost:8080/'
|
|
221
|
-
}
|
|
222
|
-
});
|
|
223
|
-
expect(generateConfig.externals).toBeUndefined();
|
|
224
|
-
expect(generateConfig.output.filename).toBeUndefined();
|
|
225
|
-
});
|
|
226
|
-
|
|
227
|
-
test('cli addRuntimeExports', async ()=>{
|
|
228
|
-
const resolveConfig: any = {};
|
|
229
|
-
const mfPackagePath = '@modern-js/test/plugin-garfish';
|
|
230
|
-
const plugin = GarfishPlugin({
|
|
231
|
-
mfPackagePath,
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
const lifecycle = await plugin.setup({
|
|
235
|
-
useResolvedConfigContext: () => resolveConfig,
|
|
236
|
-
useAppContext: ()=>({
|
|
237
|
-
internalDirectory: 'test'
|
|
238
|
-
}),
|
|
239
|
-
} as any);
|
|
240
|
-
|
|
241
|
-
lifecycle && lifecycle.config();
|
|
242
|
-
lifecycle && lifecycle.addRuntimeExports()
|
|
243
|
-
expect(addExportList).toMatchSnapshot();
|
|
244
|
-
});
|
|
245
|
-
});
|
package/tests/hooks.test.tsx
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render } from '@testing-library/react';
|
|
3
|
-
import { createApp } from '@modern-js/runtime-core';
|
|
4
|
-
import '@testing-library/jest-dom';
|
|
5
|
-
|
|
6
|
-
import ModernGarfishPlugin, {
|
|
7
|
-
useModuleApp,
|
|
8
|
-
useModuleApps,
|
|
9
|
-
} from '../src/runtime';
|
|
10
|
-
|
|
11
|
-
global.React = React;
|
|
12
|
-
|
|
13
|
-
const dashboardPath = 'http://garfish-mock.com/dashboard';
|
|
14
|
-
const tableListPath = 'http://garfish-mock.com/table-list';
|
|
15
|
-
|
|
16
|
-
describe('plugin-garfish', () => {
|
|
17
|
-
test('legacyModule hooks params', async () => {
|
|
18
|
-
const dashBoardModuleInfo = {
|
|
19
|
-
name: 'Dashboard',
|
|
20
|
-
entry: dashboardPath,
|
|
21
|
-
};
|
|
22
|
-
const tableListModuleInfo = {
|
|
23
|
-
name: 'TableList',
|
|
24
|
-
entry: tableListPath,
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const microFrontendConfig = {
|
|
28
|
-
apps: [tableListModuleInfo, dashBoardModuleInfo],
|
|
29
|
-
LoadingComponent() {
|
|
30
|
-
return <div data-testid="loading-id">loading</div>;
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
const App = () => {
|
|
35
|
-
const { MApp, apps, Dashboard, TableList } = useModuleApps();
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
if (apps.length > 0) {
|
|
39
|
-
expect(apps[0].name).toBe(tableListModuleInfo.name);
|
|
40
|
-
expect(apps[0].entry).toBe(tableListModuleInfo.entry);
|
|
41
|
-
expect(apps[0].Component === TableList).toBeTruthy();
|
|
42
|
-
|
|
43
|
-
expect(apps[1].name).toBe(dashBoardModuleInfo.name);
|
|
44
|
-
expect(apps[1].entry).toBe(dashBoardModuleInfo.entry);
|
|
45
|
-
expect(apps[1].Component === Dashboard).toBeTruthy();
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return <div></div>;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
const AppWrapper = createApp({
|
|
52
|
-
plugins: [ModernGarfishPlugin(microFrontendConfig)],
|
|
53
|
-
})(App);
|
|
54
|
-
|
|
55
|
-
render(<AppWrapper />);
|
|
56
|
-
});
|
|
57
|
-
});
|
package/tests/index.test.tsx
DELETED
|
@@ -1,252 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import { createApp } from '@modern-js/runtime-core';
|
|
5
|
-
import fetchMock from 'jest-fetch-mock';
|
|
6
|
-
import '@testing-library/jest-dom';
|
|
7
|
-
// https://stackoverflow.com/questions/49034907/fetch-mock-does-not-mock-my-fetch
|
|
8
|
-
import {
|
|
9
|
-
Link,
|
|
10
|
-
Route,
|
|
11
|
-
Switch,
|
|
12
|
-
useLocation,
|
|
13
|
-
MemoryRouter,
|
|
14
|
-
} from '@modern-js/plugin-router';
|
|
15
|
-
import ModernGarfishPlugin, { useModuleApp } from '../src/runtime';
|
|
16
|
-
import { useModuleApps } from '../src';
|
|
17
|
-
import {
|
|
18
|
-
TABLE_LIST_ESCAPE_NODE,
|
|
19
|
-
TABLE_LIST_HTML,
|
|
20
|
-
TABLE_LIST_ROOT_NODE,
|
|
21
|
-
} from './resource/table';
|
|
22
|
-
import {
|
|
23
|
-
DASHBOARD_ESCAPE_NODE,
|
|
24
|
-
DASHBOARD_HTML,
|
|
25
|
-
DASHBOARD_ROOT_NODE,
|
|
26
|
-
} from './resource/dashboard';
|
|
27
|
-
import {
|
|
28
|
-
USER_INFO_ESCAPE_NODE,
|
|
29
|
-
USER_INFO_HTML,
|
|
30
|
-
USER_INFO_ROOT_NODE,
|
|
31
|
-
} from './resource/userInfo';
|
|
32
|
-
|
|
33
|
-
global.React = React;
|
|
34
|
-
global.fetch = fetchMock;
|
|
35
|
-
|
|
36
|
-
function waitFor(delay = 200) {
|
|
37
|
-
return new Promise(resolve => {
|
|
38
|
-
setTimeout(() => {
|
|
39
|
-
resolve(false);
|
|
40
|
-
}, delay);
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const dashboardPath = 'http://garfish-mock.com/dashboard';
|
|
45
|
-
const tableListPath = 'http://garfish-mock.com/table-list';
|
|
46
|
-
const userInfoPath = 'http://garfish-mock.com/user-info';
|
|
47
|
-
|
|
48
|
-
describe('plugin-garfish', () => {
|
|
49
|
-
beforeEach(() => {
|
|
50
|
-
// https://www.npmjs.com/package/jest-fetch-mock
|
|
51
|
-
fetchMock.mockIf(/^https?:\/\/garfish-mock.com.*$/, req => {
|
|
52
|
-
if (req.url.endsWith('/dashboard')) {
|
|
53
|
-
return Promise.resolve({
|
|
54
|
-
body: DASHBOARD_HTML,
|
|
55
|
-
headers: {
|
|
56
|
-
'Content-Type': 'text/html',
|
|
57
|
-
},
|
|
58
|
-
});
|
|
59
|
-
} else if (req.url.endsWith('/table-list')) {
|
|
60
|
-
return Promise.resolve({
|
|
61
|
-
body: TABLE_LIST_HTML,
|
|
62
|
-
headers: {
|
|
63
|
-
'Content-Type': 'text/html',
|
|
64
|
-
},
|
|
65
|
-
});
|
|
66
|
-
} else if (req.url.endsWith('/user-info')) {
|
|
67
|
-
return Promise.resolve({
|
|
68
|
-
body: USER_INFO_HTML,
|
|
69
|
-
headers: {
|
|
70
|
-
'Content-Type': 'text/html',
|
|
71
|
-
},
|
|
72
|
-
});
|
|
73
|
-
} else {
|
|
74
|
-
return Promise.resolve({
|
|
75
|
-
status: 404,
|
|
76
|
-
body: 'Not Found',
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
fetchMock.doMock();
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
// testing-library.com/docs/example-react-router/
|
|
85
|
-
test('useModuleApps hooks', async () => {
|
|
86
|
-
const dashBoardModuleInfo = {
|
|
87
|
-
name: 'Dashboard',
|
|
88
|
-
entry: dashboardPath,
|
|
89
|
-
};
|
|
90
|
-
const tableListModuleInfo = {
|
|
91
|
-
name: 'TableList',
|
|
92
|
-
entry: tableListPath,
|
|
93
|
-
};
|
|
94
|
-
const userInfo = {
|
|
95
|
-
name: 'UserInfo',
|
|
96
|
-
activeWhen: '/user-info',
|
|
97
|
-
entry: userInfoPath,
|
|
98
|
-
};
|
|
99
|
-
|
|
100
|
-
const microFrontendConfig = {
|
|
101
|
-
apps: [tableListModuleInfo, dashBoardModuleInfo, userInfo],
|
|
102
|
-
manifest: {
|
|
103
|
-
loadable: {
|
|
104
|
-
loading: ()=> {
|
|
105
|
-
return <div data-testid="loading-id">loading</div>;
|
|
106
|
-
}
|
|
107
|
-
},
|
|
108
|
-
},
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
const App = () => {
|
|
112
|
-
const HomeTitle = 'Micro home page';
|
|
113
|
-
const Home = () => <div data-testid="home-title">{HomeTitle}</div>;
|
|
114
|
-
const { Dashboard, TableList } = useModuleApps();
|
|
115
|
-
|
|
116
|
-
const LocationDisplay = () => {
|
|
117
|
-
const location = useLocation();
|
|
118
|
-
return <div data-testid="location-display">{location.pathname}</div>;
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
return (
|
|
122
|
-
<MemoryRouter>
|
|
123
|
-
<div id="app">
|
|
124
|
-
<Link to="/">home</Link>
|
|
125
|
-
<Link data-testid="dashboard-link" to="/dashboard">
|
|
126
|
-
dashboard
|
|
127
|
-
</Link>
|
|
128
|
-
<Link data-testid="table-list-link" to="/table-list">
|
|
129
|
-
table-list
|
|
130
|
-
</Link>
|
|
131
|
-
<Link data-testid="user-info-link" to="/user-info">
|
|
132
|
-
user-info
|
|
133
|
-
</Link>
|
|
134
|
-
<Switch>
|
|
135
|
-
<Route exact={true} path="/">
|
|
136
|
-
<Home />
|
|
137
|
-
</Route>
|
|
138
|
-
<Route path="/dashboard">
|
|
139
|
-
<Dashboard />
|
|
140
|
-
</Route>
|
|
141
|
-
<Route path="/table-list">
|
|
142
|
-
<TableList />
|
|
143
|
-
</Route>
|
|
144
|
-
<LocationDisplay />
|
|
145
|
-
</Switch>
|
|
146
|
-
</div>
|
|
147
|
-
</MemoryRouter>
|
|
148
|
-
);
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
const AppWrapper = createApp({
|
|
152
|
-
plugins: [ModernGarfishPlugin(microFrontendConfig)],
|
|
153
|
-
})(App);
|
|
154
|
-
|
|
155
|
-
const { unmount } = render(<AppWrapper />);
|
|
156
|
-
expect(screen.getByTestId('home-title')).toBeInTheDocument();
|
|
157
|
-
const leftClick = { button: 0 };
|
|
158
|
-
userEvent.click(screen.getByTestId('dashboard-link'), leftClick);
|
|
159
|
-
// expect(await screen.findByText('loading')).toBeInTheDocument();
|
|
160
|
-
expect(
|
|
161
|
-
await screen.findByText(DASHBOARD_ROOT_NODE.text),
|
|
162
|
-
).toBeInTheDocument();
|
|
163
|
-
expect(
|
|
164
|
-
await screen.findByText(DASHBOARD_ESCAPE_NODE.text),
|
|
165
|
-
).toBeInTheDocument();
|
|
166
|
-
|
|
167
|
-
userEvent.click(screen.getByTestId('table-list-link'), leftClick);
|
|
168
|
-
expect(screen.queryByText(DASHBOARD_ROOT_NODE.text)).toBeNull();
|
|
169
|
-
expect(screen.queryByText(DASHBOARD_ESCAPE_NODE.text)).toBeNull();
|
|
170
|
-
// expect(await screen.findByText('loading')).toBeInTheDocument();
|
|
171
|
-
expect(
|
|
172
|
-
await screen.findByText(TABLE_LIST_ROOT_NODE.text),
|
|
173
|
-
).toBeInTheDocument();
|
|
174
|
-
expect(
|
|
175
|
-
await screen.findByText(TABLE_LIST_ESCAPE_NODE.text),
|
|
176
|
-
).toBeInTheDocument();
|
|
177
|
-
|
|
178
|
-
unmount();
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
test('legacyModule hooks MApp', async () => {
|
|
182
|
-
const userInfo = {
|
|
183
|
-
name: 'UserInfo',
|
|
184
|
-
activeWhen: '/user-info',
|
|
185
|
-
entry: userInfoPath,
|
|
186
|
-
};
|
|
187
|
-
const tableList2 = {
|
|
188
|
-
name: 'tablist2',
|
|
189
|
-
activeWhen: '/table-list',
|
|
190
|
-
entry: tableListPath,
|
|
191
|
-
};
|
|
192
|
-
|
|
193
|
-
const microFrontendConfig = {
|
|
194
|
-
apps: [userInfo, tableList2],
|
|
195
|
-
LoadingComponent() {
|
|
196
|
-
return <div data-testid="loading-id">loading</div>;
|
|
197
|
-
},
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
const App = () => {
|
|
201
|
-
const { MApp } = useModuleApps();
|
|
202
|
-
const NMApp = useModuleApp();
|
|
203
|
-
expect(MApp).toBe(NMApp);
|
|
204
|
-
|
|
205
|
-
return (
|
|
206
|
-
<MemoryRouter>
|
|
207
|
-
<div id="app">
|
|
208
|
-
<Link to="/">home</Link>
|
|
209
|
-
<Link data-testid="dashboard-link" to="/dashboard">
|
|
210
|
-
dashboard
|
|
211
|
-
</Link>
|
|
212
|
-
<Link data-testid="table-list-link" to="/table-list">
|
|
213
|
-
table-list
|
|
214
|
-
</Link>
|
|
215
|
-
<Link data-testid="user-info-link" to="/user-info">
|
|
216
|
-
user-info
|
|
217
|
-
</Link>
|
|
218
|
-
<MApp />
|
|
219
|
-
</div>
|
|
220
|
-
</MemoryRouter>
|
|
221
|
-
);
|
|
222
|
-
};
|
|
223
|
-
|
|
224
|
-
const AppWrapper = createApp({
|
|
225
|
-
plugins: [ModernGarfishPlugin(microFrontendConfig)],
|
|
226
|
-
})(App);
|
|
227
|
-
|
|
228
|
-
const { unmount } = render(<AppWrapper />);
|
|
229
|
-
|
|
230
|
-
history.pushState(null, '', '/user-info');
|
|
231
|
-
expect(
|
|
232
|
-
await screen.findByText(USER_INFO_ROOT_NODE.text),
|
|
233
|
-
).toBeInTheDocument();
|
|
234
|
-
expect(
|
|
235
|
-
await screen.findByText(USER_INFO_ESCAPE_NODE.text),
|
|
236
|
-
).toBeInTheDocument();
|
|
237
|
-
|
|
238
|
-
history.pushState(null, '', '/table-list');
|
|
239
|
-
await waitFor();
|
|
240
|
-
expect(screen.queryByText(USER_INFO_ROOT_NODE.text)).toBeNull();
|
|
241
|
-
expect(screen.queryByText(USER_INFO_ESCAPE_NODE.text)).toBeNull();
|
|
242
|
-
|
|
243
|
-
expect(
|
|
244
|
-
await screen.findByText(TABLE_LIST_ROOT_NODE.text),
|
|
245
|
-
).toBeInTheDocument();
|
|
246
|
-
expect(
|
|
247
|
-
await screen.findByText(TABLE_LIST_ESCAPE_NODE.text),
|
|
248
|
-
).toBeInTheDocument();
|
|
249
|
-
|
|
250
|
-
unmount();
|
|
251
|
-
});
|
|
252
|
-
});
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const DASHBOARD_ROOT_NODE = {
|
|
2
|
-
text: 'dashboard content',
|
|
3
|
-
id: 'dashboard-id',
|
|
4
|
-
};
|
|
5
|
-
export const DASHBOARD_ESCAPE_NODE = {
|
|
6
|
-
text: 'dashboard-escape text',
|
|
7
|
-
id: 'dashboard-escape-id',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const DASHBOARD_HTML = `
|
|
11
|
-
<!DOCTYPE html>
|
|
12
|
-
<html lang="en">
|
|
13
|
-
<head>
|
|
14
|
-
<title>dashboard app</title>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<h1>dashboard</h1>
|
|
18
|
-
<div id="root"></div>
|
|
19
|
-
<script>
|
|
20
|
-
if (typeof __GARFISH_EXPORTS__ !=='undefined') {
|
|
21
|
-
__GARFISH_EXPORTS__.provider = ()=>{
|
|
22
|
-
return {
|
|
23
|
-
render ({ dom , basename }) {
|
|
24
|
-
let newContent = document.createElement('div');
|
|
25
|
-
newContent.innerHTML = "${DASHBOARD_ROOT_NODE.text}";
|
|
26
|
-
newContent.setAttribute('id','${DASHBOARD_ROOT_NODE.id}')
|
|
27
|
-
dom.querySelector('#root').appendChild(newContent);
|
|
28
|
-
|
|
29
|
-
let escapeNode = document.createElement('div');
|
|
30
|
-
escapeNode.innerHTML = "${DASHBOARD_ESCAPE_NODE.text}";
|
|
31
|
-
escapeNode.setAttribute('id',"${DASHBOARD_ESCAPE_NODE.id}")
|
|
32
|
-
document.body.appendChild(escapeNode);
|
|
33
|
-
},
|
|
34
|
-
destroy ({ dom , basename }){
|
|
35
|
-
document.body.removeChild(document.querySelector("#${DASHBOARD_ESCAPE_NODE.id}"));
|
|
36
|
-
dom.querySelector('#root').removeChild(dom.querySelector("#${DASHBOARD_ROOT_NODE.id}"));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
</script>
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
44
|
-
`;
|
package/tests/resource/table.ts
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
export const TABLE_LIST_ROOT_NODE = {
|
|
2
|
-
text: 'table-list content',
|
|
3
|
-
id: 'table-list-id',
|
|
4
|
-
};
|
|
5
|
-
export const TABLE_LIST_ESCAPE_NODE = {
|
|
6
|
-
text: 'table-list escape text',
|
|
7
|
-
id: 'table-list-escape-id',
|
|
8
|
-
};
|
|
9
|
-
export const TABLE_LIST_HTML = `
|
|
10
|
-
<!DOCTYPE html>
|
|
11
|
-
<html lang="en">
|
|
12
|
-
<head>
|
|
13
|
-
<title>table-list app</title>
|
|
14
|
-
</head>
|
|
15
|
-
<body>
|
|
16
|
-
<h1>table-list</h1>
|
|
17
|
-
<div id="root"></div>
|
|
18
|
-
<script>
|
|
19
|
-
if (typeof __GARFISH_EXPORTS__ !=='undefined') {
|
|
20
|
-
__GARFISH_EXPORTS__.provider = ()=>{
|
|
21
|
-
return {
|
|
22
|
-
render ({ dom , basename }) {
|
|
23
|
-
let newContent = document.createElement('div');
|
|
24
|
-
newContent.innerHTML = "${TABLE_LIST_ROOT_NODE.text}";
|
|
25
|
-
newContent.setAttribute('id','${TABLE_LIST_ROOT_NODE.id}')
|
|
26
|
-
dom.querySelector('#root').appendChild(newContent);
|
|
27
|
-
|
|
28
|
-
let escapeNode = document.createElement('div');
|
|
29
|
-
escapeNode.innerHTML = "${TABLE_LIST_ESCAPE_NODE.text}";
|
|
30
|
-
escapeNode.setAttribute('id',"${TABLE_LIST_ESCAPE_NODE.id}")
|
|
31
|
-
document.body.appendChild(escapeNode);
|
|
32
|
-
},
|
|
33
|
-
destroy ({ dom , basename }){
|
|
34
|
-
document.body.removeChild(document.querySelector("#${TABLE_LIST_ESCAPE_NODE.id}"));
|
|
35
|
-
dom.querySelector('#root').removeChild(dom.querySelector("#${TABLE_LIST_ROOT_NODE.id}"));
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
43
|
-
`;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
export const USER_INFO_ROOT_NODE = {
|
|
2
|
-
text: 'userInfo content',
|
|
3
|
-
id: 'userInfo-id',
|
|
4
|
-
};
|
|
5
|
-
export const USER_INFO_ESCAPE_NODE = {
|
|
6
|
-
text: 'userInfo-escape text',
|
|
7
|
-
id: 'userInfo-escape-id',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const USER_INFO_HTML = `
|
|
11
|
-
<!DOCTYPE html>
|
|
12
|
-
<html lang="en">
|
|
13
|
-
<head>
|
|
14
|
-
<title>userInfo app</title>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<h1>userInfo</h1>
|
|
18
|
-
<div id="root"></div>
|
|
19
|
-
<script>
|
|
20
|
-
if (typeof __GARFISH_EXPORTS__ !=='undefined') {
|
|
21
|
-
__GARFISH_EXPORTS__.provider = ()=>{
|
|
22
|
-
return {
|
|
23
|
-
render ({ dom , basename }) {
|
|
24
|
-
let newContent = document.createElement('div');
|
|
25
|
-
newContent.innerHTML = "${USER_INFO_ROOT_NODE.text}";
|
|
26
|
-
newContent.setAttribute('id','${USER_INFO_ROOT_NODE.id}')
|
|
27
|
-
dom.querySelector('#root').appendChild(newContent);
|
|
28
|
-
|
|
29
|
-
let escapeNode = document.createElement('div');
|
|
30
|
-
escapeNode.innerHTML = "${USER_INFO_ESCAPE_NODE.text}";
|
|
31
|
-
escapeNode.setAttribute('id',"${USER_INFO_ESCAPE_NODE.id}")
|
|
32
|
-
document.body.appendChild(escapeNode);
|
|
33
|
-
},
|
|
34
|
-
destroy ({ dom , basename }){
|
|
35
|
-
document.body.removeChild(document.querySelector("#${USER_INFO_ESCAPE_NODE.id}"));
|
|
36
|
-
dom.querySelector('#root').removeChild(dom.querySelector("#${USER_INFO_ROOT_NODE.id}"));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
</script>
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
44
|
-
`;
|