Internals test for detached Promise handling

diffhtml-promise-test.js

it('will hold off rendering until detached (during replace) promise resolves', () => {
  const promise = Promise.resolve();
  const { use, innerHTML, addTransitionState } = diff;
  const { fixture } = this;

  // Run each assertion after a successful render.
  const assertions = [
    () => ok(fixture.querySelector('p')),
    () => {
      equal(fixture.querySelector('p'), null);
      equal(fixture.querySelector('span').textContent, 'test');
    },
    () => equal(fixture.querySelector('span').textContent, 'test2'),
  ];

  // Use middleware to know when each transaction completes.
  const unsubscribe = use(transaction => {
    transaction.onceEnded(() => assertions.shift()());
  });

  // Bind a promise to a transaction whenever an element is removed.
  addTransitionState('detached', () => promise);

  // innerHTML runs the transaction flow tasks, the last returns a Promise
  // for composition.
  const first = () => innerHTML(fixture, '<div><p></p></div>');
  const second = () => innerHTML(fixture, '<div><span>test</span></div>');
  const third = () => innerHTML(fixture, '<div><span>test2</span></div>');
  
  // Render each transaction sequentially, then remove the middleware.
  return first().then(second).then(third).then(unsubscribe).then(() => {
    equal(assertions.length, 0);
  });
});