Merge pull request #792 from isanxia/test/steps

test(steps): add unit test

src/steps/__test__/index.js

@@ -0,0 +1,38 @@
+Component({
+  data: {
+    current1: 0,
+    current2: 0,
+    layout: 'horizontal',
+    readonly: false,
+    theme: 'default',
+    currentSub: '1-0',
+    subStepItems1: [
+      {
+        title: '二级步骤描述',
+        status: 'process',
+      },
+      {
+        title: '二级步骤描述',
+        status: 'finish',
+      },
+    ],
+    subStepItems2: [
+      {
+        title: '二级步骤描述',
+        status: 'process',
+      },
+      {
+        title: '二级步骤描述',
+        status: 'error',
+      },
+    ],
+  },
+  methods: {
+    onChange1(e) {
+      this.setData({ current1: e.detail.current });
+    },
+    onChange2(e) {
+      this.setData({ current2: e.detail.current });
+    },
+  },
+});

src/steps/__test__/index.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "t-steps": "../steps",
+    "t-step-item": "../step-item"
+  }
+}

src/steps/__test__/index.test.js

@@ -0,0 +1,127 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+describe('Steps', () => {
+  let comp;
+
+  beforeAll(() => {
+    const Index = simulate.load(path.resolve(__dirname, `./index`), {
+      less: true,
+    });
+    comp = simulate.render(Index);
+    comp.attach(document.body);
+  });
+
+  it(': default-current', async () => {
+    const items = comp.querySelectorAll('.a1 >>> .item');
+    ['process', 'default'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+    ['process', 'default'].forEach((it, index) => {
+      expect(items[index].querySelector('.t-steps-item').dom.classList).toContain(`t-step--t-steps-item--${it}`);
+    });
+
+    const icon = items[1].querySelector('.t-steps-item__icon');
+    icon.dispatchEvent('tap');
+    await simulate.sleep(5);
+
+    ['finish', 'process'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+
+    const items2 = comp.querySelectorAll('.a2 >>> .item');
+    ['finish', 'process'].forEach((it, index) => {
+      expect(items2[index].data.curStatus).toBe(it);
+    });
+    ['finish', 'process'].forEach((it, index) => {
+      expect(items2[index].querySelector('.t-steps-item').dom.classList).toContain(`t-step--t-steps-item--${it}`);
+    });
+  });
+
+  it(': layout', async () => {
+    const root = comp.querySelector('.a1 >>> .t-steps');
+
+    expect(root.dom.classList).toContain('t-steps--t-steps--horizontal');
+
+    comp.setData({ layout: 'vertical' });
+
+    expect(root.dom.classList).toContain('t-steps--t-steps--vertical');
+  });
+
+  it(': theme', async () => {
+    const item = comp.querySelector('.a2 >>> .item >>> .t-step');
+
+    expect(item.dom.classList).toContain('t-step--t-step--dot-anchor');
+  });
+
+  it(': current', async () => {
+    const items = comp.querySelectorAll('.b >>> .item');
+    ['process', 'default'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+
+    const icon = items[1].querySelector('.t-steps-item__icon');
+    icon.dispatchEvent('tap');
+    await simulate.sleep(5);
+
+    ['finish', 'process'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+  });
+
+  it(': current-status', async () => {
+    const items = comp.querySelectorAll('.c >>> .item');
+    ['error', 'default'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+
+    const icon = items[1].querySelector('.t-steps-item__icon');
+    icon.dispatchEvent('tap');
+    await simulate.sleep(5);
+
+    ['finish', 'error'].forEach((it, index) => {
+      expect(items[index].data.curStatus).toBe(it);
+    });
+  });
+
+  it(': readonly', async () => {
+    const mockFn = jest.fn();
+    const root = comp.querySelector('.d');
+    root.addEventListener('change', mockFn);
+
+    const items = comp.querySelectorAll('.d >>> .item');
+    const icon = items[1].querySelector('.t-steps-item__icon');
+    icon.dispatchEvent('tap');
+    await simulate.sleep(5);
+
+    expect(mockFn).toHaveBeenCalled();
+
+    comp.setData({ readonly: true });
+    icon.dispatchEvent('tap');
+    await simulate.sleep(5);
+
+    expect(comp.querySelector('.d >>> .t-steps').dom.classList).toContain('t-steps--t-steps--readonly');
+    expect(mockFn).toHaveBeenCalledTimes(1);
+  });
+
+  it(': sub-step-items(step-item)', async () => {
+    const subs1 = comp.querySelectorAll('.e1 >>> .item >>> .t-steps-item-sub');
+
+    expect(subs1.length).toBe(2);
+    ['process', 'finish'].forEach((it, index) => {
+      expect(subs1[index].dom.classList).toContain(`t-step--t-steps-item-sub-status--${it}`);
+    });
+
+    const subs2 = comp.querySelectorAll('.e2 >>> .item >>> .t-steps-item-sub');
+
+    ['process', 'error'].forEach((it, index) => {
+      expect(subs2[index].dom.classList).toContain(`t-step--t-steps-item-sub-status--${it}`);
+    });
+  });
+
+  it(': status(step-item)', async () => {
+    const item = comp.querySelector('.f >>> .item >>> .t-steps-item');
+
+    expect(item.dom.classList).toContain('t-step--t-steps-item--error');
+  });
+});

src/steps/__test__/index.wxml

@@ -0,0 +1,38 @@
+<t-steps class="a1" default-current="0" layout="{{layout}}">
+  <t-step-item class="item" title="步骤1"></t-step-item>
+  <t-step-item class="item" title="步骤2"></t-step-item>
+</t-steps>
+
+<t-steps class="a2" default-current="1" theme="dot">
+  <t-step-item class="item" title="步骤1"></t-step-item>
+  <t-step-item class="item" title="步骤2"></t-step-item>
+</t-steps>
+
+<t-steps class="b" current="{{current1}}" bind:change="onChange1">
+  <t-step-item class="item" title="步骤1"></t-step-item>
+  <t-step-item class="item" title="步骤2"></t-step-item>
+</t-steps>
+
+<t-steps class="c" current="{{current2}}" current-status="error" bind:change="onChange2">
+  <t-step-item class="item" title="步骤1"></t-step-item>
+  <t-step-item class="item" title="步骤2"></t-step-item>
+</t-steps>
+
+<t-steps class="d" readonly="{{readonly}}">
+  <t-step-item class="item" title="步骤1"></t-step-item>
+  <t-step-item class="item" title="步骤2"></t-step-item>
+</t-steps>
+
+<t-steps class="e1" current="0-1" readonly="true" layout="vertical">
+  <t-step-item class="item" title="步骤1" subStepItems="{{subStepItems1}}" />
+  <t-step-item class="item" title="步骤2" />
+</t-steps>
+
+<t-steps class="e2" current="0-1" readonly="true" layout="vertical">
+  <t-step-item class="item" title="步骤1" subStepItems="{{subStepItems2}}" />
+  <t-step-item class="item" title="步骤2" />
+</t-steps>
+
+<t-steps class="f" current="0">
+  <t-step-item class="item" title="步骤" status="error" />
+</t-steps>