From 2975ba0bb9fecca3b00b4cf0a15bd5719be00035 Mon Sep 17 00:00:00 2001
From: Nathaniel Waldschmidt
<77284592+NateWaldschmidt@users.noreply.github.com>
Date: Mon, 6 May 2024 12:21:08 -0500
Subject: [PATCH] test: datatables (#492)
---
CHANGELOG.md | 6 ++
package-lock.json | 4 +-
package.json | 2 +-
src/components/DataTable/DataTable.vue | 2 +
.../DataTable/__tests__/DataTable.spec.ts | 65 ++++++++++++++++---
src/components/Icon/svgs/Unverified.svg | 3 +
src/components/Icon/svgs/Verified.svg | 3 +
src/components/Icon/types.ts | 2 +
src/components/IconButton/IconButton.vue | 2 +-
9 files changed, 75 insertions(+), 14 deletions(-)
create mode 100644 src/components/Icon/svgs/Unverified.svg
create mode 100644 src/components/Icon/svgs/Verified.svg
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d05588927..26b3a988c 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/package-lock.json b/package-lock.json
index 9b934de51..30509190a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@lob/ui-components",
- "version": "2.0.51",
+ "version": "2.0.52",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@lob/ui-components",
- "version": "2.0.51",
+ "version": "2.0.52",
"dependencies": {
"date-fns": "^2.29.3",
"date-fns-holiday-us": "^0.3.1",
diff --git a/package.json b/package.json
index 4590854d8..5868ddecc 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/DataTable/DataTable.vue b/src/components/DataTable/DataTable.vue
index 5209ded11..0ed3aac12 100644
--- a/src/components/DataTable/DataTable.vue
+++ b/src/components/DataTable/DataTable.vue
@@ -74,6 +74,7 @@
`
+} 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'));
});
});
diff --git a/src/components/Icon/svgs/Unverified.svg b/src/components/Icon/svgs/Unverified.svg
new file mode 100644
index 000000000..96e0a4ccb
--- /dev/null
+++ b/src/components/Icon/svgs/Unverified.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Icon/svgs/Verified.svg b/src/components/Icon/svgs/Verified.svg
new file mode 100644
index 000000000..425b93b38
--- /dev/null
+++ b/src/components/Icon/svgs/Verified.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
index a2470a0b6..d9284e710 100644
--- a/src/components/Icon/types.ts
+++ b/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];
diff --git a/src/components/IconButton/IconButton.vue b/src/components/IconButton/IconButton.vue
index 736c292be..016d52509 100644
--- a/src/components/IconButton/IconButton.vue
+++ b/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)"
>