~statianzo/angularjs-testing-library

b69df8d8e7636ff307c2c4688c0c291e44c03636 — Jason Staten 4 years ago 79c6c4f
feat: Assign `scope` option to $scope

Event tests passing
3 files changed, 57 insertions(+), 29 deletions(-)

M src/__tests__/events.js
M src/__tests__/render.js
M src/pure.js
M src/__tests__/events.js => src/__tests__/events.js +35 -28
@@ 1,4 1,3 @@
import React from 'react'
import {render, fireEvent} from '../'

const eventTypes = [


@@ 43,7 42,7 @@ const eventTypes = [
    events: [
      'click',
      'contextMenu',
      'doubleClick',
      'dblClick',
      'drag',
      'dragEnd',
      'dragEnter',


@@ 131,48 130,56 @@ const eventTypes = [
eventTypes.forEach(({type, events, elementType, init}) => {
  describe(`${type} Events`, () => {
    events.forEach(eventName => {
      const propName = `on${eventName.charAt(0).toUpperCase()}${eventName.slice(
        1,
      )}`
      const propName = eventName.toLowerCase()

      it(`triggers ${propName}`, () => {
        const ref = React.createRef()
      it(`triggers ${eventName}`, () => {
        const spy = jest.fn()

        render(
          React.createElement(elementType, {
            [propName]: spy,
            ref,
          }),
        const {getByTestId} = render(
          `
          <${elementType}
            data-testid="target"
            ng-on-${propName}="spy()"
          ></${elementType}>`,
          {
            scope: {
              spy,
            },
          },
        )

        fireEvent[eventName](ref.current, init)
        const target = getByTestId('target')
        fireEvent[eventName](target, init)
        expect(spy).toHaveBeenCalledTimes(1)
      })
    })
  })
})

test('onChange works', () => {
  const handleChange = jest.fn()
  const {
    container: {firstChild: input},
  } = render(<input onChange={handleChange} />)
  fireEvent.change(input, {target: {value: 'a'}})
  expect(handleChange).toHaveBeenCalledTimes(1)
})

test('calling `fireEvent` directly works too', () => {
  const handleEvent = jest.fn()
  const {
    container: {firstChild: button},
  } = render(<button onClick={handleEvent} />)
  const spy = jest.fn()

  const {getByTestId} = render(
    `
          <button
            data-testid="target"
            ng-click="spy()"
          ></button>`,
    {
      scope: {
        spy,
      },
    },
  )

  const target = getByTestId('target')
  fireEvent(
    button,
    new Event('MouseEvent', {
    target,
    new Event('click', {
      bubbles: true,
      cancelable: true,
      button: 0,
    }),
  )
  expect(spy).toHaveBeenCalledTimes(1)
})

M src/__tests__/render.js => src/__tests__/render.js +12 -0
@@ 29,3 29,15 @@ test('supports fragments', () => {
  const {asFragment} = render(`<atl-fragment></atl-fragment>`)
  expect(asFragment()).toMatchSnapshot()
})

test('assigns to scope', () => {
  const {getByText} = render(`<div>Hello {{name}}</div>`, {
    scope: {
      name: 'World',
    },
  })

  expect(() => getByText('Hello World')).not.toThrow(
    'Unable to find an element with the text: Hello World.',
  )
})

M src/pure.js => src/pure.js +10 -1
@@ 9,7 9,7 @@ import {
const mountedContainers = new Set()
const mountedScopes = new Set()

function render(ui, {container, baseElement = container, queries} = {}) {
function render(ui, {container, baseElement = container, queries, scope} = {}) {
  if (!baseElement) {
    // default to document.body instead of documentElement to avoid output of potentially-large
    // head elements (such as JSS style blocks) in debug output


@@ 31,6 31,7 @@ function render(ui, {container, baseElement = container, queries} = {}) {
    ($compile, $rootScope) => {
      $scope = $rootScope.$new()
      mountedScopes.add($scope)
      Object.assign($scope, scope)

      const element = $compile(ui)($scope)[0]
      container.appendChild(element)


@@ 93,5 94,13 @@ Object.keys(dtlFireEvent).forEach(key => {
  }
})

fireEvent.mouseEnter = (...args) => {
  return dtlFireEvent.mouseOver(...args)
}

fireEvent.mouseLeave = (...args) => {
  return dtlFireEvent.mouseOut(...args)
}

export * from '@testing-library/dom'
export {render, cleanup, fireEvent}