zoltantothcom · zoltantothcom · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019 · Mar 19, 2019
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,12 @@
 # testing
 /coverage
 
+/cypress/videos
+/cypress/fixtures
+/cypress/plugins
+/cypress/support
+/cypress/integration/examples
+
 # production
 /build
 

diff --git a/.travis.yml b/.travis.yml
@@ -10,6 +10,8 @@ script:
   - yarn build
   - yarn test
   - yarn test:coverage
+  - yarn start:ci
+  - yarn cypress:run
 
 after_success:
   - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js

diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -168,6 +168,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
     >
       <button
         className="c5"
+        data-cy="js"
         onClick={[Function]}
       >
         <svg
@@ -194,6 +195,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       </button>
       <button
         className="c5"
+        data-cy="mode"
         onClick={[Function]}
       >
         <svg
@@ -399,6 +401,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
     >
       <button
         className="c5"
+        data-cy="js"
         onClick={[Function]}
       >
         <svg
@@ -425,6 +428,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       </button>
       <button
         className="c5"
+        data-cy="mode"
         onClick={[Function]}
       >
         <svg

diff --git a/__tests__/components/__snapshots__/Toggle.test.js.snap b/__tests__/components/__snapshots__/Toggle.test.js.snap
@@ -39,6 +39,7 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
 <div>
   <button
     className="c0"
+    data-cy="js"
     onClick={[Function]}
   >
     <svg
@@ -105,6 +106,7 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
 <div>
   <button
     className="c0"
+    data-cy="js"
     onClick={[Function]}
   >
     <svg
@@ -171,6 +173,7 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
 <div>
   <button
     className="c0"
+    data-cy="mode"
     onClick={[Function]}
   >
     <svg
@@ -231,6 +234,7 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
 <div>
   <button
     className="c0"
+    data-cy="mode"
     onClick={[Function]}
   >
     <svg

diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,3 @@
+{
+  "projectId": "design-patterns-javascript"
+}
diff --git a/cypress/integration/about.spec.js b/cypress/integration/about.spec.js
@@ -0,0 +1,60 @@
+/* globals context, cy */
+context('About', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/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)');
+    });
+  });
+});
diff --git a/package.json b/package.json
@@ -15,12 +15,15 @@
   },
   "scripts": {
     "start": "webpack-dev-server --mode development",
+    "start:ci": "npm start & wait-on http://localhost:8080",
     "format": "prettier --write \"src/**/*.js\"",
     "stats": "webpack-bundle-analyzer stats/stats.json",
     "build": "webpack --mode production",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
     "storybook": "start-storybook -p 6006",
     "storybook:build": "build-storybook"
   },
@@ -34,7 +37,8 @@
     ],
     "testPathIgnorePatterns": [
       "<rootDir>/__tests__/config/",
-      "<rootDir>/__tests__/helpers/"
+      "<rootDir>/__tests__/helpers/",
+      "<rootDir>/cypress/"
     ]
   },
   "devDependencies": {
@@ -55,6 +59,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",
@@ -70,6 +75,7 @@
     "redux-mock-store": "^1.5.3",
     "storybook-addon-styled-component-theme": "^1.1.1",
     "surge": "^0.20.1",
+    "wait-on": "^3.2.0",
     "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.1",

diff --git a/src/components/Toggle.jsx b/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>
   );