Skip to content

Commit fec8527

Browse files
FilipolikoFilipoliko
authoredSep 23, 2024··
Merge pull request #171 from seznam/itl
Migrate to IMA Testing Library
·
@ima/plugin-websocket@2.0.5@ima/cli-plugin-legacy-css@1.0.3
2 parents d136fbd + 0ca901a commit fec8527

File tree

21 files changed

+784
-961
lines changed

21 files changed

+784
-961
lines changed
 

‎.changeset/moody-rats-yell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ima/plugin-atoms": minor
3+
---
4+
5+
Add default oc binding of `$UIComponentHelper`. If you are calling `oc.bind('$UIComponentHelper', UIComponentHelper);` in your project, you can remove it.

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
.eslintcache
1010
*.tgz
1111
**/.turbo
12+
.swc/

‎jest.config.base.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,16 @@
33
*/
44
module.exports = {
55
rootDir: '.',
6-
testEnvironment: 'node',
76
testRegex: '(/__tests__/).*Spec\\.jsx?$',
87
modulePaths: ['<rootDir>/'],
9-
transformIgnorePatterns: [
10-
'node_modules/(?!(@ima/core|@ima/react-page-renderer)/)',
11-
],
128
transform: {
139
'^.+\\.(js|jsx)$': [
1410
'@swc/jest',
1511
{
1612
jsc: {
13+
experimental: {
14+
plugins: [['swc_mut_cjs_exports', {}]],
15+
},
1716
target: 'es2022',
1817
parser: {
1918
syntax: 'ecmascript',
@@ -31,6 +30,9 @@ module.exports = {
3130
'@swc/jest',
3231
{
3332
jsc: {
33+
experimental: {
34+
plugins: [['swc_mut_cjs_exports', {}]],
35+
},
3436
target: 'es2022',
3537
parser: {
3638
syntax: 'typescript',

‎jest.config.itl.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const base = require('./jest.config.base.js');
2+
3+
module.exports = {
4+
...base,
5+
preset: '@ima/testing-library',
6+
moduleNameMapper: {
7+
'^app/main$': '<rootDir>/../../utils/integration/main.js',
8+
},
9+
};

‎package-lock.json

+446-406
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5-3
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,17 @@
3232
"devDependencies": {
3333
"@babel/eslint-parser": "^7.21.8",
3434
"@babel/preset-react": "^7.22.3",
35-
"@cfaester/enzyme-adapter-react-18": "^0.7.0",
3635
"@changesets/cli": "^2.26.1",
3736
"@ima/plugin-cli": "^19.1.2",
37+
"@ima/testing-library": "^19.9.0",
3838
"@swc/jest": "^0.2.26",
39+
"@testing-library/dom": "^10.4.0",
40+
"@testing-library/jest-dom": "^6.4.8",
41+
"@testing-library/react": "^16.0.0",
3942
"@types/jest": "^29.5.1",
4043
"@types/node": "^20.2.5",
4144
"@typescript-eslint/eslint-plugin": "^5.59.8",
4245
"@typescript-eslint/parser": "^5.59.8",
43-
"enzyme": "3.11.0",
44-
"enzyme-to-json": "^3.6.2",
4546
"eslint": "^8.41.0",
4647
"eslint-config-prettier": "^8.8.0",
4748
"eslint-plugin-import": "^2.27.5",
@@ -66,6 +67,7 @@
6667
"stylelint-config-standard": "^33.0.0",
6768
"stylelint-declaration-block-no-ignored-properties": "^2.7.0",
6869
"stylelint-order": "^6.0.3",
70+
"swc_mut_cjs_exports": "^0.99.0",
6971
"to-mock": "^1.6.2",
7072
"turbo": "^1.12.5",
7173
"type-fest": "^4.12.0",

‎packages/plugin-atoms/jest.config.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
const base = require('../../jest.config.base.js');
1+
const itl = require('../../jest.config.itl.js');
22

33
module.exports = {
4-
...base,
5-
setupFiles: ['<rootDir>/jestSetup.js'],
4+
...itl,
65
};

‎packages/plugin-atoms/jestSetup.js

-4
This file was deleted.

‎packages/plugin-atoms/src/__tests__/__snapshots__/mountSpec.js.snap

-5
This file was deleted.

‎packages/plugin-atoms/src/__tests__/mountSpec.js

-107
This file was deleted.

‎packages/plugin-atoms/src/components/__tests__/IframeSpec.jsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { renderWithContext, waitFor } from '@ima/testing-library';
2+
3+
import Visibility from '../../Visibility';
4+
import { Iframe } from '../Iframe';
5+
6+
describe('Iframe', () => {
7+
it('should render with noscript tag by default', async () => {
8+
const { container } = await renderWithContext(
9+
<Iframe src='example.html' />
10+
);
11+
12+
expect(container.querySelector('noscript')).toBeInTheDocument();
13+
expect(container.firstChild).toMatchSnapshot();
14+
});
15+
16+
it('should render without noscript tag if visible', async () => {
17+
const { app, container } = await renderWithContext(
18+
<Iframe src='example.html' />
19+
);
20+
21+
// Mock getBoundingClientRect to simulate visibility
22+
container.firstChild.getBoundingClientRect = jest.fn(() => ({
23+
width: 100,
24+
height: 100,
25+
top: 0,
26+
left: 0,
27+
bottom: 100,
28+
right: 100,
29+
}));
30+
app.oc.get(Visibility).notify(); // Trigger visibility observer
31+
32+
// The component needs to re-render to remove noscript tag, there is no generic way to wait for it,
33+
// so we need to wait for the noscript tag to disappear
34+
await waitFor(() =>
35+
expect(container.querySelector('noscript')).not.toBeInTheDocument()
36+
);
37+
expect(container.firstChild).toMatchSnapshot();
38+
});
39+
});

‎packages/plugin-atoms/src/components/__tests__/ImageSpec.jsx

+27-60
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,41 @@
1-
import { Router, Window } from '@ima/core';
2-
import * as hooks from '@ima/react-page-renderer';
3-
import classnames from 'classnames';
4-
import { shallow } from 'enzyme';
5-
import { Infinite } from 'infinite-circle';
6-
import { withContext } from 'shallow-with-context';
7-
import { toMockedInstance } from 'to-mock';
1+
import { renderWithContext } from '@ima/testing-library';
82

9-
import ComponentPositions from '../../ComponentPositions';
10-
import UIComponentHelper from '../../UIComponentHelper';
11-
import Visibility from '../../Visibility';
123
import { Image } from '../Image';
134

14-
jest.mock('@ima/react-page-renderer', () => {
15-
return {
16-
__esModule: true,
17-
...jest.requireActual('@ima/react-page-renderer'),
18-
};
19-
});
20-
215
describe('Image component', () => {
22-
let wrapper = null;
23-
24-
let router = toMockedInstance(Router);
25-
let window = toMockedInstance(Window);
26-
let visibility = toMockedInstance(Visibility);
27-
let componentPositions = toMockedInstance(ComponentPositions);
28-
let infinite = toMockedInstance(Infinite);
29-
let uiComponentHelper = new UIComponentHelper(
30-
router,
31-
window,
32-
visibility,
33-
componentPositions,
34-
infinite,
35-
classnames
36-
);
37-
38-
let context = {
39-
$Utils: {
40-
$UIComponentHelper: uiComponentHelper,
41-
$CssClasses: classnames,
42-
},
43-
};
44-
const Img = withContext(Image, context);
45-
46-
beforeEach(() => {
47-
jest.spyOn(hooks, 'useComponentUtils').mockReturnValue(context.$Utils);
48-
});
49-
50-
it('should has defined default attributes', () => {
51-
wrapper = shallow(
52-
<Img src='./static/source.jpg' witdth={300} height={200} />,
53-
{ context }
54-
);
55-
expect(wrapper.html()).toMatchInlineSnapshot(
56-
`"<img height="200" src="./static/source.jpg" loading="lazy" decoding="async" class="atm-image atm-placeholder"/>"`
6+
it('should has defined default attributes', async () => {
7+
const { container } = await renderWithContext(
8+
<Image src='./static/source.jpg' witdth={300} height={200} />
579
);
10+
11+
expect(container.firstChild).toMatchInlineSnapshot(`
12+
<img
13+
class="atm-image atm-placeholder"
14+
decoding="async"
15+
height="200"
16+
loading="lazy"
17+
src="./static/source.jpg"
18+
/>
19+
`);
5820
});
5921

60-
it('should be responsive in layout', () => {
61-
wrapper = shallow(
62-
<Img
22+
it('should be responsive in layout', async () => {
23+
const { container } = await renderWithContext(
24+
<Image
6325
src='./static/source.jpg'
6426
witdth={300}
6527
height={200}
6628
layout='responsive'
67-
/>,
68-
{ context }
69-
);
70-
expect(wrapper.html()).toMatchInlineSnapshot(
71-
`"<img height="200" src="./static/source.jpg" loading="lazy" decoding="async" class="atm-image atm-layout-responsive atm-placeholder"/>"`
29+
/>
7230
);
31+
expect(container.firstChild).toMatchInlineSnapshot(`
32+
<img
33+
class="atm-image atm-layout-responsive atm-placeholder"
34+
decoding="async"
35+
height="200"
36+
loading="lazy"
37+
src="./static/source.jpg"
38+
/>
39+
`);
7340
});
7441
});

‎packages/plugin-atoms/src/components/__tests__/SizerSpec.jsx

+8-49
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,27 @@
1-
import * as hooks from '@ima/react-page-renderer';
2-
import classnames from 'classnames';
3-
import { shallow } from 'enzyme';
4-
import { Infinite } from 'infinite-circle';
5-
import { withContext } from 'shallow-with-context';
6-
import { toMockedInstance } from 'to-mock';
1+
import { renderWithContext } from '@ima/testing-library';
72

8-
import dummyRouter from '../../__tests__/mocks/router';
9-
import dummyWindow from '../../__tests__/mocks/window';
10-
import ComponentPositions from '../../ComponentPositions';
11-
import UIComponentHelper from '../../UIComponentHelper';
12-
import Visibility from '../../Visibility';
133
import { Sizer } from '../Sizer';
144

15-
jest.mock('@ima/react-page-renderer', () => {
16-
return {
17-
__esModule: true,
18-
...jest.requireActual('@ima/react-page-renderer'),
19-
};
20-
});
21-
225
describe('Sizer component', () => {
236
let wrapper = null;
24-
let visibility = toMockedInstance(Visibility);
25-
let componentPositions = toMockedInstance(ComponentPositions);
26-
let infinite = toMockedInstance(Infinite);
27-
let uiComponentHelper = new UIComponentHelper(
28-
dummyRouter,
29-
dummyWindow,
30-
visibility,
31-
componentPositions,
32-
infinite,
33-
classnames
34-
);
35-
let context = {
36-
$Utils: {
37-
$UIComponentHelper: uiComponentHelper,
38-
$CssClasses: classnames,
39-
},
40-
};
41-
42-
beforeEach(() => {
43-
const Component = withContext(Sizer, context);
44-
45-
jest.spyOn(hooks, 'useComponentUtils').mockReturnValue(context.$Utils);
467

47-
wrapper = shallow(<Component />, { context });
8+
beforeEach(async () => {
9+
wrapper = await renderWithContext(<Sizer />);
4810
});
4911

5012
it('should set atm-sizer class', () => {
51-
expect(wrapper.hasClass('atm-sizer')).toBeTruthy();
13+
expect(wrapper.container.firstChild).toHaveClass('atm-sizer');
5214
});
5315

5416
it('should set atm-placeholder class if is defined placeholder props', () => {
55-
wrapper.setProps({ placeholder: true });
17+
wrapper.rerender(<Sizer placeholder={true} />);
5618

57-
expect(wrapper.hasClass('atm-placeholder')).toBeTruthy();
19+
expect(wrapper.container.firstChild).toHaveClass('atm-placeholder');
5820
});
5921

6022
it('should calculate ratio between width and height', () => {
61-
wrapper.setProps({
62-
width: 16,
63-
height: 9,
64-
});
23+
wrapper.rerender(<Sizer width={16} height={9} />);
6524

66-
expect(wrapper.get(0).props.style.paddingTop).toBe('56.25%');
25+
expect(wrapper.container.firstChild.style.paddingTop).toBe('56.25%');
6726
});
6827
});

‎packages/plugin-atoms/src/components/__tests__/__snapshots__/IframeSpec.jsx.snap

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Iframe should render with noscript tag by default 1`] = `
4+
<div
5+
class="atm-iframe atm-overflow atm-placeholder"
6+
style="width: auto; height: auto;"
7+
>
8+
<noscript>
9+
&lt;iframe src="example.html" name="example.html" width="auto" height="auto" class="atm-fill" &gt;&lt;/iframe&gt;
10+
</noscript>
11+
</div>
12+
`;
13+
14+
exports[`Iframe should render without noscript tag if visible 1`] = `
15+
<div
16+
class="atm-iframe atm-overflow"
17+
style="width: auto; height: auto;"
18+
>
19+
<iframe
20+
class="atm-fill"
21+
name="example.html"
22+
src="example.html"
23+
/>
24+
</div>
25+
`;

‎packages/plugin-atoms/src/main.ts

+8
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,17 @@ import Visibility from './Visibility';
2727

2828
const defaultDependencies = ['$Router', ComponentPositions, Visibility];
2929

30+
declare module '@ima/core' {
31+
interface OCAliasMap {
32+
$UIComponentHelper: UIComponentHelper;
33+
}
34+
}
35+
3036
pluginLoader.register('@ima/plugin-atoms', ns => {
3137
return {
3238
initBind: (ns, oc) => {
39+
oc.bind('$UIComponentHelper', UIComponentHelper);
40+
3341
oc.inject(Infinite, []);
3442
},
3543
initServices: (ns, oc) => {

‎packages/plugin-select/jest.config.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
const base = require('../../jest.config.base.js');
1+
const itl = require('../../jest.config.itl.js');
22

33
module.exports = {
4-
...base,
5-
testEnvironment: 'jsdom',
6-
setupFiles: ['<rootDir>/jestSetupFile.js'],
7-
snapshotSerializers: [
8-
'<rootDir>/../../node_modules/enzyme-to-json/serializer',
9-
],
4+
...itl,
105
};

‎packages/plugin-select/jestSetupFile.js

-11
This file was deleted.

‎packages/plugin-select/src/select/__tests__/SelectSpec.js

+97-97
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
import { PageStateManager, Dispatcher } from '@ima/core';
2-
import { PageContext } from '@ima/react-page-renderer';
3-
import { shallow, mount } from 'enzyme';
4-
import { PureComponent, createElement, createRef } from 'react';
5-
import { toMockedInstance, setGlobalMockMethod } from 'to-mock';
1+
import { getContextValue, renderWithContext } from '@ima/testing-library';
2+
import { PureComponent, createRef } from 'react';
63

74
import forwardedSelect, {
85
createStateSelector,
@@ -12,8 +9,6 @@ import forwardedSelect, {
129
hoistNonReactStatic,
1310
} from '../select';
1411

15-
setGlobalMockMethod(jest.fn);
16-
1712
describe('plugin-select:', () => {
1813
const appState = {
1914
media: {
@@ -22,16 +17,7 @@ describe('plugin-select:', () => {
2217
},
2318
title: 'title',
2419
};
25-
const componentContext = {
26-
$Utils: {
27-
$PageStateManager: toMockedInstance(PageStateManager, {
28-
getState: () => {
29-
return appState;
30-
},
31-
}),
32-
$Dispatcher: toMockedInstance(Dispatcher),
33-
},
34-
};
20+
let componentContext;
3521
const selectorMethods = [
3622
state => {
3723
return {
@@ -64,14 +50,14 @@ describe('plugin-select:', () => {
6450
settings: Object.assign({}, props.settings, { newSettingsProp: true }),
6551
});
6652

67-
beforeEach(() => {
68-
global.$Debug = true;
53+
beforeEach(async () => {
54+
componentContext = await getContextValue();
6955

70-
setCreatorOfStateSelector(createStateSelector);
71-
});
56+
jest
57+
.spyOn(componentContext.$Utils.$PageStateManager, 'getState')
58+
.mockReturnValue(appState);
7259

73-
afterEach(() => {
74-
delete global.$Debug;
60+
setCreatorOfStateSelector(createStateSelector);
7561
});
7662

7763
describe('createStateSelector', () => {
@@ -127,7 +113,6 @@ describe('plugin-select:', () => {
127113
});
128114

129115
describe('select', () => {
130-
let wrapper = null;
131116
const defaultProps = {
132117
props: 'props',
133118
multiplier: 0.5,
@@ -146,88 +131,96 @@ describe('plugin-select:', () => {
146131
}
147132

148133
render() {
149-
return <h1>text</h1>;
134+
return <div>{JSON.stringify(this.props, null, 2)}</div>;
150135
}
151136
}
152137

153-
const MockContextProvider = ({ children }) => (
154-
<PageContext.Provider value={componentContext}>
155-
{children}
156-
</PageContext.Provider>
157-
);
158-
159-
it('should render component', () => {
160-
wrapper = shallow(createElement(Component, defaultProps), {
161-
context: componentContext,
162-
});
138+
it('should render component', async () => {
139+
const { container } = await renderWithContext(
140+
<Component {...defaultProps} />,
141+
{
142+
contextValue: componentContext,
143+
}
144+
);
163145

164-
expect(wrapper).toMatchSnapshot();
146+
expect(container.firstChild).toMatchSnapshot();
165147
});
166148

167-
it('should render component with extraProps', () => {
149+
it('should render component with extraProps', async () => {
168150
let EnhancedComponent = select(...selectorMethods)(Component);
169151

170-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
171-
context: componentContext,
172-
wrappingComponent: MockContextProvider,
173-
});
152+
const { container } = await renderWithContext(
153+
<EnhancedComponent {...defaultProps} />,
154+
{
155+
contextValue: componentContext,
156+
}
157+
);
174158

175-
expect(wrapper).toMatchSnapshot();
159+
expect(container.firstChild).toMatchSnapshot();
176160
});
177161

178-
it('should render component with extraProps modifies by ownProps', () => {
162+
it('should render component with extraProps modifies by ownProps', async () => {
179163
let EnhancedComponent = select(
180164
...selectorMethods,
181165
selectorUsingProps
182166
)(Component);
183167

184-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
185-
context: componentContext,
186-
wrappingComponent: MockContextProvider,
187-
});
168+
const { container } = await renderWithContext(
169+
<EnhancedComponent {...defaultProps} />,
170+
{
171+
contextValue: componentContext,
172+
}
173+
);
188174

189-
expect(wrapper).toMatchSnapshot();
175+
expect(container.firstChild).toMatchSnapshot();
190176
});
191177

192-
it('should render component with extraProps replaced by ownProps', () => {
178+
it('should render component with extraProps replaced by ownProps', async () => {
193179
let EnhancedComponent = select(
194180
...selectorMethods,
195181
selectorReplaceProps
196182
)(Component);
197183

198-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
199-
context: componentContext,
200-
wrappingComponent: MockContextProvider,
201-
});
184+
const { container } = await renderWithContext(
185+
<EnhancedComponent {...defaultProps} />,
186+
{
187+
contextValue: componentContext,
188+
}
189+
);
202190

203-
expect(wrapper).toMatchSnapshot();
191+
expect(container.firstChild).toMatchSnapshot();
204192
});
205193

206-
it('should add listener to dispatcher after mounting to DOM', () => {
194+
it('should add listener to dispatcher after mounting to DOM', async () => {
207195
let EnhancedComponent = select(...selectorMethods)(Component);
208196

209-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
210-
context: componentContext,
211-
wrappingComponent: MockContextProvider,
197+
jest.spyOn(componentContext.$Utils.$Dispatcher, 'listen');
198+
199+
await renderWithContext(<EnhancedComponent {...defaultProps} />, {
200+
contextValue: componentContext,
212201
});
213202

214203
expect(componentContext.$Utils.$Dispatcher.listen).toHaveBeenCalled();
215204
});
216205

217-
it('should remove listener to dispatcher before unmounting from DOM', () => {
206+
it('should remove listener to dispatcher before unmounting from DOM', async () => {
218207
let EnhancedComponent = select(...selectorMethods)(Component);
219208

220-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
221-
context: componentContext,
222-
wrappingComponent: MockContextProvider,
223-
});
209+
jest.spyOn(componentContext.$Utils.$Dispatcher, 'unlisten');
210+
211+
const { unmount } = await renderWithContext(
212+
<EnhancedComponent {...defaultProps} />,
213+
{
214+
contextValue: componentContext,
215+
}
216+
);
224217

225-
wrapper.unmount();
218+
unmount();
226219

227220
expect(componentContext.$Utils.$Dispatcher.unlisten).toHaveBeenCalled();
228221
});
229222

230-
it('should render component with extraProps and own createStateSelector', () => {
223+
it('should render component with extraProps and own createStateSelector', async () => {
231224
setCreatorOfStateSelector((...selectors) => {
232225
return (state, context) => {
233226
return selectors.reduce((result, selector) => {
@@ -237,28 +230,32 @@ describe('plugin-select:', () => {
237230
});
238231
let EnhancedComponent = select(...selectorMethods)(Component);
239232

240-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
241-
context: componentContext,
242-
wrappingComponent: MockContextProvider,
243-
});
233+
const { container } = await renderWithContext(
234+
<EnhancedComponent {...defaultProps} />,
235+
{
236+
contextValue: componentContext,
237+
}
238+
);
244239

245-
expect(wrapper).toMatchSnapshot();
240+
expect(container.firstChild).toMatchSnapshot();
246241
});
247242

248-
it('should render component with changed props', () => {
243+
it('should render component with changed props', async () => {
249244
let EnhancedComponent = select(selectorUsingProps)(Component);
250245

251-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
252-
context: componentContext,
253-
wrappingComponent: MockContextProvider,
254-
});
246+
const { container, rerender } = await renderWithContext(
247+
<EnhancedComponent {...defaultProps} />,
248+
{
249+
contextValue: componentContext,
250+
}
251+
);
255252

256-
wrapper.setProps({ multiplier: 3 });
253+
rerender(<EnhancedComponent {...defaultProps} multiplier={3} />);
257254

258-
expect(wrapper).toMatchSnapshot();
255+
expect(container.firstChild).toMatchSnapshot();
259256
});
260257

261-
it('should render component with extraProps and own static methods', () => {
258+
it('should render component with extraProps and own static methods', async () => {
262259
setHoistStaticMethod((TargetComponent, Original) => {
263260
const keys = Object.getOwnPropertyNames(Original);
264261

@@ -275,33 +272,34 @@ describe('plugin-select:', () => {
275272
});
276273
let EnhancedComponent = select(...selectorMethods)(Component);
277274

278-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
279-
context: componentContext,
280-
wrappingComponent: MockContextProvider,
281-
});
275+
const { container } = await renderWithContext(
276+
<EnhancedComponent {...defaultProps} />,
277+
{
278+
contextValue: componentContext,
279+
}
280+
);
282281

283282
expect(typeof EnhancedComponent.myCustom === 'function').toBeTruthy();
284283
expect(typeof EnhancedComponent.defaultProps === 'function').toBeTruthy();
285-
expect(wrapper).toMatchSnapshot();
284+
expect(container.firstChild).toMatchSnapshot();
286285
});
287286

288-
it('should forward ref', () => {
287+
it('should forward ref', async () => {
289288
let EnhancedComponent = forwardedSelect(...selectorMethods)(Component);
289+
const componentRef = createRef();
290290

291-
wrapper = shallow(
292-
createElement(EnhancedComponent, {
293-
...defaultProps,
294-
ref: createRef(),
295-
}),
291+
const { container } = await renderWithContext(
292+
<EnhancedComponent {...defaultProps} ref={componentRef} />,
296293
{
297-
context: componentContext,
294+
contextValue: componentContext,
298295
}
299296
);
300297

301-
expect(wrapper).toMatchSnapshot();
298+
expect(componentRef.current).toBeInstanceOf(Component);
299+
expect(container.firstChild).toMatchSnapshot();
302300
});
303301

304-
it('should render component with extraProps and own static methods for forwardedSelect', () => {
302+
it('should render component with extraProps and own static methods for forwardedSelect', async () => {
305303
setHoistStaticMethod((TargetComponent, Original) => {
306304
const keys = Object.getOwnPropertyNames(Original);
307305

@@ -318,14 +316,16 @@ describe('plugin-select:', () => {
318316
});
319317
let EnhancedComponent = forwardedSelect(...selectorMethods)(Component);
320318

321-
wrapper = mount(createElement(EnhancedComponent, defaultProps), {
322-
context: componentContext,
323-
wrappingComponent: MockContextProvider,
324-
});
319+
const { container } = await renderWithContext(
320+
<EnhancedComponent {...defaultProps} />,
321+
{
322+
contextValue: componentContext,
323+
}
324+
);
325325

326326
expect(typeof EnhancedComponent.myCustom === 'function').toBeTruthy();
327327
expect(typeof EnhancedComponent.defaultProps === 'function').toBeTruthy();
328-
expect(wrapper).toMatchSnapshot();
328+
expect(container.firstChild).toMatchSnapshot();
329329
});
330330
});
331331
});

‎packages/plugin-select/src/select/__tests__/__snapshots__/SelectSpec.js.snap

+99-205
Original file line numberDiff line numberDiff line change
@@ -38,233 +38,127 @@ exports[`plugin-select: createStateSelector should select extra properties from
3838
`;
3939

4040
exports[`plugin-select: select should forward ref 1`] = `
41-
<withContext(Component)
42-
forwardedRef={
43-
{
44-
"current": null,
45-
}
46-
}
47-
multiplier={0.5}
48-
props="props"
49-
settings={
50-
{
51-
"color": "red",
52-
}
53-
}
54-
/>
41+
<div>
42+
{
43+
"props": "props",
44+
"multiplier": 0.5,
45+
"settings": {
46+
"color": "red"
47+
},
48+
"width": 90,
49+
"height": 60
50+
}
51+
</div>
5552
`;
5653

5754
exports[`plugin-select: select should render component 1`] = `
58-
<h1>
59-
text
60-
</h1>
55+
<div>
56+
{
57+
"props": "props",
58+
"multiplier": 0.5,
59+
"settings": {
60+
"color": "red"
61+
}
62+
}
63+
</div>
6164
`;
6265

6366
exports[`plugin-select: select should render component with changed props 1`] = `
64-
<withContext(Component)
65-
multiplier={3}
66-
props="props"
67-
settings={
68-
{
69-
"color": "red",
70-
}
71-
}
72-
>
73-
<Component
74-
height={180}
75-
multiplier={3}
76-
props="props"
77-
settings={
78-
{
79-
"color": "red",
80-
}
81-
}
82-
width={270}
83-
>
84-
<h1>
85-
text
86-
</h1>
87-
</Component>
88-
</withContext(Component)>
67+
<div>
68+
{
69+
"props": "props",
70+
"multiplier": 3,
71+
"settings": {
72+
"color": "red"
73+
},
74+
"width": 270,
75+
"height": 180
76+
}
77+
</div>
8978
`;
9079

9180
exports[`plugin-select: select should render component with extraProps 1`] = `
92-
<withContext(Component)
93-
multiplier={0.5}
94-
props="props"
95-
settings={
96-
{
97-
"color": "red",
98-
}
99-
}
100-
>
101-
<Component
102-
height={60}
103-
multiplier={0.5}
104-
props="props"
105-
settings={
106-
{
107-
"color": "red",
108-
}
109-
}
110-
width={90}
111-
>
112-
<h1>
113-
text
114-
</h1>
115-
</Component>
116-
</withContext(Component)>
81+
<div>
82+
{
83+
"props": "props",
84+
"multiplier": 0.5,
85+
"settings": {
86+
"color": "red"
87+
},
88+
"width": 90,
89+
"height": 60
90+
}
91+
</div>
11792
`;
11893

11994
exports[`plugin-select: select should render component with extraProps and own createStateSelector 1`] = `
120-
<withContext(Component)
121-
multiplier={0.5}
122-
props="props"
123-
settings={
124-
{
125-
"color": "red",
126-
}
127-
}
128-
>
129-
<Component
130-
height={60}
131-
multiplier={0.5}
132-
props="props"
133-
settings={
134-
{
135-
"color": "red",
136-
}
137-
}
138-
width={90}
139-
>
140-
<h1>
141-
text
142-
</h1>
143-
</Component>
144-
</withContext(Component)>
95+
<div>
96+
{
97+
"props": "props",
98+
"multiplier": 0.5,
99+
"settings": {
100+
"color": "red"
101+
},
102+
"width": 90,
103+
"height": 60
104+
}
105+
</div>
145106
`;
146107

147108
exports[`plugin-select: select should render component with extraProps and own static methods 1`] = `
148-
<withContext(Component)
149-
multiplier={0.5}
150-
props="props"
151-
settings={
152-
{
153-
"color": "red",
154-
}
155-
}
156-
>
157-
<Component
158-
height={60}
159-
multiplier={0.5}
160-
props="props"
161-
settings={
162-
{
163-
"color": "red",
164-
}
165-
}
166-
width={90}
167-
>
168-
<h1>
169-
text
170-
</h1>
171-
</Component>
172-
</withContext(Component)>
109+
<div>
110+
{
111+
"props": "props",
112+
"multiplier": 0.5,
113+
"settings": {
114+
"color": "red"
115+
},
116+
"width": 90,
117+
"height": 60
118+
}
119+
</div>
173120
`;
174121

175122
exports[`plugin-select: select should render component with extraProps and own static methods for forwardedSelect 1`] = `
176-
<ForwardRef(select(Component))
177-
multiplier={0.5}
178-
props="props"
179-
settings={
180-
{
181-
"color": "red",
182-
}
183-
}
184-
>
185-
<withContext(Component)
186-
forwardedRef={null}
187-
multiplier={0.5}
188-
props="props"
189-
settings={
190-
{
191-
"color": "red",
192-
}
193-
}
194-
>
195-
<Component
196-
forwardedRef={null}
197-
height={60}
198-
multiplier={0.5}
199-
props="props"
200-
settings={
201-
{
202-
"color": "red",
203-
}
204-
}
205-
width={90}
206-
>
207-
<h1>
208-
text
209-
</h1>
210-
</Component>
211-
</withContext(Component)>
212-
</ForwardRef(select(Component))>
123+
<div>
124+
{
125+
"props": "props",
126+
"multiplier": 0.5,
127+
"settings": {
128+
"color": "red"
129+
},
130+
"forwardedRef": null,
131+
"width": 90,
132+
"height": 60
133+
}
134+
</div>
213135
`;
214136

215137
exports[`plugin-select: select should render component with extraProps modifies by ownProps 1`] = `
216-
<withContext(Component)
217-
multiplier={0.5}
218-
props="props"
219-
settings={
220-
{
221-
"color": "red",
222-
}
223-
}
224-
>
225-
<Component
226-
height={30}
227-
multiplier={0.5}
228-
props="props"
229-
settings={
230-
{
231-
"color": "red",
232-
}
233-
}
234-
width={45}
235-
>
236-
<h1>
237-
text
238-
</h1>
239-
</Component>
240-
</withContext(Component)>
138+
<div>
139+
{
140+
"props": "props",
141+
"multiplier": 0.5,
142+
"settings": {
143+
"color": "red"
144+
},
145+
"width": 45,
146+
"height": 30
147+
}
148+
</div>
241149
`;
242150

243151
exports[`plugin-select: select should render component with extraProps replaced by ownProps 1`] = `
244-
<withContext(Component)
245-
multiplier={0.5}
246-
props="props"
247-
settings={
248-
{
249-
"color": "red",
250-
}
251-
}
252-
>
253-
<Component
254-
height={60}
255-
multiplier={0.25}
256-
props="props"
257-
settings={
258-
{
259-
"color": "red",
260-
"newSettingsProp": true,
261-
}
262-
}
263-
width={90}
264-
>
265-
<h1>
266-
text
267-
</h1>
268-
</Component>
269-
</withContext(Component)>
152+
<div>
153+
{
154+
"props": "props",
155+
"multiplier": 0.25,
156+
"settings": {
157+
"color": "red",
158+
"newSettingsProp": true
159+
},
160+
"width": 90,
161+
"height": 60
162+
}
163+
</div>
270164
`;

‎packages/plugin-testing-integration/EnzymePageRenderer.js

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ const {
77
const { mount } = require('enzyme');
88
const ReactDOM = require('react-dom');
99

10+
// @TODO: Delete this file with next major version as we are moving away from Enzyme and
11+
// this file is not being used in any known projects.
1012
class EnzymeReactDOM {
1113
constructor() {
1214
this._instances = [];

‎utils/integration/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import 'src/main'; // Import plugin main file to initialize pluginLoader
2+
3+
export * from '@ima/testing-library/fallback/app/main';

0 commit comments

Comments
 (0)
Please sign in to comment.