登录自动选择部门、环境配置、登录测试

jest-puppeteer.config.js

@@ -1,6 +1,10 @@
 // ps https://github.com/GoogleChrome/puppeteer/issues/3120
 module.exports = {
   launch: {
-    args: ['--disable-gpu', '--disable-dev-shm-usage', '--no-first-run', '--no-zygote'],
+    args: ['--disable-gpu', '--disable-dev-shm-usage', '--no-first-run', '--no-zygote','--window-size=1920,1080'],
+    headless: false, // 是否为无头模式
+    defaultViewport: { width: 1920, height: 700 }, // 默认窗口的大小
+    // slowMo: process.env.SLOWMO ? process.env.SLOWMO : 0, // 是否慢动作执行测试
+    devtools: true
   },
 };

jest.config.js

@@ -1,4 +1,8 @@
 module.exports = {
   testURL: 'http://localhost:8000',
   preset: 'jest-puppeteer',
+  globals: { // 全局变量，你可以在项目中直接使用它们
+    testURL: `http://localhost:${process.env.PORT || 8000}`,
+    JWT_TOKEN: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6NywiVXNlcm5hbWUiOiJhZG1pbiIsIlBhc3N3b3JkIjoiNDI5N2Y0NGIxMzk1NTIzNTI0NWIyNDk3Mzk5ZDdhOTMiLCJEZXAiOiIxMzUiLCJleHAiOjE2NjA3NTA5MzMsImlzcyI6Imdpbi1ibG9nIn0.YG8q72a1P6bYql24gn-dIng11iDRxXsJtEXK26jbRpY'
+  },
 };

src/e2e/login.e2e.js

@@ -1,34 +1,40 @@
-const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
+// const BASE_URL = `http://localhost:${process.env.PORT || 8000}`;
 
 describe('Login', () => {
   beforeAll(async () => {
-    jest.setTimeout(1000000);
+    jest.setTimeout(20000);
   });
 
   beforeEach(async () => {
-    await page.goto(`${BASE_URL}/user/login`, { waitUntil: 'networkidle2' });
+    await page.goto(`${testURL}/bom/login`, { waitUntil: 'networkidle2' });
     await page.evaluate(() => window.localStorage.setItem('antd-pro-authority', 'guest'));
   });
 
   it('should login with failure', async () => {
-    await page.waitForSelector('#userName', {
+    await page.waitForSelector('#UserName', {
       timeout: 2000,
     });
-    await page.type('#userName', 'mockuser');
-    await page.type('#password', 'wrong_password');
+    await page.type('#UserName', 'mockuser');
+    await page.type('#Password', 'wrong_password');
     await page.click('button[type="submit"]');
-    await page.waitForSelector('.ant-alert-error'); // should display error
+    await page.waitForSelector('.ant-message-error'); // should display error
   });
 
   it('should login successfully', async () => {
-    await page.waitForSelector('#userName', {
+    await page.waitForSelector('#UserName', {
       timeout: 2000,
     });
-    await page.type('#userName', 'admin');
-    await page.type('#password', 'ant.design');
+    await page.focus('#UserName');
+    await page.type('#UserName', 'admin');
+    await page.focus('#Password');
+    await page.type('#Password', '123123');
+
+    // 部门选择
+    await page.waitForXPath(`//*[@id="root"]/div/div/div/div/form/div/div[2]/div`);
+
     await page.click('button[type="submit"]');
-    await page.waitForSelector('.ant-layout-sider h1'); // should display error
-    const text = await page.evaluate(() => document.body.innerHTML);
-    expect(text).toContain('<h1>Ant Design Pro</h1>');
+    await page.waitForSelector('.antd-pro-components-global-header-index-dark');
+    // const text = await page.evaluate(() => document.body.innerHTML);
+    // expect(text).toContain('待办事项');
   });
 });

src/pages/PurchaseAdmin/PurchaseList/Login/Login.js

@@ -52,6 +52,7 @@ class LoginPage extends Component {
     depList: [],
     userName: '',
     depId: undefined,
+    hasName: false,
   };
 
   componentDidMount = () => {
@@ -72,7 +73,8 @@ class LoginPage extends Component {
       this.setState({
         userName: name,
         depList: res.data,
-        depId: undefined,
+        depId: res.data[0]?.ID,
+        hasName: true,
       });
     }
   };
@@ -109,9 +111,27 @@ class LoginPage extends Component {
     <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
   );
 
+  renderDepSelect = () => {
+    const { depId, depList } = this.state;
+    return (
+      <Select
+        value={depId}
+        onChange={this.changeDep}
+        style={{ marginBottom: 20 }}
+        placeholder="请选择部门"
+      >
+        {depList.map(item => (
+          <Option value={item.ID} key={item.ID}>
+            {item.Name}
+          </Option>
+        ))}
+      </Select>
+    );
+  };
+
   render() {
     const { login, submitting } = this.props;
-    const { type, autoLogin, depList, depId } = this.state;
+    const { type, autoLogin, depList, depId, hasName } = this.state;
     return (
       <DocumentTitle title="登录-采购清单">
         <div className={styles.container}>
@@ -146,18 +166,7 @@ class LoginPage extends Component {
                       this.onHandleBLur(e.target.value);
                     }}
                   />
-                  <Select
-                    value={depId}
-                    onChange={this.changeDep}
-                    style={{ marginBottom: 20 }}
-                    placeholder="请选择部门"
-                  >
-                    {depList.map(item => (
-                      <Option value={item.ID} key={item.ID}>
-                        {item.Name}
-                      </Option>
-                    ))}
-                  </Select>
+                  {hasName && this.renderDepSelect()}
                   <Password
                     name="Password"
                     className={styles.inp}