From 30381f6d342bf13f59095075149605a2dd43951e Mon Sep 17 00:00:00 2001
From: yusikerem <kerem.yky@gmail.com>
Date: Thu, 19 Oct 2023 20:24:56 +0300
Subject: [PATCH 1/2] test(luibutton): add tests for LuiButton, not includes
 some class tests

---
 src/components/Button/LuiButton.vue           |   9 +-
 .../Button/__test__/LuiButton.spec.ts         | 484 ++++++++++++++++++
 .../__snapshots__/LuiButton.spec.ts.snap      |  15 +
 3 files changed, 504 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Button/__test__/LuiButton.spec.ts
 create mode 100644 src/components/Button/__test__/__snapshots__/LuiButton.spec.ts.snap

diff --git a/src/components/Button/LuiButton.vue b/src/components/Button/LuiButton.vue
index 8167295b..784cfe45 100644
--- a/src/components/Button/LuiButton.vue
+++ b/src/components/Button/LuiButton.vue
@@ -86,19 +86,20 @@ function dynamicSlotClasses() {
 <template>
   <component
     :is="tag"
+    data-testid="lui-button"
     v-bind="$attrs"
     :class="[buttonClasses, dynamicSlotClasses()]"
     class="lui-button"
   >
-    <span v-if="!!slots.icon" :class="computedIconSize" class="leading-none flex items-center">
+    <span v-if="!!slots.icon" data-testid="lui-button-icon" :class="computedIconSize" class="leading-none flex items-center">
       <slot name="icon" />
     </span>
     <template v-else>
-      <span v-if="!!slots.prepend" :class="computedIconSize" class="leading-none flex items-center">
+      <span v-if="!!slots.prepend" data-testid="lui-button-icon-prepend" :class="computedIconSize" class="leading-none flex items-center">
         <slot name="prepend" />
       </span>
-      <span><slot /></span>
-      <span v-if="!!slots.append" :class="computedIconSize" class="leading-none flex items-center">
+      <span data-testid="lui-button-icon-text"><slot /></span>
+      <span v-if="!!slots.append" data-testid="lui-button-icon-append" :class="computedIconSize" class="leading-none flex items-center">
         <slot name="append" />
       </span>
     </template>
diff --git a/src/components/Button/__test__/LuiButton.spec.ts b/src/components/Button/__test__/LuiButton.spec.ts
new file mode 100644
index 00000000..d1e4efc0
--- /dev/null
+++ b/src/components/Button/__test__/LuiButton.spec.ts
@@ -0,0 +1,484 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import LuiButton from '../LuiButton.vue'
+
+// function getFilteredColor(filter: string): string {
+//   const filterMap: Record<string, string> = {
+//     none: '500',
+//     lighten: '100',
+//     darken: '800',
+//   }
+
+//   // Return the corresponding color suffix, defaulting to "500" for unknown filters
+//   return filterMap[filter] || '500'
+// }
+
+describe('Default LuiButton', () => {
+  const expectedDefaultProps = {
+    tag: 'button',
+    variant: 'solid',
+    color: 'primary',
+    filter: 'none',
+    size: 'md',
+    rounded: false,
+    block: false,
+  }
+  let wrapper: VueWrapper<any>
+  beforeEach(() => {
+    wrapper = mount(LuiButton as any)
+  })
+  afterEach(() => {
+    wrapper.unmount()
+  })
+  it('renders properly based on default props', () => {
+    // Check if the component exists
+    expect(wrapper.exists()).toBe(true)
+
+    // Check if the rendered HTML matches the expected HTML
+    expect(wrapper.html()).toMatchSnapshot()
+
+    // Check if the default props given correctly
+    expect(wrapper.props()).toEqual(expectedDefaultProps)
+  })
+})
+describe('Disabled property', () => {
+  let wrapper: VueWrapper<any>
+  beforeEach(() => {
+    wrapper = mount(LuiButton as any)
+  })
+  afterEach(() => {
+    wrapper.unmount()
+  })
+  it('disables when disabled prop given', async () => {
+    await wrapper.setProps({ disabled: true })
+    expect(
+      wrapper.find('[data-testid=\'lui-button\']').attributes(),
+    ).toHaveProperty('disabled')
+  })
+  it('does not have disabled property when disabled prop is false', async () => {
+    await wrapper.setProps({ disabled: false })
+    expect(
+      wrapper.find('[data-testid=\'lui-button\']').attributes(),
+    ).not.toHaveProperty('disabled')
+  })
+})
+
+// it('renders properly based on the variant prop', () => {
+//   const solidWrapper = mount(LuiButton as any, {
+//     attrs: {
+//       variant: 'solid',
+//     },
+//   })
+//   const outlineWrapper = mount(LuiButton as any, {
+//     attrs: {
+//       variant: 'outline',
+//     },
+//   })
+//   const textWrapper = mount(LuiButton as any, {
+//     attrs: {
+//       variant: 'text',
+//     },
+//   })
+//   const linkWrapper = mount(LuiButton as any, {
+//     attrs: {
+//       variant: 'link',
+//     },
+//   })
+//   const variants = {
+//     solid: {
+//       expectedClasses: {
+//         contains: [
+//           `bg-${solidWrapper.props().color}-${getFilteredColor(
+//             solidWrapper.props().filter,
+//           )}`,
+//           `border-${outlineWrapper.props().color}-${getFilteredColor(
+//             outlineWrapper.props().filter,
+//           )}`,
+//           'text-white',
+//         ],
+//         notContains: [],
+//       },
+//     },
+//     outline: {
+//       expectedClasses: {
+//         contains: [
+//           `text-${outlineWrapper.props().color}-${getFilteredColor(
+//             outlineWrapper.props().filter,
+//           )}`,
+//           `border-${outlineWrapper.props().color}-${getFilteredColor(
+//             outlineWrapper.props().filter,
+//           )}`,
+//         ],
+//         notContains: ['bg'],
+//       },
+//     },
+//     link: {
+//       expectedClasses: {
+//         contains: [
+//           `text-${outlineWrapper.props().color}-${getFilteredColor(
+//             outlineWrapper.props().filter,
+//           )}`,
+//         ],
+//         notContains: ['border', 'bg'],
+//       },
+//     },
+//     text: {
+//       expectedClasses: {
+//         contains: [
+//           `text-${outlineWrapper.props().color}-${getFilteredColor(
+//             outlineWrapper.props().filter,
+//           )}`,
+//         ],
+//         notContains: ['bg'],
+//       },
+//     },
+//   }
+//   // tests for solid variant
+//   variants.solid.expectedClasses.contains.forEach((expectedClass) => {
+//     expect(solidWrapper.classes()).contain(expectedClass)
+//   })
+//   variants.solid.expectedClasses.notContains.forEach((expectedClass) => {
+//     expect(solidWrapper.classes()).not.contain(expectedClass)
+//   })
+
+//   // tests for outline variant
+//   variants.outline.expectedClasses.contains.forEach((expectedClass) => {
+//     expect(outlineWrapper.classes()).contain(expectedClass)
+//   })
+//   variants.outline.expectedClasses.notContains.forEach((expectedClass) => {
+//     expect(outlineWrapper.classes()).not.contain(expectedClass)
+//   })
+
+//   // tests for link variant
+//   variants.link.expectedClasses.contains.forEach((expectedClass) => {
+//     expect(linkWrapper.classes()).contain(expectedClass)
+//   })
+//   variants.link.expectedClasses.notContains.forEach((expectedClass) => {
+//     expect(linkWrapper.classes()).not.contain(expectedClass)
+//   })
+//   // tests for text variant
+//   variants.text.expectedClasses.contains.forEach((expectedClass) => {
+//     expect(textWrapper.classes()).contain(expectedClass)
+//   })
+//   variants.text.expectedClasses.notContains.forEach((expectedClass) => {
+//     expect(textWrapper.classes()).not.contain(expectedClass)
+//   })
+
+//   //   expect(solidWrapper.classes()).toContain("outline-none","transition-colors",'test');
+// })
+
+// it('renders properly based on the color attribute', () => {
+//   const colors: Color[] = [
+//     'primary',
+//     'secondary',
+//     'info',
+//     'success',
+//     'warning',
+//     'danger',
+//   ]
+//   // Check all of the color Options if rendered correctly.
+//   colors.forEach((colorOption) => {
+//     const wrapper = mount(LuiButton as any, {
+//       props: {
+//         color: colorOption,
+//       },
+//     })
+//     expect(wrapper.classes()).contain(`bg-${colorOption}-500`)
+//   })
+
+//   // expect(getComputedStyle(wrapper.find("div").element).backgroundColor).toEqual("primary-500");
+// })
+
+// it('applies filters properly', () => {
+//   const filteredButtons = [
+//     {
+//       color: 'primary',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-primary-800',
+//         text: 'text-primary-100',
+//         border: 'border-primary-100',
+//       },
+//     },
+//     {
+//       color: 'secondary',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-secondary-800',
+//         text: 'text-secondary-100',
+//         border: 'border-secondary-100',
+//       },
+//     },
+//     {
+//       color: 'info',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-info-800',
+//         text: 'text-info-100',
+//         border: 'border-info-100',
+//       },
+//     },
+//     {
+//       color: 'success',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-success-800',
+//         text: 'text-success-100',
+//         border: 'border-success-100',
+//       },
+//     },
+//     {
+//       color: 'warning',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-warning-800',
+//         text: 'text-warning-100',
+//         border: 'border-warning-100',
+//       },
+//     },
+//     {
+//       color: 'danger',
+//       filter: 'darken',
+//       expectedClasses: {
+//         bg: 'bg-danger-800',
+//         text: 'text-danger-100',
+//         border: 'border-danger-100',
+//       },
+//     },
+//     {
+//       color: 'primary',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-primary-100',
+//         text: 'text-primary-500',
+//         border: 'border-primary-500',
+//       },
+//     },
+//     {
+//       color: 'secondary',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-secondary-100',
+//         text: 'text-secondary-500',
+//         border: 'border-secondary-500',
+//       },
+//     },
+//     {
+//       color: 'info',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-info-100',
+//         text: 'text-info-500',
+//         border: 'border-info-500',
+//       },
+//     },
+//     {
+//       color: 'success',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-success-100',
+//         text: 'text-success-500',
+//         border: 'border-success-500',
+//       },
+//     },
+//     {
+//       color: 'warning',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-warning-100',
+//         text: 'text-warning-500',
+//         border: 'border-warning-500',
+//       },
+//     },
+//     {
+//       color: 'danger',
+//       filter: 'lighten',
+//       expectedClasses: {
+//         bg: 'bg-danger-100',
+//         text: 'text-danger-500',
+//         border: 'border-danger-500',
+//       },
+//     },
+//   ]
+//   filteredButtons.forEach((button) => {
+//     const wrapper = mount(LuiButton as any, {
+//       props: {
+//         color: button.color,
+//         filter: button.filter,
+//       },
+//     })
+//     expect(wrapper.classes()).contain(button.expectedClasses.bg)
+//     expect(wrapper.classes()).contain(button.expectedClasses.text)
+//   })
+// })
+
+describe('LuiButton class tests', () => {
+  let wrapper: VueWrapper<any>
+  beforeEach(() => {
+    wrapper = mount(LuiButton as any)
+  })
+  afterEach(() => {
+    wrapper.unmount()
+  })
+  it('renders sizes properly', async () => {
+    const sizesAndClasses = {
+      xs: {
+        text: 'xs',
+        px: 3,
+        py: 1,
+      },
+      sm: {
+        text: 'sm',
+        px: 4,
+        py: 1.5,
+      },
+      md: {
+        text: 'base',
+        px: 5,
+        py: 2,
+      },
+      lg: {
+        text: 'lg',
+        px: 6,
+        py: 2.5,
+      },
+      xl: {
+        text: 'xl',
+        px: 7,
+        py: 3.5,
+      },
+    }
+    for (const [key, value] of Object.entries(sizesAndClasses)) {
+      await wrapper.setProps({ size: key })
+      const classes = wrapper.classes()
+      expect(classes).toContain(`px-${value.px}`)
+      expect(classes).toContain(`py-${value.py}`)
+      expect(classes).toContain(`text-${value.text}`)
+    }
+  })
+
+  it('renders correctly when rounded prop is false', async () => {
+    await wrapper.setProps({ rounded: false })
+    expect(wrapper.classes()).not.contain('rounded')
+    expect(wrapper.classes()).not.contain('rounded-lg')
+    expect(wrapper.classes()).not.contain('rounded-full')
+  })
+
+  it('renders correctly when rounded prop is true', async () => {
+    await wrapper.setProps({ rounded: true })
+    expect(wrapper.classes()).contain('rounded-lg')
+  })
+  it('renders correctly when rounded prop is full', async () => {
+    await wrapper.setProps({ rounded: 'full' })
+    expect(wrapper.classes()).contain('rounded-full')
+  })
+
+  it('provides full width when block prop is given', async () => {
+    await wrapper.setProps({ block: true })
+    expect(wrapper.classes()).toContain('w-full')
+  })
+})
+
+describe('LuiButton renders html correctly', () => {
+  const testClass = 'ri-home-line'
+  const testText = 'Prepend'
+  let wrapper: VueWrapper<any>
+  beforeEach(() => {})
+  afterEach(() => {
+    wrapper.unmount()
+  })
+  it('renders icon slot properly', () => {
+    // Tests for icon template
+    wrapper = mount(LuiButton as any, {
+      slots: {
+        icon: `<i class=${testClass}></i>`,
+      },
+    })
+    expect(
+      wrapper.find('[data-testid=\'lui-button-icon\']').find('i').exists(),
+    ).toBe(true)
+    expect(
+      wrapper.find('[data-testid=\'lui-button-icon\']').find('i').classes(),
+    ).toContain(testClass)
+  })
+  it('renders prepend slot properly', () => {
+    wrapper = mount(LuiButton as any, {
+      slots: {
+        prepend: `<i class=${testClass}></i>`,
+        default: testText,
+      },
+    })
+    const prependIcon = wrapper.find(
+      '[data-testid=\'lui-button-icon-prepend\'] i',
+    )
+    const textElement = wrapper.find('[data-testid=\'lui-button-icon-text\']')
+
+    expect(prependIcon.exists()).toBe(true)
+    expect(prependIcon.classes()).toContain(testClass)
+    expect(textElement.text()).toEqual(testText)
+  })
+  it('renders append slot properly', () => {
+    wrapper = mount(LuiButton as any, {
+      slots: {
+        append: `<i class=${testClass}></i>`,
+        default: testText,
+      },
+    })
+    const appendIcon = wrapper.find('[data-testid=\'lui-button-icon-append\'] i')
+    const textElement = wrapper.find('[data-testid=\'lui-button-icon-text\']')
+
+    expect(appendIcon.exists()).toBe(true)
+    expect(appendIcon.classes()).toContain(testClass)
+    expect(textElement.text()).toEqual(testText)
+  })
+
+  it('changes the tag when div tag is given', async () => {
+    const wrapper = mount(LuiButton as any, {
+      props: {
+        tag: 'div',
+      },
+    })
+    expect(wrapper.find('[data-testid=\'lui-button\']').element.tagName).toEqual(
+      'div'.toLocaleUpperCase(),
+    )
+  })
+  it('changes the tag when a tag is given', () => {
+    const url = 'https://www.google.com/'
+
+    const wrapper = mount(LuiButton as any, {
+      props: {
+        tag: 'a',
+      },
+      attrs: {
+        href: url,
+      },
+    })
+    expect(wrapper.find('[data-testid=\'lui-button\']').element.tagName).toEqual(
+      'a'.toLocaleUpperCase(),
+    )
+    expect(wrapper.attributes().href).toEqual(url)
+  })
+  it('inherits icon sizes properly', () => {
+    const sizesAndIconSizes = {
+      xs: 'xs',
+      sm: 'base',
+      md: 'xl',
+      lg: 'xl',
+      xl: '2xl',
+    }
+    Object.entries(sizesAndIconSizes).forEach(([size, iconSize]) => {
+      const wrapper = mount(LuiButton as any, {
+        props: {
+          size,
+        },
+        slots: {
+          icon: '<i class=\'ri-home-line\'></i>',
+        },
+      })
+      expect(
+        wrapper.find('[data-testid=\'lui-button-icon\']').classes(),
+      ).toContain(`text-${iconSize}`)
+    })
+  })
+})
diff --git a/src/components/Button/__test__/__snapshots__/LuiButton.spec.ts.snap b/src/components/Button/__test__/__snapshots__/LuiButton.spec.ts.snap
new file mode 100644
index 00000000..63e2e1f8
--- /dev/null
+++ b/src/components/Button/__test__/__snapshots__/LuiButton.spec.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`Default LuiButton > renders properly based on default props 1`] = `
+"<button data-testid=\\"lui-button\\" class=\\"outline-none focus-visible:ring-4 transition-colors transition-transform active:translate-y-0.5 disabled:translate-y-0 cursor-pointer disabled:cursor-not-allowed text-base bg-primary-500 hover:bg-primary-400 disabled:bg-secondary-500 text-white disabled:text-secondary-300 border-primary-500 hover:border-primary-400 disabled:border-secondary-500 border border-solid focus-visible:ring-primary-500/40 py-2 px-5 lui-button\\">
+  <!--v-if--><span data-testid=\\"lui-button-icon-text\\"></span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`renders properly based on default props 1`] = `
+"<button data-testid=\\"lui-button\\" class=\\"outline-none focus-visible:ring-4 transition-colors transition-transform active:translate-y-0.5 disabled:translate-y-0 cursor-pointer disabled:cursor-not-allowed text-base bg-primary-500 hover:bg-primary-400 disabled:bg-secondary-500 text-white disabled:text-secondary-300 border-primary-500 hover:border-primary-400 disabled:border-secondary-500 border border-solid focus-visible:ring-primary-500/40 py-2 px-5 lui-button\\">
+  <!--v-if--><span data-testid=\\"lui-button-icon-text\\"></span>
+  <!--v-if-->
+</button>"
+`;

From bdb1aa1d8d40b827449212ee7adc9332895e0206 Mon Sep 17 00:00:00 2001
From: yusikerem <kerem.yky@gmail.com>
Date: Sat, 28 Oct 2023 22:02:53 +0300
Subject: [PATCH 2/2] test(luibutton): orginase some tests

---
 .../Button/__test__/LuiButton.spec.ts         | 347 +-----------------
 1 file changed, 12 insertions(+), 335 deletions(-)

diff --git a/src/components/Button/__test__/LuiButton.spec.ts b/src/components/Button/__test__/LuiButton.spec.ts
index d1e4efc0..98ac87dc 100644
--- a/src/components/Button/__test__/LuiButton.spec.ts
+++ b/src/components/Button/__test__/LuiButton.spec.ts
@@ -3,17 +3,6 @@ import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import LuiButton from '../LuiButton.vue'
 
-// function getFilteredColor(filter: string): string {
-//   const filterMap: Record<string, string> = {
-//     none: '500',
-//     lighten: '100',
-//     darken: '800',
-//   }
-
-//   // Return the corresponding color suffix, defaulting to "500" for unknown filters
-//   return filterMap[filter] || '500'
-// }
-
 describe('Default LuiButton', () => {
   const expectedDefaultProps = {
     tag: 'button',
@@ -64,322 +53,6 @@ describe('Disabled property', () => {
   })
 })
 
-// it('renders properly based on the variant prop', () => {
-//   const solidWrapper = mount(LuiButton as any, {
-//     attrs: {
-//       variant: 'solid',
-//     },
-//   })
-//   const outlineWrapper = mount(LuiButton as any, {
-//     attrs: {
-//       variant: 'outline',
-//     },
-//   })
-//   const textWrapper = mount(LuiButton as any, {
-//     attrs: {
-//       variant: 'text',
-//     },
-//   })
-//   const linkWrapper = mount(LuiButton as any, {
-//     attrs: {
-//       variant: 'link',
-//     },
-//   })
-//   const variants = {
-//     solid: {
-//       expectedClasses: {
-//         contains: [
-//           `bg-${solidWrapper.props().color}-${getFilteredColor(
-//             solidWrapper.props().filter,
-//           )}`,
-//           `border-${outlineWrapper.props().color}-${getFilteredColor(
-//             outlineWrapper.props().filter,
-//           )}`,
-//           'text-white',
-//         ],
-//         notContains: [],
-//       },
-//     },
-//     outline: {
-//       expectedClasses: {
-//         contains: [
-//           `text-${outlineWrapper.props().color}-${getFilteredColor(
-//             outlineWrapper.props().filter,
-//           )}`,
-//           `border-${outlineWrapper.props().color}-${getFilteredColor(
-//             outlineWrapper.props().filter,
-//           )}`,
-//         ],
-//         notContains: ['bg'],
-//       },
-//     },
-//     link: {
-//       expectedClasses: {
-//         contains: [
-//           `text-${outlineWrapper.props().color}-${getFilteredColor(
-//             outlineWrapper.props().filter,
-//           )}`,
-//         ],
-//         notContains: ['border', 'bg'],
-//       },
-//     },
-//     text: {
-//       expectedClasses: {
-//         contains: [
-//           `text-${outlineWrapper.props().color}-${getFilteredColor(
-//             outlineWrapper.props().filter,
-//           )}`,
-//         ],
-//         notContains: ['bg'],
-//       },
-//     },
-//   }
-//   // tests for solid variant
-//   variants.solid.expectedClasses.contains.forEach((expectedClass) => {
-//     expect(solidWrapper.classes()).contain(expectedClass)
-//   })
-//   variants.solid.expectedClasses.notContains.forEach((expectedClass) => {
-//     expect(solidWrapper.classes()).not.contain(expectedClass)
-//   })
-
-//   // tests for outline variant
-//   variants.outline.expectedClasses.contains.forEach((expectedClass) => {
-//     expect(outlineWrapper.classes()).contain(expectedClass)
-//   })
-//   variants.outline.expectedClasses.notContains.forEach((expectedClass) => {
-//     expect(outlineWrapper.classes()).not.contain(expectedClass)
-//   })
-
-//   // tests for link variant
-//   variants.link.expectedClasses.contains.forEach((expectedClass) => {
-//     expect(linkWrapper.classes()).contain(expectedClass)
-//   })
-//   variants.link.expectedClasses.notContains.forEach((expectedClass) => {
-//     expect(linkWrapper.classes()).not.contain(expectedClass)
-//   })
-//   // tests for text variant
-//   variants.text.expectedClasses.contains.forEach((expectedClass) => {
-//     expect(textWrapper.classes()).contain(expectedClass)
-//   })
-//   variants.text.expectedClasses.notContains.forEach((expectedClass) => {
-//     expect(textWrapper.classes()).not.contain(expectedClass)
-//   })
-
-//   //   expect(solidWrapper.classes()).toContain("outline-none","transition-colors",'test');
-// })
-
-// it('renders properly based on the color attribute', () => {
-//   const colors: Color[] = [
-//     'primary',
-//     'secondary',
-//     'info',
-//     'success',
-//     'warning',
-//     'danger',
-//   ]
-//   // Check all of the color Options if rendered correctly.
-//   colors.forEach((colorOption) => {
-//     const wrapper = mount(LuiButton as any, {
-//       props: {
-//         color: colorOption,
-//       },
-//     })
-//     expect(wrapper.classes()).contain(`bg-${colorOption}-500`)
-//   })
-
-//   // expect(getComputedStyle(wrapper.find("div").element).backgroundColor).toEqual("primary-500");
-// })
-
-// it('applies filters properly', () => {
-//   const filteredButtons = [
-//     {
-//       color: 'primary',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-primary-800',
-//         text: 'text-primary-100',
-//         border: 'border-primary-100',
-//       },
-//     },
-//     {
-//       color: 'secondary',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-secondary-800',
-//         text: 'text-secondary-100',
-//         border: 'border-secondary-100',
-//       },
-//     },
-//     {
-//       color: 'info',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-info-800',
-//         text: 'text-info-100',
-//         border: 'border-info-100',
-//       },
-//     },
-//     {
-//       color: 'success',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-success-800',
-//         text: 'text-success-100',
-//         border: 'border-success-100',
-//       },
-//     },
-//     {
-//       color: 'warning',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-warning-800',
-//         text: 'text-warning-100',
-//         border: 'border-warning-100',
-//       },
-//     },
-//     {
-//       color: 'danger',
-//       filter: 'darken',
-//       expectedClasses: {
-//         bg: 'bg-danger-800',
-//         text: 'text-danger-100',
-//         border: 'border-danger-100',
-//       },
-//     },
-//     {
-//       color: 'primary',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-primary-100',
-//         text: 'text-primary-500',
-//         border: 'border-primary-500',
-//       },
-//     },
-//     {
-//       color: 'secondary',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-secondary-100',
-//         text: 'text-secondary-500',
-//         border: 'border-secondary-500',
-//       },
-//     },
-//     {
-//       color: 'info',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-info-100',
-//         text: 'text-info-500',
-//         border: 'border-info-500',
-//       },
-//     },
-//     {
-//       color: 'success',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-success-100',
-//         text: 'text-success-500',
-//         border: 'border-success-500',
-//       },
-//     },
-//     {
-//       color: 'warning',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-warning-100',
-//         text: 'text-warning-500',
-//         border: 'border-warning-500',
-//       },
-//     },
-//     {
-//       color: 'danger',
-//       filter: 'lighten',
-//       expectedClasses: {
-//         bg: 'bg-danger-100',
-//         text: 'text-danger-500',
-//         border: 'border-danger-500',
-//       },
-//     },
-//   ]
-//   filteredButtons.forEach((button) => {
-//     const wrapper = mount(LuiButton as any, {
-//       props: {
-//         color: button.color,
-//         filter: button.filter,
-//       },
-//     })
-//     expect(wrapper.classes()).contain(button.expectedClasses.bg)
-//     expect(wrapper.classes()).contain(button.expectedClasses.text)
-//   })
-// })
-
-describe('LuiButton class tests', () => {
-  let wrapper: VueWrapper<any>
-  beforeEach(() => {
-    wrapper = mount(LuiButton as any)
-  })
-  afterEach(() => {
-    wrapper.unmount()
-  })
-  it('renders sizes properly', async () => {
-    const sizesAndClasses = {
-      xs: {
-        text: 'xs',
-        px: 3,
-        py: 1,
-      },
-      sm: {
-        text: 'sm',
-        px: 4,
-        py: 1.5,
-      },
-      md: {
-        text: 'base',
-        px: 5,
-        py: 2,
-      },
-      lg: {
-        text: 'lg',
-        px: 6,
-        py: 2.5,
-      },
-      xl: {
-        text: 'xl',
-        px: 7,
-        py: 3.5,
-      },
-    }
-    for (const [key, value] of Object.entries(sizesAndClasses)) {
-      await wrapper.setProps({ size: key })
-      const classes = wrapper.classes()
-      expect(classes).toContain(`px-${value.px}`)
-      expect(classes).toContain(`py-${value.py}`)
-      expect(classes).toContain(`text-${value.text}`)
-    }
-  })
-
-  it('renders correctly when rounded prop is false', async () => {
-    await wrapper.setProps({ rounded: false })
-    expect(wrapper.classes()).not.contain('rounded')
-    expect(wrapper.classes()).not.contain('rounded-lg')
-    expect(wrapper.classes()).not.contain('rounded-full')
-  })
-
-  it('renders correctly when rounded prop is true', async () => {
-    await wrapper.setProps({ rounded: true })
-    expect(wrapper.classes()).contain('rounded-lg')
-  })
-  it('renders correctly when rounded prop is full', async () => {
-    await wrapper.setProps({ rounded: 'full' })
-    expect(wrapper.classes()).contain('rounded-full')
-  })
-
-  it('provides full width when block prop is given', async () => {
-    await wrapper.setProps({ block: true })
-    expect(wrapper.classes()).toContain('w-full')
-  })
-})
-
 describe('LuiButton renders html correctly', () => {
   const testClass = 'ri-home-line'
   const testText = 'Prepend'
@@ -389,7 +62,6 @@ describe('LuiButton renders html correctly', () => {
     wrapper.unmount()
   })
   it('renders icon slot properly', () => {
-    // Tests for icon template
     wrapper = mount(LuiButton as any, {
       slots: {
         icon: `<i class=${testClass}></i>`,
@@ -406,17 +78,14 @@ describe('LuiButton renders html correctly', () => {
     wrapper = mount(LuiButton as any, {
       slots: {
         prepend: `<i class=${testClass}></i>`,
-        default: testText,
       },
     })
     const prependIcon = wrapper.find(
       '[data-testid=\'lui-button-icon-prepend\'] i',
     )
-    const textElement = wrapper.find('[data-testid=\'lui-button-icon-text\']')
 
     expect(prependIcon.exists()).toBe(true)
     expect(prependIcon.classes()).toContain(testClass)
-    expect(textElement.text()).toEqual(testText)
   })
   it('renders append slot properly', () => {
     wrapper = mount(LuiButton as any, {
@@ -426,14 +95,22 @@ describe('LuiButton renders html correctly', () => {
       },
     })
     const appendIcon = wrapper.find('[data-testid=\'lui-button-icon-append\'] i')
-    const textElement = wrapper.find('[data-testid=\'lui-button-icon-text\']')
 
     expect(appendIcon.exists()).toBe(true)
     expect(appendIcon.classes()).toContain(testClass)
-    expect(textElement.text()).toEqual(testText)
+  })
+  it('renders default slot properly', async () => {
+    wrapper = mount(LuiButton as any, {
+      slots: {
+        default: testText,
+      },
+    })
+    const textElement = wrapper.find('[data-testid=\'lui-button-icon-text\']')
+    expect(textElement.exists()).toBe(true)
+    expect(textElement.text()).toBe(testText)
   })
 
-  it('changes the tag when div tag is given', async () => {
+  it('changes the tag according to the tag prop', async () => {
     const wrapper = mount(LuiButton as any, {
       props: {
         tag: 'div',
@@ -443,7 +120,7 @@ describe('LuiButton renders html correctly', () => {
       'div'.toLocaleUpperCase(),
     )
   })
-  it('changes the tag when a tag is given', () => {
+  it('changes the tag, also inherits it\'s attributes', () => {
     const url = 'https://www.google.com/'
 
     const wrapper = mount(LuiButton as any, {