pulsar/spec/view-registry-spec.js

/*
 * decaffeinate suggestions:
 * DS102: Remove unnecessary code created because of implicit returns
 * DS207: Consider shorter variations of null checks
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
 */
const ViewRegistry = require('../src/view-registry')

describe('ViewRegistry', () => {
  let registry = null

  beforeEach(() => {
    registry = new ViewRegistry()
  })

  afterEach(() => {
    registry.clearDocumentRequests()
  })

  describe('::getView(object)', () => {
    describe('when passed a DOM node', () =>
      it('returns the given DOM node', () => {
        const node = document.createElement('div')
        expect(registry.getView(node)).toBe(node)
      })
    )

    describe('when passed an object with an element property', () =>
      it("returns the element property if it's an instance of HTMLElement", () => {
        class TestComponent {
          constructor () {
            this.element = document.createElement('div')
          }
        }

        const component = new TestComponent()
        expect(registry.getView(component)).toBe(component.element)
      })
    )

    describe('when passed an object with a getElement function', () =>
      it("returns the return value of getElement if it's an instance of HTMLElement", () => {
        class TestComponent {
          getElement () {
            if (this.myElement == null) {
              this.myElement = document.createElement('div')
            }
            return this.myElement
          }
        }

        const component = new TestComponent()
        expect(registry.getView(component)).toBe(component.myElement)
      })
    )

    describe('when passed a model object', () => {
      describe("when a view provider is registered matching the object's constructor", () =>
        it('constructs a view element and assigns the model on it', () => {
          class TestModel {}

          class TestModelSubclass extends TestModel {}

          class TestView {
            initialize (model) {
              this.model = model
              return this
            }
          }

          const model = new TestModel()

          registry.addViewProvider(TestModel, (model) =>
            new TestView().initialize(model)
          )

          const view = registry.getView(model)
          expect(view instanceof TestView).toBe(true)
          expect(view.model).toBe(model)

          const subclassModel = new TestModelSubclass()
          const view2 = registry.getView(subclassModel)
          expect(view2 instanceof TestView).toBe(true)
          expect(view2.model).toBe(subclassModel)
        })
      )

      describe('when a view provider is registered generically, and works with the object', () =>
        it('constructs a view element and assigns the model on it', () => {
          registry.addViewProvider((model) => {
            if (model.a === 'b') {
              const element = document.createElement('div')
              element.className = 'test-element'
              return element
            }
          })

          const view = registry.getView({a: 'b'})
          expect(view.className).toBe('test-element')

          expect(() => registry.getView({a: 'c'})).toThrow()
        })
      )

      describe("when no view provider is registered for the object's constructor", () =>
        it('throws an exception', () => {
          expect(() => registry.getView({})).toThrow()
        })
      )
    })
  })

  describe('::addViewProvider(providerSpec)', () =>
    it('returns a disposable that can be used to remove the provider', () => {
      class TestModel {}
      class TestView {
        initialize (model) {
          this.model = model
          return this
        }
      }

      const disposable = registry.addViewProvider(TestModel, (model) =>
        new TestView().initialize(model)
      )

      expect(registry.getView(new TestModel()) instanceof TestView).toBe(true)
      disposable.dispose()
      expect(() => registry.getView(new TestModel())).toThrow()
    })
  )

  describe('::updateDocument(fn) and ::readDocument(fn)', () => {
    let frameRequests = null

    beforeEach(() => {
      frameRequests = []
      spyOn(window, 'requestAnimationFrame').andCallFake(fn => frameRequests.push(fn))
    })

    it('performs all pending writes before all pending reads on the next animation frame', () => {
      let events = []

      registry.updateDocument(() => events.push('write 1'))
      registry.readDocument(() => events.push('read 1'))
      registry.readDocument(() => events.push('read 2'))
      registry.updateDocument(() => events.push('write 2'))

      expect(events).toEqual([])

      expect(frameRequests.length).toBe(1)
      frameRequests[0]()
      expect(events).toEqual(['write 1', 'write 2', 'read 1', 'read 2'])

      frameRequests = []
      events = []
      const disposable = registry.updateDocument(() => events.push('write 3'))
      registry.updateDocument(() => events.push('write 4'))
      registry.readDocument(() => events.push('read 3'))

      disposable.dispose()

      expect(frameRequests.length).toBe(1)
      frameRequests[0]()
      expect(events).toEqual(['write 4', 'read 3'])
    })

    it('performs writes requested from read callbacks in the same animation frame', () => {
      spyOn(window, 'setInterval').andCallFake(fakeSetInterval)
      spyOn(window, 'clearInterval').andCallFake(fakeClearInterval)
      const events = []

      registry.updateDocument(() => events.push('write 1'))
      registry.readDocument(() => {
        registry.updateDocument(() => events.push('write from read 1'))
        events.push('read 1')
      })
      registry.readDocument(() => {
        registry.updateDocument(() => events.push('write from read 2'))
        events.push('read 2')
      })
      registry.updateDocument(() => events.push('write 2'))

      expect(frameRequests.length).toBe(1)
      frameRequests[0]()
      expect(frameRequests.length).toBe(1)

      expect(events).toEqual([
        'write 1',
        'write 2',
        'read 1',
        'read 2',
        'write from read 1',
        'write from read 2'
      ])
    })
  })

  describe('::getNextUpdatePromise()', () =>
    it('returns a promise that resolves at the end of the next update cycle', () => {
      let updateCalled = false
      let readCalled = false

      waitsFor('getNextUpdatePromise to resolve', (done) => {
        registry.getNextUpdatePromise().then(() => {
          expect(updateCalled).toBe(true)
          expect(readCalled).toBe(true)
          done()
        })

        registry.updateDocument(() => updateCalled = true)
        registry.readDocument(() => readCalled = true)
      })
    })
  )
})