feat: test data-test props. Warning, failed on iconPosition

PrestaShopCorp · Sep 9, 2024 · fb6ce54 · fb6ce54
1 parent 633ac2f
commit fb6ce54
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 20 deletions.
diff --git a/packages/components/sortable-list/src/sortable-list.vue b/packages/components/sortable-list/src/sortable-list.vue
@@ -38,7 +38,7 @@
             <span
               v-if="displayPositionNumbers"
               class="puik-sortable-list_item-index"
-              :data-test="`${dataTest}-list_item-index-${index + 1}`"
+              :data-test="`${dataTest}-list-item-index-${index + 1}`"
             >
               {{ $attrs.dataSortableId || index + 1 }}
             </span>

diff --git a/packages/components/sortable-list/test/sortable-list.spec.ts b/packages/components/sortable-list/test/sortable-list.spec.ts
@@ -1,6 +1,9 @@
 import { mount, ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
-import { PuikSortableList, SortableListProps } from '@prestashopcorp/puik-components';
+import {
+  PuikSortableList,
+  SortableListProps
+} from '@prestashopcorp/puik-components';
 
 describe('SortableList tests', () => {
   let wrapper: VueWrapper<any>;
@@ -33,73 +36,155 @@ describe('SortableList tests', () => {
   });
 
   it('should render list items correctly', () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
     factory({ listId: 'test', list, itemKey: 'id' });
     expect(wrapper.findAll('.draggable').length).toBe(list.length);
   });
 
   it('should handle keydown events correctly', async () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
     factory({ listId: 'test', list, itemKey: 'id' });
     const draggable = wrapper.find('.draggable');
     await draggable.trigger('keydown', { key: 'ArrowUp' });
     expect(wrapper.emitted().keydown).toBeTruthy();
-    expect((wrapper.emitted().keydown[0][0] as KeyboardEvent).key).toBe('ArrowUp');
+    expect((wrapper.emitted().keydown[0][0] as KeyboardEvent).key).toBe(
+      'ArrowUp'
+    );
     await draggable.trigger('keydown', { key: 'ArrowDown' });
     expect(wrapper.emitted().keydown).toBeTruthy();
-    expect((wrapper.emitted().keydown[1][0] as KeyboardEvent).key).toBe('ArrowDown');
+    expect((wrapper.emitted().keydown[1][0] as KeyboardEvent).key).toBe(
+      'ArrowDown'
+    );
   });
 
   it('should handle displayPositionNumbers prop correctly', () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
-    factory({ listId: 'test', list, itemKey: 'id', displayPositionNumbers: true });
-    expect(wrapper.findAll('.puik-sortable-list_item-index').length).toBe(list.length);
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
+    factory({
+      listId: 'test',
+      list,
+      itemKey: 'id',
+      displayPositionNumbers: true
+    });
+    expect(wrapper.findAll('.puik-sortable-list_item-index').length).toBe(
+      list.length
+    );
   });
 
   it('should handle iconPosition prop correctly', () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
     factory({ listId: 'test', list, itemKey: 'id', iconPosition: 'left' });
     expect(wrapper.findAll('.puik-icon').length).toBe(list.length);
   });
 
   it('should handle tag prop correctly', () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
     factory({ listId: 'test', list, itemKey: 'id', tag: 'section' });
     expect(wrapper.find('section').exists()).toBe(true);
   });
 
   it('should handle custom-content slot correctly', () => {
-    const list = [{ id: '1', title: 'Item 1', custom: 'Custom Content 1' }, { id: '2', title: 'Item 2', custom: 'Custom Content 2' }];
-    factory({ listId: 'test', list, itemKey: 'id' }, {
-      slots: {
-        'custom-content': `
+    const list = [
+      { id: '1', title: 'Item 1', custom: 'Custom Content 1' },
+      { id: '2', title: 'Item 2', custom: 'Custom Content 2' }
+    ];
+    factory(
+      { listId: 'test', list, itemKey: 'id' },
+      {
+        slots: {
+          'custom-content': `
           <template #custom-content="{ element }">
             <div class="custom-content">{{ element.custom }}</div>
           </template>
         `
+        }
       }
-    });
+    );
     expect(wrapper.findAll('.custom-content').length).toBe(list.length);
   });
 
   it('should emit events without errors', async () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      { id: '1', title: 'Item 1' },
+      { id: '2', title: 'Item 2' }
+    ];
     factory({ listId: 'test', list, itemKey: 'id' });
     const events = [
-      'choose', 'unchoose', 'start', 'end', 'add', 'update', 'sort', 'remove', 'filter', 'move', 'clone', 'change'
+      'choose',
+      'unchoose',
+      'start',
+      'end',
+      'add',
+      'update',
+      'sort',
+      'remove',
+      'filter',
+      'move',
+      'clone',
+      'change'
     ];
 
-    events.forEach(event => {
+    events.forEach((event) => {
       const spy = vi.spyOn(wrapper.vm, '$emit');
       wrapper.vm.$emit(event, {});
       expect(spy).toHaveBeenCalledWith(event, {});
     });
   });
 
   it('should handle dataTest prop correctly', () => {
-    const list = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
+    const list = [
+      // with iconPosition right
+      {
+        id: '1',
+        title: 'Item 1',
+        description: 'Description',
+        imgSrc: 'https://t.ly/Ku50h',
+        iconPosition: 'right'
+      },
+      // with iconPosition left
+      { id: '2', title: 'Item 2', iconPosition: 'left' }
+    ];
     const dataTest = 'sortable-list-test';
+
     factory({ listId: 'test', list, itemKey: 'id', dataTest });
     expect(wrapper.attributes('data-test')).toBe(dataTest);
+    // item 1
+    expect(wrapper.find(`[data-test="${dataTest}-item-1"]`).exists()).toBe(
+      true
+    );
+    expect(wrapper.find(`[data-test="${dataTest}-item-1"]`).exists()).toBe(
+      true
+    );
+    expect(
+      wrapper.find(`[data-test="${dataTest}-list-item-index-1"]`).exists()
+    ).toBe(true);
+    expect(wrapper.find(`[data-test="${dataTest}-img-1"]`).exists()).toBe(true);
+    expect(wrapper.find(`[data-test="${dataTest}-title-1"]`).exists()).toBe(
+      true
+    );
+    expect(
+      wrapper.find(`[data-test="${dataTest}-description-1"]`).exists()
+    ).toBe(true);
+    expect(
+      wrapper.find(`[data-test="${dataTest}-right-icon-1"]`).exists()
+    ).toBe(true);
+    // item 2
+    expect(wrapper.find(`[data-test="${dataTest}-left-icon-2"]`).exists()).toBe(
+      true
+    );
   });
 });