Add end2end

Author: jerolan

Diff for: .gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# env
+.env.*
+.env

Diff for: babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

Diff for: e2e/__tests__/trivia.js

@@ -0,0 +1,61 @@
+import 'babel-polyfill';
+
+import driver from '../driver';
+import config from '../config';
+
+import waitForElement from '../waitForElement';
+
+// eslint-disable-next-line no-undef
+jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;
+
+describe('HomeScreen', () => {
+  beforeAll(async () => {
+    await driver.init({ browserName: config.E2E_DEVICE });
+  });
+
+  afterAll(async () => {
+    await driver.quit();
+  });
+
+  it('load the app', async () => {
+    await driver.get('http://localhost:3000/');
+    const homeScreen = await waitForElement('home-screen');
+    expect(homeScreen).toBeDefined();
+  });
+
+  it('start the trivia', async () => {
+    const startPlayingButton = await waitForElement('start-playing-button');
+    expect(startPlayingButton).toBeDefined();
+
+    await driver.moveTo(startPlayingButton);
+    await driver.click();
+
+    const triviaScreen = await waitForElement('trivia-screen');
+    expect(triviaScreen).toBeDefined();
+  });
+
+  it('answer the 5 questions', async () => {
+    for (let i = 0; i < 5; i++) {
+      const answerOptionButton = await waitForElement('answer-option');
+      expect(answerOptionButton).toBeDefined();
+
+      await driver.moveTo(answerOptionButton);
+      await driver.click();
+      await driver.sleep(1000);
+    }
+
+    const triviaResultScreen = await waitForElement('trivia-result-screen');
+    expect(triviaResultScreen).toBeDefined();
+  });
+
+  it('restarts trivia', async () => {
+    const restartTriviaButton = await waitForElement('restart-trivia-button');
+    expect(restartTriviaButton).toBeDefined();
+
+    await driver.moveTo(restartTriviaButton);
+    await driver.click();
+
+    const homeScreen = await waitForElement('home-screen');
+    expect(homeScreen).toBeDefined();
+  });
+});

Diff for: e2e/config.js

@@ -0,0 +1,33 @@
+require('custom-env').env('e2e');
+
+const {
+  E2E_DEVICE,
+  E2E_SERVER,
+  BROWSERSTACK_USERNAME,
+  BROWSERSTACK_ACCESS_KEY,
+  BROWSERSTACK_APP_URL,
+  BROWSERSTACK_DEVICE,
+} = process.env;
+
+const defaults = {
+  E2E_DEVICE: null,
+  E2E_SERVER: null,
+};
+
+// Alert to fill the necessary environment variables
+Object.keys(defaults).forEach(key => {
+  if (!process.env[key]) {
+    throw new Error(
+      `Please enter a custom ${key} in .env on the root directory`
+    );
+  }
+});
+
+export default {
+  E2E_DEVICE,
+  E2E_SERVER,
+  BROWSERSTACK_USERNAME,
+  BROWSERSTACK_ACCESS_KEY,
+  BROWSERSTACK_APP_URL,
+  BROWSERSTACK_DEVICE,
+};

Diff for: e2e/driver.js

@@ -0,0 +1,7 @@
+import wd from 'wd';
+
+import server from './server';
+
+const driver = wd.promiseChainRemote(server.url, server.port);
+
+export default driver;

Diff for: e2e/server.js

@@ -0,0 +1,16 @@
+import config from './config';
+
+const URL = {
+  local: 'localhost',
+  remote: 'http://hub-cloud.browserstack.com/wd/hub',
+};
+
+const PORT = {
+  local: 4444,
+  remote: 80,
+};
+
+export default {
+  url: URL[config.E2E_SERVER],
+  port: PORT[config.E2E_SERVER],
+};

Diff for: e2e/waitForElement.js

@@ -0,0 +1,26 @@
+import { asserters } from 'wd';
+
+import driver from './driver';
+
+export default async function waitForElement(key, tag, timeout = 5000) {
+  function waitFor() {
+    if (tag) {
+      return driver.waitForElement(
+        tag,
+        key,
+        asserters.isDisplayed,
+        timeout,
+        100
+      );
+    }
+
+    return driver.waitForElementById(key, asserters.isDisplayed, timeout, 100);
+  }
+
+  try {
+    const existingElement = await waitFor();
+    return existingElement;
+  } catch {
+    return undefined;
+  }
+}

Diff for: jest.e2e.json

@@ -0,0 +1,3 @@
+{
+  "testPathIgnorePatterns": ["/node_modules/", "src/"]
+}

Diff for: package.json

@@ -14,16 +14,22 @@
   },
   "devDependencies": {
     "@testing-library/react": "^8.0.4",
+    "babel-polyfill": "^6.26.0",
+    "custom-env": "^1.0.2",
     "husky": ">=1",
     "lint-staged": ">=8",
     "prettier": "1.17.1",
-    "react-test-renderer": "^16.8.6"
+    "react-test-renderer": "^16.8.6",
+    "selenium-standalone": "^6.16.0",
+    "wd": "^1.11.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "coverage": "npm test -- --coverage --watchAll"
+    "coverage": "npm test -- --coverage --watchAll",
+    "e2e": "jest --config jest.e2e.json",
+    "selenium": "selenium-standalone install && selenium-standalone start"
   },
   "eslintConfig": {
     "extends": "react-app"

Diff for: src/components/HomeScreen/HomeScreen.js

@@ -8,12 +8,12 @@ import Styles from './HomeScreen.module.css';
 
 export default function HomeScreen() {
   return (
-    <Page>
+    <Page id="home-screen">
       <div className={Styles.wrapper}>
         <TitleLogo />
 
         <Link to="/trivia">
-          <Button color="primary" variant="outlined">
+          <Button id="start-playing-button" color="primary" variant="outlined">
             START PLAYING
           </Button>
         </Link>

Diff for: src/components/TriviaResultScreen/TriviaResultScreen.js

@@ -11,15 +11,20 @@ export default function TriviaResultScreen({ history, location }) {
   };
 
   return (
-    <Page>
+    <Page id="trivia-result-screen">
       <div className={Styles.Content}>
         <Typography align="center" variant="h4">
           {location.state.isWinner
             ? 'Soy intelectual muy inteligente!'
             : 'Eres tonto como una piedra y feo como una blasfemia'}
         </Typography>
 
-        <Button variant="outlined" color="primary" onClick={handleResetTrivia}>
+        <Button
+          id="restart-trivia-button"
+          variant="outlined"
+          color="primary"
+          onClick={handleResetTrivia}
+        >
           VOLVER A COMENZAR
         </Button>
       </div>

Diff for: src/components/TriviaScreen/TriviaScreen.js

@@ -43,7 +43,7 @@ export default function TriviaScreen({ history }) {
   };
 
   return (
-    <Page>
+    <Page id="trivia-screen">
       <Typography className={Styles.Title} variant="h4">
         {currentQuestion.text}
       </Typography>

Diff for: src/components/TriviaScreen/components/AnswerOptionList/AnswerOptionsList.js

@@ -8,6 +8,7 @@ export default function AnswerOptionList({ options, onOptionPress }) {
 
   return options.map(option => (
     <Button
+      id="answer-option"
       variant="contained"
       color="secondary"
       onClick={handleOptionPress(option)}