第一步來新增測試檔案。

src\components\slider-stubborn\slider-stubborn.spec.ts

import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';

import SliderStubborn from './slider-stubborn.vue';

test('測試案例', () => {
  const wrapper = mount(SliderStubborn);
  expect(wrapper).toBeDefined();
})

新增測試案例

讓我們依序新增各種測試案例吧。∠( ᐛ 」∠)_

import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';

import SliderStubborn from './slider-stubborn.vue';

test('測試 aria 參數是否有作用', async () => {
  const props = {
    min: 0,
    max: 100,
    modelValue: 50,
  }

  const wrapper = mount(SliderStubborn, {
    props,
  });
  expect(wrapper).toBeDefined();

  // 取得 role 為 slider 的元素
  const slider = wrapper.find('[role="slider"]');

  expect(slider.attributes('aria-valuemin')).toBe(`${props.min}`);
  expect(slider.attributes('aria-valuemax')).toBe(`${props.max}`);
  expect(slider.attributes('aria-valuenow')).toBe(`${props.modelValue}`);
})

test('可以 disabled 滑動條', async () => {
  const wrapper = mount(SliderStubborn);
  expect(wrapper).toBeDefined();

  // 取得 role 為 slider 的元素
  const slider = wrapper.find('[role="slider"]');
  expect(slider.attributes('aria-disabled')).toBe(`false`);

  await wrapper.setProps({ disabled: true });

  expect(slider.attributes('aria-disabled')).toBe(`true`);
})

test('可以客製化 track', async () => {
  const trackClass = 'custom-track';

  const wrapper = mount(SliderStubborn, {
    props: {
      modelValue: 50,
      trackClass,
    }
  });
  expect(wrapper).toBeDefined();

  // 取得 role 為 slider 的元素
  const track = wrapper.find(`[role="slider"] > .${trackClass}`);
  expect(track).toBeDefined();
})

順利通過！✧*｡٩(ˊᗜˋ*)و✧*｡

 ✓ src/components/slider-stubborn/slider-stubborn.spec.ts (3)
   ✓ 測試 aria 參數是否有作用
   ✓ 可以 disabled 滑動條
   ✓ 可以客製化 track

 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  21:50:34
   Duration  983ms

@vue/test-utils 的模擬環境能測試的內容有限，剩下的複雜互動讓我們留到 e2e 測試，在瀏覽器環境中完整的測試測試吧！( ‧ω‧)ノ╰(‧ω‧ )

總結

• 完成「固執的滑動條」基本單元測試

以上程式碼已同步至 GitLab，大家可以前往下載：

GitLab - D25