From 43ddb8ccd9efad0fff38ef3fe8dbba5769a015ac Mon Sep 17 00:00:00 2001
From: Chrislee <42894579+ChrisLee0211@users.noreply.github.com>
Date: Sat, 24 Sep 2022 22:08:24 +0800
Subject: [PATCH] Fix/switch unit test (#1729)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* test(unit): add switch unit test

* feat(switch): 新增switch逻辑层单元测试

* test(unit): add prop loading unit test for switch

* test(unit): 修正单元描述错误

* test(unit): 恢复example文件
---
 src/switch/__tests__/base.test.jsx     | 140 +++++++++++++++++++++++++
 src/switch/__tests__/behavior.test.jsx |  65 ++++++++++++
 2 files changed, 205 insertions(+)
 create mode 100644 src/switch/__tests__/base.test.jsx
 create mode 100644 src/switch/__tests__/behavior.test.jsx

diff --git a/src/switch/__tests__/base.test.jsx b/src/switch/__tests__/base.test.jsx
new file mode 100644
index 0000000000..ec35547d3f
--- /dev/null
+++ b/src/switch/__tests__/base.test.jsx
@@ -0,0 +1,140 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { describe, expect, it } from 'vitest';
+import Switch from '@/src/switch/index.ts';
+
+describe('switch', () => {
+  describe('ui render test', () => {
+    // test prop disabled
+    describe(':props.disabled', () => {
+      it('disabled default value is false', () => {
+        const wrapper = mount(Switch);
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-disabled')).toBe(false);
+      });
+      it('disabled={true} works fine', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch disabled />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-disabled')).toBe(true);
+      });
+    });
+
+    // test props label
+    describe(':props.label', () => {
+      it('label default value is empty', () => {
+        const wrapper = mount(Switch);
+        const contentEle = wrapper.find('.t-switch__content');
+        const text = contentEle.element.textContent;
+        expect(!text).toBe(true);
+      });
+      it('label={Array<string>} works find', () => {
+        const label = ['open', 'close'];
+        const wrapper = mount({
+          render() {
+            return <Switch disabled label={label} />;
+          },
+        });
+        const contentEle = wrapper.find('.t-switch__content');
+        const text = contentEle.element.innerHTML;
+        expect(text === label[1]).toBe(true);
+      });
+      it('label={Array<TNode>} works find', () => {
+        const TnodeOpen = () => <span id="switch_open">open</span>;
+        const TnodeClose = () => <span id="switch_close">close</span>;
+        const label = [TnodeOpen, TnodeClose];
+        const wrapper = mount({
+          render() {
+            return <Switch disabled label={label} />;
+          },
+        });
+        const contentEle = wrapper.find('.t-switch__content');
+        const text = contentEle.find('#switch_close').element.innerHTML;
+        expect(text === 'close').toBe(true);
+      });
+      it('label={TNode<value>} works find', () => {
+        const label = (val) => (val ? <span id="switch_open">open</span> : <span id="switch_close">close</span>);
+        const wrapper = mount({
+          render() {
+            return <Switch disabled label={label} />;
+          },
+        });
+        const contentEle = wrapper.find('.t-switch__content');
+        const text = contentEle.find('#switch_open').element.innerHTML;
+        expect(text === 'open').toBe(true);
+      });
+    });
+    // test props defaultValue
+    describe(':props.defaultValue', () => {
+      it('defaultValue is false', () => {
+        const wrapper = mount(Switch);
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-checked')).toBeFalsy();
+      });
+      it('defaultValue={true} works find', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch defaultValue={true} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-checked')).toBe(true);
+      });
+    });
+    // test props loading
+    describe(':props.loading', () => {
+      it('loading default value is false', () => {
+        const wrapper = mount(Switch);
+        const ele = wrapper.find('.t-switch');
+        const loadingEle = ele.find('.t-is-loading');
+        expect(loadingEle.exists() === false).toBe(true);
+      });
+      it('loading={true} works find', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch loading={true} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const loadingEle = ele.find('.t-is-loading');
+        expect(loadingEle.exists() === true).toBe(true);
+      });
+    });
+    // test props size
+    describe(':props.size', () => {
+      it('size default value is medium', () => {
+        const wrapper = mount(Switch);
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-size-m')).toBe(true);
+      });
+      it('size={large} works find', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch size={'large'} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-size-l')).toBe(true);
+      });
+      it('size={small} works find', () => {
+        const wrapper = mount({
+          render() {
+            return <Switch size={'small'} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-size-s')).toBe(true);
+      });
+    });
+  });
+});
diff --git a/src/switch/__tests__/behavior.test.jsx b/src/switch/__tests__/behavior.test.jsx
new file mode 100644
index 0000000000..4b8398644d
--- /dev/null
+++ b/src/switch/__tests__/behavior.test.jsx
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import Switch from '@/src/switch/index.ts';
+
+describe('switch', () => {
+  describe('behavior test', () => {
+    describe('behavior for props.disabled', () => {
+      it('disabled={true} can forbbid onChange event', async () => {
+        const defaultValue = false;
+        const wrapper = mount({
+          render() {
+            return <Switch disabled defaultValue={defaultValue} />;
+          },
+        });
+        await wrapper.trigger('click');
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-checked')).toBeFalsy();
+      });
+    });
+    describe('behavior for props.customValue', () => {
+      it('prop customValue works fine with defaultValue', () => {
+        const defaultValue = 1;
+        const customValue = [1, 2];
+        const wrapper = mount({
+          render() {
+            return <Switch customValue={customValue} defaultValue={defaultValue} />;
+          },
+        });
+        const ele = wrapper.find('.t-switch');
+        const eleCls = ele.classes();
+        expect(eleCls.includes('t-is-checked')).toBe(true);
+      });
+      it('prop customValue works fine with onChange event', async () => {
+        let onChangeEventCallbackValue;
+        const customValue = ['a', 'b'];
+        const onChangeFn = (val) => {
+          onChangeEventCallbackValue = val;
+        };
+        const wrapper = mount({
+          render() {
+            return <Switch customValue={customValue} defaultValue={'a'} onChange={onChangeFn} />;
+          },
+        });
+        await wrapper.trigger('click');
+        expect(customValue.includes(onChangeEventCallbackValue)).toBe(true);
+      });
+    });
+    describe('behavior for props.loading', () => {
+      it('loading={true} can forbbid onChange event', async () => {
+        let isChangeEventTrigger = false;
+        const onChangeFn = (val) => {
+          isChangeEventTrigger = true;
+        };
+        const wrapper = mount({
+          render() {
+            return <Switch loading={true} onChange={onChangeFn} />;
+          },
+        });
+        await wrapper.trigger('click');
+        expect(isChangeEventTrigger === false).toBe(true);
+      });
+    });
+  });
+});