Migrate to Playwright

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: 'CI'
+name: "CI"
 
 on:
   push:
@@ -7,7 +7,6 @@ on:
   pull_request:
 
 jobs:
-
   ci:
     needs: [test]
     runs-on: ubuntu-latest
@@ -19,12 +18,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        yarncmd: ['test']
+        yarncmd: ["test"]
     steps:
       - uses: actions/checkout@v2
       - name: Configure
         run: |
-          npm config set scripts-prepend-node-path auto
           git config --global user.email [email protected]
           git config --global user.name uirouter_github_actions
       - name: Install Dependencies

app/bootstrap/bootstrap.js

@@ -19,14 +19,13 @@
  * - 3rd party Libraries and angular1 module
  */
 
-
 // import all the app sub modules
 // Each module registers it states/services/components, with the `ngmodule`
-import "../global/global.module";
-import "../main/main.module";
-import "../contacts/contacts.module";
-import "../mymessages/mymessages.module";
-import "../prefs/prefs.module";
+import '../global/global.module';
+import '../main/main.module';
+import '../contacts/contacts.module';
+import '../mymessages/mymessages.module';
+import '../prefs/prefs.module';
 
 // Google analytics
 import '../util/ga';

app/bootstrap/ngmodule.js

@@ -3,11 +3,11 @@
  * and exports it.
  */
 // External dependencies
-import * as angular from "angular";
-import uiRouter from "@uirouter/angularjs";
+import * as angular from 'angular';
+import uiRouter from '@uirouter/angularjs';
 import { StickyStatesPlugin } from '@uirouter/sticky-states';
 import { DSRPlugin } from '@uirouter/dsr';
-import ocLazyLoad from "oclazyload";
+import ocLazyLoad from 'oclazyload';
 
 import { MAIN_MODULE } from '../main/main.module';
 import { GLOBAL_MODULE } from '../global/global.module';
@@ -16,7 +16,7 @@ import { GLOBAL_MODULE } from '../global/global.module';
 //
 // Since it is exported, other parts of the application (in other files) can then import it and register things.
 // In bootstrap.js, the module is imported, and the components, services, and states are registered.
-export const ngmodule = angular.module("demo", [
+export const ngmodule = angular.module('demo', [
   uiRouter,
   ocLazyLoad,
   MAIN_MODULE.name,
@@ -28,10 +28,14 @@ export const ngmodule = angular.module("demo", [
   // PREFS_MODULE.name
 ]);
 
-ngmodule.config(['$uiRouterProvider', '$locationProvider', ($uiRouter, $locationProvider) => {
-  $locationProvider.hashPrefix('');
-  $uiRouter.plugin(StickyStatesPlugin);
-  $uiRouter.plugin(DSRPlugin);
-  // Show the UI-Router Visualizer
-  import("@uirouter/visualizer").then(module => $uiRouter.plugin(module.Visualizer));
-}]);
+ngmodule.config([
+  '$uiRouterProvider',
+  '$locationProvider',
+  ($uiRouter, $locationProvider) => {
+    $locationProvider.hashPrefix('');
+    $uiRouter.plugin(StickyStatesPlugin);
+    $uiRouter.plugin(DSRPlugin);
+    // Show the UI-Router Visualizer
+    import('@uirouter/visualizer').then((module) => $uiRouter.plugin(module.Visualizer));
+  },
+]);

app/contacts/contactDetail.component.js

@@ -1,5 +1,5 @@
 /**
- * This component renders a read only view of the details for a single contact. 
+ * This component renders a read only view of the details for a single contact.
  */
 export const contactDetail = {
   bindings: { contact: '<' },
@@ -24,5 +24,5 @@ export const contactDetail = {
         <img ng-src="{{$ctrl.contact.picture}}"/>
       </div>
     </div>
-`
+`,
 };

app/contacts/contactList.component.js

@@ -1,6 +1,6 @@
 /**
  * This component renders a list of contacts.
- * 
+ *
  * At the top is a "new contact" button.
  * Each list item is a clickable link to the `contacts.contact` details substate
  */
@@ -29,5 +29,5 @@ export const contactList = {
         </a>
       </li>
     </ul>
-`
+`,
 };

app/contacts/contactView.component.js

@@ -1,12 +1,12 @@
 /**
  * This component renders details for a single contact
- * 
+ *
  * A button messages the contact by linking to `mymessages.compose` state passing the email as a state parameter.
  * Another button edits the contact by linking to `contacts.contact.edit` state.
  */
 
 export const contactView = {
-  bindings: {contact: '<'},
+  bindings: { contact: '<' },
 
   template: `
     <div class="contact">
@@ -25,4 +25,5 @@ export const contactView = {
       </button>
 
     </div>
-`};
+`,
+};

app/contacts/contacts.component.js

@@ -1,6 +1,6 @@
 /**
  * This component renders the contacts submodule.
- * 
+ *
  * On the left is the list of contacts.
  * On the right is the ui-view viewport where contact details appear.
  */
@@ -17,5 +17,5 @@ export const contacts = {
         <h4 style="margin: 1em 2em;">Select a contact</h4>
       </div>
 
-    </div>`
+    </div>`,
 };

app/contacts/contacts.module.js

@@ -1,10 +1,10 @@
-import {contactDetail} from "./contactDetail.component";
-import {contactList} from "./contactList.component";
-import {contacts} from "./contacts.component";
-import {contactView} from "./contactView.component";
-import {editContact} from "./editContact.component";
+import { contactDetail } from './contactDetail.component';
+import { contactList } from './contactList.component';
+import { contacts } from './contacts.component';
+import { contactView } from './contactView.component';
+import { editContact } from './editContact.component';
 
-import {contactsState, editContactState, newContactState, viewContactState} from "./contacts.states";
+import { contactsState, editContactState, newContactState, viewContactState } from './contacts.states';
 
 export const CONTACTS_MODULE = angular.module('contacts', []);
 
@@ -14,9 +14,12 @@ CONTACTS_MODULE.component('editContact', editContact);
 CONTACTS_MODULE.component('contactDetail', contactDetail);
 CONTACTS_MODULE.component('contactList', contactList);
 
-CONTACTS_MODULE.config(['$stateRegistryProvider', function($stateRegistry) {
-  $stateRegistry.register(contactsState);
-  $stateRegistry.register(newContactState);
-  $stateRegistry.register(viewContactState);
-  $stateRegistry.register(editContactState);
-}]);
+CONTACTS_MODULE.config([
+  '$stateRegistryProvider',
+  function ($stateRegistry) {
+    $stateRegistry.register(contactsState);
+    $stateRegistry.register(newContactState);
+    $stateRegistry.register(viewContactState);
+    $stateRegistry.register(editContactState);
+  },
+]);

app/contacts/contacts.states.js

@@ -1,4 +1,4 @@
-import "../global/dialog.service";
+import '../global/dialog.service';
 
 /**
  * This state displays the contact list.
@@ -8,17 +8,17 @@ import "../global/dialog.service";
  */
 export const contactsState = {
   parent: 'app', // declares that 'contacts' is a child of 'app'
-  name: "contacts",
-  url: "/contacts",
+  name: 'contacts',
+  url: '/contacts',
   resolve: {
     // Resolve all the contacts.  The resolved contacts are injected into the controller.
-    contacts: ['Contacts', (Contacts) => Contacts.all()]
+    contacts: ['Contacts', (Contacts) => Contacts.all()],
   },
   data: { requiresAuth: true },
   deepStateRedirect: true,
   sticky: true,
   views: {
-    contacts: 'contacts'
+    contacts: 'contacts',
   },
 };
 
@@ -32,12 +32,11 @@ export const viewContactState = {
   resolve: {
     // Resolve the contact, based on the contactId parameter value.
     // The resolved contact is provided to the contactComponent's contact binding
-    contact: ['Contacts', '$transition$', (Contacts, $transition$) => Contacts.get($transition$.params().contactId)]
+    contact: ['Contacts', '$transition$', (Contacts, $transition$) => Contacts.get($transition$.params().contactId)],
   },
-  component: 'contactView'
+  component: 'contactView',
 };
 
-
 /**
  * This state allows a user to edit a contact
  *
@@ -54,10 +53,10 @@ export const editContactState = {
     // This could also have been written using ui-view@state addressing: $default@contacts
     // Or, this could also have been written using absolute ui-view addressing: !$default.$default.$default
     '^.^.$default': {
-      bindings: { pristineContact: "contact" },
-      component: 'editContact'
-    }
-  }
+      bindings: { pristineContact: 'contact' },
+      component: 'editContact',
+    },
+  },
 };
 
 /**
@@ -68,5 +67,5 @@ export const editContactState = {
 export const newContactState = {
   name: 'contacts.new',
   url: '/new',
-  component: 'editContact'
+  component: 'editContact',
 };

app/contacts/editContact.component.js

@@ -46,16 +46,16 @@ class EditContactController {
   /** Ask for confirmation, then delete the contact, then go to the grandparent state ('contacts') */
   remove(contact) {
     this.DialogService.confirm(`Delete contact: ${contact.name.first} ${contact.name.last}`)
-        .then(() => this.Contacts.remove(contact))
-        .then(() => this.canExit = true)
-        .then(() => this.$state.go("^.^", null, { reload: true }));
+      .then(() => this.Contacts.remove(contact))
+      .then(() => (this.canExit = true))
+      .then(() => this.$state.go('^.^', null, { reload: true }));
   }
 
   /** Save the contact, then go to the grandparent state ('contacts') */
   save(contact) {
     this.Contacts.save(contact)
-        .then(() => this.canExit = true)
-        .then(() => this.$state.go("^", null, { reload: true }));
+      .then(() => (this.canExit = true))
+      .then(() => this.$state.go('^', null, { reload: true }));
   }
 }
 EditContactController.$inject = ['$state', 'DialogService', 'Contacts'];
@@ -68,7 +68,7 @@ EditContactController.$inject = ['$state', 'DialogService', 'Contacts'];
  * Another button saves the contact.
  * A third button deletes the bcontact.
  */
-export const editContact =  {
+export const editContact = {
   bindings: { pristineContact: '<' },
 
   controller: EditContactController,
@@ -98,4 +98,5 @@ export const editContact =  {
         <button class="btn btn-primary" ng-click="$ctrl.remove($ctrl.contact)"><i class="fa fa-close"></i><span>Delete</span></button>
       </div>
     </div>
-`};
+`,
+};

app/global/appConfig.service.js

@@ -11,13 +11,13 @@ export class AppConfig {
 
   load() {
     try {
-      return angular.extend(this, angular.fromJson(sessionStorage.getItem("appConfig")))
-    } catch (Error) { }
+      return angular.extend(this, angular.fromJson(sessionStorage.getItem('appConfig')));
+    } catch (Error) {}
 
     return this;
   }
 
   save() {
-    sessionStorage.setItem("appConfig", angular.toJson(angular.extend({}, this)));
+    sessionStorage.setItem('appConfig', angular.toJson(angular.extend({}, this)));
   }
-}
+}

app/global/auth.service.js

@@ -28,18 +28,18 @@ export class AuthService {
     let { $timeout, $q, AppConfig } = this;
 
     // checks if the username is one of the known usernames, and the password is 'password'
-    const checkCredentials = () => $q((resolve, reject) => {
-      var validUsername = this.usernames.indexOf(username) !== -1;
-      var validPassword = password === 'password';
+    const checkCredentials = () =>
+      $q((resolve, reject) => {
+        var validUsername = this.usernames.indexOf(username) !== -1;
+        var validPassword = password === 'password';
 
-      return (validUsername && validPassword) ? resolve(username) : reject("Invalid username or password");
-    });
+        return validUsername && validPassword ? resolve(username) : reject('Invalid username or password');
+      });
 
-    return $timeout(checkCredentials, 800)
-        .then((authenticatedUser) => {
-          AppConfig.emailAddress = authenticatedUser;
-          AppConfig.save()
-        });
+    return $timeout(checkCredentials, 800).then((authenticatedUser) => {
+      AppConfig.emailAddress = authenticatedUser;
+      AppConfig.save();
+    });
   }
 
   /** Logs the current user out */

app/global/dataSources.service.js

@@ -1,4 +1,4 @@
-import {SessionStorage} from "../util/sessionStorage"
+import { SessionStorage } from '../util/sessionStorage';
 
 /**
  * Fake REST Services (Contacts, Folders, Messages) used in the mymessages submodule.
@@ -20,7 +20,7 @@ import {SessionStorage} from "../util/sessionStorage"
 export class Contacts extends SessionStorage {
   constructor($http, $timeout, $q, AppConfig) {
     // http://beta.json-generator.com/api/json/get/V1g6UwwGx
-    super($http, $timeout, $q, "contacts", "data/contacts.json", AppConfig);
+    super($http, $timeout, $q, 'contacts', 'data/contacts.json', AppConfig);
   }
 }
 Contacts.$inject = ['$http', '$timeout', '$q', 'AppConfig'];
@@ -42,7 +42,7 @@ export class Messages extends SessionStorage {
 
   byFolder(folder) {
     let searchObject = { folder: folder._id };
-    let toFromAttr = ["drafts", "sent"].indexOf(folder._id) !== -1 ? "from" : "to";
+    let toFromAttr = ['drafts', 'sent'].indexOf(folder._id) !== -1 ? 'from' : 'to';
     searchObject[toFromAttr] = this.AppConfig.emailAddress;
     return this.search(searchObject);
   }

app/global/dialog.directive.js

@@ -3,10 +3,13 @@ export function dialog($timeout, $q) {
   return {
     link: (scope, elem) => {
       $timeout(() => elem.addClass('active'));
-      elem.data('promise', $q((resolve, reject) => {
-        scope.yes = () => resolve(true);
-        scope.no = () => reject(false);
-      }));
+      elem.data(
+        'promise',
+        $q((resolve, reject) => {
+          scope.yes = () => resolve(true);
+          scope.no = () => reject(false);
+        }),
+      );
     },
     template: `
       <div class="backdrop"></div>
@@ -21,6 +24,6 @@ export function dialog($timeout, $q) {
           </div>
         </div>
       </div>
-`
-  }
-}
+`,
+  };
+}