@pequity/squirrel 4.1.2 → 5.0.0

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.spec.js

@@ -0,0 +1,176 @@
+import PInlineDatePicker from '@squirrel/components/p-inline-date-picker/p-inline-date-picker.vue';
+import { createWrapperFor } from '@tests/jest.helpers';
+
+const createWrapper = (props) => {
+  return createWrapperFor(PInlineDatePicker, {
+    props,
+    global: {
+      stubs: {
+        DatePicker: {
+          name: 'DatePicker',
+          template: '<div class="date-picker-stub"></div>',
+          props: ['modelValue', 'selectAttribute', 'minDate', 'maxDate', 'masks', 'timezone', 'style'],
+        },
+      },
+    },
+  });
+};
+
+describe('PInlineDatePicker.vue', () => {
+  it('renders a datepicker', () => {
+    const wrapper = createWrapper();
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    expect(datePicker.props()).toEqual({
+      modelValue: null,
+      selectAttribute: { highlight: { class: 'bg-primary', contentClass: 'text-white' } },
+      minDate: null,
+      maxDate: null,
+      masks: { input: 'DD-MMM-YYYY', data: 'YYYY-MM-DD' },
+      style: {},
+      timezone: '',
+    });
+    expect(wrapper.find('label').exists()).toBe(false);
+    expect(wrapper.find('div.text-xs.text-on-error.mt-1').isVisible()).toBe(false);
+  });
+
+  it('passes all props to the datepicker', () => {
+    const wrapper = createWrapper({
+      modelValue: '2024-05-19',
+      minDate: new Date('2024-05-01'),
+      maxDate: new Date('2024-05-31'),
+      timezone: 'UTC',
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    expect(datePicker.props().modelValue).toEqual(new Date('2024-05-19'));
+    expect(datePicker.props().minDate).toEqual(new Date('2024-05-01'));
+    expect(datePicker.props().maxDate).toEqual(new Date('2024-05-31'));
+    expect(datePicker.props().timezone).toBe('UTC');
+  });
+
+  it('renders a label when the label prop is set', () => {
+    const wrapper = createWrapper({ label: 'test datepicker' });
+
+    expect(wrapper.find('label').text()).toBe('test datepicker');
+  });
+
+  it('hides the component when the hidden prop is set', () => {
+    const wrapper = createWrapper({ hidden: true });
+
+    expect(wrapper.classes()).toContain('hidden');
+  });
+
+  it('adds the required class when the required prop is set', () => {
+    const wrapper = createWrapper({ label: 'test datepicker', required: true });
+
+    expect(wrapper.find('label').classes()).toEqual([
+      'block',
+      'mb-1',
+      'font-bold',
+      'text-sm',
+      "after:content-['_*']",
+      'after:text-on-error',
+    ]);
+
+    expect(wrapper.props().required).toBe(true);
+  });
+
+  it('passes listeners to the datepicker', () => {
+    // Since DatePicker emits are not defined on PInlineDatePicker we need to Spy on console.warn and mock the implementation to suppress the warning:
+    // [Vue warn]: Component emitted event "update:view" but it is neither declared in the emits option nor as an "onUpdate:view" prop.
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const testFn = jest.fn();
+
+    const wrapper = createWrapperFor({
+      template: `<PInlineDatePicker v-model="dateStrVal" @update:view="testEvent" />`,
+      components: { PInlineDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+      methods: {
+        testEvent() {
+          testFn();
+        },
+      },
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    datePicker.vm.$emit('update:view');
+
+    expect(testFn).toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
+
+  it('sets the disabled state correctly', () => {
+    const wrapper = createWrapper({ label: 'test datepicker', disabled: true });
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    expect(['pointer-events-none', 'opacity-70'].every((c) => datePicker.classes().includes(c))).toBe(true);
+  });
+
+  it(`updates the value when a day is clicked`, async () => {
+    const wrapper = createWrapperFor({
+      template: `<PInlineDatePicker v-model="dateStrVal" />`,
+      components: { PInlineDatePicker },
+      data() {
+        return {
+          dateStrVal: '2024-09-01',
+        };
+      },
+    });
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    datePicker.vm.$emit('dayclick', { id: '2024-09-02' });
+
+    expect(wrapper.vm.dateStrVal).toBe('2024-09-02');
+  });
+
+  it(`updates the datepicker value when modelValue is changed`, async () => {
+    const wrapper = createWrapper({ modelValue: '2024-09-01' });
+
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+    datePicker.vm.move = jest.fn();
+
+    expect(datePicker.props().modelValue).toEqual(new Date('2024-09-01'));
+
+    await wrapper.setProps({ modelValue: '2024-09-02' });
+
+    expect(datePicker.vm.move).toHaveBeenCalled();
+    expect(datePicker.props().modelValue).toEqual(new Date('2024-09-02'));
+  });
+
+  it('sets the error state correctly', () => {
+    const wrapper = createWrapper({
+      label: 'test datepicker',
+      errorMsg: 'datepicker has error',
+    });
+
+    expect(wrapper.attributes()['data-has-error']).toBeDefined();
+    const datePicker = wrapper.findComponent({ name: 'DatePicker' });
+
+    expect(datePicker.props().style).toEqual({
+      border: '1px solid var(--color-on-error)',
+    });
+    const errorDiv = wrapper.find('div.text-xs.text-on-error.mt-1');
+    expect(errorDiv.isVisible()).toBe(true);
+    expect(errorDiv.text()).toBe('datepicker has error');
+  });
+
+  it('emits null when date is invalid', async () => {
+    const wrapper = createWrapper({ label: 'test datepicker', modelValue: 'not a date' });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(null);
+  });
+});

package/squirrel/components/p-inline-date-picker/p-inline-date-picker.vue

@@ -25,13 +25,13 @@
 <script lang="ts">
 import dayjs from 'dayjs';
 import inputClassesMixin from '@squirrel/utils/inputClassesMixin';
+import { type AttributeConfig } from 'v-calendar/dist/types/src/utils/attribute';
 import { DatePicker } from 'v-calendar';
 import { type PropType, type StyleValue, defineComponent } from 'vue';
 
-// The type of the select attribute is defined in node_modules/v-calendar/dist/types/src/utils/attribute.d.ts
-// but there was no way to import it, so as a workaround we cast the selectAttribute as `any`.
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const selectAttribute = { highlight: { class: 'bg-primary', contentClass: 'text-white' } } as any;
+const selectAttribute: AttributeConfig = {
+  highlight: { class: 'bg-primary', contentClass: 'text-white' },
+};
 
 const DEFAULT_MASKS = {
   // The mask for the input
@@ -112,7 +112,7 @@ export default defineComponent({
   },
   watch: {
     modelValue: {
-      handler(nV) {
+      async handler(nV) {
         const date = dayjs(nV, this.masks.data).toDate();
 
         if (nV && date.toString() === 'Invalid Date') {
@@ -123,8 +123,8 @@ export default defineComponent({
         this.innerValue = nV ? dayjs(nV, this.masks.data).toDate() : null;
         const datepicker = this.$refs.datepicker as { move: (val: unknown) => void };
 
-        if (datepicker && this.innerValue) {
-          datepicker.move(this.innerValue);
+        if (datepicker && typeof datepicker.move === 'function' && this.innerValue) {
+          await datepicker.move(this.innerValue);
         }
       },
       immediate: true,

package/squirrel/components/p-input-number/p-input-number.spec.js

@@ -5,7 +5,6 @@ const baseClasses = () => [
   'text-night',
   'w-full',
   'bg-surface',
-
   'focus:outline-none',
   'border-0',
   'ring-1',

package/squirrel/components/p-loading/p-loading.spec.js

@@ -53,6 +53,7 @@ const createWrapper = (options) => {
     {
       global: {
         stubs: {
+          Teleport: true,
           PSkeletonLoader: true,
         },
       },
@@ -232,45 +233,55 @@ describe('PLoading.vue', () => {
       template: `<div>{{ modelValue }}</div>`,
     });
 
-    const wrapper = createWrapperFor({
-      template: `
+    const wrapper = createWrapperFor(
+      {
+        template: `
         <button class="request-1-sec-component-props" @click="fireRequestComponentProps"></button>
         <button class="update-props" @click="updateProps"></button>
       `,
-      components: { TestComponent },
-      setup() {
-        const componentProps = ref({ modelValue: 0 });
-        const { loadingShow, loadingHide } = usePLoading();
-
-        const fireRequestComponentProps = async () => {
-          const id = `component-props`;
-          componentProps.value.modelValue = 10;
-          loadingShow({ id, content: TestComponent, props: componentProps });
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-          loadingHide(id);
-        };
-
-        const updateProps = () => {
-          componentProps.value.modelValue = 20;
-        };
-
-        return { loadingShow, loadingHide, fireRequestComponentProps, updateProps };
+        components: { TestComponent },
+        setup() {
+          const componentProps = ref({ modelValue: 0 });
+          const { loadingShow, loadingHide } = usePLoading();
+
+          const fireRequestComponentProps = async () => {
+            const id = `component-props`;
+            componentProps.value.modelValue = 10;
+            loadingShow({ id, content: TestComponent, props: componentProps });
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            loadingHide(id);
+          };
+
+          const updateProps = () => {
+            componentProps.value.modelValue = 20;
+          };
+
+          return { loadingShow, loadingHide, fireRequestComponentProps, updateProps, componentProps };
+        },
       },
-    });
+      {
+        global: {
+          stubs: {
+            Teleport: true,
+          },
+        },
+      }
+    );
 
     await wrapper.find('.request-1-sec-component-props').trigger('click');
 
     jest.advanceTimersByTime(300);
     await waitNT(appWrapper.vm);
-    const testComponent = appWrapper.findComponent(TestComponent);
+    const getTestComponent = () => appWrapper.findComponent(TestComponent);
+
     expect(appWrapper.find('[aria-busy]').exists()).toBe(true);
-    expect(testComponent.exists()).toBe(true);
-    expect(testComponent.props().modelValue).toBe(10);
+    expect(getTestComponent().exists()).toBe(true);
+    expect(getTestComponent().props().modelValue).toBe(10);
 
     jest.advanceTimersByTime(300);
     await waitNT(appWrapper.vm);
     await wrapper.find('.update-props').trigger('click');
-    expect(testComponent.props().modelValue).toBe(20);
+    expect(getTestComponent().props().modelValue).toBe(20);
 
     jest.advanceTimersByTime(500);
     await waitNT(appWrapper.vm);

package/squirrel/components/p-loading/p-loading.vue

@@ -1,23 +1,30 @@
 <template>
-  <Transition name="pm-backdrop-transition" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
-    <div v-if="show" class="fixed left-0 top-0 z-[120] flex w-full justify-center" aria-live="polite" aria-busy="true">
+  <Teleport to="body">
+    <Transition name="pm-backdrop-transition" enter-active-class="fadeInDown" leave-active-class="fadeOutUp">
       <div
-        :style="{ width: `${width}px`, height: `${height}px` }"
-        class="overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
+        v-if="show"
+        class="fixed left-0 top-0 z-[120] flex w-full justify-center"
+        aria-live="polite"
+        aria-busy="true"
       >
-        <Transition enter-from-class="opacity-0" enter-active-class="transition duration-500">
-          <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
-          <div v-else :class="textDivClass">{{ content }}</div>
-        </Transition>
+        <div
+          :style="{ width: `${width}px`, height: `${height}px` }"
+          class="overflow-hidden rounded-b border-x border-b border-p-gray-30 bg-p-blue-10 shadow-sm transition-all duration-300"
+        >
+          <Transition enter-from-class="opacity-0" enter-active-class="transition duration-500">
+            <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
+            <div v-else :class="textDivClass">{{ content }}</div>
+          </Transition>
+        </div>
+      </div>
+    </Transition>
+    <div v-if="content" class="invisible fixed">
+      <div ref="dimsReference">
+        <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
+        <div v-else :class="textDivClass">{{ content }}</div>
       </div>
     </div>
-  </Transition>
-  <div v-if="content" class="invisible fixed">
-    <div ref="dimsReference">
-      <Component :is="content" v-if="isComponent(content)" v-bind="componentProps" />
-      <div v-else :class="textDivClass">{{ content }}</div>
-    </div>
-  </div>
+  </Teleport>
 </template>
 
 <script setup lang="ts">