Merge pull request #101 from tunapanda/fix/flanky_tests

build: fix flaky cypress tests

.gitignore

@@ -1,4 +1,22 @@
 node_modules
 .DS_Store
 cypress/videos
-dist
+dist
+.idea
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*

cypress/integration/advance-options.spec.js

@@ -1,43 +1,35 @@
-describe('single', () => {
-    it('should display h5p', () => {
-
-        cy.visit('test/advance-options.html');
-
-        cy.get('.h5p-iframe').should(iframe => {
-            expect(iframe.contents().find('.h5p-content')).to.exist;
-
-            iframe.contents().find('.h5p-true-false-answer').click();
-
-            iframe.contents().find('.h5p-question-check-answer').click();
-
-            expect(iframe.contents().find('.h5p-joubelui-score-bar-star')).to.exist;
-
-            expect(iframe.contents().find('.h5p-actions').find('.h5p-export')).to.exist;
-
-            iframe.contents()
-                .find('.h5p-actions')
-                .find('.h5p-export')
-                .click();
-
-            expect(iframe.contents().find('.h5p-download-button')).to.exist;
-        });
+describe("H5P player with advance options", () => {
+  beforeEach(() => {
+    cy.visit("test/advance-options.html");
+  });
+
+  it("should display h5p", () => {
+    cy.iframe("iframe.h5p-iframe.h5p-initialized")
+      .should("be.visible")
+      .within(() => {
+        cy.get(".h5p-true-false-answers .h5p-true-false-answer")
+          .contains("False")
+          .click();
+
+        cy.get(".h5p-question-check-answer").click();
+        cy.get(".h5p-joubelui-score-bar-star").should("be.visible");
+      });
+  });
+
+  it("should display export dialog", () => {
+    cy.iframe("iframe.h5p-iframe.h5p-initialized").within(() => {
+      cy.get(".h5p-actions").find(".h5p-export").should("be.visible").click();
+
+      cy.get(".h5p-download-button").should("be.visible");
     });
+  });
 
-    it('should display embed code dialog', () => {
-
-        cy.visit('test/advance-options.html');
-        cy.get('.h5p-iframe').should((iframe) => {
-
-            expect(iframe.contents().find('.h5p-actions').find('.h5p-embed')).to.exist;
-
-            iframe.contents()
-                .find('.h5p-actions')
-                .find('.h5p-embed')
-                .click();
-
-            expect(iframe.contents().find('.h5p-embed-code-container')).to.exist;
-            expect(iframe.contents().find('.h5p-embed-size')).to.exist;
-        })
+  it("should display embed code dialog", () => {
+    cy.iframe("iframe.h5p-iframe.h5p-initialized").within(() => {
+      cy.get(".h5p-actions").find(".h5p-embed").should("be.visible").click();
 
+      cy.get(".h5p-embed-code-container").should("be.visible");
+      cy.get(".h5p-embed-size").should("be.visible");
     });
-});
+  });
+});

cypress/integration/external_libraries.spec.js

@@ -1,16 +1,19 @@
-describe('external libraries', () => {
-  it('should display h5p', () => {
-
-    cy.visit('test/external_libraries.html');
-
-    cy.get('.h5p-iframe').should(iframe => {
-      expect(iframe.contents().find('.h5p-content')).to.exist;
+describe("H5P player loading external libraries", () => {
+  beforeEach(() => {
+    cy.visit("test/external_libraries.html");
+  });
 
-      iframe.contents().find('.h5p-true-false-answer').click();
+  it("should display h5p", () => {
+    cy.iframe("iframe.h5p-iframe.h5p-initialized")
+      .should("be.visible")
+      .within(() => {
+        cy.get(".h5p-true-false-answers .h5p-true-false-answer")
+          .contains("False")
+          .click();
 
-      iframe.contents().find('.h5p-question-check-answer').click();
+        cy.get(".h5p-question-check-answer").click();
 
-      expect(iframe.contents().find('.h5p-joubelui-score-bar-star')).to.exist;
-    });
+        cy.get(".h5p-joubelui-score-bar-star").should("be.visible");
+      });
   });
-});
+});

cypress/integration/multiple.spec.js

@@ -1,14 +1,30 @@
-describe('multiple', () => {
-  it('should display 2 h5ps', () => {
+describe("Multiple H5P players", () => {
+  beforeEach(() => {
+    cy.visit("test/multiple.html");
+  });
+
+  it("should display & load multiple h5p players", () => {
+    cy.iframe("#h5p-container-1 iframe.h5p-iframe.h5p-initialized")
+      .should("be.visible")
+      .within(() => {
+        cy.get(".h5p-true-false-answers .h5p-true-false-answer")
+          .contains("False")
+          .click();
+
+        cy.get(".h5p-question-check-answer").click();
 
-    cy.visit('test/multiple.html');
+        cy.get(".h5p-joubelui-score-bar-star").should("be.visible");
+      });
+    cy.iframe("#h5p-container-2  iframe.h5p-iframe.h5p-initialized")
+      .should("be.visible")
+      .within(() => {
+        cy.get(".h5p-true-false-answers .h5p-true-false-answer")
+          .contains("False")
+          .click();
 
-    cy.get('#h5p-container-1 .h5p-iframe').should(iframe => {
-      expect(iframe.contents().find('.h5p-content')).to.exist;
-    });
+        cy.get(".h5p-question-check-answer").click();
 
-    cy.get('#h5p-container-2 .h5p-iframe').should(iframe => {
-      expect(iframe.contents().find('.h5p-content')).to.exist;
-    });
+        cy.get(".h5p-joubelui-score-bar-star").should("be.visible");
+      });
   });
-});
+});

cypress/integration/single.spec.js

@@ -1,16 +1,19 @@
-describe('single', () => {
-  it('should display h5p', () => {
-
-    cy.visit('test/single.html');
-
-    cy.get('.h5p-iframe').should(iframe => {
-      expect(iframe.contents().find('.h5p-content')).to.exist;
+describe("Single H5P player", () => {
+  beforeEach(() => {
+    cy.visit("test/single.html");
+  });
 
-      iframe.contents().find('.h5p-true-false-answer').click();
+  it("should display h5p", () => {
+    cy.iframe("iframe.h5p-iframe.h5p-initialized")
+      .should("be.visible")
+      .within(() => {
+        cy.get(".h5p-true-false-answers .h5p-true-false-answer")
+          .contains("False")
+          .click();
 
-      iframe.contents().find('.h5p-question-check-answer').click();
+        cy.get(".h5p-question-check-answer").click();
 
-      expect(iframe.contents().find('.h5p-joubelui-score-bar-star')).to.exist;
-    });
+        cy.get(".h5p-joubelui-score-bar-star").should("be.visible");
+      });
   });
-});
+});

cypress/plugins/index.js

@@ -26,10 +26,10 @@ module.exports = (on, config) => {
 
     on('task', {
         'unzip:h5p': async () => {
-            await fs.createReadStream(`${workspace}${h5pFile}`)
+            return await fs.createReadStream(`${workspace}${h5pFile}`)
                 .pipe(unzipper.Extract({path: `${workspace}${extractFolder}`}))
-                .promise();
-            return true;
+                .promise()
+                .then(() => true);
         },
         'copy:libraries': () => {
             const H5PLibraries = ['Drop-1.0', 'FontAwesome-4.5', 'H5P.FontIcons-1.0', 'H5P.JoubelUI-1.3',

cypress/support/commands.js

@@ -23,3 +23,7 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("iframe", (selector) => {
+  return cy.get(selector).its("0.contentDocument.body").then(cy.wrap);
+});