@kiva/kv-components 4.8.6 → 5.1.0

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

@@ -1,92 +0,0 @@
-import { render, fireEvent } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import { axe } from 'jest-axe';
-import addVueRouter from '../../utils/addVueRouter';
-import KvButton from '../../../../vue/KvButton.vue';
-
-describe('Default Button', () => {
-	const renderTestButton = (options) => render(KvButton, addVueRouter({
-		slots: { default: 'Test Button' },
-		...options,
-	}));
-
-	it('renders as a button tag by default', () => {
-		const { getByRole } = renderTestButton();
-		getByRole('button', { name: 'Test Button' });
-	});
-
-	it('renders as an anchor tag when passed an href prop', () => {
-		const { getByRole } = renderTestButton({
-			props: { href: 'https://www.example.com/' },
-		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
-		expect(anchorEl.href).toEqual('https://www.example.com/');
-	});
-
-	it('renders as an anchor tag when passed a route string', () => {
-		const { getByRole } = renderTestButton({
-			props: { to: '/home' },
-		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
-		expect(anchorEl.href).toEqual('http://localhost/home');
-	});
-
-	it('renders as an anchor tag when passed a route object', () => {
-		const { getByRole } = renderTestButton({
-			props: {
-				to: {
-					path: 'test-route-with-query',
-					query: {
-						param1: 'a',
-					},
-				},
-			},
-		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
-		expect(anchorEl.href).toEqual('http://localhost/test-route-with-query?param1=a');
-	});
-
-	it('shows a ripple animation when clicked', async () => {
-		const { getByText, getByTestId } = renderTestButton();
-		const btnEl = getByText('Test Button');
-		await fireEvent.click(btnEl);
-		getByTestId('ripple');
-	});
-
-	it('passes through click events', async () => {
-		const onClick = jest.fn();
-		const { getByText } = render({
-			template: `<div>
-				<KvButton @click.prevent="onClick">Button tag</KvButton>
-				<KvButton href="#test" @click.prevent="onClick">Anchor tag</KvButton>
-				<KvButton to="/test" @click.native.prevent="onClick">Router-link</KvButton>
-			</div>`,
-			components: {
-				KvButton,
-			},
-			methods: {
-				onClick,
-			},
-		}, addVueRouter());
-
-		// Click all the buttons and expect the onClick method to have been called 3 times
-		await userEvent.click(getByText('Button tag'));
-		await userEvent.click(getByText('Anchor tag'));
-		await userEvent.click(getByText('Router-link'));
-		expect(onClick.mock.calls.length).toBe(3);
-	});
-
-	it('when passed a loading prop, the button is disabled', () => {
-		const { getByRole } = renderTestButton({
-			props: { state: 'loading' },
-		});
-		const btnEl = getByRole('button', { name: 'Test Button' });
-		expect(btnEl.disabled).toBeTruthy();
-	});
-
-	it('has no automated accessibility violations', async () => {
-		const { container } = renderTestButton();
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,78 +0,0 @@
-import { render } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvCarousel from '../../../../vue/KvCarousel.vue';
-
-const randomHexColor = (index) => {
-	const defaultColor = '96d4b3';
-	const colorArray = [
-		'D5573B',
-		'885053',
-		'777DA7',
-		'94C9A9',
-		'C6ECAE',
-		'C490D1',
-		'A0D2DB',
-		'7D8CC4',
-		'726DA8',
-	];
-	return colorArray?.[index] || defaultColor;
-};
-
-const defaultCarouselSlides = `
-	<template #slide1>
-		<img src="https://placehold.co/300x220/${randomHexColor(1)}/000000" alt="img1" class="tw-w-full">
-	</template>
-	<template #slide2>
-		<img src="https://placehold.co/300x220/${randomHexColor(2)}/000000" alt="img2" class="tw-w-full">
-	</template>
-	<template #slide3>
-		<img src="https://placehold.co/300x220/${randomHexColor(3)}/000000" alt="img3" class="tw-w-full">
-	</template>
-	<template #slide4>
-		<img src="https://placehold.co/300x220/${randomHexColor(4)}/000000" alt="img4" class="tw-w-full">
-	</template>
-`;
-
-// Mocking IntersectionObserver and ResizeObserver and matchMedia
-// required for embla carousel
-Object.defineProperty(window, 'IntersectionObserver', {
-	writable: true,
-	value: jest.fn().mockImplementation(() => ({
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-		disconnect: jest.fn(),
-	})),
-});
-
-Object.defineProperty(window, 'matchMedia', {
-	writable: true,
-	value: jest.fn().mockImplementation((query) => ({
-		matches: [].includes(query),
-		addEventListener: jest.fn(),
-		removeEventListener: jest.fn(),
-	})),
-});
-
-Object.defineProperty(window, 'ResizeObserver', {
-	writable: true,
-	value: jest.fn().mockImplementation(() => ({
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-		disconnect: jest.fn(),
-	})),
-});
-
-describe('KvCarousel', () => {
-	it('has no automated accessibility violations', async () => {
-		const TestComponent = {
-			template:
-				`<kv-carousel style="max-width: 400px;">
-					${defaultCarouselSlides}
-				</kv-carousel>`,
-			components: { KvCarousel },
-		};
-		const { container } = render(TestComponent);
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,109 +0,0 @@
-import { render, fireEvent } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvCheckbox from '../../../../vue/KvCheckbox.vue';
-
-describe('KvCheckbox', () => {
-	it('renders with a role of "checkbox"', () => {
-		const { getByRole } = render(KvCheckbox, {
-			slots: { default: 'Test Checkbox' },
-		});
-		const checkboxEl = getByRole('checkbox', { name: 'Test Checkbox' });
-
-		expect(checkboxEl).toBeDefined();
-	});
-
-	it('can\'t be toggled when the disabled prop is true', async () => {
-		const { getByLabelText } = render(KvCheckbox, {
-			props: { disabled: true },
-			slots: { default: 'Test Checkbox' },
-		});
-		const checkboxEl = getByLabelText('Test Checkbox');
-
-		expect(checkboxEl.checked).toEqual(false);
-		await checkboxEl.click();
-		expect(checkboxEl.checked).toEqual(false);
-	});
-
-	it('works with v-model', async () => {
-		const TestComponent = {
-			template:
-				`<div>
-					<KvCheckbox v-model="checkboxValue">Test Checkbox</KvCheckbox>
-					<button @click="checkboxValue = false">reset</button>
-					<span>The checkbox value is {{ checkboxValue }}</span>
-				</div>`,
-			components: { KvCheckbox },
-			data: () => ({ checkboxValue: false }),
-		};
-		const { getByLabelText, getByText } = render(TestComponent);
-		const checkboxEl = getByText('Test Checkbox');
-		const checkboxInput = getByLabelText('Test Checkbox');
-
-		// Check that the value is `false` initially
-		expect(getByText('The checkbox value is false')).toBeDefined();
-		expect(checkboxInput.checked).toEqual(false);
-
-		// Click the checkbox and expect the value to be `true` now
-		await fireEvent.click(checkboxEl);
-		expect(getByText('The checkbox value is true')).toBeDefined();
-		expect(checkboxInput.checked).toEqual(true);
-
-		// Click the reset button and expect the value to be `false` again
-		await fireEvent.click(getByText('reset'));
-		expect(getByText('The checkbox value is false')).toBeDefined();
-		expect(checkboxInput.checked).toEqual(false);
-	});
-
-	it('applies parent event listeners to the input element', async () => {
-		const onInput = jest.fn();
-		const TestComponent = {
-			template: '<KvCheckbox @input="onInput">Test Checkbox</KvCheckbox>',
-			components: { KvCheckbox },
-			methods: { onInput },
-		};
-		const { getByText } = render(TestComponent);
-
-		const checkboxEl = getByText('Test Checkbox');
-		await fireEvent.click(checkboxEl);
-		expect(onInput.mock.calls.length).toBe(1);
-	});
-
-	it('applies parent attributes to the input element', async () => {
-		const TestComponent = {
-			template: '<KvCheckbox name="test-checkbox">Test Checkbox</KvCheckbox>',
-			components: { KvCheckbox },
-		};
-		const { getByRole } = render(TestComponent);
-
-		const checkboxEl = getByRole('checkbox');
-		expect(checkboxEl.name).toBe('test-checkbox');
-	});
-
-	it('applies parent styles to the root element', async () => {
-		const TestComponent = {
-			template: '<KvCheckbox style="padding-top:1234px">Test Checkbox</KvCheckbox>',
-			components: { KvCheckbox },
-		};
-		const { container } = render(TestComponent);
-
-		expect(container.firstChild.style.paddingTop).toEqual('1234px');
-	});
-
-	it('applies parent classes to the root element', async () => {
-		const TestComponent = {
-			template: '<KvCheckbox class="test-class">Test Checkbox</KvCheckbox>',
-			components: { KvCheckbox },
-		};
-		const { container } = render(TestComponent);
-
-		expect(container.firstChild.classList).toContain('test-class');
-	});
-
-	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvCheckbox, {
-			slots: { default: 'Test Checkbox' },
-		});
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,201 +0,0 @@
-import { render } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvClassicLoanCard from '../../../../vue/KvClassicLoanCard.vue';
-
-const nextWeek = new Date();
-nextWeek.setDate(new Date().getDate() + 7);
-const kvTrackFunction = () => { };
-
-const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
-const loan = {
-	id: 1,
-	name: 'Alan',
-	geocode: {
-		city: 'Lyantonde',
-		state: 'Central Region',
-		country: {
-			isoCode: 'UG',
-			name: 'Uganda',
-			region: 'Africa',
-			__typename: 'Country',
-		},
-		__typename: 'Geocode',
-	},
-	image: { hash: '9673d0722a7675b9b8d11f90849d9b44' },
-	fundraisingPercent: 0.5,
-	unreservedAmount: '500.00',
-	use: 'to purchase heifers to increase headcount of cattle and sales of organic milk.',
-	status: 'fundraising',
-	loanAmount: '1000.00',
-	borrowerCount: 1,
-	activity: {
-		id: 61,
-		name: 'Dairy',
-		__typename: 'Activity',
-	},
-	sector: {
-		id: 1,
-		name: 'Agriculture',
-		__typename: 'Sector',
-	},
-	plannedExpirationDate: nextWeek.toISOString(),
-};
-
-const combinedActivities = [
-	{
-		key: 'Mon Nov 13 2023',
-		data: [
-			{
-				lenderName: 'Erica',
-				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
-				text: 'Erica lent $5',
-				date: '2023-11-13T10:51:10Z',
-				type: 'LendingAction',
-			},
-		],
-	},
-	{
-		key: 'Tue Nov 07 2023',
-		data: [
-			{
-				lenderName: 'Joy',
-				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
-				text: 'Joy left comment <span class="tw-italic">"I know him and his wife and they work hard to make everything they do the best. His farm and bake goods are amazing. He just keeps working harder and harder to do more and reach out to the community in everyway."</span>',
-				date: '2023-11-08T02:37:56Z',
-				type: 'Comment',
-			},
-			{
-				lenderName: 'Joy',
-				lenderImage: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
-				text: 'Joy lent $25',
-				date: '2023-11-08T02:32:20Z',
-				type: 'LendingAction',
-			},
-		],
-	},
-];
-
-describe('KvClassicLoanCard', () => {
-	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvClassicLoanCard,
-			{
-				props: {
-					loanId: loan.id,
-					loan: {
-						...loan,
-						unreservedAmount: undefined,
-						fundraisingPercent: undefined,
-					},
-					kvTrackFunction,
-					photoPath,
-					externalLinks: true,
-				},
-			});
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-
-	it('location should be formatted correctly for PR', async () => {
-		const { getByText } = render(KvClassicLoanCard,
-			{
-				props: {
-					loanId: loan.id,
-					loan: {
-						...loan,
-						unreservedAmount: undefined,
-						fundraisingPercent: undefined,
-						geocode: {
-							city: 'Rincon',
-							country: {
-								name: 'Puerto Rico',
-							},
-						},
-					},
-					kvTrackFunction,
-					photoPath,
-					externalLinks: true,
-				},
-			});
-
-		const countryTagElement = getByText('Rincon, PR');
-		expect(countryTagElement).toBeDefined();
-	});
-
-	it('location should be formatted correctly for Kiva US', async () => {
-		const { getByText } = render(KvClassicLoanCard,
-			{
-				props: {
-					loanId: loan.id,
-					loan: {
-						...loan,
-						distributionModel: 'direct',
-						geocode: {
-							city: 'Boulder',
-							state: 'Colorado',
-							country: {
-								name: 'United States',
-							},
-						},
-					},
-					kvTrackFunction,
-					photoPath,
-					externalLinks: true,
-				},
-			});
-
-		const countryTagElement = getByText('Boulder, Colorado, United States');
-		expect(countryTagElement).toBeDefined();
-	});
-
-	it('location should be formatted correctly for partner loans', async () => {
-		const { getByText } = render(KvClassicLoanCard,
-			{
-				props: {
-					loanId: loan.id,
-					loan: {
-						...loan,
-						distributionModel: 'partner',
-						geocode: {
-							country: {
-								name: 'Uganda',
-							},
-						},
-					},
-					kvTrackFunction,
-					photoPath,
-					externalLinks: true,
-				},
-			});
-
-		const countryTagElement = getByText('Uganda');
-		expect(countryTagElement).toBeDefined();
-	});
-
-	it('activity feed should be showed correctly', () => {
-		const { getByText, getByRole } = render(KvClassicLoanCard,
-			{
-				props: {
-					loanId: loan.id,
-					loan: {
-						...loan,
-						loanFundraisingInfo: {
-							fundedAmount: '950.00',
-							isExpiringSoon: false,
-							reservedAmount: '0.00',
-						},
-						lenders: {
-							totalCount: 7,
-						},
-					},
-					kvTrackFunction,
-					photoPath,
-					combinedActivities,
-				},
-			});
-
-		const activityText = getByText('7 lenders lent $950.');
-		const activityBtn = getByRole('button', { name: 'See all activity' });
-		expect(activityText).toBeDefined();
-		expect(activityBtn).toBeDefined();
-	});
-});

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

@@ -1,108 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import CommentsAdd, { ADD_COMMENT_EVENT, HIDE_INPUT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
-
-const renderCommentsAdd = (props = {}) => {
-	return render(CommentsAdd, { props });
-};
-
-describe('KvCommentsAdd', () => {
-	it('should render defaults', () => {
-		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		getByPlaceholderText('Add a comment...');
-		getByRole('button', { name: 'Cancel' });
-		getByRole('button', { name: 'Comment' });
-	});
-
-	it('should render user info', () => {
-		const { getByAltText, getByText } = renderCommentsAdd({
-			userImageUrl: 'test.com',
-			userDisplayName: 'User',
-		});
-		getByAltText('Image of lender');
-		getByText('User');
-	});
-
-	it('should enable comment button when text entered', async () => {
-		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment...');
-		const commentButton = getByRole('button', { name: 'Comment' });
-
-		expect(commentButton.disabled).toBeTruthy();
-
-		await userEvent.type(textInput, 'test');
-
-		expect(commentButton.disabled).toBeFalsy();
-
-		await userEvent.clear(textInput);
-
-		expect(commentButton.disabled).toBeTruthy();
-	});
-
-	it('should clear text when cancel clicked', async () => {
-		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment...');
-		const cancelButton = getByRole('button', { name: 'Cancel' });
-
-		await userEvent.type(textInput, 'test');
-		await userEvent.click(cancelButton);
-
-		expect(textInput.value).toBe('');
-	});
-
-	it('should emit value when comment clicked', async () => {
-		const { getByPlaceholderText, getByRole, emitted } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment...');
-		const commentButton = getByRole('button', { name: 'Comment' });
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		await userEvent.click(commentButton);
-
-		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
-	});
-
-	it('should emit value when enter key pressed', async () => {
-		const { getByPlaceholderText, emitted } = renderCommentsAdd();
-		const textInput = getByPlaceholderText('Add a comment...');
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		userEvent.keyboard('{enter}');
-
-		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
-	});
-
-	it('should not emit empty value when comment clicked', async () => {
-		const { getByRole, emitted } = renderCommentsAdd();
-		const commentButton = getByRole('button', { name: 'Comment' });
-
-		await userEvent.click(commentButton);
-
-		expect(emitted()[ADD_COMMENT_EVENT]).toBe(undefined);
-	});
-
-	it('should emit close event when it replies a comment', async () => {
-		const { getByRole, emitted, getByPlaceholderText } = renderCommentsAdd({ isReply: true });
-		const textInput = getByPlaceholderText('Add a comment...');
-		const commentButton = getByRole('button', { name: 'Comment' });
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		await userEvent.click(commentButton);
-
-		expect(emitted()[HIDE_INPUT_EVENT]).toEqual([[]]);
-	});
-
-	it('should emit close event when it clicks cancel on reply', async () => {
-		const { getByRole, emitted } = renderCommentsAdd({ isReply: true });
-		const cancelButton = getByRole('button', { name: 'Cancel' });
-
-		await userEvent.click(cancelButton);
-
-		expect(emitted()[HIDE_INPUT_EVENT]).toEqual([[]]);
-	});
-});

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

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import Container, { ADD_REACTION_EVENT } from '../../../../vue/KvCommentsContainer.vue';
-import { ADD_COMMENT_ID, ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
-
-const LOGGED_IN_USER = 'TEST_USER';
-
-const renderContainer = (props = {}) => {
-	return render(Container, { props });
-};
-
-describe('KvCommentsContainer', () => {
-	it('should not render comments add component for guest user', async () => {
-		const { container } = renderContainer();
-		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(0);
-	});
-
-	it('should render comments add component for logged in user', async () => {
-		const { container } = renderContainer({ userPublicId: LOGGED_IN_USER });
-		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(1);
-	});
-
-	it('should emit comment for logged in user', async () => {
-		const { getByPlaceholderText, getByRole, emitted } = renderContainer({ userPublicId: LOGGED_IN_USER });
-		const textInput = getByPlaceholderText('Add a comment...');
-		const commentButton = getByRole('button', { name: 'Comment' });
-		const TEST_INPUT = 'test test';
-
-		await userEvent.type(textInput, TEST_INPUT);
-
-		await userEvent.click(commentButton);
-
-		expect(emitted()[ADD_REACTION_EVENT]).toEqual([[{
-			id: null,
-			isChild: false,
-			reaction: ADD_COMMENT_EVENT,
-			value: TEST_INPUT,
-		}]]);
-	});
-});

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

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import KvCommentsHeartButton from '../../../../vue/KvCommentsHeartButton.vue';
-
-const CLICK_EVENT = 'click';
-
-describe('KvCommentsHeartButton', () => {
-	it('should render defaults', () => {
-		const { getByRole } = render(KvCommentsHeartButton);
-		const likeButton = getByRole('button', { name: 'Like' });
-
-		expect(likeButton).toBeDefined();
-	});
-
-	it('should emit true value when clicked as not liked', async () => {
-		const { getByRole, emitted } = render(KvCommentsHeartButton);
-		const likeButton = getByRole('button', { name: 'Like' });
-
-		await userEvent.click(likeButton);
-
-		expect(emitted()[CLICK_EVENT]).toEqual([[true]]);
-	});
-
-	it('should emit false value when clicked as liked', async () => {
-		const { getByRole, emitted } = render(KvCommentsHeartButton, { props: { isLiked: true } });
-		const likeButton = getByRole('button', { name: 'Like' });
-
-		await userEvent.click(likeButton);
-
-		expect(emitted()[CLICK_EVENT]).toEqual([[false]]);
-	});
-});