Merge pull request #4 from withuno/smithki/strongly-typed-events

Add strong typing for events emitted by login targets

Author: smithki

README.md

@@ -39,22 +39,19 @@ Locust login targets will emit events when certain things happen. To listen for
 
 ```ts
 const target = getLoginTarget();
-target.on("valueChanged", info => {
-    if (info.type === "username") {
-        console.log("New username:", info.value);
+target.events.on("valueChanged", ({ type, value }) => {
+    if (type === "username") {
+        console.log("New username:", value);
     }
 });
 // `type` can be "username" or "password"
 ```
 
-> **Note**
-> Login targets inherit from [`EventEmitter`](https://github.com/primus/eventemitter3), so you can use all other methods provided by their implementation.
-
 You can also listen to form submissions:
 
 ```ts
 const target = getLoginTarget();
-target.once("formSubmitted", ({ source }) => {
+target.events.once("formSubmitted", ({ source }) => {
     // `source` will either be "submitButton" or "form"
 });
 ```

src/login/login-inputs.ts

@@ -99,10 +99,11 @@ function guessUsernameInput(formEl: HTMLFormElement) {
 
 export function setInputValue(input: HTMLInputElement, value: string) {
   nativeInputValueSetter.call(input, value);
-  const inputEvent = new Event('input', { bubbles: true });
-  input.dispatchEvent(inputEvent);
-  const changeEvent = new Event('change', { bubbles: true });
-  input.dispatchEvent(changeEvent);
+  input.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true }));
+  input.dispatchEvent(new KeyboardEvent('keypress', { bubbles: true, cancelable: true }));
+  input.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, cancelable: true }));
+  input.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+  input.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
 }
 
 export function sortFormElements<Elements extends HTMLElement[]>(

src/login/login-target.ts

@@ -26,13 +26,19 @@ interface ChangeListener {
   listener: () => void;
 }
 
+type LoginTargetEventEmitter = EventEmitter<{
+  formSubmitted: (ctx: { source: 'form' | 'submitButton' }) => void;
+  valueChanged: (ctx: { type: 'username' | 'password'; value: string }) => void;
+}>;
+
 /**
  * The LoginTarget class which represents a 'target' for logging in
  * with some credentials
  * @class LoginTarget
  */
-export class LoginTarget extends EventEmitter {
+export class LoginTarget {
   public baseScore = 0;
+  public events = new EventEmitter() as LoginTargetEventEmitter;
 
   private _form: HTMLFormElement | null = null;
   private _usernameField: HTMLInputElement | null = null;
@@ -230,7 +236,7 @@ export class LoginTarget extends EventEmitter {
    * @fires LoginTarget#valueChanged
    * @fires LoginTarget#formSubmitted
    */
-  _listenForUpdates<El extends HTMLElement>(type: LoginTargetType, input: El) {
+  private _listenForUpdates<El extends HTMLElement>(type: LoginTargetType, input: El) {
     if (/username|password|submit|form/.test(type) !== true) {
       throw new Error(`Failed listening for field changes: Unrecognised type: ${type}`);
     }
@@ -247,10 +253,10 @@ export class LoginTarget extends EventEmitter {
     if (type === 'submit' || type === 'form') {
       // Listener function for the submission of the form
       const source = type === 'form' ? 'form' : 'submitButton';
-      handleEvent = () => this.emit('formSubmitted', { source });
+      handleEvent = () => this.events.emit('formSubmitted', { source });
     } else {
       const emit = (value: any) => {
-        this.emit('valueChanged', {
+        this.events.emit('valueChanged', {
           type,
           value,
         });
@@ -275,7 +281,7 @@ export class LoginTarget extends EventEmitter {
    * @returns A promise that resolves once either the delay has
    * expired for the page has begun unloading.
    */
-  _waitForNoUnload() {
+  private _waitForNoUnload() {
     const unloadObserver = getSharedObserver();
     return Promise.race([
       new Promise((resolve) => {

test/unit/login/login-target.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { EventEmitter } from 'eventemitter3';
 import sinon from 'sinon';
 
 import { setInputValue } from '@src/login/login-inputs';
@@ -10,15 +11,13 @@ describe('LoginTarget', function () {
   });
 
   it('implements event emitter methods', function () {
-    expect(this.target).to.have.property('emit').that.is.a('function');
-    expect(this.target).to.have.property('on').that.is.a('function');
-    expect(this.target).to.have.property('once').that.is.a('function');
+    expect(this.target.events).to.be.instanceOf(EventEmitter);
   });
 
   it('fires events when username inputs are updated', function () {
     let currentValue = '';
     this.target.usernameField = document.createElement('input');
-    this.target.on('valueChanged', (info) => {
+    this.target.events.on('valueChanged', (info) => {
       if (info.type === 'username') {
         currentValue = info.value;
       }
@@ -29,7 +28,7 @@ describe('LoginTarget', function () {
 
   it('fires events when the submit button is clicked', function () {
     let formSubmitted = 0;
-    this.target.on('formSubmitted', (info) => {
+    this.target.events.on('formSubmitted', (info) => {
       if (info.source === 'submitButton') {
         formSubmitted += 1;
       }
@@ -42,7 +41,7 @@ describe('LoginTarget', function () {
 
   it('fires events when the form is submitted', function () {
     let formSubmitted = 0;
-    this.target.on('formSubmitted', (info) => {
+    this.target.events.on('formSubmitted', (info) => {
       if (info.source === 'form') {
         formSubmitted += 1;
       }
@@ -62,7 +61,7 @@ describe('LoginTarget', function () {
   it('fires events when password inputs are updated', function () {
     let currentValue = '';
     this.target.passwordField = document.createElement('input');
-    this.target.on('valueChanged', (info) => {
+    this.target.events.on('valueChanged', (info) => {
       if (info.type === 'password') {
         currentValue = info.value;
       }