test: unit test for button control

playground/src/pages/buttons.vue

@@ -16,13 +16,12 @@ const gl = {
 }
 useControls({
   reset: {
-    label: 'Reset',
     type: 'button',
     onClick: () => {
       console.log('Reset')
     },
     icon: 'i-carbon-reset',
-    size: 'block',
+    size: 'sm',
   },
   accept: {
     label: 'Accept',

src/components/ButtonControl.test.ts

@@ -0,0 +1,105 @@
+import { mount,  } from '@vue/test-utils'
+import { TresLeches, useControls } from '/@/'
+import { it, expect, describe } from 'vitest'
+import { defineComponent, nextTick, ref } from 'vue'
+import ButtonControl from './ButtonControl.vue'
+
+describe('Button Controls', () => {
+  let wrapper;
+  let component;
+  const mountComponent = (setup) => {
+    component = defineComponent({
+      template: `<TresLeches />`,
+      components: { TresLeches, ButtonControl },
+      setup,
+    });
+
+    wrapper = mount(component, {
+      components: { TresLeches, ButtonControl },
+    });
+  };
+
+  it('should render a button', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').exists()).toBe(true)
+  })
+
+  it('should render a button with a label', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').text()).toBe('Accept')
+  })
+
+  it('should render a clickable button', async () => {
+    mountComponent(() => {
+      const isClicked = ref(false)
+      useControls({acceptBtn: { type: 'button', label: 'Accept', onClick: () => { isClicked.value = true } }});
+      return { isClicked }
+    });
+
+    const button = wrapper.find('button')
+    await button.trigger('click')
+    expect(wrapper.vm.isClicked).toBe(true)
+  })
+
+  it('should render an icon on the button', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept', icon: 'i-carbon-checkmark' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('i.i-carbon-checkmark').exists()).toBe(true)
+  })
+
+  it('should render a small button', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept', size: 'sm' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').classes()).toContain('leches-btn-sm')
+  })
+
+  it('should render a large button', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept', size: 'lg' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').classes()).toContain('leches-btn-lg')
+  })
+
+  it('should render a block size button', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept', size: 'block' }});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').classes()).toContain('leches-btn-block')
+  })
+
+  it('should render a primary button variant by default', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept'}});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').classes()).toContain('leches-btn-primary')
+  })
+
+  it('should render a secondary button variant', () => {
+    mountComponent(() => {
+      useControls({acceptBtn: { type: 'button', label: 'Accept', variant: 'secondary'}});
+      return
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.find('button').classes()).toContain('leches-btn-secondary')
+  })
+})

src/components/ButtonControl.vue

@@ -21,10 +21,9 @@ const classes = computed(() => {
     @click="control.value.onClick"
   >
     <i
-      class="mr-2"
-      :class="control.value.icon"
+      :class="[control.value.icon, control.value.label ? 'mr-1' : '']"
     />
-    {{ control.label }}
+    {{ control.value.label }}
   </button>
 </template>
 

src/components/__snapshots__/ButtonControl.test.ts.snap

@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button Controls > should render a block size button 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-block\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a button 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a button with a label 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a large button 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-lg\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a primary button variant by default 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a secondary button variant 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-secondary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render a small button 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;
+
+exports[`Button Controls > should render an icon on the button 1`] = `
+"<div style=\\"left: 704px; top: 10px;\\" class=\\"absolute select-none z-24 w-280px font-sans text-xs\\">
+  <div tabindex=\\"0\\" class=\\"bg-white shadow-xl rounded border-4 border-solid border-black\\">
+    <header class=\\"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative\\"><i class=\\"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs\\">🍰</i>
+      <div><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i><i class=\\"i-ic-baseline-drag-indicator\\"></i></div>
+      <div></div>
+    </header>
+    <!--v-if-->
+    <div class=\\"p-2 inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"i-carbon-checkmark mr-1\\"></i> Accept</button></div>
+  </div>
+</div>"
+`;