Skip to content

Commit 461c719

Browse files
samuelOsbornesamuelOsborne
committed
test: added cypress tests
test: fixed speed test test: testing release workflow test: added eslint ignore test: fixed linting test: testing release workflow test: fixing release workflow test: added wait-on to release workflow test: added wait for release workflow test: testing release workflow test: testing release workflow test: testing release workflow test: testing release workflow test: testing release workflow test: bumped node version test: restored workflow commands test: added yarn link to try and remove errors in release workflow test: changed player dep test: bumped version test: update lock file test: removed linking, test: added local import for react lib test: added local import for react lib test: added react player to ignore file test: added to prettierignore test: added craco test: testing test: testing test: testing style: added map copy test: put app to background test: reverted background serve test: removed wait, put react process to background test: added wait for react app to launch before starting tests test: added wait on react app test: added force click test: modified commands test: added a timeout
1 parent 28044d2 commit 461c719

40 files changed

+10350
-48
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@ dist/
88
# Testing
99
coverage/
1010
example/
11+
cypress/
12+
cypress/react-testing-pages/src/components/lottie-react.js

‎.github/workflows/release.yml‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,18 @@ name: Release
22

33
on:
44
push:
5-
branches: [master, beta]
5+
branches: [tests/cypress-tests]
66

77
jobs:
88
release:
99
name: Release
1010

1111
runs-on: ubuntu-latest
12+
timeout-minutes: 15
1213

1314
strategy:
1415
matrix:
15-
node-version: [12.x]
16+
node-version: [14.x]
1617

1718
steps:
1819
- name: Checkout
@@ -37,7 +38,28 @@ jobs:
3738
registry-url: 'https://npm.pkg.github.com'
3839

3940
- name: Install dependencies
40-
run: yarn install
41+
run:
42+
yarn install |
43+
cd ./cypress/react-testing-pages/ && yarn
44+
env:
45+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
46+
47+
# - name: Build project
48+
# continue-on-error: false
49+
# run: yarn run build-tests
50+
# env:
51+
# NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
52+
53+
# - name: Serve example app
54+
# continue-on-error: false
55+
# run: |
56+
# yarn run serve-app
57+
# env:
58+
# NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
59+
60+
- name: Run tests
61+
continue-on-error: false
62+
run: yarn run start-and-run-tests
4163
env:
4264
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
4365

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,4 @@ dist/
4747

4848
# Tests
4949
coverage/
50+
cypress/react-testing-pages/src/components/lottie-react.js

‎.npmignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@ tsconfig.json
2121
# Docs
2222
docs/
2323
examples/
24+
cypress/
25+
cypress/react-testing-pages/src/components/lottie-react.js

‎.prettierignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
node_modules/*
22
package.json
33
package-lock.json
4-
yarn.lock
4+
yarn.lock
5+
cypress/
6+
cypress/react-testing-pages/src/components/lottie-react.js

‎cypress.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"video": false,
3+
"screenshotOnRunFailure": false
4+
}

‎cypress/integration/load_animation.spec.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Copyright 2022 Design Barn Inc.
3+
*/
4+
5+
context("Player component DOM check", () => {
6+
beforeEach(() => {
7+
cy.visit("http://localhost:8080/load");
8+
});
9+
10+
it('Loads an animation on page.', () => {
11+
cy.get("#player-one").should("have.length", 1);
12+
});
13+
14+
it('Checks that loading with an empty URL displays an error.', function () {
15+
cy.get("#container-two .lf-error")
16+
.should("have.class", "lf-error");
17+
});
18+
19+
it('Loads an animation with invalid url.', function () {
20+
cy.get("#container-three .lf-error")
21+
.should("have.class", "lf-error");
22+
});
23+
24+
it("Looks for lf-player-container class", () => {
25+
cy.get("#container-one .lf-player-container")
26+
.should("have.class", "lf-player-container");
27+
});
28+
29+
it("Looks lf-player-controls class", () => {
30+
cy.get("#container-one .lf-player-controls")
31+
.should("have.class", "lf-player-controls");
32+
});
33+
34+
it.skip("Looks inside shadow-dom for aria-label", () => {
35+
cy.get("#player-one lottie-player")
36+
.shadow()
37+
.find("#animation-container")
38+
.should("have.attr", "aria-label");
39+
});
40+
41+
it("Verifies controls", () => {
42+
cy.get("#container-one")
43+
.find(".lf-player-controls")
44+
cy.get("#container-one")
45+
.find(".lf-player-btn").should('have.length', 3)
46+
});
47+
});

‎cypress/integration/player_controls.spec.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* Copyright 2022 Design Barn Inc.
3+
*/
4+
5+
import Lottie from "lottie-web";
6+
7+
context("Player controls", () => {
8+
beforeEach(() => {
9+
cy.visit("http://localhost:8080/controls");
10+
});
11+
12+
it("clicks on play button and verifies animation is playing", function (done) {
13+
cy.wait(2000);
14+
cy.get("#container-one .lf-player-btn").eq(0).click({force: true});
15+
16+
cy.window().then( (win) => {
17+
if (!win.lottie.getRegisteredAnimations()[0].isPaused)
18+
done();
19+
});
20+
});
21+
22+
it("clicks on pause button and verifies animation is paused", function (done) {
23+
cy.wait(2000);
24+
cy.get("#container-two .lf-player-btn").eq(0).click({force: true});
25+
26+
cy.window().then( (win) => {
27+
if (win.lottie.getRegisteredAnimations()[1].isPaused)
28+
done();
29+
});
30+
});
31+
32+
it("clicks on stop button and verififes animation is stopped and at frame 0", function (done) {
33+
cy.wait(2000);
34+
cy.get("#container-three .lf-player-btn").eq(1).click({force: true});
35+
36+
cy.window().then( (win) => {
37+
if (win.lottie.getRegisteredAnimations()[2].isPaused &&
38+
win.lottie.getRegisteredAnimations()[2].currentFrame === 0)
39+
done();
40+
});
41+
});
42+
43+
it("clicks on loop button and verififes animation loops", function (done) {
44+
cy.get("#container-four .lf-player-btn").eq(2).click();
45+
46+
cy.wait(3000);
47+
cy.window().then( (win) => {
48+
if (!win.lottie.getRegisteredAnimations()[3].loop || win.lottie.getRegisteredAnimations()[3].playCount > 1)
49+
done();
50+
});
51+
});
52+
53+
it.skip("clicks on color background choice and verifies background color", function () {
54+
cy.get("#player-five #lottie-controls").find("#lottie-bg-picker-button").click();
55+
cy.get("#player-five #lottie-controls").find("#lottie-color-choice-4").click();
56+
cy.get("#player-five lottie-player")
57+
.should("have.css", "background-color")
58+
.and("eq", "rgb(58, 146, 218)");
59+
});
60+
});

‎cypress/integration/player_methods.spec.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* Copyright 2022 Design Barn Inc.
3+
*/
4+
5+
context("Player methods", () => {
6+
beforeEach(() => {
7+
cy.visit("http://localhost:8080/methods");
8+
});
9+
10+
it("Player-one should have play toggled.", function (done) {
11+
cy.wait(1000);
12+
cy.window().then( (win) => {
13+
if (!win.lottie.getRegisteredAnimations()[0].isPaused)
14+
done();
15+
});
16+
});
17+
18+
it.skip("Player-two should have loop toggled.", function (done) {
19+
cy.wait(1000);
20+
cy.window().then( (win) => {
21+
if (!win.lottie.getRegisteredAnimations()[1].loop)
22+
done();
23+
});
24+
});
25+
26+
it("Player-three should play at x5 the speed", function(done) {
27+
cy.wait(1000);
28+
cy.window().then( (win) => {
29+
if (win.lottie.getRegisteredAnimations()[2].playSpeed === 5)
30+
done();
31+
});
32+
});
33+
34+
it.skip("Player-four Should have a green background.", () => {
35+
cy.get("#player-four lottie-player")
36+
.should("have.css", "background-color")
37+
.and("eq", "rgb(0, 255, 107)");
38+
});
39+
40+
it("Player-five should be paused.", function (done) {
41+
cy.wait(1000);
42+
cy.window().then( (win) => {
43+
if (win.lottie.getRegisteredAnimations()[4].isPaused)
44+
done();
45+
});
46+
});
47+
});

‎cypress/integration/player_properties.spec.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copyright 2022 Design Barn Inc.
3+
*/
4+
5+
context("Player properties", () => {
6+
beforeEach(() => {
7+
cy.visit("http://localhost:8080/properties");
8+
});
9+
10+
it("Player-one Should have a green background.", () => {
11+
cy.get("#player-one")
12+
.should("have.css", "background-color")
13+
.and("eq", "rgb(0, 255, 107)");
14+
});
15+
16+
it("Player-two should play at x5 the speed", () => {
17+
cy.wait(1000);
18+
cy.window().then( (win) => {
19+
if (!win.lottie.getRegisteredAnimations()[1].playSpeed === 5)
20+
done();
21+
});
22+
});
23+
24+
it("Player-three should autoplay and loop", function (done) {
25+
cy.wait(1000);
26+
cy.window().then( (win) => {
27+
if (!win.lottie.getRegisteredAnimations()[2].isPaused
28+
&& win.lottie.getRegisteredAnimations()[2].loop)
29+
done();
30+
});
31+
32+
});
33+
34+
it("Player-four should play on hover", function (done) {
35+
cy.get("#player-four").trigger('mouseenter');
36+
cy.wait(1000);
37+
cy.window().then( (win) => {
38+
if (!win.lottie.getRegisteredAnimations()[3].isPaused)
39+
done();
40+
});
41+
});
42+
});

0 commit comments

Comments
 (0)