Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test: run test with react v16 v17 and v18 #392

Merged
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
test: adjust test to work for react 16, 17 and 18
100terres committed Aug 21, 2022
commit e120db424dd8b00cde68c3bb576b3d7f7251f7b6
16 changes: 12 additions & 4 deletions test/unit/integration/combine-on-start.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { act, fireEvent, render } from '@testing-library/react';
import * as keyCodes from '../../../src/view/key-codes';
import type {
DraggableProvided,
@@ -24,7 +24,10 @@ class App extends React.Component<any, State> {

onDragStart = (start: DragStart) => {
this.props.onDragStart(start);
this.setState({ isCombineEnabled: true });

act(() => {
this.setState({ isCombineEnabled: true });
});
};

onDragUpdate = (update: DragUpdate) => {
@@ -33,7 +36,10 @@ class App extends React.Component<any, State> {

onDragEnd = (result: DropResult) => {
this.props.onDragEnd(result);
this.setState({ isCombineEnabled: false });

act(() => {
this.setState({ isCombineEnabled: false });
});
};
// Normally you would want to split things out into separate components.
// But in this example everything is just done in one place for simplicity
@@ -101,7 +107,7 @@ it('should allow the changing of combining in onDragStart', () => {
onDragUpdate: jest.fn(),
onDragEnd: jest.fn(),
};
const { getByTestId } = render(<App {...responders} />);
const { getByTestId, rerender } = render(<App {...responders} />);

const handle: HTMLElement = getByTestId('0');
simpleLift(keyboard, handle);
@@ -119,6 +125,8 @@ it('should allow the changing of combining in onDragStart', () => {
};
expect(responders.onDragStart).toHaveBeenCalledWith(start);

rerender(<App {...responders} />);

// now moving down will cause a combine impact!
fireEvent.keyDown(handle, { keyCode: keyCodes.arrowDown });
jest.runOnlyPendingTimers();
12 changes: 9 additions & 3 deletions test/unit/integration/disable-on-start.spec.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { getRect } from 'css-box-model';
import { render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import type {
DraggableProvided,
DroppableProvided,
@@ -42,7 +42,10 @@ class App extends React.Component<any, State> {

onDragStart = (start: DragStart) => {
this.props.onDragStart(start);
this.setState({ isDropDisabled: true });

act(() => {
this.setState({ isDropDisabled: true });
});
};

onDragUpdate = (update: DragUpdate) => {
@@ -51,7 +54,10 @@ class App extends React.Component<any, State> {

onDragEnd = (result: DropResult) => {
this.props.onDragEnd(result);
this.setState({ isDropDisabled: false });

act(() => {
this.setState({ isDropDisabled: false });
});
};
// Normally you would want to split things out into separate components.
// But in this example everything is just done in one place for simplicity
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { render } from '@testing-library/react';
import { invariant } from '../../../../../src/invariant';
import App from '../../util/app';
@@ -8,11 +8,16 @@ import { withError } from '../../../../util/console';

it('should recover from rfd errors', () => {
let hasThrown = false;

function CanThrow(props: { shouldThrow: boolean }) {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;
invariant(false, 'throwing');
}
useEffect(() => {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;

invariant(false, 'throwing');
}
});

return null;
}

@@ -32,15 +37,19 @@ it('should recover from rfd errors', () => {

it('should not recover from non-rfd errors', () => {
let hasThrown = false;

function CanThrow(props: { shouldThrow: boolean }) {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;
throw new Error('Boom');
}
useEffect(() => {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;
throw new Error('Boom');
}
});

return null;
}

const { rerender, getByTestId } = render(
const { container, rerender, getByTestId } = render(
<App anotherChild={<CanThrow shouldThrow={false} />} />,
);

@@ -50,24 +59,30 @@ it('should not recover from non-rfd errors', () => {
withError(() => {
expect(() => {
rerender(<App anotherChild={<CanThrow shouldThrow />} />);
}).toThrow();
}).toThrow('Boom');
});

expect(container.children.length).toBe(0);
});

it('should not recover from runtime errors', () => {
let hasThrown = false;

function CanThrow(props: { shouldThrow: boolean }) {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;
// Boom: TypeError
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
window.foo();
}
useEffect(() => {
if (!hasThrown && props.shouldThrow) {
hasThrown = true;
// Boom: TypeError
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
window.foo();
}
});

return null;
}

const { rerender, getByTestId } = render(
const { rerender, getByTestId, container } = render(
<App anotherChild={<CanThrow shouldThrow={false} />} />,
);

@@ -77,6 +92,8 @@ it('should not recover from runtime errors', () => {
withError(() => {
expect(() => {
rerender(<App anotherChild={<CanThrow shouldThrow />} />);
}).toThrow();
}).toThrow('window.foo is not a function');
});

expect(container.children.length).toBe(0);
});
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import { RbdInvariant } from '../../../../../src/invariant';
import App from '../../util/app';
import { simpleLift, keyboard } from '../../util/controls';
@@ -23,7 +23,9 @@ it('should abort any active drag (rfd error)', () => {

withWarn(() => {
withError(() => {
window.dispatchEvent(event);
act(() => {
window.dispatchEvent(event);
});
});
});

@@ -43,7 +45,9 @@ it('should abort any active drag (non-rfd error)', () => {
withoutError(() => {
// logging that the drag was aborted
withWarn(() => {
window.dispatchEvent(event);
act(() => {
window.dispatchEvent(event);
});
});
});

Original file line number Diff line number Diff line change
@@ -50,7 +50,7 @@ it('should allow for additions to be made', () => {
);
}

const { getByTestId } = render(<Root />);
const { getByTestId, rerender } = render(<Root />);
const handle: HTMLElement = getByTestId('0');

// act(() => {}); is joining the two into one update which is
@@ -59,6 +59,8 @@ it('should allow for additions to be made', () => {
expandedMouse.rawPowerLift(handle, { x: 0, y: 0 });
});

rerender(<Root />);

expect(isDragging(handle)).toBe(true);
});

@@ -122,7 +124,7 @@ it('should adjust captured values for any changes that impact that dragging item
);
}

const { getByTestId, queryByTestId } = render(<Root />);
const { getByTestId, queryByTestId, rerender } = render(<Root />);
const initial: HTMLElement = getByTestId('initial');

// initially it had an index of 1
@@ -136,6 +138,8 @@ it('should adjust captured values for any changes that impact that dragging item
expandedMouse.rawPowerLift(initial, { x: 0, y: 0 });
});

rerender(<Root />);

// first item has been added
expect(queryByTestId('first')).toBeTruthy();
// initial is now dragging
Original file line number Diff line number Diff line change
@@ -67,7 +67,7 @@ it('should adjust captured values for any changes that impact that dragging item
);
}

const { getByTestId, queryByTestId } = render(<Root />);
const { getByTestId, queryByTestId, rerender } = render(<Root />);
const second: HTMLElement = getByTestId('second');

// initially it had an index of 1
@@ -79,7 +79,8 @@ it('should adjust captured values for any changes that impact that dragging item
expandedMouse.rawPowerLift(getByTestId('second'), { x: 0, y: 0 });
});

// act(() => rerender());
rerender(<Root />);

// first item has been removed
expect(queryByTestId('first')).toBe(null);
// second is now dragging
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import type { Position } from 'css-box-model';
import { render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import { invariant } from '../../../../../src/invariant';
import type {
SensorAPI,
@@ -37,7 +37,9 @@ it('should throttle move events by request animation frame', () => {
expect(getOffset(handle)).toEqual({ x: 0, y: 0 });

// moved after frame
requestAnimationFrame.step();
act(() => {
requestAnimationFrame.step();
});
expect(getOffset(handle)).toEqual(offset);
});

Original file line number Diff line number Diff line change
@@ -70,18 +70,28 @@ it('should not allow a sensor to obtain a on a dropping item, but can claim one
// drag not started yet
expect(isDragging(handle)).toBe(false);
// start a drag
const actions: FluidDragActions = preDrag.fluidLift({ x: 0, y: 0 });
let actions: FluidDragActions;
act(() => {
actions = preDrag.fluidLift({ x: 0, y: 0 });
});
expect(isDragging(handle)).toBe(true);

// release the movement
actions.move({ x: 100, y: 100 });
act(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
actions!.move({ x: 100, y: 100 });
});
requestAnimationFrame.flush();

actions.drop();
act(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
actions!.drop();
});
expect(isDropAnimating(handle)).toBe(true);

// lock is no longer active
expect(actions.isActive()).toBe(false);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
expect(actions!.isActive()).toBe(false);
expect(preDrag.isActive()).toBe(false);

// cannot get a new lock while still dropping
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useRef } from 'react';
import React, { useState } from 'react';
import { render, act } from '@testing-library/react';
import { invariant } from '../../../../../src/invariant';
import { isDragging, getOffset } from '../../util/helpers';
@@ -14,20 +14,16 @@ interface Props {
}

function Vomit(props: Props) {
const setShouldThrow = useState(0)[1];
const shouldThrowRef = useRef(false);
const setState = useState(0)[1];

function chuck() {
shouldThrowRef.current = true;
setShouldThrow((current) => current + 1);
function throwInLifecycle() {
setState(() => {
props.throw();
return 0;
});
}

props.setForceThrow(chuck);

if (shouldThrowRef.current) {
shouldThrowRef.current = false;
props.throw();
}
props.setForceThrow(throwInLifecycle);

return null;
}
@@ -112,7 +108,7 @@ forEachSensor((control: Control) => {

expect(() => {
thrower.execute();
}).toThrow();
}).toThrow('Raw error throw');

// handle is gone
expect(queryByText('item: 0')).toBe(null);
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import type { SensorAPI } from '../../../../../src/types';
import { forEachSensor, simpleLift } from '../../util/controls';
import type { Control } from '../../util/controls';
@@ -21,7 +21,9 @@ forEachSensor((control: Control) => {
expect(api.isLockClaimed()).toBe(true);
expect(isDragging(handle)).toBe(true);

api.tryReleaseLock();
act(() => {
api.tryReleaseLock();
});

expect(api.isLockClaimed()).toBe(false);
expect(isDragging(handle)).toBe(false);
Loading