feat: added e2e test for Login page (#619)

* feat: added Front-end e2e test YAML file

* feat: added login e2e test

* feat: update Login.e2e.js

* Update Login.e2e.js

* feat: added e2e readme

* feat: added licence

* feat: added  start-server-and-test package

* feat: update login test case

* Update frontend-e2e-test.yml

* feat: added logout test case

* Update frontend-e2e-test.yml

* feat: added login failed with empty input

* feat: update CI

* feat: update text

* feat: added public.js

* feat: change logout timeout

* feat: Added e2e test documentation link to development.md

* Update develop.md

* Update develop.zh-CN.md

* Update README.md

Co-authored-by: 琚致远 <juzhiyuan@apache.org>

.github/workflows/frontend-e2e-test.yml

@@ -0,0 +1,31 @@
+name: Front-end e2e test
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+      - v2.0
+defaults:
+  run:
+    working-directory: frontend
+
+jobs:
+  frontend-e2e:
+    name: Front-end e2e test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node.js environment for Front-end
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: Install Front-end dependencies
+        run: yarn install
+
+      - name: Start Front-end then test
+        run: yarn test:e2e

docs/develop.md

@@ -36,6 +36,10 @@ $ yarn install
 $ yarn start
 ```
 
+### Add E2E test cases
+
+Please refer to [E2E Documentation](../frontend/src/e2e/README.md).
+
 ## manager-api
 
 ### Sync jsonschema

docs/develop.zh-CN.md

@@ -39,6 +39,10 @@ $ yarn install
 $ yarn start
 ```
 
+### 编写 E2E 测试案例
+
+请参考 [E2E 文档](../frontend/src/e2e/README.zh-CN.md)。
+
 ## manager-api 开发
 
 ### 同步 jsonschema

frontend/package.json

@@ -20,6 +20,7 @@
     "prettier": "prettier -c --write \"**/*\"",
     "site": "yarn run fetch:blocks && yarn run build",
     "start": "umi dev",
+    "test:e2e": "start-server-and-test 'yarn start' http://localhost:8000 'yarn test'",
     "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev",
     "start:no-mock": "cross-env MOCK=none umi dev",
     "start:no-ui": "cross-env UMI_UI=none umi dev",
@@ -73,6 +74,7 @@
     "react-device-detect": "^1.12.1",
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",
+    "start-server-and-test": "^1.11.5",
     "swagger-ui-react": "^3.33.0",
     "umi": "^3.1.2",
     "umi-request": "^1.0.8",
@@ -112,6 +114,7 @@
     "mockjs": "^1.0.1-beta3",
     "prettier": "^2.0.1",
     "pro-download": "1.0.1",
+    "puppeteer": "^5.4.1",
     "puppeteer-core": "^4.0.1",
     "stylelint": "^13.0.0"
   },

frontend/src/e2e/Login.e2e.js

@@ -0,0 +1,75 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+const puppeteer = require('puppeteer');
+
+const {
+  setupLogin,
+  BASE_URL
+} = require('./service')
+
+let browser;
+const domSelectors = {
+  inputUsername: '#control-ref_username',
+  inputPassword: '#control-ref_password',
+  buttonLogin: '.ant-btn-lg',
+  loginFailedIcon: '.ant-notification-notice-icon-error',
+};
+const loginFailedData = {
+  username: 'admin',
+  password: '123456',
+};
+
+beforeAll(async () => {
+  browser = await puppeteer.launch({
+    headless: true,
+    slowMo: 100
+  });
+});
+
+describe('Login', () => {
+  test('Login failed with wrong password', async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE_URL);
+    await page.type(domSelectors.inputUsername, loginFailedData.username);
+    await page.type(domSelectors.inputPassword, loginFailedData.password);
+    await page.click(domSelectors.buttonLogin);
+    await page.waitForSelector(domSelectors.loginFailedIcon);
+    await page.close();
+  }, 10000);
+
+  test('Login failed with empty username password', async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE_URL);
+    await page.type(domSelectors.inputUsername, '');
+    await page.type(domSelectors.inputPassword, '');
+    await page.click(domSelectors.buttonLogin);
+    await page.waitForSelector('.ant-form-item-explain');
+    await page.close();
+  }, 10000);
+
+  test('Login success', async () => {
+    const page = await browser.newPage();
+    await setupLogin(page);
+    await page.close();
+  }, 10000);
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});

frontend/src/e2e/Logout.e2e.js

@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable import/no-extraneous-dependencies */
+const puppeteer = require('puppeteer');
+
+const {
+  setupLogin
+} = require('./service')
+
+let browser;
+const domSelectors = {
+  userProfile: '.ant-space-horizontal div:nth-child(2)',
+  dropdownMenuItem: '.ant-dropdown-menu-item',
+  buttonLogin: ".ant-btn-lg",
+  logoutButton: '.ant-dropdown > ul > li:nth-child(3)',
+};
+
+describe('Logout', () => {
+
+  beforeAll(async () => {
+    browser = await puppeteer.launch({
+      headless: true,
+      slowMo: 100
+    });
+  });
+
+  test('Logout', async () => {
+    const page = await browser.newPage();
+    await setupLogin(page);
+    await page.click(domSelectors.userProfile);
+    await page.waitForSelector(domSelectors.dropdownMenuItem);
+    await page.waitForSelector(domSelectors.logoutButton);
+    await page.click(domSelectors.logoutButton);
+    await page.waitForSelector(domSelectors.buttonLogin);
+    await page.close();
+  }, 50000);
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});

frontend/src/e2e/README.md

@@ -0,0 +1,41 @@
+<!--
+#
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+-->
+
+### Add E2E test cases
+
+1. Install dependencies then run in development mode
+
+```sh
+$ yarn install && yarn start
+```
+
+2. Add a new test case file under the `src/e2e` folder
+3. Run test cases
+
+```sh
+$ yarn test
+```
+
+If you want to run a particular test file separately, you can execute the following command
+
+```sh
+$ yarn test ${yourFileName}.e2e.js
+```
+
+The test results will be displayed on the console.

frontend/src/e2e/README.zh-CN.md

@@ -0,0 +1,41 @@
+<!--
+#
+# Licensed to the Apache Software Foundation (ASF) under one or more
+# contributor license agreements.  See the NOTICE file distributed with
+# this work for additional information regarding copyright ownership.
+# The ASF licenses this file to You under the Apache License, Version 2.0
+# (the "License"); you may not use this file except in compliance with
+# the License.  You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+-->
+
+### 本地编写测试案例
+
+1. 安装依赖并运行本地开发环境
+
+```sh
+$ yarn install && yarn start
+```
+
+2. 在 `src/e2e` 文件夹增加新的测试案例文件
+3. 运行测试案例
+
+```sh
+$ yarn test
+```
+
+如果你想单独运行某一个测试文件，可以执行如下命令
+
+```sh
+$ yarn test ${yourFileName}.e2e.js
+```
+
+测试结果将会在控制台显示。

frontend/src/e2e/service.js

@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
+
+const loginSuccessData = {
+  username: 'admin',
+  password: 'admin',
+};
+
+const domSelectors = {
+  inputUsername: '#control-ref_username',
+  inputPassword: '#control-ref_password',
+  buttonLogin: '.ant-btn-lg',
+  loginSuccessIcon: '.ant-notification-notice-icon-success',
+};
+
+export const setupLogin = async (page) => {
+  await page.goto(BASE_URL);
+  await page.type(domSelectors.inputUsername, loginSuccessData.username);
+  await page.type(domSelectors.inputPassword, loginSuccessData.password);
+  await page.click(domSelectors.buttonLogin);
+  await page.waitForSelector(domSelectors.loginSuccessIcon);
+  await page.waitForNavigation();
+}