Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tests(common): add snapshot tests with cypress and applitools #1072

Merged
merged 6 commits into from Mar 18, 2019
Merged
Diff settings

Always

Just for now

Copy path View file
@@ -6,6 +6,7 @@
/out-tsc
# Only exists if Bazel was run
/bazel-out
/cypress/screenshots/*

# dependencies
node_modules
Copy path View file
@@ -15,10 +15,17 @@ addons:
cache:
directories:
- ./node_modules
- ~/.cache
- ~/.npm

install:
- npm install
- npm ci

script:
- npm run build:lib
- npm run test -- --watch=false --no-progress --browsers=ChromeHeadless
- ng serve &
- $(npm bin)/wait-on http-get://localhost:4200/#
- npm run test:main
- npm run test:screenshot
- kill $(jobs -p) || true
Copy path View file
@@ -0,0 +1,7 @@
{
"baseUrl": "http://localhost:4200/",
"video": false,
"eyesTimeout": 1200000,
"viewportWidth": 1366,
"viewportHeight": 768
}
Copy path View file
@@ -0,0 +1,3 @@
{
"componentsUrls": ["#LineChart", "#BarChart", "#DoughnutChart", "#RadarChart", "#PieChart", "#PolarAreaChart", "#BubbleChart", "#ScatterChart", "#DynamicChart"]
}
@@ -0,0 +1,63 @@
const browsers = [{
name: 'chrome',
browserVersion: 'latest',
width: 1366,
height: 768
}];

describe('Main Page', () => {
it(`navigate to main Demo page and check info`, () => {
const topBarSelector = 'mat-toolbar';
const mainContentSelector = 'main';
cy.visit('');

cy.get(topBarSelector).should('be.visible')
.eyesOpen({
appName: 'NG2-charts',
testName: `NG2-charts Main Page Top Bar`,
browser: browsers
})
.eyesCheckWindow({
sizeMode: 'selector',
selector: topBarSelector,
sendDom: false,
})
.eyesClose();

cy.get(mainContentSelector).should('be.visible')
.eyesOpen({
appName: 'NG2-charts',
testName: `NG2-charts Main Page Content`,
browser: browsers
})
.eyesCheckWindow({
sizeMode: 'selector',
selector: mainContentSelector,
sendDom: false,
/*ignore: [
{selector: '#gh-count'}]*/
})
.eyesClose();
});
});

describe('Charts', () => {
const componentsArray = [
{url: '/#LineChart', selector: 'app-line-chart'},
{url: '/#BarChart', selector: 'app-bar-chart'},
{url: '/#DoughnutChart', selector: 'app-doughnut-chart'},
{url: '/#RadarChart', selector: 'app-radar-chart'},
{url: '/#PieChart', selector: 'app-pie-chart'},
{url: '/#PolarAreaChart', selector: 'app-polar-area-chart'},
{url: '/#BubbleChart', selector: 'app-bubble-chart'},
{url: '/#ScatterChart', selector: 'app-scatter-chart'},
{url: '/#DynamicChart', selector: 'app-dynamic-chart'}
];

componentsArray.forEach(component => {
it(`${component.url}`, () => {
cy.visit(component.url);
cy.get(component.selector).find('canvas').wait(200).screenshot();
});
});
});
@@ -0,0 +1,32 @@
var Eyes = require('eyes.images').Eyes;
const fs = require('fs');
const urls = require('../fixtures/example').componentsUrls;

var eyes = new Eyes();

eyes.setApiKey('Nls100t102uNgLhLpblVUdA3tP104MQQS9VUYgHQ5tYOUuIxU110');

eyes.setHostingApp("Chrome");

eyes.setHostOS('MacOS latest');


async function forEachAsync(array, callback) {
let i = 0;
for (; i < array.length; i++) {
await callback(array[i], i, array);
}
}

const testResults = eyes.open("NG2-charts", "Charts comparison", {width: 1366, height: 768}).then(async function () {
return forEachAsync(urls, async (url) => {
const image = fs.readFileSync(`./cypress/screenshots/main-test.js/Charts -- ${url}.png`);
await eyes.checkImage(image, url);
});
}).then(function () {
return eyes.close();
});

testResults.then(function (results) {
console.log("Results: ", results);
});
Copy path View file
@@ -0,0 +1,3 @@
module.exports = (on, config) => {
};
require('@applitools/eyes.cypress')(module);
Copy path View file
@@ -0,0 +1,20 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import '@applitools/eyes.cypress/commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')
Copy path View file

This file was deleted.

Oops, something went wrong.
Copy path View file

This file was deleted.

Oops, something went wrong.
Copy path View file

This file was deleted.

Oops, something went wrong.
Copy path View file

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.