feat(event-listener-fixes): fix an issue where "click.delegate" event…

…s don't fire because the listener is on the test spec iframe and not the app iframe (#7)

* feat(event-listener-fixes): fix an issue where "click.delegate" events don't fire because the listener is on the test spec iframe and not the app iframe

- add my-button component to test click.delegate
- update cypress.json to not process videos if the tests pass (ie. they'll run a lot faster) and add fixed resolution (720p)
- update @cypress/webpack-preprocesser so it won't hang in continuous integration anymore
- update css-modules-typescript-loader to avoid infinite loop reloading when using "cypress open" mode and modifying styles
- remove google-closure-compiler dependency as it's unused

* fix(my-button): add missing semicolon

cypress.json

@@ -1,3 +1,5 @@
 {
-  "watchForFileChanges": true
+  "viewportWidth": 1280,
+  "viewportHeight": 720,
+  "videoUploadOnPasses": false
 }

cypress/integration/unit/aurelia-dialog.test.ts

@@ -25,10 +25,12 @@ describe('AureliaDialog', () => {
           .plugin(PLATFORM.moduleName('aurelia-dialog'));
       });
     component.create(bootstrap);
-    // NOTE(Jake): 2019-01-09
-    // I had to wrap this expect() in cy command or else I had timing problems.
+    // NOTE(Jake): 2019-01-30
+    // We check the text inside the component to allow some time to elapse.
+    // I had to wrap this expect() in cy command or else I had more timing problems.
     // Not sure what the most idiomatic way to test this behaviour is.
-    cy.window().then((win) => {
+    cy.get('box-component').contains('Aurelia Dialog');
+    cy.then(() => {
       expect(_.Patches().aureliaDialogDisabled).to.be.equal(true);
     });
   });

cypress/integration/unit/my-button.test.ts

@@ -0,0 +1,22 @@
+import { PLATFORM } from 'aurelia-framework';
+import { bootstrap } from 'aurelia-bootstrapper';
+import { StageComponent } from 'cypress-aurelia-unit-test';
+
+import { MyButton } from '~/my-button/my-button';
+
+describe('Button', () => {
+  it('Test click.delegate() has event listeners have been applied to app iframe from the spec iframe by "event-listener-fixes" in lib.', () => {
+    const component = StageComponent
+      .withResources<MyButton>(PLATFORM.moduleName('my-button/my-button'))
+      .inView(`
+        <my-button
+          value.bind="value"
+        ></my-button>`)
+      .boundTo({
+        value: 'Delegate click test'
+      });
+    component.create(bootstrap);
+    cy.get('button').click();
+    cy.get('p').contains('Button clicked!');
+  });
+});

lib/event-listener-fixes.ts

@@ -0,0 +1,39 @@
+/**
+ * copyEventHandlesFromSpecToAppIFrame will fix an issue where certain events aren't on
+ * the app iframe context. Without this code, certain features like "click.delegate" won't
+ * work in Aurelia templates.
+ */
+function copyEventHandlesFromSpecIFrameToAppIFrame(): void {
+  const specIframe = window.parent.document.querySelector('iframe.spec-iframe');
+  if (!specIframe) {
+    throw new Error('Cannot find .spec-iframe');
+  }
+  const specDocument: Document = (specIframe as any).contentDocument;
+  if (!specDocument) {
+    throw new Error('Cannot find contentDocument on specIframe');
+  }
+
+  const rootDocument = window.parent.document;
+  const appIframe = rootDocument.querySelector('iframe.aut-iframe');
+  if (!appIframe) {
+    throw new Error('Cannot find .aut-iframe');
+  }
+  const appDocument: Document = (appIframe as any).contentDocument;
+  if (!appDocument) {
+    throw new Error('Cannot find contentDocument on appIframe');
+  }
+
+  // Override addEventListener on spec iframe so that we can attach those
+  // same events to the app iframe, this fixes:
+  // - aurelia-binding - click.delegate won't work in templates without this.
+  const originalEventListener = specDocument.addEventListener;
+  const addEventListener = function(this: any): void {
+    originalEventListener.apply(this, arguments as any);
+    appDocument.addEventListener.apply(appDocument, arguments as any);
+  };
+  if (specDocument.addEventListener !== addEventListener) {
+    specDocument.addEventListener = addEventListener;
+  }
+}
+
+before(copyEventHandlesFromSpecIFrameToAppIFrame);

lib/index.ts

@@ -1 +1,2 @@
+import './event-listener-fixes';
 export * from './component-tester';