@pequity/squirrel 10.0.2 → 10.1.0

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

@@ -0,0 +1,364 @@
+import PDrawer from '@squirrel/components/p-drawer/p-drawer.vue';
+import { I18nPlugin } from '@tests/i18n.plugin';
+import { sleep, waitRAF } from '@tests/vitest.helpers';
+import { mount } from '@vue/test-utils';
+import FloatingVue from 'floating-vue';
+
+const createWrapperContainer = (componentArgs) => {
+  const args = componentArgs || {};
+
+  args.appendTo = '#drawer-host';
+  const wrapperContainer = {
+    components: {
+      PDrawer,
+    },
+    data() {
+      return {
+        showDrawer: false,
+        args,
+      };
+    },
+    template: `
+      <div id="drawer-host"></div>
+      <PDrawer v-model="showDrawer" v-bind="args"><p>Drawer content goes here...</p></PDrawer>
+    `,
+  };
+
+  return mount(wrapperContainer, {
+    attachTo: document.body,
+    global: {
+      plugins: [FloatingVue, I18nPlugin],
+      stubs: {
+        transition: false,
+      },
+    },
+  });
+};
+
+describe('PDrawer basic functionality', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('shows the drawer', async () => {
+    const wrapper = createWrapperContainer();
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(false);
+
+    await wrapper.setData({ showDrawer: true });
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('hides the drawer', async () => {
+    const wrapper = createWrapperContainer();
+
+    await wrapper.setData({ showDrawer: true });
+    await waitRAF();
+    await wrapper.setData({ showDrawer: false });
+    await waitRAF();
+    // Wait a bit longer for the transition to complete and element to unmount
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(false);
+
+    wrapper.unmount();
+  });
+
+  it('renders with correct title', async () => {
+    const wrapper = createWrapperContainer({
+      title: 'Test Drawer Title',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+    const titleElement = wrapper.find('h3');
+
+    expect(drawer.attributes('aria-label')).toBe('Test Drawer Title');
+    expect(titleElement.text()).toBe('Test Drawer Title');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    ['right', 'drawer-right', 'drawer-left'],
+    ['left', 'drawer-left', 'drawer-right'],
+  ])('renders on the %s when position is %s', async (position, expectedClass, unexpectedClass) => {
+    const wrapper = createWrapperContainer({
+      position: position === 'right' ? undefined : position,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.classes()).toContain(expectedClass);
+    expect(drawer.classes()).not.toContain(unexpectedClass);
+
+    wrapper.unmount();
+  });
+
+  it('applies correct z-index', async () => {
+    const wrapper = createWrapperContainer({
+      zIndex: 950,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.element.style.zIndex).toBe('950');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'renders', true],
+    [false, 'does not render', false],
+  ])('%s close button when enableClose is %s', async (enableClose, description, shouldExist) => {
+    const wrapper = createWrapperContainer({ enableClose });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const closeBtn = wrapper.findComponent({ name: 'PCloseBtn' });
+
+    expect(closeBtn.exists()).toBe(shouldExist);
+
+    wrapper.unmount();
+  });
+
+  it('applies custom drawer class', async () => {
+    const wrapper = createWrapperContainer({
+      drawerClass: 'custom-drawer-class',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+
+    expect(drawer.classes()).toContain('custom-drawer-class');
+
+    wrapper.unmount();
+  });
+
+  it('shows error message when provided', async () => {
+    const wrapper = createWrapperContainer({
+      errorMsg: 'This is an error message',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const errorAlert = wrapper.findComponent({ name: 'PAlert' });
+
+    expect(errorAlert.exists()).toBe(true);
+    expect(errorAlert.text()).toContain('This is an error message');
+
+    wrapper.unmount();
+  });
+
+  it('applies disabled state correctly', async () => {
+    const wrapper = createWrapperContainer({
+      disabled: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const contentWrapper = wrapper.find('.relative.grow.overflow-y-auto');
+
+    expect(contentWrapper.classes()).toContain('pointer-events-none');
+    expect(contentWrapper.classes()).toContain('opacity-50');
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'renders', true, 'bg-black/20'],
+    [false, 'does not render', false, null],
+  ])('%s backdrop when showBackdrop is %s', async (showBackdrop, description, shouldExist, expectedClass) => {
+    const wrapper = createWrapperContainer({ showBackdrop });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+
+    if (shouldExist) {
+      expect(backdrop.exists()).toBe(true);
+      expect(backdrop.classes()).toContain(expectedClass);
+    } else {
+      expect(backdrop.isVisible()).toBe(false);
+    }
+
+    wrapper.unmount();
+  });
+
+  it('sets correct ARIA attributes', async () => {
+    const wrapper = createWrapperContainer({
+      title: 'Test Drawer',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawer = wrapper.find('[data-drawer-id]');
+    const drawerComponent = wrapper.findComponent(PDrawer);
+    const drawerId = drawerComponent.vm.id;
+
+    expect(drawer.attributes('role')).toBe('dialog');
+    expect(drawer.attributes('aria-modal')).toBe('false');
+    expect(drawer.attributes('aria-label')).toBe('Test Drawer');
+    expect(drawer.attributes('aria-describedby')).toBe(`${drawerId}-content`);
+    expect(drawer.attributes('aria-labelledby')).toBe(`${drawerId}-title`);
+
+    wrapper.unmount();
+  });
+
+  it.each([
+    [true, 'closes', false],
+    [false, 'does not close', true],
+  ])('%s when backdrop is clicked and enableClose is %s', async (enableClose, description, shouldStayOpen) => {
+    const wrapper = createWrapperContainer({
+      showBackdrop: true,
+      enableClose,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+    await waitRAF();
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+    await backdrop.trigger('click');
+    await waitRAF();
+
+    if (!shouldStayOpen) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    }
+
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(shouldStayOpen);
+
+    wrapper.unmount();
+  });
+
+  it('stays mounted in DOM when live prop is true', async () => {
+    const wrapper = createWrapperContainer({
+      live: true,
+    });
+
+    // Should be in DOM even before showing
+    expect(wrapper.find('#drawer-host').exists()).toBe(true);
+
+    // Should stay in DOM after closing
+    await wrapper.setData({ showDrawer: true });
+    await wrapper.setData({ showDrawer: false });
+
+    expect(wrapper.find('#drawer-host').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('calls close method when close button is clicked', async () => {
+    const wrapper = createWrapperContainer({
+      enableClose: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    const closeBtn = wrapper.findComponent({ name: 'PCloseBtn' });
+    await closeBtn.trigger('click');
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Check that the drawer was closed (emits update:modelValue)
+    expect(drawerComponent.emitted()['update:modelValue']).toBeTruthy();
+    expect(drawerComponent.emitted()['update:modelValue'][0]).toEqual([false]);
+
+    wrapper.unmount();
+  });
+
+  it('uses custom transition classes when provided', async () => {
+    const wrapper = createWrapperContainer({
+      inClass: 'custom-slide-in',
+      outClass: 'custom-slide-out',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    // Test that the custom classes are passed as props
+    expect(drawerComponent.props('inClass')).toBe('custom-slide-in');
+    expect(drawerComponent.props('outClass')).toBe('custom-slide-out');
+
+    wrapper.unmount();
+  });
+
+  it('uses position-based transition classes by default', async () => {
+    const wrapperRight = createWrapperContainer({ position: 'right' });
+    await wrapperRight.setData({ showDrawer: true });
+
+    expect(wrapperRight.findComponent(PDrawer).vm.transitionInClass).toBe('slideInRight');
+    expect(wrapperRight.findComponent(PDrawer).vm.transitionOutClass).toBe('slideOutRight');
+
+    wrapperRight.unmount();
+
+    const wrapperLeft = createWrapperContainer({ position: 'left' });
+    await wrapperLeft.setData({ showDrawer: true });
+
+    expect(wrapperLeft.findComponent(PDrawer).vm.transitionInClass).toBe('slideInLeft');
+    expect(wrapperLeft.findComponent(PDrawer).vm.transitionOutClass).toBe('slideOutLeft');
+
+    wrapperLeft.unmount();
+  });
+
+  it('emits all lifecycle events', async () => {
+    const wrapper = createWrapperContainer();
+    const drawerComponent = wrapper.findComponent(PDrawer);
+
+    // Test opening events
+    await wrapper.setData({ showDrawer: true });
+    await sleep(100);
+
+    expect(drawerComponent.emitted()['before-open']).toBeTruthy();
+    expect(drawerComponent.emitted().opening).toBeTruthy();
+    expect(drawerComponent.emitted().opened).toBeTruthy();
+
+    // Test closing events
+    await wrapper.setData({ showDrawer: false });
+    await sleep(100);
+
+    expect(drawerComponent.emitted()['before-close']).toBeTruthy();
+    expect(drawerComponent.emitted().closing).toBeTruthy();
+    expect(drawerComponent.emitted().closed).toBeTruthy();
+
+    wrapper.unmount();
+  });
+
+  it('applies backdrop cursor style based on enableClose', async () => {
+    const wrapper = createWrapperContainer({
+      showBackdrop: true,
+      enableClose: true,
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    const backdrop = wrapper.find('.fixed.bottom-0.left-0.right-0.top-0');
+
+    expect(backdrop.classes()).toContain('cursor-pointer');
+
+    wrapper.unmount();
+  });
+
+  it('validates width prop format', async () => {
+    const wrapper = createWrapperContainer({
+      width: '600px',
+    });
+
+    await wrapper.setData({ showDrawer: true });
+
+    // Component should render successfully with valid width
+    expect(wrapper.find('[data-drawer-id]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+});

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

@@ -39,7 +39,13 @@
               { 'flex-row-reverse': position === 'right' },
             ]"
           >
-            <PCloseBtn v-if="enableClose" :aria-label="closeLabel" class="flex-0" :disabled="disabled" @click="close" />
+            <PCloseBtn
+              v-if="enableClose"
+              :aria-label="closeLabel || $t('squirrel.close')"
+              class="flex-0"
+              :disabled="disabled"
+              @click="close"
+            />
             <slot name="title">
               <h3
                 v-if="title"
@@ -201,7 +207,7 @@ export default defineComponent({
      */
     closeLabel: {
       type: String,
-      default: 'Close',
+      default: '',
     },
     /**
      * Whether to show the backdrop behind the drawer.