Re-enabled visual regression testing (#838)

* re-enabled visual regression testing

* clean up syntax-test

cypress/integration/visual-testing/button-test.spec.js

@@ -1,6 +1,7 @@
-/* global cy,before,after */
+/* global cy, before, after */
 import { environment } from '../../util'
-describe.skip('Visual Regression Testing', () => {
+
+describe('Visual Regression Testing', () => {
   before(() => {
     cy.eyesOpen({
       appName: 'Carbon',
@@ -9,18 +10,20 @@ describe.skip('Visual Regression Testing', () => {
     })
     cy.visit('/')
   })
-  after(() => {
-    cy.eyesClose()
-  })
+
   beforeEach(() => {
     cy.reload()
   })
 
+  after(() => {
+    cy.eyesClose()
+  })
+
   it('test export button', () => {
     cy.get('[data-cy=export-button]').click()
     cy.eyesCheckWindow({
       tag: 'export button',
-      sizeMode: 'selector', //mode
+      target: 'region',
       selector: '.page'
     })
   })
@@ -29,7 +32,7 @@ describe.skip('Visual Regression Testing', () => {
     cy.get('[data-cy=display]').click()
     cy.eyesCheckWindow({
       tag: 'display button',
-      sizeMode: 'selector', //mode
+      target: 'region',
       selector: '.page'
     })
   })
@@ -41,7 +44,7 @@ describe.skip('Visual Regression Testing', () => {
     cy.wait(500)
     cy.eyesCheckWindow({
       tag: 'color button',
-      sizeMode: 'selector', //mode
+      target: 'region',
       selector: '.page'
     })
   })

cypress/integration/visual-testing/syntax-test.spec.js

@@ -1,6 +1,7 @@
-/* global cy,before,after */
+/* global cy, before, after */
 import { environment } from '../../util'
-describe.skip('Visual Regression Testing', () => {
+
+describe('Visual Regression Testing', () => {
   before(() => {
     cy.eyesOpen({
       appName: 'Carbon',
@@ -8,33 +9,25 @@ describe.skip('Visual Regression Testing', () => {
       browser: environment
     })
   })
+
   after(() => {
     cy.eyesClose()
   })
 
-  it('syntax test for JSON', () => {
-    cy.visit("/?code={name:'Andrew',age:30}&l=application%2Fjson")
-    cy.eyesCheckWindow({
-      tag: 'JSON',
-      sizeMode: 'selector', //mode
-      selector: '.page'
-    })
-  })
+  const cases = [
+    ['JSON', "/?code={name:'Andrew',age:30}&l=application%2Fjson"],
+    ['C#', '/?code=class Program { static void Main(){ do }}&l=text%2Fx-csharp'],
+    ['C++', '/?l=text%2Fx-c%2B%2Bsrc&code=for(size_t i=0 ;i<length; i%2B%2B){}']
+  ]
 
-  it('syntax test for C#', () => {
-    cy.visit('/?code=class Program { static void Main(){ do }}&l=text%2Fx-csharp')
-    cy.eyesCheckWindow({
-      tag: 'C#',
-      sizeMode: 'selector', //mode
-      selector: '.page'
-    })
-  })
-  it('syntax test for C++', () => {
-    cy.visit('/?l=text%2Fx-c%2B%2Bsrc&code=for(size_t i=0 ;i<length; i%2B%2B){}')
-    cy.eyesCheckWindow({
-      tag: 'C++',
-      sizeMode: 'selector', //mode
-      selector: '.page'
+  cases.forEach(([language, example]) => {
+    it(`Syntax test for "${language}"`, () => {
+      cy.visit(example)
+      cy.eyesCheckWindow({
+        tag: language,
+        target: 'region',
+        selector: '.page'
+      })
     })
   })
 })

cypress/integration/visual-testing/theme-test.spec.js

@@ -1,8 +1,8 @@
-/* global cy,before,after */
+/* global cy, before ,after */
 import { environment } from '../../util'
+import { THEMES } from '../../../lib/constants'
 
-// TODO: remove .skip - Applitools is not working right now
-describe.skip('Visual Regression Testing', () => {
+describe('Visual Regression Testing', () => {
   before(() => {
     cy.eyesOpen({
       appName: 'Carbon',
@@ -11,20 +11,19 @@ describe.skip('Visual Regression Testing', () => {
     })
     cy.visit('/')
   })
+
   after(() => {
     cy.eyesClose()
   })
 
-  it('themes test', () => {
-    for (let childIndex = 1; childIndex < 28; childIndex++) {
+  THEMES.forEach(t => {
+    it(`Test theme: "${t.name}"`, () => {
       cy.get('[data-cy="themes-container"] [data-cy="theme-selector-button"]').click()
-      cy.get(
-        `[data-cy="themes-container"] [data-cy="dropdown-item"]:nth-child(${childIndex + 1})`
-      ).click({ force: true })
+      cy.contains(t.name).click({ force: true })
       cy.eyesCheckWindow({
-        sizeMode: 'selector', //mode
+        target: 'region',
         selector: '.page'
       })
-    }
+    })
   })
 })