Merge pull request #2 from arifulbgt4/wip/test-puppeteer

Wip/test puppeteer

e2e/jest-puppeteer.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  launch: {
+    headless: false,
+    slowMo: 300,
+  },
+};

e2e/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  preset: 'jest-puppeteer',
+  globals: {
+    URL: 'http://localhost:3000',
+  },
+  testMatch: ['**/specs/*.js'],
+  transform: {
+    '\\.js$': 'react-scripts/config/jest/babelTransform',
+  },
+  verbose: true,
+};

e2e/pageObjects/index.js

@@ -0,0 +1,14 @@
+const mouse = page.mouse;
+
+export const clientXY = async (selector) =>
+  await page.$eval(selector, (e) => [e.offsetLeft, e.offsetTop]);
+
+export const moveDown = async (x, y) => {
+  await mouse.move(x, y);
+  await mouse.down();
+};
+
+export const moveUp = async (x, y) => {
+  await mouse.move(x, y);
+  await mouse.up();
+};

e2e/specs/index.js

@@ -0,0 +1,67 @@
+import { clientXY, moveDown, moveUp } from '../pageObjects';
+
+const NODE_SELECT_ONE = 'div.sidebar div:nth-child(1)';
+const NODE_SELECT_TWO = 'div.sidebar div:nth-child(2)';
+
+const NODE_DELETE_BUTTON = 'div.toolbar';
+
+describe('Wireflow', () => {
+  beforeAll(async () => {
+    await page.goto(URL);
+    await page.setViewport({ width: 1280, height: 800 });
+  });
+
+  const navigationPromise = page.waitForNavigation();
+
+  it('should be add node (1) on canvas', async (done) => {
+    const [, clientY] = await clientXY(NODE_SELECT_ONE);
+
+    await moveDown(70, clientY + 30);
+    await moveUp(200, 200);
+
+    await navigationPromise;
+
+    done();
+  });
+
+  it('should be add node (2) on canvas', async (done) => {
+    const [, clientY] = await clientXY(NODE_SELECT_TWO);
+
+    await moveDown(70, clientY + 30);
+    await moveUp(400, 400);
+
+    await navigationPromise;
+
+    done();
+  });
+
+  it('should be add edge between two nodes', async (done) => {
+    await moveDown(210, 210);
+    await page.mouse.up();
+
+    await navigationPromise;
+
+    await moveDown(200, 250);
+    await page.mouse.move(300, 200);
+    await moveUp(400, 450);
+
+    await navigationPromise;
+
+    done();
+  });
+
+  it('should be delete node (1) from canvas', async () => {
+    const [x, y] = await clientXY(NODE_DELETE_BUTTON);
+
+    await moveDown(210, 210);
+    await page.mouse.up();
+
+    await navigationPromise;
+
+    await page.mouse.click(x + 10, y + 15);
+
+    await page.waitFor(2000);
+
+    await navigationPromise;
+  });
+});

package.json

@@ -4,6 +4,12 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.0.6",
+    "@testing-library/jest-dom": "^5.9.0",
+    "@testing-library/react": "^10.0.6",
+    "@testing-library/user-event": "^11.0.0",
+    "@types/expect-puppeteer": "^4.4.3",
+    "@types/jest-environment-puppeteer": "^4.3.1",
+    "@types/puppeteer": "^3.0.0",
     "antd": "^4.1.4",
     "gg-editor": "^2.0.3",
     "html-to-image": "^0.1.1",
@@ -16,7 +22,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "e2e": "cd e2e && jest"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -32,5 +39,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "jest-puppeteer": "^4.4.0",
+    "puppeteer": "^3.3.0"
   }
 }

src/setupTests.js

@@ -0,0 +1,6 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+
+import '@testing-library/jest-dom/extend-expect';