Skip to content

Commit bde5f5b

Browse files
SkylerBaekSkylerBaek
committed
Merge branch 'develop' into poc/WRN-17866
2 parents 790c586 + 33c4a1b commit bde5f5b

File tree

5 files changed

+86
-69
lines changed

5 files changed

+86
-69
lines changed

‎packages/ui/AnnounceDecorator/tests/Announce-specs.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
import {render} from '@testing-library/react';
2+
import {createRef} from 'react';
23

34
import Announce from '../Announce';
45

56
describe('Announce', () => {
6-
// TODO: add a new scenario that can work with testing library
7-
test.skip('should have an announce method on the component', () => {
8-
const {container} = render(<Announce data-testid="announce" />);
7+
test('should have an announce method on the component', () => {
8+
const ref = createRef();
9+
render(<Announce ref={ref} />);
910

10-
const node = container.instance();
11+
const node = ref.current;
1112

1213
const expected = 'function';
1314
const actual = typeof node.announce;
1415

1516
expect(actual).toBe(expected);
1617
});
1718

18-
// TODO: add a new scenario that can work with testing library
19-
test.skip('should update the aria-label with the provided message', () => {
19+
test('should update the aria-label with the provided message', () => {
20+
const ref = createRef();
2021
const message = 'message';
2122

22-
const {container} = render(<Announce data-testid="announce" />);
23+
render(<Announce ref={ref} />);
2324

24-
const node = container.instance();
25+
const node = ref.current;
2526
node.announce(message);
2627

2728
const expected = message;

‎packages/ui/RadioDecorator/tests/RadioDecorator-specs.js‎

Lines changed: 38 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import '@testing-library/jest-dom';
22
import {render, screen} from '@testing-library/react';
33
import userEvent from '@testing-library/user-event';
4+
import {createRef} from 'react';
45

56
import {RadioControllerDecorator, RadioDecorator} from '../RadioDecorator';
67

@@ -13,6 +14,10 @@ describe('RadioDecorator', () => {
1314

1415
const Controller = RadioControllerDecorator('main');
1516

17+
const expectToBeActive = (controller, decorator) => {
18+
expect(controller.active).toBe(decorator && decorator.handleDeactivate);
19+
};
20+
1621
test('should be activated when its prop is true on mount', () => {
1722
const Component = RadioDecorator({prop: 'active'}, Item);
1823
render(
@@ -135,75 +140,81 @@ describe('RadioDecorator', () => {
135140
expect(actual).toBe(expected);
136141
});
137142

138-
// TODO This test is skipped because Component doesn't update its content text on click with React Testing Library
139-
test.skip('should be activated when the activated event fires', () => {
143+
test('should be activated when the activated event fires', () => {
144+
const controllerRef = createRef();
145+
const decoratorRef = createRef();
140146
const Component = RadioDecorator({activate: 'onClick', prop: 'active'}, Item);
141147
render(
142-
<Controller>
143-
<Component />
148+
<Controller ref={controllerRef}>
149+
<Component ref={decoratorRef} />
144150
</Controller>
145151
);
146152
const component = screen.getByTestId('span-element');
147153

148154
userEvent.click(component);
149155

150-
expect(component).toHaveTextContent('Active');
156+
expectToBeActive(controllerRef.current, decoratorRef.current);
151157
});
152158

153-
// TODO This test is skipped because Component doesn't update its content text on click with React Testing Library
154-
test.skip('should be deactivated when the deactivated event fires', () => {
159+
test('should be deactivated when the deactivated event fires', () => {
160+
const controllerRef = createRef();
161+
const decoratorRef = createRef();
155162
const Component = RadioDecorator({deactivate: 'onClick', prop: 'active'}, Item);
156163
render(
157-
<Controller>
158-
<Component active />
164+
<Controller ref={controllerRef}>
165+
<Component active ref={decoratorRef} />
159166
</Controller>
160167
);
161168
const component = screen.getByTestId('span-element');
162169

163170
userEvent.click(component);
164171

165-
expect(component).toHaveTextContent('Inactive');
172+
expectToBeActive(controllerRef.current, null);
166173
});
167174

168-
// TODO This test is skipped because Component doesn't update its content text on click with React Testing Library
169-
test.skip('should be deactivated when the activated event fires on another instance', () => {
175+
test('should be deactivated when the activated event fires on another instance', () => {
176+
const controllerRef = createRef();
177+
const decoratorRef = createRef();
170178
const Component = RadioDecorator({activate: 'onClick', prop: 'active'}, Item);
171179
render(
172-
<Controller>
180+
<Controller ref={controllerRef} >
173181
<Component active />
174-
<Component />
182+
<Component ref={decoratorRef} />
175183
</Controller>
176184
);
177-
const activeComponent = screen.getByText('Active');
185+
178186
const inactiveComponent = screen.getByText('Inactive');
179187

180188
userEvent.click(inactiveComponent);
181189

182-
expect(activeComponent).toHaveTextContent('Inactive');
190+
expectToBeActive(controllerRef.current, decoratorRef.current);
183191
});
184192

185-
// TODO This test is skipped because we can't have access to component instance with React Testing Library
186-
test.skip('should not deactivate items in a ancestor controller', () => {
193+
test('should not deactivate items in a ancestor controller', () => {
194+
const parentControllerRef = createRef();
195+
const parentDecoratorRef = createRef();
196+
const childControllerRef = createRef();
197+
const childDecoratorRef = createRef();
187198
const Component = RadioDecorator({activate: 'onClick', prop: 'active'}, Item);
188199
render(
189-
<Controller>
190-
<Component active />
200+
<Controller ref={parentControllerRef}>
201+
<Component active ref={parentDecoratorRef} />
191202
<Component />
192-
<Controller data-child-controller>
203+
<Controller data-child-controller ref={childControllerRef}>
193204
<Component active />
194-
<Component />
205+
<Component ref={childDecoratorRef} />
195206
</Controller>
196207
</Controller>
197208
);
198-
const activeComponent = screen.getAllByText('Active');
199209

200-
userEvent.click(activeComponent[0]);
210+
const inactiveComponents = screen.getAllByText('Inactive');
211+
212+
userEvent.click(inactiveComponents[1]);
201213

202214
// Breaking the pattern of 1 expect per test in order to verify the expect change happened
203215
// (activating second component in child controller) and no unexpected change happened in
204216
// the parent controller (active component should remain the first component)
205-
206-
expect(activeComponent[1]).toHaveTextContent('Active');
207-
expect(activeComponent[0]).toHaveTextContent('Active');
217+
expectToBeActive(parentControllerRef, parentDecoratorRef);
218+
expectToBeActive(childControllerRef, childDecoratorRef);
208219
});
209220
});

‎packages/ui/Touchable/tests/Touchable-specs.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {fireEvent, render, screen} from '@testing-library/react';
1+
import {createEvent, fireEvent, render, screen} from '@testing-library/react';
22

33
import {configure, getConfig, resetDefaultConfig} from '../config';
44
import Touchable from '../Touchable';
@@ -245,22 +245,25 @@ describe('Touchable', () => {
245245
expect(actual).toEqual(expected);
246246
});
247247

248-
// TODO This test is unstable. `fireEvent` does not recognize the timeStamp property
249-
test.skip('should be called before onClick on mouse up', () => {
248+
test('should be called before onClick on mouse up', () => {
250249
const Component = Touchable({activeProp: 'active'}, DivComponent);
251250
const handler = jest.fn();
252251
render(<Component onClick={handler} onTap={handler} />);
253252
const component = screen.getByTestId('component');
254253

255-
const ev = {
256-
// a matching timeStamp is used by Touchable to prevent multiple onTaps on "true"
257-
// click (mouseup + click)
258-
timeStamp: 1
259-
};
260-
const clickEv = {};
261-
fireEvent.mouseDown(component, ev);
262-
fireEvent.mouseUp(component, ev);
263-
fireEvent.click(component, clickEv);
254+
const mouseDownEvent = createEvent.mouseDown(component, {});
255+
const mouseUpEvent = createEvent.mouseUp(component, {});
256+
const clickEvent = createEvent.click(component, {});
257+
258+
// a matching timeStamp is used by Touchable to prevent multiple onTaps on "true"
259+
// click (mouseup + click)
260+
Object.defineProperty(mouseDownEvent, 'timeStamp', {value: 1});
261+
Object.defineProperty(mouseUpEvent, 'timeStamp', {value: 1});
262+
Object.defineProperty(clickEvent, 'timeStamp', {value: 1});
263+
264+
fireEvent(component, mouseDownEvent);
265+
fireEvent(component, mouseUpEvent);
266+
fireEvent(component, clickEvent);
264267

265268
const expected = ['onTap', 'click'];
266269
const actual = handler.mock.calls.map(call => call[0].type);

‎packages/ui/Touchable/tests/useTouch-specs.js‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {fireEvent, render, screen} from '@testing-library/react';
1+
import {createEvent, fireEvent, render, screen} from '@testing-library/react';
22

33
import {configure, getConfig, resetDefaultConfig} from '../config';
44
import useTouch from '../useTouch';
@@ -193,8 +193,7 @@ describe('useTouch', () => {
193193
expect(actual).toEqual(expected);
194194
});
195195

196-
// TODO This test is unstable. `fireEvent` does not recognize the timeStamp property
197-
test.skip('should be called before onClick on mouse up', () => {
196+
test('should be called before onClick on mouse up', () => {
198197
const handler = jest.fn();
199198
render(
200199
<TouchableComponent
@@ -205,15 +204,19 @@ describe('useTouch', () => {
205204
);
206205
const component = screen.getByTestId('component');
207206

208-
const ev = {
209-
// a matching timeStamp is used by Touchable to prevent multiple onTaps on "true"
210-
// click (mouseup + click)
211-
timeStamp: 1
212-
};
207+
const mouseDownEvent = createEvent.mouseDown(component, {});
208+
const mouseUpEvent = createEvent.mouseUp(component, {});
209+
const clickEvent = createEvent.click(component, {});
213210

214-
fireEvent.mouseDown(component, ev);
215-
fireEvent.mouseUp(component, ev);
216-
fireEvent.click(component, {});
211+
// a matching timeStamp is used by Touchable to prevent multiple onTaps on "true"
212+
// click (mouseup + click)
213+
Object.defineProperty(mouseDownEvent, 'timeStamp', {value: 1});
214+
Object.defineProperty(mouseUpEvent, 'timeStamp', {value: 1});
215+
Object.defineProperty(clickEvent, 'timeStamp', {value: 1});
216+
217+
fireEvent(component, mouseDownEvent);
218+
fireEvent(component, mouseUpEvent);
219+
fireEvent(component, clickEvent);
217220

218221
const expected = ['onTap', 'click'];
219222
const actual = handler.mock.calls.map(call => call[0].type);

‎packages/ui/ViewManager/tests/ViewManager-specs.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -202,21 +202,20 @@ describe('ViewManager', () => {
202202
}, duration + 10);
203203
});
204204

205-
// TODO cannot read props of child components
206-
test.skip('should have size of 1 on TransitionGroup', () => {
205+
test('should have 1 child when noAnimation is true', () => {
207206
render(
208-
<ViewManager duration={0} index={0} noAnimation>
209-
<div className="view">View 1</div>
210-
<div className="view">View 2</div>
211-
<div className="view">View 3</div>
212-
<div className="view">View 4</div>
213-
<div className="view">View 5</div>
207+
<ViewManager data-testid="viewManager" duration={0} index={0} noAnimation>
208+
<div>View 1</div>
209+
<div>View 2</div>
210+
<div>View 3</div>
211+
<div>View 4</div>
212+
<div>View 5</div>
214213
</ViewManager>
215214
);
216215

217-
// const expected = 1;
218-
// const actual = subject.find('TransitionGroup').prop('size');
219-
// expect(actual).toBe(expected);
216+
const expected = 1;
217+
const actual = screen.getByTestId('viewManager').children.length;
218+
expect(actual).toBe(expected);
220219
});
221220

222221
// TODO cannot read props of child components

0 commit comments

Comments
 (0)