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

Added cypress tests

Author: samuelOsborne

.github/workflows/release.yml

@@ -40,6 +40,9 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Build project and run tests
+        run: yarn run run-tests
+
       - name: Build project
         run: yarn build
 

babel.config.js

@@ -0,0 +1,12 @@
+// babel.config.js
+const { CODE_COVERAGE } = process.env;
+const plugins = [];
+
+if (CODE_COVERAGE === "true") plugins.push(['babel-plugin-istanbul', { extension: ['.js', '.vue'] }]);
+
+module.exports = {
+    presets: [
+      '@vue/app'
+    ],
+    plugins: plugins
+}

cypress.json

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

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/load_animation.spec.js

@@ -0,0 +1,56 @@
+/**
+ * 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('Loads an animation with empty URL and spinner displays.', function () {
+    cy.get("#player-two .lf-spinner")
+      .should("have.class", "lf-spinner");
+  });
+
+  it('Loads an animation with invalid url.', function () {
+    cy.get("#player-three lottie-player")
+      .shadow()
+      .find(".error")
+      .should("have.class", "error");
+  });
+
+  it("Looks inside shadow-dom div for animation-container class", () => {
+    cy.get("#player-one lottie-player")
+      .shadow()
+      .find("#animation-container")
+      .should("have.class", "main");
+  });
+
+  it("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("#player-one")
+      .find("#lottie-controls")
+    cy.get("#player-one")
+      .find("#lottie-pause-button")
+    cy.get("#player-one")
+      .find("#lottie-speed-button")
+    cy.get("#player-one")
+      .find("#lottie-seeker-input")
+    cy.get("#player-one")
+      .find("#lottie-toogle-loop-button")
+    cy.get("#player-one")
+      .find("#lottie-bg-picker-button")
+    cy.get("#player-four")
+      .find("#lottie-play-button")
+  });
+});

cypress/integration/player_controls.spec.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2022 Design Barn Inc.
+ */
+
+context("Player controls", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/controls");
+  });
+
+  it("clicks on play button and verifies animation is playing", function (done) {
+    cy.get("#player-one lottie-player").then(($el) => {
+      const playerOne = $el.get(0);
+
+      playerOne.addEventListener("play", () => {
+        expect(playerOne.currentState).to.eq("playing");
+        done();
+      }, { once: true });
+    });
+
+    cy.get("#player-one").find("#lottie-play-button").click();
+  });
+
+  it("clicks on pause button and verifies animation is paused", function (done) {
+    cy.get("#player-two lottie-player").then(($el) => {
+      const playerTwo = $el.get(0);
+
+      playerTwo.addEventListener("pause", () => {
+        expect(playerTwo.currentState).to.eq("paused");
+        done();
+      });
+    });
+    cy.get("#player-two").find("#lottie-pause-button").click();
+  });
+
+  it("clicks on stop button and verififes animation is stopped and at frame 0", function (done) {
+    cy.get("#player-three lottie-player").then(($el) => {
+      const playerThree = $el.get(0);
+
+      playerThree.addEventListener("stop", () => {
+        expect(playerThree.currentState).to.eq("stopped");
+        expect(playerThree.getLottie().currentFrame).to.eq(0);
+        done();
+      });
+    });
+
+    cy.get("#player-three").find("#lottie-stop-button").click();
+  });
+
+  it("clicks on loop button and verififes animation loops", function (done) {
+    cy.get("#player-four #lottie-controls").find("#lottie-toogle-loop-button").click();
+    cy.get("#player-four lottie-player").then(($el) => {
+      const playerFour = $el.get(0);
+
+      expect(playerFour.loop).to.eq(true);
+      done();
+    });
+  });
+
+  it("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,61 @@
+/**
+ * Copyright 2022 Design Barn Inc.
+ */
+
+context("Player state", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/methods");
+  });
+
+  it("Player-one should have play toggled.", function (done) {
+    cy.get("#player-one lottie-player").then(($el) => {
+      const playerOne = $el.get(0);
+
+      playerOne.addEventListener("play", () => {
+        expect(playerOne.currentState).to.eq("playing");
+        done();
+      });
+    });
+  });
+
+  it("Player-two should have loop toggled.", function (done) {
+    cy.get("#player-two lottie-player").then(($el) => {
+      const playerTwo = $el.get(0);
+
+      playerTwo.addEventListener("play", () => {
+        expect(playerTwo.currentState).to.eq("playing");
+        expect(playerTwo.loop).to.eq(true);
+        done();
+      });
+    });
+  });
+
+  it("Player-three should play at x5 the speed", function(done) {
+    cy.get("#player-three lottie-player").then(($el) => {
+      const playerThree = $el.get(0);
+
+      playerThree.addEventListener("play", () => {
+        expect(playerThree.getLottie().playSpeed).to.eq(5);
+        done();
+      }, { once: true })
+    });
+  });
+
+  it("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 and loop false.", function (done) {
+    cy.get("#player-five lottie-player").then(($el) => {
+      const playerFive = $el.get(0);
+
+      playerFive.addEventListener("pause", () => {
+        expect(playerFive.currentState).to.eq("paused");
+        expect(playerFive.loop).to.eq(false);
+        done();
+      });
+    });
+  });
+});

cypress/integration/player_properties.spec.js

@@ -0,0 +1,34 @@
+/**
+ * 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 lottie-player")
+      .should("have.css", "background-color")
+      .and("eq", "rgb(0, 255, 107)");
+  });
+
+  it("Player-two should play at x5 the speed", () => {
+    cy.get("#player-two lottie-player").then(($el) => {
+      const playerTwo = $el.get(0);
+
+      expect(playerTwo.speed).to.eq(5);
+    });
+  });
+
+  it("Player-three should autoplay and loop", function (done) {
+    cy.get("#player-three lottie-player").then(($el) => {
+      const playerThree = $el.get(0);
+
+      playerThree.addEventListener("play", () => {
+        expect(playerThree.loop).to.eq(true);
+        done();
+      });
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,26 @@
+/// <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) => {
+  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/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })