@weni/unnnic-system 2.5.0 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -24,7 +24,10 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "format": "prettier --write src/",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest --coverage"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -60,18 +63,23 @@
     "@storybook/vue3-vite": "^8.0.10",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.6",
     "@weni/eslint-config": "^1.0.3",
     "eslint": "^8.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.25.0",
+    "jsdom": "^24.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.62.1",
     "storybook": "^8.0.10",
     "vite": "4.3.5",
+    "vitest": "^1.6.0",
     "vue-eslint-parser": "^9.4.2"
   }
 }

package/src/components/Checkbox/Checkbox.vue

@@ -18,6 +18,7 @@
         'unnnic-checkbox__label__right',
         `unnnic-checkbox__label__${size}`,
       ]"
+      data-testid="checkbox-text-right"
     >
       {{ textRight }}
     </div>

package/src/components/Checkbox/__tests__/Checkbox.spec.js

@@ -0,0 +1,66 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import Checkbox from '../Checkbox.vue';
+
+const createWrapper = (props) => {
+  return mount(Checkbox, {
+    props,
+  });
+};
+
+describe('Checkbox', () => {
+  let wrapper;
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('should render right label', () => {
+    wrapper = createWrapper({ textRight: 'Label Test' });
+    const label = wrapper.find('[data-testid="checkbox-text-right"]');
+    expect(label.text()).eq('Label Test');
+  });
+
+  it('should checkbox emit change events', async () => {
+    wrapper = createWrapper();
+    const checkbox = wrapper.findComponent({ name: 'Icon' });
+
+    // click false to true
+    await checkbox.trigger('click');
+    expect(wrapper.emitted('change')[0][0]).eq(true);
+
+    // click true to false
+    await wrapper.setProps({ modelValue: true });
+    await checkbox.trigger('click');
+    expect(wrapper.emitted('change')[1][0]).eq(false);
+
+    // click less to false
+    await wrapper.setProps({ modelValue: 'less' });
+    expect(wrapper.vm.icon).eq('checkbox-less');
+    await checkbox.trigger('click');
+    expect(wrapper.emitted('change')[2][0]).eq(false);
+  });
+
+  it('should checkbox disabled', async () => {
+    wrapper = createWrapper({ disabled: true });
+    const checkbox = wrapper.findComponent({ name: 'Icon' });
+    await checkbox.trigger('click');
+    expect(wrapper.emitted('change')).eq(undefined);
+  });
+
+  it('should define sizes', async () => {
+    wrapper = createWrapper({ size: 'sm', textRight: 'Label' });
+    const checkbox = wrapper.findComponent({ name: 'Icon' });
+    const label = wrapper.find('.unnnic-checkbox__label');
+
+    // sm
+    expect(checkbox.classes()).include('unnnic-icon__size--sm');
+    expect(label.classes()).include('unnnic-checkbox__label__sm');
+
+    // md
+    await wrapper.setProps({ size: 'md' });
+    expect(checkbox.classes()).include('unnnic-icon__size--md');
+    expect(label.classes()).include('unnnic-checkbox__label__md');
+  });
+});

package/src/components/Label/__tests__/Label.spec.js

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+
+import Label from '../Label.vue';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+const createWrapper = () => {
+  return mount(Label, {
+    props: {
+      label: 'Label Test',
+    },
+  });
+};
+
+describe('Label', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  it('should render label', () => {
+    const label = wrapper.findComponent({ name: 'UnnnicLabel' });
+    expect(label.text()).eq('Label Test');
+  });
+
+  it('applies the correct classes and styles', () => {
+    const label = wrapper.findComponent('.unnnic-label__label');
+    expect(label.html()).toMatchSnapshot();
+  });
+});

package/src/components/Label/__tests__/__snapshots__/Label.spec.js.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Label > applies the correct classes and styles 1`] = `"<p class="unnnic-label__label">Label Test</p>"`;

package/src/stories/Checkbox.stories.js

@@ -1,34 +1,30 @@
-import unnnicCheckbox from '../components/Checkbox/Checkbox.vue';
+import UnnnicCheckbox from '../components/Checkbox/Checkbox.vue';
 
 export default {
   title: 'Form/Checkbox',
-  component: unnnicCheckbox,
+  component: UnnnicCheckbox,
   argTypes: {
-    value: { control: 'inline-radio', options: [true, false, 'less'] },
+    modelValue: { control: 'inline-radio', options: [true, false, 'less'] },
     disabled: { control: 'boolean' },
     size: { control: 'select', options: ['md', 'sm'] },
+    textRight: { control: 'text' },
   },
   render: (args) => ({
     components: {
-      unnnicCheckbox,
+      UnnnicCheckbox,
     },
     setup() {
       return { args };
     },
-    data() {
-      return {
-        value: true,
-      };
-    },
     template: `
-      <unnnicCheckbox v-model="value" />
+      <UnnnicCheckbox v-bind="args" @change="args.modelValue = $event" />
     `,
   }),
 };
 
 export const Default = {
   args: {
-    value: true,
+    modelValue: true,
     disabled: false,
     size: 'md',
   },