Skip to content

Commit

Permalink
test: add isPending test for concurrent mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@atellmer
atellmer committed Dec 19, 2024
1 parent f45d89c commit a291b8f
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 64 deletions.
1 change: 1 addition & 0 deletions packages/core/src/scheduler/scheduler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ class MessagePort {

unref() {
this.offs.forEach(x => x());
this.offs = [];
}
}

Expand Down
158 changes: 94 additions & 64 deletions packages/core/src/start-transition/start-transition.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,30 @@ beforeEach(() => {
});

describe('@core/start-transition', () => {
const SlowItem = component(() => {
const startTime = getTime();

while (getTime() - startTime < 1) {
//
}

return null;
});

const NormalTab1 = component(() => <normal-tab-1></normal-tab-1>);
const NormalTab2 = component(() => <normal-tab-2></normal-tab-2>);
const SlowTab = memo(
component<{ size: number }>(({ size }) => {
const items = [];

for (let i = 0; i < size; i++) {
items.push(<SlowItem key={i} />);
}

return <slow-tab>{items}</slow-tab>;
}),
);

test('can make a transition via start-transition', async () => {
const size = 10;
const content = (idx: number) => dom`
Expand All @@ -29,28 +53,6 @@ describe('@core/start-transition', () => {
}
`;
let setIdx: (x: number) => void = null;
const NormalTab1 = component(() => <normal-tab-1></normal-tab-1>);
const NormalTab2 = component(() => <normal-tab-2></normal-tab-2>);
const SlowTab = memo(
component(() => {
const items = [];

for (let i = 0; i < size; i++) {
items.push(<SlowItem key={i} />);
}

return <slow-tab>{items}</slow-tab>;
}),
);
const SlowItem = component(() => {
const startTime = getTime();

while (getTime() - startTime < 1) {
//
}

return null;
});
const App = component(() => {
const [idx, _setIdx] = useState(0);

Expand All @@ -60,7 +62,7 @@ describe('@core/start-transition', () => {
<>
{idx === 0 && <NormalTab1 />}
{idx === 1 && <NormalTab2 />}
{idx === 2 && <SlowTab />}
{idx === 2 && <SlowTab size={size} />}
</>
);
});
Expand Down Expand Up @@ -133,28 +135,6 @@ describe('@core/start-transition', () => {
`;
let setIdx: (x: number) => void = null;
let startTransition: (cb: Function) => void = null;
const NormalTab1 = component(() => <normal-tab-1></normal-tab-1>);
const NormalTab2 = component(() => <normal-tab-2></normal-tab-2>);
const SlowTab = memo(
component(() => {
const items = [];

for (let i = 0; i < size; i++) {
items.push(<SlowItem key={i} />);
}

return <slow-tab>{items}</slow-tab>;
}),
);
const SlowItem = component(() => {
const startTime = getTime();

while (getTime() - startTime < 1) {
//
}

return null;
});
const App = component(() => {
const [isPending, _startTransition] = useTransition();
const [idx, _setIdx] = useState(0);
Expand All @@ -166,7 +146,7 @@ describe('@core/start-transition', () => {
<div class={isPending ? 'pending' : 'normal'}>
{idx === 0 && <NormalTab1 />}
{idx === 1 && <NormalTab2 />}
{idx === 2 && <SlowTab />}
{idx === 2 && <SlowTab size={size} />}
</div>
);
});
Expand Down Expand Up @@ -247,15 +227,6 @@ describe('@core/start-transition', () => {
);
}),
);
const SlowItem = component(() => {
const startTime = getTime();

while (getTime() - startTime < 1) {
//
}

return null;
});
const App = component(() => {
const [marker, _setMarker] = useState('a');

Expand Down Expand Up @@ -314,15 +285,6 @@ describe('@core/start-transition', () => {
);
}),
);
const SlowItem = component(() => {
const startTime = getTime();

while (getTime() - startTime < 1) {
//
}

return null;
});
const App = component(() => {
const [marker, _setMarker] = useState('a');

Expand All @@ -345,4 +307,72 @@ describe('@core/start-transition', () => {
await sleep(100);
expect(host.innerHTML).toBe(content('b', '[b]'));
});

test('can render transition in a false isPending-branch of a conditional rendering', async () => {
const size = 10;
const content = (idx: number, isPending = false) => dom`
<div>
<div>[${idx}]</div>
${
isPending
? '<div>pending...</div>'
: `
${idx === 0 ? `<normal-tab-1></normal-tab-1>${replacer}${replacer}` : ''}
${idx === 1 ? `${replacer}<normal-tab-2></normal-tab-2>${replacer}` : ''}
${
idx === 2
? `${replacer}${replacer}<slow-tab>${Array(size)
.fill(null)
.map(() => replacer)
.join('')}</slow-tab>`
: ''
}`
}
</div>
`;
let setIdx: (x: number) => void = null;
let startTransition: (cb: Function) => void = null;
const App = component(() => {
const [isPending, _startTransition] = useTransition();
const [idx, _setIdx] = useState(0);

setIdx = _setIdx;
startTransition = _startTransition;

return (
<div>
<div>[{idx}]</div>
{isPending ? (
<div>pending...</div>
) : (
<>
{idx === 0 && <NormalTab1 />}
{idx === 1 && <NormalTab2 />}
{idx === 2 && <SlowTab size={size} />}
</>
)}
</div>
);
});

render(<App />);
expect(host.innerHTML).toBe(content(0));

startTransition(() => setIdx(2));
await sleep(1);
expect(host.innerHTML).toBe(content(0, true));

await sleep(100);
expect(host.innerHTML).toBe(content(2));

setIdx(1);
expect(host.innerHTML).toBe(content(1));

startTransition(() => setIdx(2));
await sleep(1);
expect(host.innerHTML).toBe(content(1, true));

await sleep(100);
expect(host.innerHTML).toBe(content(2));
});
});

0 comments on commit a291b8f

Please sign in to comment.