test: 增加tab相关测试

cypress/e2e/tab.cy.ts

@@ -0,0 +1,142 @@
+import {
+  beforeSetup,
+  clickMenu,
+  generateNetworkResult,
+  intercept,
+  validateDialog,
+} from './utils';
+
+const containerBasicData = {
+  id: '5',
+  department: '涂装班组',
+  departmentId: '000300010012',
+  type: '充电桩底座+1',
+  containerName: '特来电002',
+  code: '00002',
+  num: '9',
+  createTime: '2023-03-31 10:11:27',
+  modifyUser: 'admin',
+  modifyTime: '2023-03-31 10:46:30',
+  page: 0,
+  limit: 0,
+};
+
+const roleBasicData = {
+  id: 11,
+  roleCode: 'BH000011',
+  roleName: 'test账户',
+  createTime: '2023-03-30 14:50:46',
+  remarks: '测试用账户',
+  menu: '78,93,88,79,',
+  menuBefore: '93,88,79',
+  menuPda: '29,30,31,32,',
+  modifyUser: 'admin',
+  modifyTime: '2023-04-12 15:16:15',
+  page: 0,
+  limit: 0,
+};
+
+const menuBasicData = {
+  id: '7',
+  name: '系统设置',
+  url: '.',
+  pId: '0',
+  idCode: null,
+  type: 'PC',
+  page: 0,
+  limit: 0,
+  orderBy: '0',
+  menu: null,
+  img: 'xitongguanli',
+  modifyUser: 'admin',
+  modifyTime: '2023-03-29 13:42:47',
+  pid: '0',
+};
+
+describe('page tab', function () {
+  beforeEach(function () {
+    beforeSetup();
+  });
+
+  beforeEach(function () {
+    intercept('/container/getContainer', function ({reply, search}) {
+      generateNetworkResult({
+        reply,
+        search,
+        basicData: containerBasicData,
+        title: 'code',
+      });
+    });
+
+    intercept('/role/getRole', function ({search, reply}) {
+      generateNetworkResult({
+        search,
+        basicData: roleBasicData,
+        reply,
+        title: 'roleCode',
+      });
+    });
+
+    intercept('/menu/getPage', function ({search, reply}) {
+      generateNetworkResult({
+        search,
+        reply,
+        basicData: menuBasicData,
+        title: 'name',
+        skipCondition(name) {
+          return name === 'pId' || name === 'type';
+        },
+      });
+    });
+  });
+
+  function validateTabLength(length: number) {
+    cy.getTestId('tab_list')
+      .find('.ant-tabs-nav')
+      .find('.ant-tabs-nav-wrap')
+      .find('.ant-tabs-tab')
+      .should('have.length', length);
+  }
+
+  function validateTabActiveText(text: string) {
+    cy.getTestId('tab_list')
+      .find('.ant-tabs-tab-active')
+      .children('div')
+      .should('have.text', text);
+  }
+
+  it('tab', function () {
+    validateTabLength(1);
+    // 判断新增是否正确
+    clickMenu('基础资料', '容器管理');
+    validateTabActiveText('容器管理');
+    clickMenu('系统设置', '角色管理');
+    validateTabActiveText('角色管理');
+    clickMenu('系统设置', '菜单管理');
+    validateTabActiveText('菜单管理');
+    validateTabLength(4);
+
+    // 判断删除当前选中的tab
+    cy.getTestId('tab_list')
+      .find('.ant-tabs-tab-active')
+      .find('button')
+      .click();
+    validateTabLength(3);
+    validateTabActiveText('角色管理');
+
+    // 判断删除非选中的tab
+    clickMenu('系统设置', '菜单管理');
+    cy.getTestId('tab_list').find('.ant-tabs-tab').eq(1).find('button').click();
+    validateTabLength(3);
+    validateTabActiveText('菜单管理');
+
+    // 判断点击已添加的菜单是否会切换到指定tab
+    clickMenu('系统设置', '角色管理');
+    validateTabActiveText('角色管理');
+
+    // 清空tab
+    cy.getTestId('clear_tab_btn').click();
+    validateDialog('清除标签页', '你确定要关闭所有标签页吗？');
+    validateTabLength(1);
+  });
+});

cypress/e2e/utils/utils.ts

@@ -19,6 +19,19 @@ export function intoMenu(parent: string, child: string) {
   menu && cy.visit(menu);
 }
 
+export function clickMenu(parent: string, child: string) {
+  cy.getTestId('menu')
+    .children()
+    .each(function (el) {
+      const titleElement = el.find('.ant-menu-submenu-title');
+
+      if (titleElement.text() === parent) {
+        titleElement.trigger('click');
+        el.find(`ul>li[title="${child}"]`).trigger('click');
+      }
+    });
+}
+
 /** 校验select */
 export function validateSelect(testid: string, value: string) {
   cy.getTestId(testid)

packages/app/src/pages/home/main/index.tsx

@@ -10,6 +10,7 @@ const Main: FC = function () {
   return (
     <Layout.Content className='layout-content-custom'>
       <Tabs
+        data-testid='tab_list'
         size='small'
         hideAdd
         activeKey={activeKey}
@@ -19,7 +20,13 @@ const Main: FC = function () {
         className={css.tabs}
         onEdit={onEdit}
         tabBarExtraContent={
-          <Button danger type='link' className={css.clearBtn} onClick={onClear}>
+          <Button
+            danger
+            type='link'
+            className={css.clearBtn}
+            onClick={onClear}
+            data-testid='clear_tab_btn'
+          >
             清除
           </Button>
         }