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

Remove RTR usage from useSubscription-test #28388

Merged
merged 1 commit into from
Feb 20, 2024
Merged
Changes from all commits
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
86 changes: 31 additions & 55 deletions packages/use-subscription/src/__tests__/useSubscription-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ let act;
let useSubscription;
let BehaviorSubject;
let React;
let ReactTestRenderer;
let ReactDOMClient;
let Scheduler;
let ReplaySubject;
let assertLog;
Expand All @@ -27,7 +27,7 @@ describe('useSubscription', () => {

useSubscription = require('use-subscription').useSubscription;
React = require('react');
ReactTestRenderer = require('react-test-renderer');
ReactDOMClient = require('react-dom/client');
Scheduler = require('scheduler');

act = require('internal-test-utils').act;
Expand Down Expand Up @@ -80,12 +80,9 @@ describe('useSubscription', () => {
}

const observable = createBehaviorSubject();
let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription source={observable} />,
{isConcurrent: true},
);
root.render(<Subscription source={observable} />);
});
assertLog(['default']);

Expand All @@ -96,7 +93,7 @@ describe('useSubscription', () => {
assertLog(['abc']);

// Unmounting the subscriber should remove listeners
await act(() => renderer.update(<div />));
await act(() => root.render(<div />));
await act(() => observable.next(456));
await waitForAll([]);
});
Expand Down Expand Up @@ -132,12 +129,9 @@ describe('useSubscription', () => {
}

let observable = createReplaySubject('initial');
let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription source={observable} />,
{isConcurrent: true},
);
root.render(<Subscription source={observable} />);
});
assertLog(['initial']);
await act(() => observable.next('updated'));
Expand All @@ -147,7 +141,7 @@ describe('useSubscription', () => {

// Unsetting the subscriber prop should reset subscribed values
observable = createReplaySubject(undefined);
await act(() => renderer.update(<Subscription source={observable} />));
await act(() => root.render(<Subscription source={observable} />));
assertLog(['default']);
});

Expand Down Expand Up @@ -181,12 +175,9 @@ describe('useSubscription', () => {

expect(subscriptions).toHaveLength(0);

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription source={observableA} />,
{isConcurrent: true},
);
root.render(<Subscription source={observableA} />);
});

// Updates while subscribed should re-render the child component
Expand All @@ -195,7 +186,7 @@ describe('useSubscription', () => {
expect(subscriptions[0]).toBe(observableA);

// Unsetting the subscriber prop should reset subscribed values
await act(() => renderer.update(<Subscription source={observableB} />));
await act(() => root.render(<Subscription source={observableB} />));

assertLog(['b-0']);
expect(subscriptions).toHaveLength(2);
Expand Down Expand Up @@ -240,12 +231,9 @@ describe('useSubscription', () => {

expect(subscriptions).toHaveLength(0);

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription source={observableA} />,
{isConcurrent: true},
);
root.render(<Subscription source={observableA} />);
});

// Updates while subscribed should re-render the child component
Expand All @@ -254,7 +242,7 @@ describe('useSubscription', () => {
expect(subscriptions[0]).toBe(observableA);

// Unsetting the subscriber prop should reset subscribed values
await act(() => renderer.update(<Subscription source={observableB} />));
await act(() => root.render(<Subscription source={observableB} />));
assertLog(['b-0']);
expect(subscriptions).toHaveLength(2);
expect(subscriptions[1]).toBe(observableB);
Expand Down Expand Up @@ -328,19 +316,17 @@ describe('useSubscription', () => {
const observableA = createBehaviorSubject('a-0');
const observableB = createBehaviorSubject('b-0');

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
isConcurrent: true,
});
root.render(<Parent observed={observableA} />);
});
assertLog(['Child: a-0', 'Grandchild: a-0']);
expect(log).toEqual(['Parent.componentDidMount']);

// Start React update, but don't finish
await act(async () => {
React.startTransition(() => {
renderer.update(<Parent observed={observableB} />);
root.render(<Parent observed={observableB} />);
});

await waitFor(['Child: b-0']);
Expand All @@ -353,7 +339,7 @@ describe('useSubscription', () => {
});

// Update again
await act(() => renderer.update(<Parent observed={observableA} />));
await act(() => root.render(<Parent observed={observableA} />));

// Flush everything and ensure that the correct subscribable is used
// We expect the last emitted update to be rendered (because of the commit phase value check)
Expand Down Expand Up @@ -431,11 +417,9 @@ describe('useSubscription', () => {
const observableA = createBehaviorSubject('a-0');
const observableB = createBehaviorSubject('b-0');

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(<Parent observed={observableA} />, {
isConcurrent: true,
});
root.render(<Parent observed={observableA} />);
});
assertLog(['Child: a-0', 'Grandchild: a-0']);
expect(log).toEqual(['Parent.componentDidMount:a-0']);
Expand All @@ -444,7 +428,7 @@ describe('useSubscription', () => {
// Start React update, but don't finish
await act(async () => {
React.startTransition(() => {
renderer.update(<Parent observed={observableB} />);
root.render(<Parent observed={observableB} />);
});
await waitFor(['Child: b-0']);
expect(log).toEqual([]);
Expand All @@ -456,10 +440,10 @@ describe('useSubscription', () => {
// Update again
if (gate(flags => flags.enableUnifiedSyncLane)) {
React.startTransition(() => {
renderer.update(<Parent observed={observableA} />);
root.render(<Parent observed={observableA} />);
});
} else {
renderer.update(<Parent observed={observableA} />);
root.render(<Parent observed={observableA} />);
}

// Flush everything and ensure that the correct subscribable is used
Expand Down Expand Up @@ -524,16 +508,13 @@ describe('useSubscription', () => {

eventHandler.subscribe(async value => {
if (value === false) {
renderer.unmount();
root.unmount();
}
});

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription source={eventHandler} />,
{isConcurrent: true},
);
root.render(<Subscription source={eventHandler} />);
});
assertLog([true]);

Expand Down Expand Up @@ -562,18 +543,13 @@ describe('useSubscription', () => {
return null;
}

let renderer;
const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(() => {
renderer = ReactTestRenderer.create(
<Subscription subscription={subscription1} />,
{isConcurrent: true},
);
root.render(<Subscription subscription={subscription1} />);
});
await waitForAll([]);

await act(() =>
renderer.update(<Subscription subscription={subscription2} />),
);
await act(() => root.render(<Subscription subscription={subscription2} />));
await waitForAll([]);
});

Expand All @@ -599,15 +575,15 @@ describe('useSubscription', () => {
return value;
};

const root = ReactDOMClient.createRoot(document.createElement('div'));
await act(async () => {
// Initial render of "A"
mutate('A');
ReactTestRenderer.create(
root.render(
<React.Fragment>
<Subscriber id="first" />
<Subscriber id="second" />
</React.Fragment>,
{isConcurrent: true},
);
await waitForAll(['render:first:A', 'render:second:A']);

Expand Down