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

Tests/cypress tests

.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();
+    });
+  });
+});

cypress/integration/player_properties.spec.js

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

cypress/plugins/index.js

@@ -0,0 +1,28 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+  require('@cypress/code-coverage/task')(on, config)
+  // include any other plugin code...
+
+  // It's IMPORTANT to return the config object
+  // with any changed environment variables
+  return config
+}

cypress/react-testing-pages/.eslintignore

@@ -0,0 +1 @@
+./src/components/lottie-react.js

cypress/react-testing-pages/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*