Merge pull request #42328 from aaryanporwal/visual-tests

mgr/dashboard: Visual regression tests for ceph dashboard

Reviewed-by: Waad Alkhoury <walkhour@redhat.com>
Reviewed-by: aaryanporwal <NOT@FOUND>
Reviewed-by: Alfonso Martínez <almartin@redhat.com>
Reviewed-by: Avan Thakkar <athakkar@redhat.com>
Reviewed-by: Ernesto Puerta <epuertat@redhat.com>
Reviewed-by: Nizamudeen A <nia@redhat.com>
Reviewed-by: Pere Diaz Bou <pdiazbou@redhat.com>

src/pybind/mgr/dashboard/frontend/applitools.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  appName: 'Ceph Dashboard',
+  apiKey: process.env.APPLITOOLS_API_KEY,
+  browser: [
+    { width: 1920, height: 1080, name: 'chrome' },
+    { width: 1920, height: 1080, name: 'firefox' },
+    { width: 800, height: 600, name: 'chrome' },
+    { width: 800, height: 600, name: 'firefox' }
+  ],
+  showLogs: true,
+  saveDebugData: true,
+  failCypressOnDiff: true,
+  concurrency: 4
+};

src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/dashboard.vrt-spec.ts

@@ -0,0 +1,22 @@
+import { LoginPageHelper } from '../ui/login.po';
+
+describe('Dashboard Landing Page', () => {
+  const login = new LoginPageHelper();
+
+  beforeEach(() => {
+    cy.eyesOpen({
+      testName: 'Dashboard Component'
+    });
+  });
+
+  afterEach(() => {
+    cy.eyesClose();
+  });
+
+  it('should take screenshot of dashboard landing page', () => {
+    login.navigateTo();
+    login.doLogin();
+    cy.get('.chart-container').should('be.visible');
+    cy.eyesCheckWindow({ tag: 'Dashboard landing page', ignore: { selector: '.chart-container' } });
+  });
+});

src/pybind/mgr/dashboard/frontend/cypress/integration/visualTests/login.vrt-spec.ts

@@ -0,0 +1,19 @@
+describe('Login Page', () => {
+  beforeEach(() => {
+    cy.visit('#/login');
+    cy.eyesOpen({
+      appName: 'Ceph',
+      testName: 'Login Component Check'
+    });
+  });
+
+  afterEach(() => {
+    cy.eyesClose();
+  });
+
+  it('types login credentials and takes screenshot', () => {
+    cy.get('[name=username]').type('admin');
+    cy.get('#password').type('admin');
+    cy.eyesCheckWindow({ tag: 'Login Screen with credentials typed' });
+  });
+});

src/pybind/mgr/dashboard/frontend/cypress/plugins/index.js

@@ -6,3 +6,5 @@ module.exports = (on, _config) => {
     }
   });
 };
+
+require('@applitools/eyes-cypress')(module);

src/pybind/mgr/dashboard/frontend/cypress/support/eyes-index.d.ts

@@ -0,0 +1 @@
+import '@applitools/eyes-cypress';

src/pybind/mgr/dashboard/frontend/cypress/support/index.ts

@@ -1,3 +1,5 @@
+import '@applitools/eyes-cypress/commands';
+
 import './commands';
 
 afterEach(() => {

src/pybind/mgr/dashboard/frontend/cypress/tsconfig.json

@@ -8,7 +8,8 @@
   "compilerOptions": {
     "sourceMap": false,
     "types": [
-      "cypress"
+      "cypress",
+      "@applitools/eyes-cypress"
     ],
     "target": "es6"
   }

src/pybind/mgr/dashboard/frontend/package.json

@@ -112,6 +112,7 @@
     "@angular/cli": "10.1.6",
     "@angular/compiler-cli": "10.1.5",
     "@angular/language-service": "10.1.5",
+    "@applitools/eyes-cypress": "^3.22.0",
     "@compodoc/compodoc": "1.1.11",
     "@types/jest": "26.0.14",
     "@types/lodash": "4.14.161",