Add Cypress - integration tests for About page

Author: zoltantothcom

.gitignore

@@ -6,6 +6,11 @@
 # testing
 /coverage
 
+/cypress/fixtures
+/cypress/plugins
+/cypress/support
+/cypress/integration/examples
+
 # production
 /build
 

cypress.json

@@ -0,0 +1 @@
+{}

cypress/integration/about.spec.js

@@ -0,0 +1,60 @@
+/* globals context, cy */
+context('About', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8081/about');
+  });
+
+  describe('Header', () => {
+    it('should have 2 navigation links', () => {
+      cy.get('header a').should('have.length', 2);
+    });
+
+    it('should have _Game_ link', () => {
+      cy.get('header a')
+        .first()
+        .should('have.text', 'Game')
+        .should('have.attr', 'href')
+        .and('include', '/');
+    });
+
+    it('should have _Pattern Reference_ link', () => {
+      cy.get('header a:last')
+        .first()
+        .should('have.text', 'Pattern Reference')
+        .should('have.attr', 'href')
+        .and('include', '/patterns');
+    });
+
+    it('should have the current page title in a span', () => {
+      cy.get('header span')
+        .should('exist')
+        .should('have.text', 'About');
+    });
+
+    it('should have the MODE switch', () => {
+      cy.get('header button[data-cy=mode]').should('exist');
+      cy.get('header button[data-cy=mode]').should('be.visible');
+    });
+
+    it('should NOT have the JS switch', () => {
+      cy.get('header button[data-cy=js]').should('not.exist');
+    });
+  });
+
+  describe('Content', () => {
+    it('should have 2 section headers', () => {
+      cy.get('h3').should('have.length', 2);
+
+      cy.get('h3:first').should('have.text', 'The Game');
+      cy.get('h3:last').should('have.text', 'References');
+    });
+  });
+
+  describe('Behavior', () => {
+    it('should switch the mode', () => {
+      cy.get('body').should('have.css', 'background-color', 'rgb(34, 34, 34)');
+      cy.get('header button[data-cy=mode]').click();
+      cy.get('body').should('have.css', 'background-color', 'rgb(255, 255, 255)');
+    });
+  });
+});

package.json

@@ -21,6 +21,7 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "cypress:open": "cypress open",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook"
   },
@@ -55,6 +56,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "coveralls": "^3.0.3",
+    "cypress": "^3.2.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.8.0",
     "enzyme-to-json": "^3.3.5",

src/components/Toggle.jsx

@@ -49,7 +49,7 @@ export const Toggle = props => {
   if (control === 'mode' && mode === 'light') isActive = 'active';
 
   return (
-    <StyledToggle onClick={() => onToggle(control)} className={isActive}>
+    <StyledToggle onClick={() => onToggle(control)} className={isActive} data-cy={control}>
       <SVG control={control} />
     </StyledToggle>
   );