feat: Assign `scope` option to $scope

Event tests passing

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(
+      const propName = eventName.toLowerCase()
-        1,
-      )}`
 
-      it(`triggers ${propName}`, () => {
+      it(`triggers ${eventName}`, () => {
-        const ref = React.createRef()
         const spy = jest.fn()
 
-        render(
+        const {getByTestId} = render(
-          React.createElement(elementType, {
+          `
-            [propName]: spy,
+          <${elementType}
-            ref,
+            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 spy = jest.fn()
-  const {
+
-    container: {firstChild: button},
+  const {getByTestId} = render(
-  } = render(<button onClick={handleEvent} />)
+    `
+          <button
+            data-testid="target"
+            ng-click="spy()"
+          ></button>`,
+    {
+      scope: {
+        spy,
+      },
+    },
+  )
+
+  const target = getByTestId('target')
   fireEvent(
-    button,
+    target,
-    new Event('MouseEvent', {
+    new Event('click', {
       bubbles: true,
       cancelable: true,
       button: 0,
     }),
   )
+  expect(spy).toHaveBeenCalledTimes(1)
 })

src/__tests__/render.js

@@ -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.',
+  )
+})

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}