browser-monkey - npm Package Compare versions

Comparing version 3.0.0-beta.4 to 3.0.0-beta.6

lib/Dom.ts

@@ -1,3 +0,2 @@
-import {MouseEvent} from './polyfills'
-import {KeyboardEvent} from './polyfills'
+import {MouseEvent, KeyboardEvent} from './polyfills'
 import normaliseText from './normaliseText'
@@ -40,4 +39,17 @@ import keycode from 'keycode'
         this.triggerEvent(element, 'keydown', text)
-        this.triggerEvent(element, 'keypress', text)
         this.triggerEvent(element, 'keyup', text)
+
+        if (text == '{Enter}') {
+          const event = createKeyboardEvent('keypress', text)
+          const submitForm = (e) => {
+            if (e == event) {
+              element.form.removeEventListener('keypress', submitForm)
+              element.form.dispatchEvent(createEvent('submit'))
+            }
+          }
+          element.form.addEventListener('keypress', submitForm)
+          element.dispatchEvent(event)
+        } else {
+          this.triggerEvent(element, 'keypress', text)
+        }
       } else if (incremental) {
@@ -166,2 +178,3 @@ if (element.value !== '') {
 function createMouseEvent (type): MouseEvent {
+  // @ts-ignore
   return new MouseEvent(type, { bubbles: true, cancelable: true })
@@ -182,2 +195,3 @@ }
 function createKeyboardEvent (type, key): KeyboardEvent {
+  // @ts-ignore
   const event = new KeyboardEvent(type, { bubbles: true, cancelable: true })
@@ -184,0 +198,0 @@

lib/HyperdomMount.ts

 import Mount from './Mount'
-import hyperdom from 'hyperdom'
 import extend from 'lowscore/extend'
@@ -16,4 +15,5 @@
     }
+    const hyperdom = require('hyperdom')
     hyperdom.append(testDiv, app, extend({ requestRender: setTimeout }, options))
   }
 }

lib/Mount.ts

@@ -31,3 +31,3 @@ import {Query} from './Query'
   public unmount (): void {
-    if (this._mountDiv) {
+    if (this._mountDiv?.parentNode) {
       this._mountDiv.parentNode.removeChild(this._mountDiv)
@@ -34,0 +34,0 @@ }

lib/polyfills.js

@@ -9,6 +9,22 @@ module.exports.MouseEvent = (function () {
 
-  const MouseEvent = function (eventType, params) {
+  const MouseEventPolyfill = function (eventType, params) {
     params = params || { bubbles: false, cancelable: false }
     var mouseEvent = document.createEvent('MouseEvent')
-    mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, params.screenX || 0, params.screenY || 0, params.clientX || 0, params.clientY || 0, false, false, false, false, 0, null)
+    mouseEvent.initMouseEvent(
+      eventType,
+      params.bubbles,
+      params.cancelable,
+      window,
+      0,
+      params.screenX || 0,
+      params.screenY || 0,
+      params.clientX || 0,
+      params.clientY || 0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    )
 
@@ -18,5 +34,5 @@ return mouseEvent
 
-  MouseEvent.prototype = Event.prototype
+  MouseEventPolyfill.prototype = Event.prototype
 
-  return MouseEvent
+  return MouseEventPolyfill
 })()
@@ -33,4 +49,4 @@
 
-  const KeyboardEvent = function (eventType, params) {
-    params = params || { bubbles: false, cancelable: false }
+  const KeyboardEventPolyfill = function (eventType, params) {
+    params = params || { bubbles: true, cancelable: false }
 
@@ -43,3 +59,3 @@ const modKeys = [
       params.metaKey ? 'Meta' : ''
-    ].join(' ')
+    ].filter(Boolean).join(' ')
 
@@ -62,5 +78,5 @@ const keyEvent = document.createEvent('KeyboardEvent')
 
-  KeyboardEvent.prototype = Event.prototype
+  KeyboardEventPolyfill.prototype = Event.prototype
 
-  return KeyboardEvent
+  return KeyboardEventPolyfill
 })()

lib/Query.ts

@@ -528,3 +528,3 @@ import { ExecutedTransform } from './ExecutedTransform'
         error.retries = retries
-        error.duration = new Date() - startTime
+        error.duration = Number(new Date()) - Number(startTime)
         error.rewriteMessage()
@@ -531,0 +531,0 @@

lib/ReactMount.ts

@@ -1,11 +0,11 @@
-const ReactDOM = require('react-dom')
 import Mount from './Mount'
 
 export default class ReactMount extends Mount {
-  public constructor (vdom: React.ReactNode) {
+  public constructor (vdom: any) {
     super()
     const div = this.containerElement()
 
+    const ReactDOM = require('react-dom')
     ReactDOM.render(vdom, div)
   }
 }

package.json

 {
   "name": "browser-monkey",
-  "version": "3.0.0-beta.4",
+  "version": "3.0.0-beta.6",
   "description": "reliable dom testing",
@@ -16,6 +16,9 @@ "main": "dist/index.js",
     "test-electron-mocha": "yarn electron-mocha test/**/*Spec.{js,ts}",
-    "electron-mocha": "electron-mocha --disable-site-isolation-trials --full-trace --main electron/foreignIframe.js -r test/register.js --renderer",
+    "electron-mocha": "electron-mocha --disable-site-isolation-trials --full-trace --color --main electron/foreignIframe.js -r ts-node/register --renderer",
     "mocha": "mocha -r test/register.js",
-    "update-readme-example-links": "node ./docs/update-readme-example-links.js",
-    "prepare": "webpack"
+    "prepare": "tsc -p tsconfig.build.json",
+    "docs": "yarn build-docs && docsify serve --no-open --port 3003 ./docs-dist",
+    "watch-docs": "ls docs/*.md | entr yarn build-docs",
+    "build-docs": "rm -rf ./docs-dist && cp -r ./docs ./docs-dist && codesandbox-example-links --output-dir=./docs-dist ./docs/*.md",
+    "publish-docs": "yarn build-docs && gh-pages -t -d docs-dist"
   },
@@ -29,7 +32,4 @@ "author": "Tim Macfarlane <[e-mail]>",
     "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
     "@babel/register": "^7.10.4",
-    "@types/jquery": "^3.5.0",
     "@types/mocha": "^5.2.7",
-    "@types/react": "^16.9.19",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
@@ -40,3 +40,3 @@ "@typescript-eslint/parser": "^2.18.0",
     "codesandbox": "^1.3.8",
-    "css-loader": "^3.4.2",
+    "codesandbox-example-links": "^1.1.0",
     "electron": "^7.1.9",
@@ -53,4 +53,4 @@ "electron-mocha": "^8.2.0",
     "express": "^4.16.4",
-    "hyperdom": "^0.13.0",
-    "iframe-resizer": "^4.1.1",
+    "gh-pages": "^3.1.0",
+    "hyperdom": "^2.1.0",
     "jquery": "^3.3.1",
@@ -71,6 +71,4 @@ "karma": "4.4.1",
     "react-dom": "^16.12.0",
-    "to-string-loader": "^1.1.6",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^8.0.2",
     "ts-node": "^8.1.0",
-    "typescript": "^3.7.5",
     "webpack": "^4.41.5",
@@ -80,8 +78,11 @@ "webpack-cli": "^3.3.10"
   "dependencies": {
+    "@types/jquery": "^3.5.0",
     "debug": "^4.1.1",
     "hobostyle": "1.0.0",
+    "iframe-resizer": "^4.1.1",
     "keycode": "^2.2.0",
     "lowscore": "^1.12.1",
     "object-inspect": "1.6.0",
-    "pluralize": "^8.0.0"
+    "pluralize": "^8.0.0",
+    "typescript": "^3.7.5"
   },
@@ -88,0 +89,0 @@ "standard": {

test/enterTextSpec.ts

@@ -9,2 +9,5 @@ import {expect} from 'chai'
   beforeEach(function () {
+    if (assembly) {
+      assembly.stop()
+    }
     assembly = new DomAssembly()
@@ -14,6 +17,2 @@ browser = assembly.browserMonkey().scope(document.body)
 
-  afterEach(() => {
-    assembly.stop()
-  })
-
   it('can get value of input', async () => {
@@ -25,9 +24,28 @@ const input = assembly.insertHtml('<input class="element" type="text" />')
 
-  it('can pass command keys', async () => {
-    let textEntered
+  it('submits form on {Enter}', async () => {
+    let formSubmitted = false
 
-    const input = assembly.insertHtml('<input class="element" type="text" />')
-    input.addEventListener('keypress', e => {
-      if (e.code === 'Enter' && e.which === 13) {
-        textEntered = e.target.value
+    const form = assembly.insertHtml('<form><input class="element" type="text" /></form>')
+    form.addEventListener('submit', e => {
+      e.preventDefault()
+      formSubmitted = true
+    })
+
+    await browser.enterText('.element', ['the text', '{Enter}'])
+    expect(formSubmitted).to.eq(true)
+  })
+
+  it('does not submit form on {Enter} if input catches and cancells the "keypress" event', async function() {
+    let formSubmitted = false
+
+    const form = assembly.insertHtml('<form><input class="element" type="text" /></form>')
+    form.addEventListener('submit', e => {
+      e.preventDefault()
+      formSubmitted = true
+    })
+
+    const input = form.querySelector('input')
+    input.addEventListener('keypress', (e) => {
+      if (e.key == 'Enter') {
+        e.stopPropagation()
       }
@@ -37,4 +55,7 @@ })
     await browser.enterText('.element', ['the text', '{Enter}'])
-    expect(textEntered).to.equal('the text')
+
+    expect(formSubmitted).to.eq(false)
   })
+
+  // TODO what if they really want to type {Enter}?
 })

test/hyperdomIntegrationSpec.ts

@@ -33,6 +33,7 @@ import retry from '../lib/retry'
 
-    class App {
+    class App extends hyperdom.RenderComponent {
       private model: Model
 
       public constructor (model) {
+        super()
         this.model = model
@@ -39,0 +40,0 @@ }

test/mountSpec.ts

@@ -9,7 +9,14 @@ import {Query} from '../lib/Query'
 import HyperdomMount from '../lib/HyperdomMount'
+import HyperdomApp from './app/hyperdom'
 
 describe('mount', () => {
-  testMount('hyperdom', () => new HyperdomMount(new (require('./app/hyperdom'))()))
+  testMount('hyperdom', () => new HyperdomMount(new HyperdomApp()))
   testMount('react', () => new ReactMount(React.createElement(ReactApp, {}, null)))
   testMount('iframe', () => new IFrameMount(DomAssembly.localUrl('iframe-mount-test.html')))
+
+  it('unmounts idempotently', function() {
+    const mount  = new IFrameMount(DomAssembly.localUrl('iframe-mount-test.html'))
+    mount.unmount()
+    mount.unmount()
+  })
 })
@@ -16,0 +23,0 @@

test/register.js

@@ -0,3 +1,4 @@
+require('ts-node/register')
 require('@babel/register')({
-  extensions: ['.js', '.jsx', '.ts', '.tsx']
+  extensions: ['.js', '.jsx']
 })

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

44

decreased by-10.2%

Number of package files

119

increased by85.94%

Worsened metrics

Total package byte prevSize

394719

decreased by-65.35%

Dependency count

9

increased by50%

Lines of code

7319

decreased by-36.37%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@types/jquery@^3.5.0

• + Addediframe-resizer@^4.1.1

• + Addedtypescript@^3.7.5

• + Added@types/jquery@3.5.32(transitive)

• + Added@types/sizzle@2.3.9(transitive)

• + Addediframe-resizer@4.4.5(transitive)

• + Addedtypescript@3.9.10(transitive)