fix: removed dynamic style tag from html for snapshots

- Updated TypeScript configuration to include path mapping for easier imports.
- Modified multiple component tests to remove dynamic style attributes from snapshots, ensuring consistency and accuracy in test results.
- Adjusted snapshots for BooleanControl, ButtonControl, ColorControl, Folder, NumberControl, SelectControl, TextControl, TresLeches, and VectorControl to reflect the latest implementation changes.

Author: alvarosabu

src/components/BooleanControl.test.ts

@@ -28,11 +28,11 @@ describe('boolean Control', async () => {
     })
   })
   it('should render a boolean control', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('input').attributes('type')).toBe('checkbox')
   })
   it('should render a boolean control with a label', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('label').text()).toBe('test')
   })
   it('should change the value of the control when the input changes', async () => {

src/components/ButtonControl.test.ts

@@ -23,15 +23,15 @@ describe('button Controls', () => {
     mountComponent(() => {
       useControls({ acceptBtn: { type: 'button', label: 'Accept' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('button').exists()).toBe(true)
   })
 
   it('should render a button with a label', () => {
     mountComponent(() => {
       useControls({ acceptBtn: { type: 'button', label: 'Accept' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('button').text()).toBe('Accept')
   })
 
@@ -51,47 +51,47 @@ describe('button Controls', () => {
     mountComponent(() => {
       useControls({ acceptBtn: { type: 'button', label: 'Accept', icon: 'i-carbon-checkmark' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).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' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).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' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).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' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).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' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).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' } })
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('button').classes()).toContain('leches-btn-secondary')
   })
 })

src/components/ColorControl.test.ts

@@ -28,7 +28,7 @@ describe('color Control', async () => {
     })
   })
   it('should render a color control', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('input').attributes('type')).toBe('color')
   })
   it('should render a color control with a label', async () => {

src/components/Folder.test.ts

@@ -50,7 +50,7 @@ describe('folder Controls', () => {
       const { position } = useControls('camera', { position: new Vector3(3, 2, 4) })
       return { position }
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('button[data-folder="camera"]').exists()).toBe(true)
     expect(wrapper.find('input[id="cameraPosition-x"]').exists()).toBe(true)
     expect(wrapper.find('input[id="cameraPosition-y"]').exists()).toBe(true)

src/components/NumberControl.test.ts

@@ -30,7 +30,7 @@ describe('number Control', async () => {
     })
   })
   it('should render a number control', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('input').attributes('type')).toBe('number')
   })
   it('should render a number control with a label', async () => {

src/components/SelectControl.test.ts

@@ -40,7 +40,7 @@ describe('dropdown Control', async () => {
     })
   })
   it('should render a select control', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('select').exists())
   })
   it('should render a select control with a label', async () => {

src/components/TextControl.test.ts

@@ -29,7 +29,7 @@ describe('text Control', () => {
   })
 
   it('should render a text control', () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.find('input').attributes('type')).toBe('text')
   })
 

src/components/TresLeches.test.ts

@@ -1,21 +1,29 @@
 import { mount } from '@vue/test-utils'
-import { TresLeches } from '/@/'
-import { expect, it } from 'vitest'
+import { TresLeches } from '../index'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { dispose } from '../composables/useControls'
 
-afterEach(() => {
+beforeEach(() => {
   dispose()
+  // Mock the useMotion composable
+  vi.mock('@vueuse/motion', () => ({
+    useMotion: () => ({
+      apply: vi.fn(),
+    }),
+  }))
 })
 
-describe('tresLeches', async () => {
+describe('tresLeches', () => {
   it('should mount', async () => {
     const wrapper = mount(TresLeches, {
-    /*    attachTo: document.body, */
       props: {
         uuid: 'test',
       },
+      attachTo: document.body,
     })
-    expect(wrapper.html()).toMatchSnapshot()
+    // Remove dynamic style attributes before snapshot
+    const html = wrapper.html().replace(/style="[^"]*"/, '')
+    expect(html).toMatchSnapshot()
     expect(wrapper.find('div').attributes('id')).toBe('tres-leches-pane-test')
   })
 })

src/components/VectorControl.test.ts

@@ -53,7 +53,7 @@ describe('vector Control', async () => {
     })
   })
   it('should render multiple numeric inputs', async () => {
-    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.html().replace(/style="[^"]*"/, '')).toMatchSnapshot()
     expect(wrapper.findAll('input[type="number"]').length).toBeGreaterThan(1)
   })
   it('should render a number control with a label', async () => {

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`boolean Control > should render a boolean control 1`] = `
-"<div id="tres-leches-pane-default" class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-overflow-hidden tl-rounded-lg" style="top: 10px; width: 44.20507903623789px; height: 48.0634311877231px; right: 16px; opacity: 0.05555555555555556; transform: translate3d(0px,93.99537602289712px,0px);">
+"<div id="tres-leches-pane-default" class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-overflow-hidden tl-rounded-lg" >
   <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 tl-text-xs">
     <div class="w-1/3"></div>
     <div class="tl-cursor-grabbing"><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>
@@ -27,7 +27,7 @@ exports[`boolean Control > should render a boolean control 1`] = `
 `;
 
 exports[`boolean Control > should render a boolean control with a label 1`] = `
-"<div id="tres-leches-pane-default" class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-overflow-hidden tl-rounded-lg" style="top: 10px; width: 50.37618296199835px; height: 55.70384557199793px; right: 16px; opacity: 0.06643236000000002; transform: translate3d(0px,91.66721371472505px,0px);">
+"<div id="tres-leches-pane-default" class="tl-fixed tl-top-4 tl-z-24 tl-bg-white tl-shadow-xl tl-p-1 tl-font-sans tl-text-xs tl-overflow-hidden tl-rounded-lg" >
   <header class="tl-flex tl-justify-between tl-items-center tl-text-gray-200 tl-text-xs">
     <div class="w-1/3"></div>
     <div class="tl-cursor-grabbing"><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>