From b69df8d8e7636ff307c2c4688c0c291e44c03636 Mon Sep 17 00:00:00 2001 From: Jason Staten Date: Fri, 1 Nov 2019 22:10:29 -0600 Subject: [PATCH] feat: Assign `scope` option to $scope Event tests passing --- src/__tests__/events.js | 63 +++++++++++++++++++++++------------------ src/__tests__/render.js | 12 ++++++++ src/pure.js | 11 ++++++- 3 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/__tests__/events.js b/src/__tests__/events.js index afe2193..8fb8485 100644 --- a/src/__tests__/events.js +++ b/src/__tests__/events.js @@ -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()" + >`, + { + 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() - 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(`, + { + 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) }) diff --git a/src/__tests__/render.js b/src/__tests__/render.js index b338c7c..d288b0a 100644 --- a/src/__tests__/render.js +++ b/src/__tests__/render.js @@ -29,3 +29,15 @@ test('supports fragments', () => { const {asFragment} = render(``) expect(asFragment()).toMatchSnapshot() }) + +test('assigns to scope', () => { + const {getByText} = render(`
Hello {{name}}
`, { + scope: { + name: 'World', + }, + }) + + expect(() => getByText('Hello World')).not.toThrow( + 'Unable to find an element with the text: Hello World.', + ) +}) diff --git a/src/pure.js b/src/pure.js index f7664b1..8e241b2 100644 --- a/src/pure.js +++ b/src/pure.js @@ -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}