{"size": 4266, "ext": "js", "max_stars_repo_path": "tests/unit/hoc.spec.js", "max_stars_repo_name": "LinusBorg/vue-inject-helpers", "max_stars_repo_stars_event_min_datetime": "2019-03-18T11:04:06.000Z", "max_stars_repo_stars_event_max_datetime": "2019-03-18T11:04:06.000Z", "max_issues_repo_path": "tests/unit/hoc.spec.js", "max_issues_repo_name": "LinusBorg/vue-inject-helpers", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "tests/unit/hoc.spec.js", "max_forks_repo_name": "LinusBorg/vue-inject-helpers", "max_forks_repo_forks_event_min_datetime": "2021-10-06T02:18:54.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-06T02:18:54.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 27.3461538462, "max_line_length": 103, "alphanum_fraction": 0.4864041256}
import { createWrappedStub, makeReactive } from './resources/hoc-utils'
import Vue from 'vue'

/**
 * TODO
 * - test slots re-contextualization
 */
describe('The HOC', () => {
  const modes = [false, true]

  modes.forEach(functional => {
    describe(`[${functional ? 'Functional' : 'Normal'}] Version`, () => {
      it('passes inject values to matching props', () => {
        const inject = {
          a: 'A',
          b: 'B',
        }
        const { wrapper, child } = createWrappedStub(inject, ['a', 'b'], {
          functional,
        })
        // we can't check the injection of the functional component, there's no instance.
        if (!functional) {
          expect(wrapper.vm.test).toMatchObject(inject)
        }

        const props = wrapper.find(child).props()
        expect(props).toMatchObject({
          a: 'A',
          b: 'B',
        })
      })

      it("doesn't pass inject values that have no matching props", () => {
        const inject = {
          a: 'A',
          b: 'B',
        }
        const { wrapper, child } = createWrappedStub(inject, ['a', 'c'], {
          functional,
        })

        const vm = wrapper.find(child).vm
        expect(vm.$props).toMatchObject({
          a: 'A',
        })
        expect(vm.$attrs.c).toEqual(undefined)
      })

      it('props passed to the component overwrite injection properties', async done => {
        const inject = {
          a: 'A',
          b: 'B',
        }
        const { wrapper, child } = createWrappedStub(inject, ['a', 'b'], {
          functional,
        })

        const vm = wrapper.find(child).vm
        expect(vm.$props).toMatchObject({
          a: 'A',
          b: 'B',
        })

        wrapper.setProps({ b: 'BB' })

        await wrapper.vm.$nextTick()
        await wrapper.vm.$nextTick()

        expect(vm.$props).toMatchObject({
          a: 'A',
          b: 'BB',
        })
        done()
      })

      it('maps props to inject properties when mapper is provided', () => {
        const inject = {
          a: 'A',
          b: 'B',
        }
        const { wrapper, child } = createWrappedStub(inject, ['a', 'c'], {
          functional,
          mapper: { c: 'b' },
        })
        // we can't check the injection of the functional component, there's no instance.
        if (!functional) {
          expect(wrapper.vm.test).toMatchObject(inject)
        }

        const props = wrapper.find(child).props()
        expect(props).toMatchObject({
          a: 'A',
          c: 'B',
        })
      })

      if (!functional) {
        // This test doesn't work with test-utils for functional compontents, but the example app shows
        // that the code itself does work
        it('changes to reactive inject object update matching props', async done => {
          const inject = makeReactive({
            a: 'A',
            b: 'B',
          })
          const { wrapper, child } = createWrappedStub(inject, ['a', 'b'], {
            functional,
          })

          const childWrapper = wrapper.find(child)
          expect(childWrapper.props() /*vm.$props*/).toMatchObject({
            a: 'A',
            b: 'B',
          })

          inject.b = 'BB'

          await wrapper.vm.$nextTick()

          expect(childWrapper.props()).toMatchObject({
            a: 'A',
            b: 'BB',
          })
          done()
        })

        // this test fails for functional components,
        // but I assume it's because vue-test-utils fails to inject
        // the listeners properly, because
        // events are passed cleanly in the example app.
        it('passes listeners to the wrapped component', async done => {
          const inject = {
            a: 'A',
            b: 'B',
          }
          const fn = jest.fn()
          const { wrapper, child } = createWrappedStub(
            inject,
            ['a', 'b'],
            {
              functional,
            },
            { listeners: { click: fn } }
          )
          await Vue.nextTick()

          wrapper.find(child).vm.$emit('click', 'test')
          functional && console.log(wrapper.find(child).vm.$listeners)
          expect(fn).toHaveBeenCalledWith('test')

          done()
        })
      }
    })
  })
})
