Test/affix

package.json

@@ -123,7 +123,6 @@
     "@typescript-eslint/parser": "^5.4.0",
     "@typescript-eslint/typescript-estree": "^5.4.0",
     "@vitest/coverage-c8": "^0.24.3",
-    "@vitest/coverage-istanbul": "^0.24.3",
     "@vitest/ui": "^0.24.3",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "@vue/babel-preset-jsx": "^1.2.4",

src/affix/__tests__/index.test.jsx

@@ -1,36 +1,65 @@
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import {
+  beforeEach, expect, it, vi,
+} from 'vitest';
 import { Affix } from '@/src/affix/index.ts';
 
 describe('Affix', () => {
-  test('_______', () => {
-    expect(true).toEqual(true);
-  });
+  vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
 
   describe('Test the state of the container under the window', () => {
+    const offsetTop = 10;
+    const slotWidth = 100;
+    const slotHeight = 20;
+
     const wrapper = mount({
       render() {
         return (
-          <Affix>
-            <div style="width: 100px; height: 20px">hello world</div>
+          <Affix offsetTop={offsetTop}>
+            <div style={{ width: `${slotWidth}px`, height: `${slotHeight}px` }}>hello world</div>
           </Affix>
         );
       },
     }).findComponent(Affix);
+    // 模拟 affixWrap 的位置
+    vi.spyOn(wrapper.vm.$refs.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+      top: 5,
+      width: slotWidth,
+      height: slotHeight,
+    }));
 
     it('Test get container', async () => {
-      setTimeout(() => {
-        expect(wrapper.vm.scrollContainer).toBe(window);
-      }, 0);
+      await nextTick();
+      expect(wrapper.vm.scrollContainer).toBe(window);
     });
 
     it('Test the scrolling state', async () => {
-      await wrapper.setData({ fixedTop: 10 });
-      expect(wrapper.find('.t-affix').selector).toBe('.t-affix');
-      wrapper.destroy();
+      // 模拟滚动触发
+      window.dispatchEvent(new CustomEvent('scroll'));
+      expect(wrapper.find('.t-affix').classes()).toContain('t-affix');
+    });
+
+    it('Test the position in the scroll state', () => {
+      // 模拟滚动触发
+      window.dispatchEvent(new CustomEvent('scroll'));
+      const style = wrapper.find('.t-affix').attributes('style');
+      expect(style).toBe(`top: ${offsetTop}px; width: ${slotWidth}px; height: ${slotHeight}px;`);
+    });
+
+    it('Test the generation of placeholder nodes', () => {
+      // 模拟滚动触发
+      window.dispatchEvent(new CustomEvent('scroll'));
+      expect(wrapper.html()).toContain(`<div style="width: ${slotWidth}px; height: ${slotHeight}px;"></div>`);
     });
   });
 
   describe('Test the specified container', () => {
+    const offsetTop = 10;
+    const slotWidth = 100;
+    const slotHeight = 20;
+    const containerTop = 100;
+
     const wrapper = mount({
       methods: {
         container() {
@@ -40,25 +69,51 @@ describe('Affix', () => {
       render() {
         return (
           <div class="container" ref="container">
-            <Affix container={this.container}>
+            <Affix container={this.container} offsetTop={offsetTop}>
               <div style="width: 100px; height: 20px">hello world</div>
             </Affix>
           </div>
         );
       },
     });
 
+    const affixWrapper = wrapper.findComponent(Affix);
+
     it('Test get container', async () => {
-      setTimeout(() => {
-        const affixWrapper = wrapper.findComponent(Affix);
-        expect(affixWrapper.vm.scrollContainer).toBe(wrapper.vm.container());
-      }, 0);
+      await nextTick();
+      expect(affixWrapper.vm.scrollContainer).toBe(wrapper.vm.container());
+    });
+    // 模拟 affixWrap 的位置
+    beforeEach(() => {
+      vi.spyOn(affixWrapper.vm.$refs.affixWrapRef, 'getBoundingClientRect').mockImplementation(() => ({
+        top: 5,
+        width: slotWidth,
+        height: slotHeight,
+      }));
     });
 
     it('Test the scrolling state', async () => {
-      const affixWrapper = wrapper.findComponent(Affix);
-      await affixWrapper.setData({ fixedTop: 10 });
-      expect(affixWrapper.find('.t-affix').selector).toBe('.t-affix');
+      // 模拟容器滚动
+      wrapper.vm.container().dispatchEvent(new CustomEvent('scroll'));
+      expect(affixWrapper.find('.t-affix').classes()).toContain('t-affix');
+    });
+
+    beforeEach(() => {
+      // 模拟绑定
+      window.addEventListener('scroll', affixWrapper.vm.handleScroll);
+      // 模拟容器的位置
+      // console.log('scrollContainer', wrapper.vm);
+      vi.spyOn(affixWrapper.vm.scrollContainer, 'getBoundingClientRect').mockImplementation(() => ({
+        top: containerTop,
+      }));
     });
+
+    // it('Test the positioning after opening the binding window sliding event', () => {
+    //   // 模拟滚动触发
+    //   window.dispatchEvent(new CustomEvent('scroll'));
+
+    //   const style = wrapper.find('.t-affix').attributes('style');
+    //   expect(style).toBe(`top: ${offsetTop + containerTop}px; width: ${slotWidth}px; height: ${slotHeight}px;`);
+    // });
   });
 });

src/alert/__tests__/index.test.jsx

@@ -0,0 +1,195 @@
+import { mount } from '@vue/test-utils';
+import {
+  describe, expect, it, vi,
+} from 'vitest';
+import {
+  CloseIcon,
+  AppIcon,
+  CheckCircleFilledIcon,
+  ErrorCircleFilledIcon,
+  InfoCircleFilledIcon,
+} from 'tdesign-icons-vue';
+import { nextTick } from 'vue';
+import { Alert } from '@/src/alert/index.ts';
+
+describe('Alert', () => {
+  describe(':props', () => {
+    it(':default', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert>text</Alert>;
+        },
+      });
+      expect(wrapper.find('.t-alert__description').text()).toBe('text');
+    });
+
+    it(':close', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert close>text</Alert>;
+        },
+      });
+      const close = wrapper.find('.t-alert__close');
+      expect(close.exists()).toBeTruthy();
+      expect(wrapper.findComponent(CloseIcon).exists()).toBeTruthy();
+    });
+
+    it(':icon', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Alert
+              {...{
+                scopedSlots: {
+                  icon: () => <AppIcon />,
+                },
+              }}
+            >
+              text
+            </Alert>
+          );
+        },
+      });
+      const icon = wrapper.find('.t-alert__icon');
+      expect(icon.exists()).toBeTruthy();
+      expect(wrapper.findComponent(AppIcon).exists()).toBeTruthy();
+    });
+
+    it(':message', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert message="this is message"></Alert>;
+        },
+      });
+      const description = wrapper.find('.t-alert__message .t-alert__description');
+      expect(description.exists()).toBeTruthy();
+      expect(description.text()).toBe('this is message');
+    });
+
+    it(':title', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert title="this is title">text</Alert>;
+        },
+      });
+      const title = wrapper.find('.t-alert__title');
+      expect(title.exists()).toBeTruthy();
+      expect(title.text()).toBe('this is title');
+    });
+
+    it(':operation', () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Alert
+              {...{
+                scopedSlots: {
+                  operation: () => <span>this is operation</span>,
+                },
+              }}
+            >
+              text
+            </Alert>
+          );
+        },
+      });
+      const operation = wrapper.find('.t-alert__operation');
+      expect(operation.exists()).toBeTruthy();
+      expect(operation.text()).toBe('this is operation');
+    });
+
+    it(':theme:info', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert theme="info" message="text" />;
+        },
+      });
+      const alert = wrapper.find('.t-alert');
+      const icon = wrapper.find('.t-alert__icon');
+      expect(icon.findComponent(InfoCircleFilledIcon).exists()).toBeTruthy();
+      expect(alert.classes()).toContain('t-alert--info');
+    });
+
+    it(':theme:success', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert theme="success" message="text" />;
+        },
+      });
+      const alert = wrapper.find('.t-alert');
+      const icon = wrapper.find('.t-alert__icon');
+      expect(icon.findComponent(CheckCircleFilledIcon).exists()).toBeTruthy();
+      expect(alert.classes()).toContain('t-alert--success');
+    });
+
+    it(':theme:warning', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert theme="warning" message="text" />;
+        },
+      });
+      const alert = wrapper.find('.t-alert');
+      const icon = wrapper.find('.t-alert__icon');
+      expect(icon.findComponent(ErrorCircleFilledIcon).exists()).toBeTruthy();
+      expect(alert.classes()).toContain('t-alert--warning');
+    });
+
+    it(':theme:error', () => {
+      const wrapper = mount({
+        render() {
+          return <Alert theme="error" message="text" />;
+        },
+      });
+      const alert = wrapper.find('.t-alert');
+      const icon = wrapper.find('.t-alert__icon');
+      expect(icon.findComponent(ErrorCircleFilledIcon).exists()).toBeTruthy();
+      expect(alert.classes()).toContain('t-alert--error');
+    });
+
+    it(':maxLine', async () => {
+      const wrapper = mount({
+        render() {
+          return (
+            <Alert title="this is title" maxLine={2}>
+              <span>这是折叠的第一条消息</span>
+              <span>这是折叠的第二条消息</span>
+              <span>这是折叠的第三条消息</span>
+              <span>这是折叠的第四条消息</span>
+              <span>这是折叠的第五条消息</span>
+              <span>这是折叠的第六条消息</span>
+            </Alert>
+          );
+        },
+      });
+      const description = wrapper.find('.t-alert__description');
+      const collapse = description.find('.t-alert__collapse');
+      expect(description.element.children.length).toBe(3);
+      expect(collapse.exists()).toBeTruthy();
+      expect(collapse.text()).toBe('展开更多');
+      await collapse.trigger('click');
+      expect(description.element.children.length).toBe(7);
+      expect(collapse.text()).toBe('收起');
+    });
+  });
+
+  describe(':event', () => {
+    it(':onClose', async () => {
+      const fn = vi.fn();
+      const wrapper = mount({
+        render() {
+          return (
+            <Alert close onClose={fn}>
+              text
+            </Alert>
+          );
+        },
+      });
+      const alert = wrapper.find('.t-alert');
+      const close = wrapper.find('.t-alert__close');
+      await close.trigger('click');
+      await nextTick();
+      expect(fn).toBeCalled();
+      expect(alert.classes()).toContain('t-alert--closing');
+    });
+  });
+});