Skip to content

Commit 4ea6c61

Browse files
andrewigginsandrewiggins
authored
Improve suspense test spies (#3857)
Cherry-pick of #3856
1 parent 2b98b52 commit 4ea6c61

1 file changed

Lines changed: 39 additions & 36 deletions

File tree

‎compat/test/browser/suspense.test.js‎

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ describe('suspense', () => {
224224
});
225225
});
226226

227-
it('should not call lifecycle methods of an initially suspending component', () => {
227+
it('should properly call lifecycle methods of an initially suspending component', () => {
228228
/** @type {() => Promise<void>} */
229229
let resolve;
230230
let resolved = false;
@@ -243,15 +243,16 @@ describe('suspense', () => {
243243
}
244244
return <div>Lifecycle</div>;
245245
}
246-
247246
componentWillMount() {}
248247
componentDidMount() {}
248+
componentDidUpdate() {}
249249
componentWillUnmount() {}
250250
}
251251

252252
const lifecycles = LifecycleSuspender.prototype;
253253
sinon.spy(lifecycles, 'componentWillMount');
254254
sinon.spy(lifecycles, 'componentDidMount');
255+
sinon.spy(lifecycles, 'componentDidUpdate');
255256
sinon.spy(lifecycles, 'componentWillUnmount');
256257

257258
render(
@@ -264,13 +265,15 @@ describe('suspense', () => {
264265
expect(scratch.innerHTML).to.eql(``);
265266
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
266267
expect(lifecycles.componentDidMount).to.not.have.been.called;
268+
expect(lifecycles.componentDidUpdate).to.not.have.been.called;
267269
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
268270

269271
rerender();
270272

271273
expect(scratch.innerHTML).to.eql(`<div>Suspended...</div>`);
272274
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
273275
expect(lifecycles.componentDidMount).to.not.have.been.called;
276+
expect(lifecycles.componentDidUpdate).to.not.have.been.called;
274277
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
275278

276279
return resolve().then(() => {
@@ -279,6 +282,9 @@ describe('suspense', () => {
279282

280283
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
281284
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
285+
// TODO: This is unexpected. We are calling componentDidMount and
286+
// componentDidUpdate on the initial mount of a component that suspended
287+
expect(lifecycles.componentDidUpdate).to.have.been.calledOnce;
282288
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
283289
});
284290
});
@@ -377,13 +383,15 @@ describe('suspense', () => {
377383
}
378384
componentWillMount() {}
379385
componentDidMount() {}
386+
componentDidUpdate() {}
380387
componentWillUnmount() {}
381388
}
382389

383-
const lifecyles = LifecycleLogger.prototype;
384-
sinon.spy(lifecyles, 'componentWillMount');
385-
sinon.spy(lifecyles, 'componentDidMount');
386-
sinon.spy(lifecyles, 'componentWillUnmount');
390+
const lifecycles = LifecycleLogger.prototype;
391+
sinon.spy(lifecycles, 'componentWillMount');
392+
sinon.spy(lifecycles, 'componentDidMount');
393+
sinon.spy(lifecycles, 'componentDidUpdate');
394+
sinon.spy(lifecycles, 'componentWillUnmount');
387395

388396
const [Suspender, suspend] = createSuspender(() => <div>Suspense</div>);
389397

@@ -396,28 +404,31 @@ describe('suspense', () => {
396404
);
397405

398406
expect(scratch.innerHTML).to.eql(`<div>Suspense</div><div>Lifecycle</div>`);
399-
expect(lifecyles.componentWillMount).to.have.been.calledOnce;
400-
expect(lifecyles.componentDidMount).to.have.been.calledOnce;
401-
expect(lifecyles.componentWillUnmount).to.not.have.been.called;
407+
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
408+
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
409+
expect(lifecycles.componentDidUpdate).to.not.have.been.called;
410+
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
402411

403412
const [resolve] = suspend();
404413

405414
rerender();
406415

407416
expect(scratch.innerHTML).to.eql(`<div>Suspended...</div>`);
408-
expect(lifecyles.componentWillMount).to.have.been.calledOnce;
409-
expect(lifecyles.componentDidMount).to.have.been.calledOnce;
410-
expect(lifecyles.componentWillUnmount).to.not.have.been.called;
417+
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
418+
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
419+
expect(lifecycles.componentDidUpdate).to.not.have.been.called;
420+
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
411421

412422
return resolve(() => <div>Suspense 2</div>).then(() => {
413423
rerender();
414424
expect(scratch.innerHTML).to.eql(
415425
`<div>Suspense 2</div><div>Lifecycle</div>`
416426
);
417427

418-
expect(lifecyles.componentWillMount).to.have.been.calledOnce;
419-
expect(lifecyles.componentDidMount).to.have.been.calledOnce;
420-
expect(lifecyles.componentWillUnmount).to.not.have.been.called;
428+
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
429+
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
430+
expect(lifecycles.componentDidUpdate).to.not.have.been.called;
431+
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
421432
});
422433
});
423434

@@ -431,18 +442,10 @@ describe('suspense', () => {
431442
componentWillUnmount() {}
432443
}
433444

434-
const componentWillMount = sinon.spy(
435-
LifecycleLogger.prototype,
436-
'componentWillMount'
437-
);
438-
const componentDidMount = sinon.spy(
439-
LifecycleLogger.prototype,
440-
'componentDidMount'
441-
);
442-
const componentWillUnmount = sinon.spy(
443-
LifecycleLogger.prototype,
444-
'componentWillUnmount'
445-
);
445+
const lifecycles = LifecycleLogger.prototype;
446+
sinon.spy(lifecycles, 'componentWillMount');
447+
sinon.spy(lifecycles, 'componentDidMount');
448+
sinon.spy(lifecycles, 'componentWillUnmount');
446449

447450
const [Suspender, suspend] = createSuspender(() => <div>Suspense</div>);
448451

@@ -454,26 +457,26 @@ describe('suspense', () => {
454457
);
455458

456459
expect(scratch.innerHTML).to.eql(`<div>Suspense</div>`);
457-
expect(componentWillMount).to.not.have.been.called;
458-
expect(componentDidMount).to.not.have.been.called;
459-
expect(componentWillUnmount).to.not.have.been.called;
460+
expect(lifecycles.componentWillMount).to.not.have.been.called;
461+
expect(lifecycles.componentDidMount).to.not.have.been.called;
462+
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
460463

461464
const [resolve] = suspend();
462465

463466
rerender();
464467

465468
expect(scratch.innerHTML).to.eql(`<div>Lifecycle</div>`);
466-
expect(componentWillMount).to.have.been.calledOnce;
467-
expect(componentDidMount).to.have.been.calledOnce;
468-
expect(componentWillUnmount).to.not.have.been.called;
469+
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
470+
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
471+
expect(lifecycles.componentWillUnmount).to.not.have.been.called;
469472

470473
return resolve(() => <div>Suspense 2</div>).then(() => {
471474
rerender();
472475
expect(scratch.innerHTML).to.eql(`<div>Suspense 2</div>`);
473476

474-
expect(componentWillMount).to.have.been.calledOnce;
475-
expect(componentDidMount).to.have.been.calledOnce;
476-
expect(componentWillUnmount).to.have.been.calledOnce;
477+
expect(lifecycles.componentWillMount).to.have.been.calledOnce;
478+
expect(lifecycles.componentDidMount).to.have.been.calledOnce;
479+
expect(lifecycles.componentWillUnmount).to.have.been.calledOnce;
477480
});
478481
});
479482

0 commit comments

Comments
 (0)