feat(e2e-test): setup puppeteer (#237)

Author: evenchange4

.gitignore

@@ -11,3 +11,7 @@ cache
 
 # jest
 coverage/
+
+# e2e
+e2e-test/node_modules
+e2e-test/.env

e2e-test/.env.example

@@ -0,0 +1,4 @@
+ACCOUNT=[email protected]
+PASSWORD=PASSWORD
+ADMIN_DOMAIN=http://localhost:3002
+CONSOLE_DOMAIN=http://127.0.0.1:8081

e2e-test/package.json

@@ -0,0 +1,78 @@
+{
+  "private": true,
+  "name": "e2e-test",
+  "version": "1.0.0",
+  "description": "E2E test for mcs-lite.",
+  "author": "Michael Hsu (徐承志) <[email protected]>",
+  "license": "MIT",
+  "repository": "https://github.com/MCS-Lite/mcs-lite-app.git",
+  "scripts": {
+    "test": "NODE_ENV='test' TZ='UTC' jest",
+    "test:watch": "npm run test -- --watch",
+    "eslint": "eslint ./",
+    "format": "prettier --write 'src/**/*.{js,json}'"
+  },
+  "jest": {
+    "bail": true
+  },
+  "dependencies": {
+    "delay": "^2.0.0",
+    "dotenv": "^4.0.0",
+    "jest": "^21.2.1",
+    "puppeteer": "^0.12.0"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.0.2",
+    "eslint": "^4.11.0",
+    "eslint-config-airbnb": "^15.1.0",
+    "eslint-config-prettier": "^2.7.0",
+    "eslint-config-react-app": "^2.0.1",
+    "eslint-plugin-flowtype": "^2.39.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.3.2",
+    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-prettier": "^2.3.1",
+    "eslint-plugin-react": "^7.4.0",
+    "prettier": "^1.8.2"
+  },
+  "engines": {
+    "node": ">=9.0.0"
+  },
+  "prettier": {
+    "trailingComma": "all",
+    "singleQuote": true
+  },
+  "eslintConfig": {
+    "parser": "babel-eslint",
+    "extends": [
+      "react-app",
+      "airbnb",
+      "prettier",
+      "prettier/flowtype",
+      "prettier/react",
+      "plugin:jest/recommended"
+    ],
+    "plugins": [
+      "prettier",
+      "jest"
+    ],
+    "env": {
+      "jest/globals": true
+    },
+    "rules": {
+      "react/jsx-filename-extension": [
+        1,
+        {
+          "extensions": [
+            ".js"
+          ]
+        }
+      ],
+      "import/no-extraneous-dependencies": 0,
+      "jsx-a11y/no-static-element-interactions": 0,
+      "react/forbid-prop-types": 0,
+      "react/require-default-props": 0,
+      "prettier/prettier": "error"
+    }
+  }
+}

e2e-test/src/index.test.js

@@ -0,0 +1,86 @@
+require('dotenv').config();
+const puppeteer = require('puppeteer');
+const delay = require('delay');
+
+const { ACCOUNT, PASSWORD, ADMIN_DOMAIN, CONSOLE_DOMAIN } = process.env;
+if (!ADMIN_DOMAIN || !CONSOLE_DOMAIN) {
+  throw Error('❌   Please create a .env file.');
+}
+
+let browser;
+let page;
+
+beforeAll(async () => {
+  browser = await puppeteer.launch({
+    // headless: false,
+    // slowMo: 20,
+  });
+  page = await browser.newPage();
+  // await page.setViewport({ width: 1400, height: 1000 });
+});
+
+afterAll(() => {
+  browser.close();
+});
+
+describe(
+  'Admin',
+  () => {
+    it('[Admin] Login', async () => {
+      await page.goto(`${ADMIN_DOMAIN}/admin/login?locale=en`);
+      await page.type('input[name=email]', ACCOUNT);
+      await page.type('input[name=password]', PASSWORD);
+      await page.click('input[type=submit]');
+      await page.waitForNavigation();
+      expect(page.url()).toContain('/admin');
+    });
+
+    it('[Admin] Start service', async () => {
+      const getStatus = p =>
+        p.$eval(
+          '#root > div > div > div > header > div > div > p',
+          el => el.innerHTML,
+        );
+      const status = await getStatus(page);
+      await delay(500);
+      if (['Start', '啟動'].includes(status)) {
+        await page.click('#root > div > div > div > header > div');
+      }
+      const newStatus = await getStatus(page);
+      await delay(500);
+      expect(['Start', '啟動'].includes(newStatus)).toBeFalsy();
+    });
+
+    it(
+      '[Console] Login',
+      async () => {
+        await page.goto(`${CONSOLE_DOMAIN}/login?locale=en`);
+        await page.type('input[name=email]', ACCOUNT);
+        await page.type('input[name=password]', PASSWORD);
+        await page.click('button[type=submit]');
+        await page.waitForNavigation();
+        await delay(500);
+        expect(page.url()).toContain('/dashboard');
+      },
+      5000,
+    );
+
+    it('[Prototype] Open create dialog', async () => {
+      await page.goto(`${CONSOLE_DOMAIN}/prototypes?locale=en`);
+      await page.waitForSelector('button[type=submit]');
+      await page.click('button[type=submit]');
+      await page.waitForSelector('div[role=dialog]');
+    });
+
+    it('[Prototype] Create', async () => {
+      await page.type(
+        'input[id=prototype_name]',
+        `Puppeteer Title ${new Date()}`,
+      );
+      await page.click(
+        'div[role=dialog] div > div:nth-child(3) button:nth-child(2)',
+      );
+    });
+  },
+  999999999,
+);