Introducing Applitools (#762)

* Applitools (#1)

* Adding applitools

* adding data attributes for testing

* add applitools key

.travis.yml

@@ -4,16 +4,18 @@ node_js:
 addons:
   apt:
     packages:
-      # Ubuntu 16+ does not install this dependency by default, so we need to install it ourselves
       - libgconf-2-4
 cache:
   yarn: true
   directories:
     - node_modules
-    - ~/.cache
+    - '~/.cache'
 install:
   - yarn
 script:
   - yarn lint
   - yarn build
   - yarn start & wait-on http://localhost:3000 && CYPRESS_CI=true yarn cy:run --config baseUrl=http://localhost:3000
+env:
+  global:
+    secure: vDOtuvz5TE9CWh5Sotj936YaFQtIF2u8ZKKqokWqozO1RSbZ+FOwE1t31a5MxsKIsH1BSzGDEIkOJ32qFn+M8MWu848sqNzxsfC4gAx+66dE/or0DCv+42gncpqzXSDe8FziOPcW5SutVZhK/4X5T7WIeo7DTld5UuWyWkMztnCPL9WzYfM+jDHpi+F/CyPSqpGGWsXpq57i8IOvSzPosKlk/8pKnm7T5vWlqb4NTvR/nfZuPqfH1fQJbhuZLyXiEpXEGHz3zuSmoKgx7/HZKpaRsRssSrpYTeE63Bw/o+CSV+a81xFXTptu+sa4S1hcHKs3uxwudS/ym4p0cheTkBHzB/Rqljw9Wf2Qq+KL9Z3i+bA0lS+iMZTAABRZ8TGptdlfSRZcjsPEbznRGOPFdyUag+q/xOiAY1+ch/cztI8VR1RGpx3LeUWtn6szkfVEpJeT/sqeTgpp9SvND+O8gUCBnAsndNghedAVl7GHUTkSVlIUPHLD9Esl/V7C/9ItZ9fkQU0msIqx/kxICzwk+QW6q4hLZje9KCt9JqGC09+4GyIbei+jWDwNEbus19OW+D90m4vAub0H7FTQCgH7ZbKysl2yYantAjCxr0m19StGuUbyMIaJaub9ClkHLdk4dxdetY6S0Wlsv8Yw1CVV20NASwYSt0N0x8uPCI0MvsQ=

components/BackgroundSelect.js

@@ -41,6 +41,7 @@ class BackgroundSelect extends React.PureComponent {
           onClick={toggleVisibility}
           background="white"
           hoverBackground="white"
+          data-cy="display"
         >
           <div className="bg-color-alpha" />
           <div className="bg-color" />

components/Button.js

@@ -5,6 +5,7 @@ import { COLORS } from '../lib/constants'
 
 const Button = ({
   id,
+  'data-cy': cypressElementId,
   onClick = () => {},
   className = '',
   background = COLORS.BLACK,
@@ -23,7 +24,14 @@ const Button = ({
   margin = 0,
   title
 }) => (
-  <button id={id} onClick={onClick} className={className} disabled={disabled} style={style}>
+  <button
+    id={id}
+    onClick={onClick}
+    className={className}
+    disabled={disabled}
+    style={style}
+    data-cy={cypressElementId}
+  >
     {title && <VisuallyHidden>{title}</VisuallyHidden>}
     {children}
     <style jsx>

components/Dropdown.js

@@ -218,6 +218,7 @@ const SelectedItem = ({
     <span
       {...getToggleButtonProps({ tabIndex: 0 })}
       className={`dropdown-display ${isOpen ? 'is-open' : ''}`}
+      data-cy="theme-selector-button"
     >
       <input
         {...getInputProps({ placeholder: children, id: `downshift-input-${children}`, disabled })}
@@ -293,7 +294,7 @@ const ListItem = ({ children, color, isHighlighted, isSelected, itemWrapper, ite
   const itemColor = color || COLORS.SECONDARY
 
   return (
-    <li {...rest} className="dropdown-list-item">
+    <li {...rest} className="dropdown-list-item" data-cy="dropdown-item">
       {itemWrapper ? (
         itemWrapper({ children, color: itemColor, item, isSelected })
       ) : (

components/ExportMenu.js

@@ -70,6 +70,7 @@ class ExportMenu extends React.PureComponent {
             padding="0 16px"
             selected={isVisible}
             onClick={toggleVisibility}
+            data-cy="export-button"
           >
             Export
           </Button>

components/Themes/index.js

@@ -101,7 +101,7 @@ class Themes extends React.PureComponent {
     ]
 
     return (
-      <div className="themes">
+      <div className="themes" data-cy="themes-container">
         <Dropdown
           title="Theme"
           innerRef={this.dropdown}

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

@@ -0,0 +1,48 @@
+/* global cy,before,after */
+import { environment } from '../../util'
+describe('Visual Regression Testing', () => {
+  before(() => {
+    cy.eyesOpen({
+      appName: 'Carbon',
+      testName: 'Button',
+      browser: environment
+    })
+    cy.visit('/')
+  })
+  after(() => {
+    cy.eyesClose()
+  })
+  beforeEach(() => {
+    cy.reload()
+  })
+
+  it('test export button', () => {
+    cy.get('[data-cy=export-button]').click()
+    cy.eyesCheckWindow({
+      tag: 'export button',
+      sizeMode: 'selector', //mode
+      selector: '.page'
+    })
+  })
+
+  it('test display button', () => {
+    cy.get('[data-cy=display]').click()
+    cy.eyesCheckWindow({
+      tag: 'display button',
+      sizeMode: 'selector', //mode
+      selector: '.page'
+    })
+  })
+
+  it('test color button', () => {
+    cy.get('[data-cy=display]').click()
+    cy.wait(2000)
+    cy.get('[title="#50E3C2"]').click()
+    cy.wait(500)
+    cy.eyesCheckWindow({
+      tag: 'color button',
+      sizeMode: 'selector', //mode
+      selector: '.page'
+    })
+  })
+})

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

@@ -0,0 +1,40 @@
+/* global cy,before,after */
+import { environment } from '../../util'
+describe('Visual Regression Testing', () => {
+  before(() => {
+    cy.eyesOpen({
+      appName: 'Carbon',
+      testName: 'Syntax',
+      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'
+    })
+  })
+
+  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'
+    })
+  })
+})

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

@@ -0,0 +1,28 @@
+/* global cy,before,after */
+import { environment } from '../../util'
+describe('Visual Regression Testing', () => {
+  before(() => {
+    cy.eyesOpen({
+      appName: 'Carbon',
+      testName: 'Themes',
+      browser: environment
+    })
+    cy.visit('/')
+  })
+  after(() => {
+    cy.eyesClose()
+  })
+
+  it('themes test', () => {
+    for (let childIndex = 1; childIndex < 28; childIndex++) {
+      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.eyesCheckWindow({
+        sizeMode: 'selector', //mode
+        selector: '.page'
+      })
+    }
+  })
+})

cypress/plugins/index.js

@@ -15,3 +15,5 @@ module.exports = (/* on, config */) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 }
+
+require('@applitools/eyes-cypress')(module)

cypress/support/index.js

@@ -16,9 +16,9 @@
 /* global cy */
 
 export const editorVisible = () => cy.get('.editor').should('be.visible')
-
+import '@applitools/eyes-cypress/commands'
 // Import commands.js using ES2015 syntax:
-// import './commands'
+import './commands'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

cypress/util.js

@@ -0,0 +1 @@
+export const environment = { width: 1000, height: 768, name: 'chrome' }

package.json

@@ -56,6 +56,7 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "@applitools/eyes-cypress": "^3.6.13",
     "all-contributors-cli": "^6.4.0",
     "babel-eslint": "^10.0.1",
     "clipboardy": "^2.0.0",