search

DevCloudFE / vue-devui

UI components based on Vue3 and DevUI Design
https://vue-devui.github.io
MIT License
1.03k stars 292 forks source link

✨ [Feature]: 完善组件单元测试 #947

Open kagol opened 2 years ago

kagol commented 2 years ago

待补充的单元测试已通过it.todo方式标记出来，可以在项目里搜索it.todo关键字，找到想要贡献的单元测试。

为了保障组件质量和稳定性，为新特性的添加或代码重构添加防护网，每个组件需要增加完善的单元测试，测试组件的UI表现、交互逻辑是否正常，每个api是否生效和符合预期。

执行以下命令可以查看全量组件的单元测试结果：

pnpm test

查看特定组件单元测试结果：

pnpm cli --filter vue-devui -- code-check -t unit-test -c alert,collapse
kagol commented 2 years ago

单元测试任务日志： https://github.com/DevCloudFE/vue-devui/runs/7145035717?check_suite_focus=true

daviForevel commented 2 years ago

date-picker-pro select 单测正在进行中

xingyan95 commented 2 years ago

modal overlay单测正在进行中

kagol commented 2 years ago

2022.7.18 update: 还有以下组件单元测试未通过：

kagol commented 2 years ago

date-picker-pro 还有一个单元测试报错：

 PASS  devui/date-picker-pro/__tests__/month-picker.spec.tsx (7.975 s)
 PASS  devui/date-picker-pro/__tests__/year-picker.spec.tsx
 FAIL  devui/date-picker-pro/__tests__/date-picker-pro.spec.tsx (10.4 s)
  ● date-picker-pro test › date-picker-pro showTime props

    expect(received).toBe(expected) // Object.is equality

    Expected: "2022/7/18 00:00:00"
    Received: "2022/7/18 上午12:00:00"

 PASS  devui/date-picker-pro/__tests__/range-date-picker-pro.spec.tsx (10.554 s)

Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 29 passed, 30 total
kagol commented 2 years ago

2022.7.19 update: 还有以下组件单元测试未通过：

kagol commented 2 years ago

2022.7.20 update: 还有以下组件单元测试未通过：

详细信息请查看 Github Actions 任务：https://github.com/DevCloudFE/vue-devui/runs/7422605733?check_suite_focus=true

 FAIL devui/tooltip/__tests__/tooltip.spec.tsx (8.541 s)
  d-tooltip
✓should render correctly (254 ms)
✓mouse enter delay & mouse leave delay (1042 ms)
✓tooltip disabled work (330 ms)
✕tooltip hide-after work (1429 ms)
✕mouse enter enterable (309 ms)
● d-tooltip › tooltip hide-after work
expect(received).toBeFalsy()
    Received: <div class="devui-flexible-overlay devui-tooltip" style="transform-origin: 50% calc(100% + 8px);"><span>tips text</span><div class="devui-flexible-overlay__arrow" /></div>
● d-tooltip › mouse enter enterable
expect(received).toBeFalsy()
    Received: <div class="devui-flexible-overlay devui-tooltip" style="transform-origin: 50% calc(100% + 8px);"><span>tips text</span><div class="devui-flexible-overlay__arrow" /></div>
Test Suites: 1 failed, 1 total
Tests:       2 failed, 3 passed, 5 total
kagol commented 2 years ago

2022.7.20 更新： 全部组件单元测试问题已由 @linxiang07 @xingyan95 @daviForevel 全部解决🎉🎉并将单元测试任务添加到 PR 门禁中。 但目前单元测试覆盖率还很低，还有大量测试用例未补齐，欢迎一起完善🤝🤝

kagol commented 2 years ago

目前单元测试（pnpm test）还有一些 warn 未解决。

Maximum recursive updates exceeded in component

d-select 存在一个 warn，会影响单元测试结果的查看：

    console.warn
      [Vue warn]: Maximum recursive updates exceeded in component <DSelect>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

这个问题会影响多个使用了select的组件的单测：

Template compilation error: Element is missing end tag

Component is missing template or render function

kagol commented 2 years ago

d-tooltip 偶现单测报错：

FAIL devui/tooltip/__tests__/tooltip.spec.tsx
  ● d-tooltip › mouse enter delay & mouse leave delay
    expect(received).toBeFalsy()
    Received: <div class="devui-flexible-overlay devui-tooltip" style="transform-origin: 50% calc(100% + 8px); top: -6px; left: 0px;"><span>tips text</span><div class="devui-flexible-overlay__arrow" style="bottom: -4px;" /></div>
      49 |       setTimeout(resolve, 500);
      50 |     });
    > 51 |     expect(document.querySelector(ns.b())).toBeFalsy();
         |                                            ^
      52 |     wrapper.unmount();
      53 |   });
      54 |
      at Object.<anonymous> (devui/tooltip/__tests__/tooltip.spec.tsx:51:44)
Test Suites: 1 failed, 85 passed, 86 total
Tests:       1 failed, 1 todo, 510 passed, 512 total
Snapshots:   1 passed, 1 total
kagol commented 2 years ago

d-tooltip 偶现单测报错：

Summary of all failing tests
FAIL devui/tooltip/__tests__/tooltip.spec.tsx
  ● d-tooltip › tooltip hide-after work

    expect(received).toBeTruthy()

    Received: null

      107 |     });
      108 |     const tooltipContent = document.querySelector(ns.b());
    > 109 |     expect(tooltipContent).toBeTruthy();
          |                            ^
      110 |     await btn.trigger('mouseleave');
      111 |     await new Promise((resolve) => {
      112 |       setTimeout(resolve, 100);

      at Object.<anonymous> (devui/tooltip/__tests__/tooltip.spec.tsx:109:28)

  ● d-tooltip › mouse enter enterable

    expect(received).toBeFalsy()

    Received: <div class="devui-flexible-overlay devui-tooltip" style="transform-origin: 50% calc(100% + 8px); top: -6px; left: 0px;"><span>tips text</span><div class="devui-flexible-overlay__arrow" style="bottom: -4px;" /></div>

      [166](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:167) |     tooltip.dispatchEvent(evt);
      [167](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:168) |     await nextTick();
    > [168](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:169) |     expect(document.querySelector(ns.b())).toBeFalsy();
          |                                            ^
      [169](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:170) |
      [170](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:171) |     wrapper.unmount();
      [171](https://github.com/DevCloudFE/vue-devui/runs/7611310212?check_suite_focus=true#step:8:172) |   });

      at Object.<anonymous> (devui/tooltip/__tests__/tooltip.spec.tsx:168:44)

Test Suites: 1 failed, 86 passed, 87 total
Tests:       2 failed, 1 todo, 514 passed, 517 total
Snapshots:   1 passed, 1 total