@pequity/squirrel 5.2.2 → 5.3.0

package/squirrel/components/p-select-list/p-select-list.spec.js

@@ -1,12 +1,12 @@
 import PSelectList from '@squirrel/components/p-select-list/p-select-list.vue';
 import filterListItems from '@squirrel/components/p-dropdown-select/p-dropdown-select.mock.json';
 import { cloneDeep } from 'lodash-es';
-import { createWrapperFor, sleep } from '@tests/jest.helpers';
+import { createWrapperFor, sleep } from '@tests/vitest.helpers';
 import { ref } from 'vue';
 import { useVirtualizer } from '@tanstack/vue-virtual';
 
-jest.mock('@tanstack/vue-virtual', () => ({
-  useVirtualizer: jest.fn(),
+vi.mock('@tanstack/vue-virtual', () => ({
+  useVirtualizer: vi.fn(),
 }));
 
 const createMockedVirtualizer = (count) => {
@@ -67,13 +67,12 @@ const cleanup = async (wrapper) => {
 
 describe('PSelectList.vue', () => {
   beforeEach(() => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
   });
 
   // When using `attachTo: document.body` we have to cleanup the DOM and call `wrapper.destroy()` after each test
   afterEach(() => {
     document.body.innerHTML = '';
-    jest.clearAllMocks();
   });
 
   it('renders correctly', async () => {

package/squirrel/components/p-select-pill/p-select-pill.spec.js

@@ -1,5 +1,5 @@
 import PSelectPill from '@squirrel/components/p-select-pill/p-select-pill.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 const ACTIVE_CLASS = 'text-p-purple-60';
 

package/squirrel/components/p-skeleton-loader/p-skeleton-loader.spec.js

@@ -1,5 +1,5 @@
 import PSkeletonLoader from '@squirrel/components/p-skeleton-loader/p-skeleton-loader.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PSkeletonLoader.vue', () => {
   it.each([

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

@@ -5,7 +5,7 @@ import {
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 import { defineComponent, h, inject } from 'vue';
 
 const columns = [

package/squirrel/components/p-table-header-cell/p-filter-icon.spec.js

@@ -1,5 +1,5 @@
 import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PFilterIcon.vue', () => {
   it('renders a filter icon', async () => {

package/squirrel/components/p-table-header-cell/p-table-header-cell.spec.js

@@ -1,6 +1,6 @@
 import PFilterIcon from '@squirrel/components/p-table-header-cell/p-table-filter-icon.vue';
 import PTableHeaderCell from '@squirrel/components/p-table-header-cell/p-table-header-cell.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PTableHeaderCell.vue', () => {
   it('renders correctly', async () => {

package/squirrel/components/p-table-loader/p-table-loader.spec.js

@@ -1,6 +1,6 @@
 import PTable from '@squirrel/components/p-table/p-table.vue';
 import PTableLoader from '@squirrel/components/p-table-loader/p-table-loader.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PTableLoader.vue', () => {
   it('matches the PTable classes', async () => {

package/squirrel/components/p-table-sort/p-table-sort.spec.js

@@ -1,6 +1,6 @@
 import PTableSort from '@squirrel/components/p-table-sort/p-table-sort.vue';
 import { SORTING_TYPES } from '@squirrel/components/p-table-sort/p-table-sort.config';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PTableSort.vue', () => {
   it('renders correctly', async () => {

package/squirrel/components/p-table-td/p-table-td.spec.js

@@ -1,10 +1,11 @@
 import PTableTd from '@squirrel/components/p-table-td/p-table-td.vue';
 import {
   colsInjectionKey,
+  isColsResizableInjectionKey,
   isFirstColFixedInjectionKey,
   isLastColFixedInjectionKey,
 } from '@squirrel/components/p-table/p-table.types';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 import { ref } from 'vue';
 
 const DEFAULT_TD_CLASSES = [
@@ -23,6 +24,16 @@ const DEFAULT_TD_CLASSES = [
 
 const DEFAULT_INNER_DIV_CLASSES = ['w-max', 'px-2'];
 
+const GRADIENT_TD_CLASSES = [
+  'min-w-[80px]',
+  'border-l',
+  'border-p-gray-30',
+  'bg-gradient-to-r',
+  'from-white',
+  'via-p-gray-10',
+  'to-p-gray-10',
+];
+
 describe('PTableTd.vue', () => {
   it('renders a td', async () => {
     const wrapper = createWrapperFor(PTableTd, {
@@ -145,4 +156,27 @@ describe('PTableTd.vue', () => {
 
     expect([...innerDiv.classes()].sort()).toEqual(['w-max', 'pl-2', 'pr-4'].sort());
   });
+
+  it(`renders a td with a gradient when it's the last sticky column`, async () => {
+    const wrapper = createWrapperFor(PTableTd, {
+      props: { colIndex: 2, isEditable: true },
+      slots: { default: `Cell content` },
+      global: {
+        provide: {
+          [colsInjectionKey]: ref([{ id: 1 }, { id: 2 }, { id: 3 }]),
+          [isColsResizableInjectionKey]: ref(true),
+          [isLastColFixedInjectionKey]: ref(false),
+        },
+      },
+    });
+
+    const tds = wrapper.findAll('td');
+
+    expect(tds.length).toBe(2);
+
+    const gradientTd = tds[1];
+
+    expect(gradientTd.exists()).toBe(true);
+    expect(gradientTd.classes()).toEqual(GRADIENT_TD_CLASSES);
+  });
 });

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

@@ -1,5 +1,5 @@
 import PTabs from '@squirrel/components/p-tabs/p-tabs.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 import { markRaw } from 'vue';
 
 const Tab1Icon = markRaw({ template: `<i data-icon="icon-tab1"></i>` });

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

@@ -1,5 +1,5 @@
 import PTextarea from '@squirrel/components/p-textarea/p-textarea.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PTextarea.vue', () => {
   it('renders correctly', async () => {

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

@@ -1,5 +1,5 @@
 import PToggle from '@squirrel/components/p-toggle/p-toggle.vue';
-import { createWrapperFor } from '@tests/jest.helpers';
+import { createWrapperFor } from '@tests/vitest.helpers';
 
 describe('PToggle.vue', () => {
   it('renders correctly', async () => {

package/squirrel/composables/useInputClasses.spec.js

@@ -1,3 +1,4 @@
+import { SPACING_LEFT, SPACING_PREFIX, SPACING_RIGHT, SPACING_SUFFIX } from '@squirrel/utils/inputClassesShared';
 import { reactive } from 'vue';
 import { useInputClasses } from '@squirrel/composables/useInputClasses';
 
@@ -164,4 +165,44 @@ describe('useInputClasses', () => {
     );
     expect(errorMsgClasses.value).toBe('text-xs text-on-error mt-1');
   });
+
+  it('should apply the SPACING_PREFIX when prefix is true', () => {
+    const props = reactive({
+      size: 'md',
+      prefix: true,
+    });
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain(SPACING_PREFIX.md);
+  });
+
+  it('should apply the SPACING_SUFFIX when suffix is true', () => {
+    const props = reactive({
+      size: 'md',
+      suffix: true,
+    });
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain(SPACING_SUFFIX.md);
+  });
+
+  it('should apply SPACING_LEFT when prefix is false', () => {
+    const props = reactive({
+      size: 'md',
+      prefix: false,
+    });
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain(SPACING_LEFT.md);
+  });
+
+  it('should apply SPACING_RIGHT when suffix is false', () => {
+    const props = reactive({
+      size: 'md',
+      suffix: false,
+    });
+    const { inputClasses } = useInputClasses(props);
+
+    expect(inputClasses.value).toContain(SPACING_RIGHT.md);
+  });
 });

package/squirrel/index.spec.js

@@ -0,0 +1,21 @@
+describe('index.ts module exports', () => {
+  it('should export from @squirrel/tailwind/config', async () => {
+    const config = await import('@squirrel/tailwind/config');
+    expect(config).toBeDefined();
+  });
+
+  it('should export from @squirrel/components', async () => {
+    const components = await import('@squirrel/components');
+    expect(components).toBeDefined();
+  });
+
+  it('should export from @squirrel/composables', async () => {
+    const composables = await import('@squirrel/composables');
+    expect(composables).toBeDefined();
+  });
+
+  it('should export from @squirrel/utils', async () => {
+    const utils = await import('@squirrel/utils');
+    expect(utils).toBeDefined();
+  });
+});

package/squirrel/utils/component.spec.ts

@@ -0,0 +1,29 @@
+import PIcon from '@squirrel/components/p-icon/p-icon.vue';
+import { isComponent } from '@squirrel/utils/component';
+
+describe('isComponent', () => {
+  it('should return true for a valid component object', () => {
+    expect(isComponent(PIcon)).toBe(true);
+  });
+
+  it('should return false for null', () => {
+    expect(isComponent(null)).toBe(false);
+  });
+
+  it.each([
+    ['string', 'string'],
+    ['number', 123],
+    ['boolean', true],
+    ['undefined', undefined],
+    ['symbol', Symbol('symbol')],
+    ['function', () => {}],
+    ['array', []],
+    ['date', new Date()],
+    ['regexp', /regex/],
+    ['error', new Error('error')],
+    ['map', new Map()],
+    ['set', new Set()],
+  ])('should return false for a non-component object: %s', (_, value) => {
+    expect(isComponent(value)).toBe(false);
+  });
+});

package/squirrel/utils/component.ts

@@ -0,0 +1,5 @@
+import { type Component } from 'vue';
+import { isPlainObject } from 'lodash-es';
+
+// Vue produces a different type of object in dev and prod mode, so we cannot check for e.g `typeof val.render === 'function`
+export const isComponent = (val: unknown): val is Component => isPlainObject(val);

package/squirrel/utils/dom.spec.js

@@ -6,13 +6,12 @@ describe('isVisible', () => {
   beforeEach(() => {
     element = document.createElement('div');
     // Simulate element dimensions since jsdom doesn't support layout
-    jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
-    jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(() => 100);
+    vi.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
+    vi.spyOn(element, 'offsetHeight', 'get').mockImplementation(() => 100);
   });
 
   afterEach(() => {
     element = null;
-    jest.clearAllMocks();
   });
 
   it('throws an error when no element is provided', () => {

package/squirrel/utils/listKeyboardNavigation.spec.js

@@ -53,20 +53,16 @@ describe('listKeyboardNavigation', () => {
   };
 
   it('initializes correctly', () => {
-    document.addEventListener = jest.fn().mockImplementationOnce();
+    document.addEventListener = vi.fn().mockImplementationOnce();
 
     const navigationSvc = createTestSvc();
 
     navigationSvc.init();
 
-    expect(navigationSvc).toHaveProperty(
-      'getItems',
-      'getFocusedItem',
-      'clearFocusedState',
-      'setFocusedItem',
-      'listKeydown',
-      'init',
-      'destroy'
+    ['getItems', 'getFocusedItem', 'clearFocusedState', 'setFocusedItem', 'listKeydown', 'init', 'destroy'].forEach(
+      (method) => {
+        expect(navigationSvc).toHaveProperty(method);
+      }
     );
 
     expect(document.addEventListener).toBeCalledWith('keydown', navigationSvc.listKeydown);

package/squirrel/utils/sanitization.spec.js

@@ -1,7 +1,7 @@
 import { sanitizeUrl } from '@squirrel/utils/sanitization';
 
 describe('sanitizeUrl', () => {
-  const consoleMock = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  const consoleMock = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
 
   afterAll(() => {
     consoleMock.mockReset();

package/squirrel/utils/{string.spec.js → string.spec.ts}

@@ -1,4 +1,4 @@
-import { toString } from '@squirrel/utils/string';
+import { isString, toString } from '@squirrel/utils/string';
 
 describe('toString', () => {
   it.each(['', new Date(), NaN, Infinity, {}, [], true, false, null, undefined])(
@@ -16,3 +16,21 @@ describe('toString', () => {
     expect(toString(2903498.22)).toBe('2903498.22');
   });
 });
+
+describe('isString', () => {
+  it('should return true for a string', () => {
+    expect(isString('hello')).toBe(true);
+  });
+
+  it.each([
+    [123, false],
+    [{}, false],
+    [[], false],
+    [null, false],
+    [undefined, false],
+    [true, false],
+    [() => {}, false],
+  ])('should return %s for %p', (input, expected) => {
+    expect(isString(input)).toBe(expected);
+  });
+});

package/squirrel/utils/string.ts

@@ -1,3 +1,5 @@
+export const isString = (val: unknown): val is string => typeof val === 'string';
+
 export const toString = (value: unknown): string => {
   if (typeof value === 'number' && (!isFinite(value) || isNaN(value))) {
     return '';

package/squirrel/utils/tailwind.spec.js

@@ -0,0 +1,27 @@
+import { cloneDeep } from 'lodash-es';
+import { getScreen } from './tailwind';
+
+const screens = { sm: '640px', md: '768px' };
+
+describe('tailwind', () => {
+  it('should return the correct screen size for a valid key', () => {
+    // Mock the theme.screens object
+    const originalScreens = global.screens;
+    global.screens = cloneDeep(screens);
+
+    expect(getScreen('sm')).toBe('640px');
+    expect(getScreen('md')).toBe('768px');
+
+    // Restore the original screens object
+    global.screens = originalScreens;
+  });
+
+  it('should return undefined for an invalid key', () => {
+    const originalScreens = global.screens;
+    global.screens = cloneDeep(screens);
+
+    expect(getScreen('xxl')).toBeUndefined();
+
+    global.screens = originalScreens;
+  });
+});