Merge pull request #79 from LottieFiles/tests/cypress-tests

Tests/cypress tests

Author: samuelOsborne

.eslintignore

@@ -8,3 +8,5 @@ dist/
 # Testing
 coverage/
 example/
+cypress/
+cypress/react-testing-pages/src/components/lottie-react.js

.github/workflows/release.yml

@@ -9,10 +9,11 @@ jobs:
     name: Release
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
       - name: Checkout
@@ -37,7 +38,15 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
 
       - name: Install dependencies
-        run: yarn install
+        run: 
+            yarn install |
+            cd ./cypress/react-testing-pages/ && yarn
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Run tests
+        continue-on-error: false
+        run: yarn run start-and-run-tests
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 

.gitignore

@@ -47,3 +47,5 @@ dist/
 
 # Tests
 coverage/
+cypress/react-testing-pages/src/components/lottie-react.js
+.nyc_output

.npmignore

@@ -21,3 +21,5 @@ tsconfig.json
 # Docs
 docs/
 examples/
+cypress/
+cypress/react-testing-pages/src/components/lottie-react.js

.prettierignore

@@ -1,4 +1,6 @@
 node_modules/*
 package.json
 package-lock.json
-yarn.lock
+yarn.lock
+cypress/
+cypress/react-testing-pages/src/components/lottie-react.js

babel.config.js

@@ -0,0 +1,25 @@
+const { CODE_COVERAGE } = process.env;
+const plugins = [];
+if (CODE_COVERAGE === 'true') plugins.push('istanbul');
+
+module.exports = function(api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            edge: '17',
+            firefox: '60',
+            chrome: '67',
+            safari: '11.1',
+          },
+        },
+      ],
+    ],
+    plugins,
+  };
+};

cypress.json

@@ -0,0 +1,4 @@
+{
+    "video": false,
+    "screenshotOnRunFailure": false
+}

cypress/integration/load_animation.spec.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2022 Design Barn Inc.
+ */
+
+context("Player component DOM check", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/load");
+  });
+
+  it('Loads an animation on page.', () => {
+    cy.get("#player-one").should("have.length", 1);
+  });
+
+  it('Checks that loading with an empty URL displays an error.', function () {
+    cy.get("#container-two .lf-error")
+      .should("have.class", "lf-error");
+  });
+
+  it('Loads an animation with invalid url.', function () {
+    cy.get("#container-three .lf-error")
+      .should("have.class", "lf-error");
+  });
+
+  it("Looks for lf-player-container class", () => {
+    cy.get("#container-one .lf-player-container")
+      .should("have.class", "lf-player-container");
+  });
+
+  it("Looks lf-player-controls class", () => {
+    cy.get("#container-one .lf-player-controls")
+      .should("have.class", "lf-player-controls");
+  });
+
+  it.skip("Looks inside shadow-dom for aria-label", () => {
+    cy.get("#player-one lottie-player")
+      .shadow()
+      .find("#animation-container")
+      .should("have.attr", "aria-label");
+  });
+
+  it("Verifies controls", () => {
+    cy.get("#container-one")
+      .find(".lf-player-controls")
+      cy.get("#container-one")
+      .find(".lf-player-btn").should('have.length', 3)
+  });
+});

cypress/integration/player_controls.spec.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2022 Design Barn Inc.
+ */
+
+import Lottie from "lottie-web";
+
+context("Player controls", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/controls");
+  });
+
+  it("clicks on play button and verifies animation is playing", function (done) {
+    cy.wait(2000);
+    cy.get("#container-one .lf-player-btn").eq(0).click({force: true});
+
+    cy.window().then( (win) => {
+      if (!win.lottie.getRegisteredAnimations()[0].isPaused)
+        done();
+    });
+  });
+
+  it("clicks on pause button and verifies animation is paused", function (done) {
+    cy.wait(2000);
+    cy.get("#container-two .lf-player-btn").eq(0).click({force: true});
+
+    cy.window().then( (win) => {
+      if (win.lottie.getRegisteredAnimations()[1].isPaused)
+        done();
+    });
+  });
+
+  it("clicks on stop button and verififes animation is stopped and at frame 0", function (done) {
+    cy.wait(2000);
+    cy.get("#container-three .lf-player-btn").eq(1).click({force: true});
+
+    cy.window().then( (win) => {
+      if (win.lottie.getRegisteredAnimations()[2].isPaused &&
+       win.lottie.getRegisteredAnimations()[2].currentFrame === 0)
+        done();
+    });
+  });
+
+  it("clicks on loop button and verififes animation loops", function (done) {
+    cy.get("#container-four .lf-player-btn").eq(2).click();
+
+    cy.wait(3000);
+    cy.window().then( (win) => {
+      if (!win.lottie.getRegisteredAnimations()[3].loop || win.lottie.getRegisteredAnimations()[3].playCount > 1)
+        done();
+    });
+  });
+
+  it.skip("clicks on color background choice and verifies background color", function () {
+    cy.get("#player-five #lottie-controls").find("#lottie-bg-picker-button").click();
+    cy.get("#player-five #lottie-controls").find("#lottie-color-choice-4").click();
+    cy.get("#player-five lottie-player")
+      .should("have.css", "background-color")
+      .and("eq", "rgb(58, 146, 218)");
+  });
+});

cypress/integration/player_methods.spec.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2022 Design Barn Inc.
+ */
+
+context("Player methods", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/methods");
+  });
+
+  it("Player-one should have play toggled.", function (done) {
+    cy.wait(1000);
+    cy.window().then( (win) => {
+      if (!win.lottie.getRegisteredAnimations()[0].isPaused)
+        done();
+    });
+  });
+
+  it.skip("Player-two should have loop toggled.", function (done) {
+    cy.wait(1000);
+    cy.window().then( (win) => {
+      if (!win.lottie.getRegisteredAnimations()[1].loop)
+        done();
+    });
+  });
+
+  it("Player-three should play at x5 the speed", function(done) {
+    cy.wait(1000);
+    cy.window().then( (win) => {
+      if (win.lottie.getRegisteredAnimations()[2].playSpeed === 5)
+        done();
+    });
+  });
+
+  it.skip("Player-four Should have a green background.", () => {
+    cy.get("#player-four lottie-player")
+      .should("have.css", "background-color")
+      .and("eq", "rgb(0, 255, 107)");
+  });
+
+  it("Player-five should be paused.", function (done) {
+    cy.wait(1000);
+    cy.window().then( (win) => {
+      if (win.lottie.getRegisteredAnimations()[4].isPaused)
+        done();
+    });
+  });
+});