test: datatables (#492)

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.52
+
+- Add new icons for the `Icon` component
+  - `Unverified`
+  - `Verified`
+
 ## v2.0.51
 
 - Adds the `DataTable` component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.51",
+  "version": "2.0.52",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/DataTable/DataTable.vue

@@ -74,13 +74,15 @@
 
     <IconButton
       class="mr-2"
+      data-testid="uic-datatable-list-previous"
       :disabled="!previous"
       :icon="IconName.PREVIOUS"
       size="sm"
       variant="outlined"
       @click="$emit('previous')"
     />
     <IconButton
+      data-testid="uic-datatable-list-next"
       :disabled="!next"
       :icon="IconName.NEXT"
       size="sm"

src/components/DataTable/__tests__/DataTable.spec.ts

@@ -1,21 +1,66 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/vue';
+import { RenderOptions, render, waitFor, within } from '@testing-library/vue';
+import Column from 'primevue/column';
 import PrimeVue from 'primevue/config';
 
 import DataTable from '../DataTable.vue';
+import userEvent from '@testing-library/user-event';
+
+const DEFAULT_SLOTS = {
+  default: `<Column field="firstName" header="First Name" />`
+} as const;
+
+const DEFAULT_PROPS = {
+  data: [{ firstName: 'John' }],
+  dataKey: 'id'
+} as const;
+
+const renderDataTable = (options: RenderOptions = {}) =>
+  render(DataTable, {
+    global: {
+      plugins: [PrimeVue],
+      components: { Column }
+    },
+    slots: DEFAULT_SLOTS,
+    props: DEFAULT_PROPS,
+    ...options
+  });
 
 describe('DataTable', () => {
   it('renders', () => {
-    const { getByTestId } = render(DataTable, {
-      global: {
-        plugins: [PrimeVue]
-      },
-      props: {
-        data: [],
-        dataKey: 'id'
-      }
-    });
+    const { getByTestId } = renderDataTable();
 
     expect(getByTestId('uic-datatable')).toBeVisible();
+    const { getByText: tableGetByText } = within(getByTestId('uic-datatable'));
+    expect(tableGetByText('First Name')).toBeVisible();
+    expect(tableGetByText('John')).toBeVisible();
+    expect(tableGetByText('1 result')).toBeVisible();
+  });
+
+  it('emits `rowClick` when `clickable`', async () => {
+    const { emitted, getByTestId } = renderDataTable({
+      props: { ...DEFAULT_PROPS, clickable: true }
+    });
+    const { getByText: tableGetByText } = within(getByTestId('uic-datatable'));
+    userEvent.click(tableGetByText('John'));
+    await waitFor(() => expect(emitted()).toHaveProperty('rowClick'));
+  });
+
+  it('emits `next` and `previous` when `list`', async () => {
+    const { emitted, getByTestId } = renderDataTable({
+      props: { ...DEFAULT_PROPS, list: true, next: 'test', previous: 'test' }
+    });
+
+    const nextButton = getByTestId('uic-datatable-list-next');
+    expect(nextButton).toBeVisible();
+    expect(nextButton).toBeEnabled();
+    userEvent.click(nextButton);
+    await waitFor(() => expect(emitted()).toHaveProperty('next'));
+
+    const previousButton = getByTestId('uic-datatable-list-previous');
+    expect(previousButton).toBeVisible();
+    expect(previousButton).toBeEnabled();
+    userEvent.click(previousButton);
+    await waitFor(() => expect(emitted()).toHaveProperty('previous'));
   });
 });

src/components/Icon/types.ts

@@ -67,8 +67,10 @@ export const IconName = {
   SIGNAL: 'Signal',
   SUCCESS: 'Success',
   TRIANGLE_EXCLAMATION: 'TriangleExclamation',
+  UNVERIFIED: 'Unverified',
   USER: 'User',
   USERS: 'Users',
+  VERIFIED: 'Verified',
   WEBHOOKS: 'Webhooks'
 } as const;
 export type IconName = (typeof IconName)[keyof typeof IconName];

src/components/IconButton/IconButton.vue

@@ -10,7 +10,7 @@
       v-bind="!to ? $attrs : undefined"
       :class="`uic-icon-button size-${size} color-${color} variant-${variant}`"
       :disabled="disabled"
-      data-testid="uic-icon-button"
+      :data-testid="$attrs['data-testid'] ?? 'uic-icon-button'"
       @click="$emit('click', $event)"
     >
       <Icon :icon="icon" :size="iconSize" />