@kiva/kv-components 4.8.6 → 5.0.0

package/tests/unit/specs/components/KvCommentsList.spec.js

@@ -1,83 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import ListComponent from '../../../../vue/KvCommentsList.vue';
-import { comments } from '../../../fixtures/mockCommentsData';
-import { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
-import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
-
-const LOGGED_IN_USER = 'TEST_USER';
-
-const renderList = (props = {}) => {
-	return render(ListComponent,
-		{
-			props,
-			// provide function for vue 2 testing
-			provide: {
-				fetchLenderInfo: () => Promise.resolve({}),
-			},
-			// provide function for vue 3 testing
-			global: {
-				provide: {
-					fetchLenderInfo: () => Promise.resolve({}),
-				},
-			},
-		});
-};
-
-describe('KvCommentsList', () => {
-	it('should render comments component', async () => {
-		const { container } = renderList({ comments });
-
-		const { id } = comments[0];
-		expect(container.querySelectorAll(`#${id}`).length).toBe(1);
-	});
-
-	it('should not emit like reaction events for guest user', async () => {
-		const { getAllByRole, emitted } = renderList({ comments });
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-
-		await userEvent.click(likeButton);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual(undefined);
-	});
-
-	it('should emit like reaction events for logged in user', async () => {
-		const { getAllByRole, emitted } = renderList({ comments, userPublicId: LOGGED_IN_USER });
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-		const firstComment = comments[0];
-
-		const TEST_OBJ = {
-			id: firstComment.id,
-			isChild: true,
-		};
-
-		await userEvent.click(likeButton);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: LIKE_COMMENT_EVENT, value: true }]]);
-	});
-
-	it('should emit reply reaction events for logged in user', async () => {
-		const {
-			getAllByRole,
-			getByRole,
-			getByPlaceholderText,
-			emitted,
-		} = renderList({ comments, userPublicId: LOGGED_IN_USER });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
-		const firstComment = comments[0];
-
-		const TEST_OBJ = {
-			id: firstComment.id,
-			isChild: true,
-		};
-
-		await userEvent.click(replyButton);
-		const commentButton = getByRole('button', { name: 'Comment' });
-
-		const textInput = getByPlaceholderText('Add a comment...');
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		await userEvent.click(commentButton);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT, value: TEST_INPUT }]]);
-	});
-});

package/tests/unit/specs/components/KvCommentsListItem.spec.js

@@ -1,120 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import KvCommentsListItem, { LIKE_COMMENT_EVENT, REPLY_COMMENT_EVENT } from '../../../../vue/KvCommentsListItem.vue';
-import { comments } from '../../../fixtures/mockCommentsData';
-import { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
-
-const comment = comments[0];
-const LOGGED_IN_USER = 'TEST_USER';
-
-const renderComment = (props = {}) => {
-	return render(KvCommentsListItem,
-		{
-			props,
-			// provide function for vue 2 testing
-			provide: {
-				fetchLenderInfo: () => Promise.resolve({}),
-			},
-			// provide function for vue 3 testing
-			global: {
-				provide: {
-					fetchLenderInfo: () => Promise.resolve({}),
-				},
-			},
-		});
-};
-
-describe('KvCommentsListItem', () => {
-	it('should render defaults for guest user', () => {
-		const { getAllByRole } = renderComment({ comment });
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-
-		expect(likeButton).toBeDefined();
-	});
-
-	it('should render defaults for logged in user', () => {
-		const { getAllByRole } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-
-		expect(likeButton).toBeDefined();
-		expect(replyButton).toBeDefined();
-	});
-
-	it('should render comment text', () => {
-		const { getByText } = renderComment({ comment });
-		getByText(comment.text);
-	});
-
-	it('should render child comment text if replies list opened', async () => {
-		const { getAllByText, getAllByRole } = renderComment({ comment });
-		const openRepliesButton = getAllByRole('button', { name: '1 reply' })[0];
-
-		await userEvent.click(openRepliesButton);
-
-		const childComment = getAllByText(comment.children.comment[0].text)[0];
-
-		expect(childComment).toBeDefined();
-	});
-
-	it('should not handle like button click for guest user', async () => {
-		const { getAllByRole, emitted, getByTestId } = renderComment({ comment });
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-		const likeCount = getByTestId('like-count');
-
-		await userEvent.click(likeButton);
-
-		expect(likeCount).toHaveTextContent(1);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual(undefined);
-	});
-
-	it('should handle like button click for logged in user', async () => {
-		const { getAllByRole, emitted, getByTestId } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
-		const likeButton = getAllByRole('button', { name: 'Like' })[0];
-		const likeCount = getByTestId('like-count');
-
-		await userEvent.click(likeButton);
-
-		expect(likeCount).toHaveTextContent(1);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
-			id: comment.id,
-			isChild: true,
-			reaction: LIKE_COMMENT_EVENT,
-			value: true,
-		}]]);
-	});
-
-	it('should handle reply button click for logged in user', async () => {
-		const { getAllByRole, getByRole } = renderComment({ comment, userPublicId: LOGGED_IN_USER });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
-
-		await userEvent.click(replyButton);
-		getByRole('button', { name: 'Comment' });
-	});
-
-	it('should emit reply reaction events for logged in user', async () => {
-		const {
-			getAllByRole,
-			getByRole,
-			getByPlaceholderText,
-			emitted,
-		} = renderComment({ comment, userPublicId: LOGGED_IN_USER });
-		const replyButton = getAllByRole('button', { name: 'Reply' })[0];
-
-		const TEST_OBJ = {
-			id: comment.id,
-			isChild: true,
-		};
-
-		await userEvent.click(replyButton);
-		const commentButton = getByRole('button', { name: 'Comment' });
-
-		const textInput = getByPlaceholderText('Add a comment...');
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		await userEvent.click(commentButton);
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{ ...TEST_OBJ, reaction: REPLY_COMMENT_EVENT, value: TEST_INPUT }]]);
-	});
-});

package/tests/unit/specs/components/KvCommentsReplyButton.spec.js

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import KvCommentsReplyButton from '../../../../vue/KvCommentsReplyButton.vue';
-
-const CLICK_EVENT = 'click';
-
-describe('KvCommentsReplyButton', () => {
-	it('should render defaults', () => {
-		const { getByRole } = render(KvCommentsReplyButton);
-		const replyButton = getByRole('button', { name: 'Reply' });
-
-		expect(replyButton).toBeDefined();
-	});
-
-	it('should emit click event when clicked', async () => {
-		const { getByRole, emitted } = render(KvCommentsReplyButton);
-		const replyButton = getByRole('button', { name: 'Reply' });
-
-		await userEvent.click(replyButton);
-
-		expect(emitted()[CLICK_EVENT]).toEqual([[]]);
-	});
-});

package/tests/unit/specs/components/KvExpandableQuestion.spec.js

@@ -1,55 +0,0 @@
-import { fireEvent, render } from '@testing-library/vue';
-import KvExpandableQuestion from '../../../../vue/KvExpandableQuestion.vue';
-
-describe('KvExpandableQuestion', () => {
-	it('renders KvExpandableQuestion that opens and closes when clicking the title', async () => {
-		const { getByText } = render(KvExpandableQuestion, {
-			props: {
-				title: 'Kv Expandable Question',
-				id: 'kv-expandable-question',
-			},
-			slots: { default: 'Test Question' },
-		});
-		const titleContent = getByText('Kv Expandable Question');
-		expect(titleContent).toBeDefined();
-		expect(getByText('Test Question')).not.toBeVisible();
-		await fireEvent.click(titleContent);
-		expect(getByText('Test Question')).toBeVisible();
-		await fireEvent.click(titleContent);
-		expect(getByText('Test Question')).not.toBeVisible();
-	});
-
-	it('renders KvExpandableQuestion that opens and closes when clicking the arrow', async () => {
-		const { container, getByText } = render(KvExpandableQuestion, {
-			props: {
-				title: 'Kv Expandable Question',
-				id: 'kv-expandable-question',
-				testid: 'test-expandable',
-			},
-			// establish some multi line content
-			slots: { default: '<p>renders KvExpandableQuestion that opens and closes when clicking the arrow renders KvExpandableQuestion</p> <p>that opens and closes when clicking the arrow</p> <p>Test Question</p>' },
-		});
-		const spanEl = container.querySelector("[role='img']");
-		const svgEl = container.querySelector("[viewBox= '0 0 24 24']");
-
-		// Check State prior to clicking Icon
-		expect(svgEl).toBeVisible();
-		expect(getByText('Test Question')).not.toBeVisible();
-
-		// Click icon to open expandable and check content visibility
-		await fireEvent.click(spanEl);
-		const firstLineOpen = getByText('renders KvExpandableQuestion that opens and closes when clicking the arrow renders KvExpandableQuestion');
-		expect(firstLineOpen).toBeVisible();
-
-		const lastLineOpen = getByText('Test Question');
-		expect(lastLineOpen).toBeVisible();
-
-		// Click icon and check content visibility
-		await fireEvent.click(spanEl);
-		const firstLineClosed = getByText('renders KvExpandableQuestion that opens and closes when clicking the arrow renders KvExpandableQuestion');
-		expect(firstLineClosed).not.toBeVisible();
-
-		const lastLineClosed = getByText('Test Question');
-		expect(lastLineClosed).not.toBeVisible();
-	});
-});

package/tests/unit/specs/components/KvLendAmountButton.spec.js

@@ -1,36 +0,0 @@
-import { render } from '@testing-library/vue';
-import KvLendAmountButton from '../../../../vue/KvLendAmountButton.vue';
-
-describe('KvLendAmountButton', () => {
-	it('should display amount with a number input', async () => {
-		const { getByText } = render(KvLendAmountButton,
-			{
-				provide: {
-					apollo: {
-						query: () => Promise.resolve({}),
-					},
-				},
-				props: { amountLeft: 20.00 },
-			});
-
-		// Expect the button to exist and have correct amount
-		const buttonElement = getByText('Lend $20');
-		expect(buttonElement).toBeDefined();
-	});
-
-	it('should display amount with a string input', async () => {
-		const { getByText } = render(KvLendAmountButton,
-			{
-				provide: {
-					apollo: {
-						query: () => Promise.resolve({}),
-					},
-				},
-				props: { amountLeft: '20.00' },
-			});
-
-		// Expect the button to exist and have correct amount
-		const buttonElement = getByText('Lend $20');
-		expect(buttonElement).toBeDefined();
-	});
-});

package/tests/unit/specs/components/KvLightbox.spec.js

@@ -1,14 +0,0 @@
-import { render } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvLightbox from '../../../../vue/KvLightbox.vue';
-
-describe('KvLightbox', () => {
-	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvLightbox,
-			{
-				props: { title: 'Lightbox Title' },
-			});
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

package/tests/unit/specs/components/KvLineGraph.spec.js

@@ -1,58 +0,0 @@
-import { render } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvLineGraph from '../../../../vue/KvLineGraph.vue';
-
-describe('KvLineGraph', () => {
-	const points = [
-		{ value: 10 },
-		{ value: 20 },
-		{ value: 50 },
-		{ value: 60 },
-		{ value: 80 },
-	];
-
-	const pointsWithLabels = [
-		{ value: 10, label: '2014' },
-		{ value: 20, label: '2015' },
-		{ value: 50, label: '2016' },
-		{ value: 60, label: '2017' },
-		{ value: 80, label: '2018' },
-	];
-
-	it('should render chart with points', () => {
-		const { container } = render(KvLineGraph, { props: { points } });
-		const pointElements = container.querySelectorAll('span');
-
-		expect(pointElements.length).toBe(points.length);
-	});
-
-	it('should render chart with value labels', () => {
-		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels } });
-		const pointElements = container.querySelectorAll('span');
-
-		expect(pointElements.length).toBe(points.length * 2);
-	});
-
-	it('should render chart with x-axis label', () => {
-		const { container } = render(KvLineGraph, { props: { points, axisLabel: 'People supported over time' } });
-		const label = container.querySelectorAll('h4');
-
-		expect(label.length).toBe(1);
-	});
-
-	it('should render chart with value labels and x-axis label', () => {
-		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels, axisLabel: 'People supported over time' } });
-		const pointElements = container.querySelectorAll('span');
-		const label = container.querySelectorAll('h4');
-
-		expect(pointElements.length).toBe(points.length * 2);
-		expect(label.length).toBe(1);
-	});
-
-	it('should have no automated accessibility violations', async () => {
-		const { container } = render(KvLineGraph, { props: { points } });
-		const results = await axe(container);
-
-		expect(results).toHaveNoViolations();
-	});
-});

package/tests/unit/specs/components/KvLoanProgressGroup.spec.js

@@ -1,50 +0,0 @@
-import { render } from '@testing-library/vue';
-import KvLoanProgressGroup from '../../../../vue/KvLoanProgressGroup.vue';
-
-describe('KvLoanProgressGroup', () => {
-	it('should display default message', () => {
-		const { getByText } = render(KvLoanProgressGroup);
-
-		getByText('funded!');
-	});
-
-	it('should display amount left', () => {
-		const { getByText } = render(KvLoanProgressGroup, {
-			props: {
-				moneyLeft: '12.34',
-			},
-		});
-
-		getByText('$12.34 to go!');
-	});
-
-	it('should use orange color with low amount', () => {
-		const { container } = render(KvLoanProgressGroup, {
-			props: {
-				moneyLeft: '12.34',
-			},
-		});
-
-		expect(container.getElementsByClassName('progress-group-amount-low').length).toBe(1);
-	});
-
-	it('should not use orange color with not low amount', () => {
-		const { container } = render(KvLoanProgressGroup, {
-			props: {
-				moneyLeft: '500',
-			},
-		});
-
-		expect(container.getElementsByClassName('progress-group-amount-low').length).toBe(0);
-	});
-
-	it('should pass percentage to progress bar', () => {
-		const { container } = render(KvLoanProgressGroup, {
-			props: {
-				progressPercent: 0.5,
-			},
-		});
-
-		expect(container.querySelector('[role="progressbar"]').getAttribute('aria-valuenow')).toBe('50');
-	});
-});

package/tests/unit/specs/components/KvPagination.spec.js

@@ -1,132 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import KvPagination from '../../../../vue/KvPagination.vue';
-
-global.scrollTo = jest.fn();
-
-describe('KvPagination', () => {
-	afterEach(jest.clearAllMocks);
-
-	it('should render arrows disabled by default', async () => {
-		const { getByLabelText, emitted } = render(KvPagination, { props: { limit: 10, total: 0 } });
-
-		await userEvent.click(getByLabelText('Previous page'));
-		await userEvent.click(getByLabelText('Next page'));
-
-		expect(emitted()['page-changed']).toBe(undefined);
-	});
-
-	it('should render aria current page label', () => {
-		const { getByText } = render(KvPagination, { props: { limit: 10, total: 30 } });
-
-		getByText("You're on page");
-	});
-
-	it('should render fewer pages', () => {
-		const { getByLabelText } = render(KvPagination, { props: { limit: 10, total: 30 } });
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 2');
-		getByLabelText('Page 3');
-	});
-
-	it('should render more pages', () => {
-		const { getByLabelText } = render(KvPagination, { props: { limit: 10, total: 1000 } });
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 2');
-		getByLabelText('Page 3');
-		getByLabelText('Page 4');
-		getByLabelText('Page 100');
-	});
-
-	it('should render fourth selected', () => {
-		const { getByLabelText } = render(
-			KvPagination, { props: { limit: 10, total: 1000, offset: 30 } },
-		);
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 3');
-		getByLabelText('Page 4');
-		getByLabelText('Page 5');
-		getByLabelText('Page 100');
-	});
-
-	it('should render last selected', () => {
-		const { getByLabelText } = render(
-			KvPagination, { props: { limit: 10, total: 1000, offset: 990 } },
-		);
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 97');
-		getByLabelText('Page 98');
-		getByLabelText('Page 99');
-		getByLabelText('Page 100');
-	});
-
-	it('should render fourth to last last selected', () => {
-		const { getByLabelText } = render(
-			KvPagination, { props: { limit: 10, total: 1000, offset: 960 } },
-		);
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 96');
-		getByLabelText('Page 97');
-		getByLabelText('Page 98');
-		getByLabelText('Page 100');
-	});
-
-	it('should render more extra pages', () => {
-		const { getByLabelText } = render(
-			KvPagination, { props: { limit: 10, total: 1000, extraPages: 6 } },
-		);
-
-		getByLabelText('Page 1');
-		getByLabelText('Page 2');
-		getByLabelText('Page 3');
-		getByLabelText('Page 4');
-		getByLabelText('Page 5');
-		getByLabelText('Page 6');
-		getByLabelText('Page 7');
-		getByLabelText('Page 100');
-	});
-
-	it('should emit page click', async () => {
-		const { getByLabelText, emitted } = render(
-			KvPagination, { props: { limit: 10, total: 1000 } },
-		);
-
-		await userEvent.click(getByLabelText('Page 2'));
-
-		expect(global.scrollTo).toHaveBeenCalledTimes(1);
-		expect(emitted()['page-changed']).toEqual([[{ pageOffset: 10 }]]);
-	});
-
-	it('should not emit current page click', async () => {
-		const { getByLabelText, emitted } = render(KvPagination, { props: { limit: 10, total: 1000 } });
-
-		await userEvent.click(getByLabelText('Page 1'));
-
-		expect(emitted()['page-changed']).toBe(undefined);
-	});
-
-	it('should emit previous click', async () => {
-		const { getByLabelText, emitted } = render(
-			KvPagination, { props: { limit: 10, total: 1000, offset: 10 } },
-		);
-
-		await userEvent.click(getByLabelText('Previous page'));
-
-		expect(global.scrollTo).toHaveBeenCalledTimes(1);
-		expect(emitted()['page-changed']).toEqual([[{ pageOffset: 0 }]]);
-	});
-
-	it('should emit next click', async () => {
-		const { getByLabelText, emitted } = render(KvPagination, { props: { limit: 10, total: 1000 } });
-
-		await userEvent.click(getByLabelText('Next page'));
-
-		expect(global.scrollTo).toHaveBeenCalledTimes(1);
-		expect(emitted()['page-changed']).toEqual([[{ pageOffset: 10 }]]);
-	});
-});

package/tests/unit/specs/components/KvProgressBar.spec.js

@@ -1,11 +0,0 @@
-import { render } from '@testing-library/vue';
-import KvProgressBar from '../../../../vue/KvProgressBar.vue';
-
-describe('KvProgressBar', () => {
-	it('renders with a role of "progressbar"', () => {
-		const { getByRole } = render(KvProgressBar, { props: { ariaLabel: 'progress-bar', value: 100 } });
-		const progressbarEl = getByRole('progressbar');
-
-		expect(progressbarEl).toBeDefined();
-	});
-});