feat: added e2e test for Login page

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

@@ -0,0 +1,27 @@
+name: Front-end e2e test
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+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 and Test
+        run: yarn test:e2e

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"
   },

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');
+
+let browser;
+const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
+const domSelectors = {
+  inputUserName: '#control-ref_username',
+  inputPassWord: '#control-ref_password',
+  buttonLogin: '.ant-btn-lg',
+  notificationNotice: '.ant-notification-notice',
+  notificationLogin: '.ant-notification-notice-description',
+};
+const loginFailedDatas = {
+  userName: 'admin',
+  passWord: '123456',
+};
+const loginSuccessDatas = {
+  userName: 'admin',
+  passWord: 'admin',
+};
+
+beforeAll(async () => {
+  browser = await puppeteer.launch({
+    headless: true,
+  });
+});
+
+describe('Login', () => {
+  test('Login failed with wrong password', async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE_URL);
+    await page.type(domSelectors.inputUserName, loginFailedDatas.userName);
+    await page.type(domSelectors.inputPassWord, loginFailedDatas.passWord);
+    await page.click(domSelectors.buttonLogin);
+    await page.waitForSelector(domSelectors.notificationNotice);
+    const element = await page.$(domSelectors.notificationLogin);
+    const text = await (await element.getProperty('textContent')).jsonValue();
+    expect(text).toBe('username or password error');
+    await page.close();
+  }, 10000);
+
+  test('Login success', async () => {
+    const page = await browser.newPage();
+    await page.goto(BASE_URL);
+    await page.type(domSelectors.inputUserName, loginSuccessDatas.userName);
+    await page.type(domSelectors.inputPassWord, loginSuccessDatas.passWord);
+    await page.click(domSelectors.buttonLogin);
+    await page.waitForSelector(domSelectors.notificationNotice);
+    const element = await page.$(domSelectors.notificationLogin);
+    const text = await (await element.getProperty('textContent')).jsonValue();
+    expect(text).toBe('Login Success');
+    await page.close();
+  }, 10000);
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});

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.
+#
+-->
+
+### Writing test cases
+
+1. Installing dependencies and running local development environments
+
+   ```Bash
+   yarn install && yarn start
+   ```
+
+2. Add a new test case file to the `src/e2e` folder
+3. Run test cases
+
+   ```Bash
+   yarn test
+   ```
+
+   If you want to run a particular test file separately, you can execute the following command
+
+   ```Bash
+   yarn test ${yourFileName}.e2e.js
+   ```
+
+   The test results will be displayed on the console.

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. 安装依赖并运行本地开发环境
+
+   ```Bash
+   yarn install && yarn start
+   ```
+
+2. 在 `src/e2e` 文件夹增加新的测试案例文件
+3. 运行测试案例
+
+   ```Bash
+   yarn test
+   ```
+
+   如果你想单独运行某一个测试文件，可以执行如下命令
+
+   ```Bash
+   yarn test ${yourFileName}.e2e.js
+   ```
+
+   测试结果将会在控制台显示。