diff --git a/devui/card/__tests__/card.spec.ts b/devui/card/__tests__/card.spec.ts
index b70b4692396b63e7b511fbcbf5e35d9fe5e3d8d6..f5bc5531001f129e889dd77e3c13d17dacaddf12 100644
--- a/devui/card/__tests__/card.spec.ts
+++ b/devui/card/__tests__/card.spec.ts
@@ -1,165 +1,194 @@
 import { mount } from '@vue/test-utils';
-import { ref } from 'vue';
 import DCard from '../src/card';
 import DAvatar from '../../avatar/src/avatar';
 
-describe('Card', () => {
-    it('render', async () => {
-        const wrapper = mount({
-          components: {
-            DCard,
-            DAvatar
-          },
-          template: `
-            <d-card class="d-card">
-              <template #cardAvatar>
-                <d-avatar name="DevUI"></d-avatar>
-              </template>
-              <template #cardTitle>
-                DEVUI Course
-              </template>
-              <template #cardSubtitle>
-                DevUI
-              </template>
-              <template #cardContent>
-                DEVUI
-              </template>
-              <template #cardActions>
-                <div class="card-block">
-                  btn
-                </div>
-              </template>
-            </d-card>
-          `,
-          
-        });
-    
-        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
-        expect(avatar.classes()).toContain('devui-avatar');
-        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
-        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
-        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
-        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
-        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
-        expect(wrapper.find('.card-block').text()).toBe('btn')
+describe('card', () => {
+  it('should render correctly', async () => {
+    const wrapper = mount(DCard);
+    expect(wrapper.element).toMatchSnapshot()
+  })
+  it('should render correctly avatar', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+        DAvatar
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardAvatar>
+            <d-avatar name="DevUI"></d-avatar>
+          </template>
+        </d-card>
+      `,
     });
-    it('v-slot:', async () => {
-        const wrapper = mount({
-          components: {
-            DCard,
-            DAvatar
-          },
-          template: `
-            <d-card class="d-card">
-              <template v-slot:cardAvatar>
-                <d-avatar name="DevUI"></d-avatar>
-              </template>
-              <template v-slot:cardTitle>
-                DEVUI Course
-              </template>
-              <template v-slot:cardSubtitle>
-                DevUI
-              </template>
-              <template v-slot:cardContent>
-                DEVUI
-              </template>
-              <template v-slot:cardActions>
-                <div class="card-block">
-                  btn
-                </div>
-              </template>
-            </d-card>
-          `,
-          
-        });
-    
-        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
-        expect(avatar.classes()).toContain('devui-avatar');
-        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
-        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
-        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
-        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
-        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
-        expect(wrapper.find('.card-block').text()).toBe('btn')
+    const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+    expect(avatar.classes()).toContain('devui-avatar');
+  })
+  it('in v-slot mode should render correctly avatar', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+        DAvatar
+      },
+      template: `
+        <d-card class="d-card">
+          <template v-slot:cardAvatar>
+            <d-avatar name="DevUI"></d-avatar>
+          </template>
+        </d-card>
+      `,
     });
-    it('src', async () => {
-        const wrapper = mount({
-          components: {
-            DCard,
-            DAvatar
-          },
-          template: `
-            <d-card class="d-card" :src="'https://devui.design/components/assets/image1.png'">
-              <template #cardAvatar>
-                <d-avatar name="DevUI"></d-avatar>
-              </template>
-              <template #cardTitle>
-                DEVUI Course
-              </template>
-              <template #cardSubtitle>
-                DevUI
-              </template>
-              <template #cardContent>
-                DEVUI
-              </template>
-              <template #cardActions>
-                <div class="card-block">
-                  btn
-                </div>
-              </template>
-            </d-card>
-          `,
-          
-        });
-    
-        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
-        expect(avatar.classes()).toContain('devui-avatar');
-        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
-        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
-        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
-        expect(wrapper.find('.devui-card-meta').attributes('src').includes('https://devui.design/components/assets/image1.png')).toBeTruthy();
-        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
-        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
-        expect(wrapper.find('.card-block').text()).toBe('btn')
+    const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
+    expect(avatar.classes()).toContain('devui-avatar');
+  })
+  it('should render correctly title', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardTitle>
+            DevUI
+          </template>
+        </d-card>
+      `,
     });
-    it('src', async () => {
-        const wrapper = mount({
-          components: {
-            DCard,
-            DAvatar
-          },
-          template: `
-            <d-card class="d-card" :align="'spaceBetween'">
-              <template #cardAvatar>
-                <d-avatar name="DevUI"></d-avatar>
-              </template>
-              <template #cardTitle>
-                DEVUI Course
-              </template>
-              <template #cardSubtitle>
-                DevUI
-              </template>
-              <template #cardContent>
-                DEVUI
-              </template>
-              <template #cardActions>
-                <div class="card-block">
-                  btn
-                </div>
-              </template>
-            </d-card>
-          `,
-          
-        });
-    
-        expect(wrapper.find('.devui-card-actions-align-spaceBetween').exists()).toBeTruthy();
-        const avatar = wrapper.findAllComponents({ name: 'dAvatar' })[0];
-        expect(avatar.classes()).toContain('devui-avatar');
-        expect(avatar.find('.devui-avatar-style').text()).toBe('DE')
-        expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
-        expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
-        expect(wrapper.find('.devui-card-content').text()).toBe('DEVUI')
-        expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
-        expect(wrapper.find('.card-block').text()).toBe('btn')
+    expect(wrapper.find('.devui-card-title').text()).toBe('DevUI')
+  })
+  it('in v-slot mode should render title', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template v-slot:cardTitle>
+            DEVUI Course
+          </template>
+        </d-card>
+      `,
     });
+    expect(wrapper.find('.devui-card-title').text()).toBe('DEVUI Course')
+  })
+  it('should render correctly subtitle', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardSubtitle>
+            DevUI
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+  })
+  it('in v-slot mode should render subtitle', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template v-slot:cardSubtitle>
+            DevUI
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-subtitle').text()).toBe('DevUI')
+  })
+  it('should render correctly content', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardContent>
+            DevUI
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-content').text()).toBe('DevUI')
+  })
+  it('in v-slot mode should render content', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template v-slot:cardContent>
+            DevUI
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-content').text()).toBe('DevUI')
+  })
+  it('should render correctly actions', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardActions>
+            <div class="card-block">
+              btn
+            </div>
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+    expect(wrapper.find('.card-block').text()).toBe('btn')
+  })
+  it('in v-slot mode should render actions', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card">
+          <template #cardActions>
+            <div class="card-block">
+              btn
+            </div>
+          </template>
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-actions').exists()).toBeTruthy();
+    expect(wrapper.find('.card-block').text()).toBe('btn')
+  })
+  it('should render correctly image', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card" :src="'https://devui.design/components/assets/image1.png'">
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-meta').attributes('src').includes('https://devui.design/components/assets/image1.png')).toBeTruthy();
+  })
+  it('should render correctly align', async () => {
+    const wrapper = mount({
+      components: {
+        DCard,
+      },
+      template: `
+        <d-card class="d-card" :align="'spaceBetween'">
+        </d-card>
+      `,
+    });
+    expect(wrapper.find('.devui-card-actions-align-spaceBetween').exists()).toBeTruthy();
+  })
 })
\ No newline at end of file