merge pull request #25 from mnenie/dev

feat: add vitest modules, resolve #23

src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiBadge > should have content at slot 1`] = `"<div class="text-xs _badge_cf2d58 _default_cf2d58">badge</div>"`;
+exports[`UiBadge > should have content at slot 1`] = `"<div class="text-xs badge default">badge</div>"`;

src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiButton > should have content at slot 1`] = `"<button class="text-sm _button_8511b8 _default_8511b8 _md_8511b8">ui button</button>"`;
+exports[`UiButton > should have content at slot 1`] = `"<button class="text-sm button default md">ui button</button>"`;

src/shared/ui/card/__tests__/__snapshots__/UiCard.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UiCard > should render correctly 1`] = `
-"<div class="text-sm _card_569611">card<div class="_user_container_569611">
+"<div class="text-sm card">card<div class="user_container">
     <div>users 👥</div>
   </div>
 </div>"

src/shared/ui/dropdown/__tests__/UiDropdown.spec.ts

@@ -19,19 +19,18 @@ describe('UiDropdown', () => {
   });
 
   it('toggles dropdown on trigger', async () => {
-    // TODO: think about changing it to $style (vitest.config.ts -> classes())
-    const trigger = wrapper.find('[class*="wrapper"]');
+    const trigger = wrapper.find('.wrapper');
     expect(trigger.exists()).toBe(true);
     //@ts-expect-error instance
     wrapper.vm.isOpen = false;
 
     trigger.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('[class*="inside"]').exists()).toBe(true);
+    expect(wrapper.find('.inside').exists()).toBe(true);
 
     trigger.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('[class*="inside"]').exists()).toBe(false);
+    expect(wrapper.find('.inside').exists()).toBe(false);
   });
 
   it('should close dropdown when clicking outside', () => {

src/shared/ui/dropdown/__tests__/__snapshots__/UiDropdown.spec.ts.snap

@@ -1,16 +1,16 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UiDropdown > should render correctly 1`] = `
-"<div class="_dropdown_e2935a">
-  <div class="_wrapper_e2935a">
+"<div class="dropdown">
+  <div class="wrapper">
     <div>trigger</div>
   </div>
   <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="_inside_e2935a">
-      <div class="_header_e2935a">
+    <div class="inside">
+      <div class="header">
         <div>header</div>
       </div>
-      <div class="_content_e2935a">
+      <div class="content">
         <div>content</div>
       </div>
     </div>

src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiInput > should render correctly 1`] = `"<input placeholder="jenda" type="text" class="_input_default_1b38d4 text-sm" autocomplete="on" value="value">"`;
+exports[`UiInput > should render correctly 1`] = `"<input placeholder="jenda" type="text" class="input_default text-sm" autocomplete="on" value="value">"`;

src/shared/ui/progress-bar/__tests__/__snapshots__/UiProgressBar.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UiProgressBar > should render correctly 1`] = `
-"<div class="_progress_bar_container_aabae5">
-  <div class="_progress_bar_active_aabae5"></div>
+"<div class="progress_bar_container">
+  <div class="progress_bar_active"></div>
 </div>"
 `;

src/shared/ui/radio-group/__tests__/__snapshots__/UiRadioGroup.spec.ts.snap

@@ -1,5 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiInput > should render correctly 1`] = `"<input id="radio-input-id" type="radio" class="_radio_item_90e1b5" name="radio-input-name">"`;
-
-exports[`UiRadioGroup > should render correctly 1`] = `"<input id="radio-input-id" type="radio" class="_radio_item_90e1b5" name="radio-input-name">"`;
+exports[`UiRadioGroup > should render correctly 1`] = `"<input id="radio-input-id" type="radio" class="radio_item" name="radio-input-name">"`;

src/shared/ui/select/UiSelect.vue

@@ -35,7 +35,7 @@ const selected = ref(props.modelValue);
       <ChevronsUpDown :size="15" color="var(--zinc-400)" />
     </div>
     <Transition name="dropdown">
-      <div v-show="open" :class="$style.items">
+      <div v-if="open" :class="$style.items">
         <div
           v-for="(option, i) of options"
           :key="i"

src/shared/ui/select/__tests__/UiSelect.spec.ts

@@ -18,14 +18,14 @@ describe('UiSelect', () => {
   });
 
   it('toggles select on button(trigger)', async () => {
-    const trigger = wrapper.find('[class*="selected"]');
+    const trigger = wrapper.find('.selected');
     expect(trigger.exists()).toBe(true);
     //@ts-expect-error instance
     wrapper.vm.open = false;
 
     trigger.trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('[class*="items"]').exists()).toBe(true);
+    expect(wrapper.find('.items').exists()).toBe(true);
   });
 
   it('should close select when we clicking outside', () => {

src/shared/ui/select/__tests__/__snapshots__/UiSelect.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UiSelect > should render correctly 1`] = `
-"<div class="_custom_select_b14453">
-  <div class="_selected_b14453"><span class="text-sm">test</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
+"<div class="custom_select">
+  <div class="selected"><span class="text-sm">test</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
       <path d="m7 15 5 5 5-5"></path>
       <path d="m7 9 5-5 5 5"></path>
     </svg></div>
-  <transition-stub name="dropdown" appear="false" persisted="true" css="true">
-    <div class="_items_b14453" style=""></div>
+  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
+    <div class="items"></div>
   </transition-stub>
 </div>"
 `;

src/shared/ui/sheet/__tests__/UiSheet.spec.ts

@@ -30,18 +30,18 @@ describe('UiSheet', () => {
   });
 
   it('should render slots correctly', () => {
-    expect(wrapper.find('[class*="sheet_header"]').text()).toContain('sheet header');
-    expect(wrapper.find('[class*="sheet_main"]').text()).toContain('test');
-    expect(wrapper.find('[class*="sheet_footer"]').text()).toContain('sheet footer');
+    expect(wrapper.find('.sheet_header').text()).toContain('sheet header');
+    expect(wrapper.find('.sheet_main').text()).toContain('test');
+    expect(wrapper.find('.sheet_footer').text()).toContain('sheet footer');
   });
 
   it('should open/close the sheet', async () => {
     wrapper.vm.open();
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('[class*="sheet"]').attributes('aria-hidden')).toBe('false');
+    expect(wrapper.find('.sheet').attributes('aria-hidden')).toBe('false');
 
     wrapper.vm.close();
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('[class*="sheet"]').attributes('aria-hidden')).toBe('true');
+    expect(wrapper.find('.sheet').attributes('aria-hidden')).toBe('true');
   });
 });

src/shared/ui/sheet/__tests__/__snapshots__/UiSheet.spec.ts.snap

@@ -2,17 +2,17 @@
 
 exports[`UiSheet > should render correctly 1`] = `
 "<teleport-stub to="body">
-  <div class="_sheet_0ceba3" aria-hidden="false" role="dialog">
+  <div class="sheet" aria-hidden="false" role="dialog">
     <transition-stub appear="false" persisted="true" css="true">
-      <div class="_sheet_overlay_0ceba3"></div>
+      <div class="sheet_overlay"></div>
     </transition-stub>
-    <div class="_sheet_content_0ceba3">
-      <header class="_sheet_header_0ceba3">sheet header<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-xicon _header_icon_0ceba3">
+    <div class="sheet_content">
+      <header class="sheet_header">sheet header<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-xicon header_icon">
           <path d="M18 6 6 18"></path>
           <path d="m6 6 12 12"></path>
         </svg></header>
-      <main class="_sheet_main_0ceba3">test</main>
-      <footer class="_sheet_footer_0ceba3">sheet footer</footer>
+      <main class="sheet_main">test</main>
+      <footer class="sheet_footer">sheet footer</footer>
     </div>
   </div>
 </teleport-stub>"

vitest.config.ts

@@ -1,14 +1,19 @@
-import { fileURLToPath } from 'node:url'
-import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
-import viteConfig from './vite.config'
+import { fileURLToPath } from 'node:url';
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config';
+import viteConfig from './vite.config';
 
 export default mergeConfig(
   viteConfig,
   defineConfig({
     test: {
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/**'],
-      root: fileURLToPath(new URL('./', import.meta.url))
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      css: {
+        modules: {
+          classNameStrategy: 'non-scoped'
+        }
+      }
     }
   })
-)
+);