@johngw/stream/test/transformers/addedNodes.test.ts

Reactive programming tools using the WHATWG Streams API.

import { fromDOMMutations } from '@johngw/stream/sources/fromDOMMutations'
import { addedNodes } from '@johngw/stream/transformers/addedNodes'
import { write } from '@johngw/stream/sinks/write'
import { timeout } from '@johngw/stream-common'

test('picks added nodes from DOM mutations', async () => {
  const fn = jest.fn()

  fromDOMMutations(document.body, { childList: true })
    .pipeThrough(addedNodes())
    .pipeTo(write(fn))

  const p = document.createElement('p')
  p.classList.add('test')
  document.body.appendChild(p)

  await timeout()

  const div = document.createElement('div')
  div.appendChild(p)

  await timeout()

  document.body.appendChild(div)

  await timeout()

  expect(fn.mock.calls).toMatchInlineSnapshot(`
    [
      [
        <p
          class="test"
        />,
      ],
      [
        <div>
          <p
            class="test"
          />
        </div>,
      ],
    ]
  `)
})