@kiva/kv-components 1.4.4 → 3.0.0

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

@@ -0,0 +1,113 @@
+import { render, fireEvent } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import KvSelect from '../../../../vue/KvSelect.vue';
+
+describe('KvSelect', () => {
+	it('renders with a role of "select"', () => {
+		const { getByRole } = render(KvSelect, {
+			slots: { default: 'Test Select' },
+			props: { id: 'test' },
+		});
+		const selectEl = getByRole('combobox');
+
+		expect(selectEl).toBeDefined();
+	});
+
+	it('works with v-model', async () => {
+		const TestComponent = {
+			template:
+				`<div>
+					<label for="test-select">Test select</label>
+					<KvSelect id="test-select" v-model="selectValue">
+						<option value="a">A</option>
+						<option value="b">B</option>
+						<option value="c">C</option>
+					</KvSelect>
+					<button @click="selectValue = 'b'">reset</button>
+					<span>The select value is {{ selectValue }}</span>
+				</div>`,
+			components: { KvSelect },
+			data: () => ({ selectValue: 'b' }),
+		};
+		const { getByRole, getByText } = render(TestComponent);
+		const selectEl = getByRole('combobox');
+
+		// Check that the value is 'b' initially
+		expect(getByText('The select value is b')).toBeDefined();
+		expect(selectEl.value).toEqual('b');
+
+		// Click the switch and expect the value to be `true` now
+		await userEvent.selectOptions(selectEl, 'C');
+		expect(getByText('The select value is c')).toBeDefined();
+		expect(selectEl.value).toEqual('c');
+
+		// Click the reset button and expect the value to be `false` again
+		await fireEvent.click(getByText('reset'));
+		expect(getByText('The select value is b')).toBeDefined();
+		expect(selectEl.value).toEqual('b');
+	});
+
+	it('applies parent event listeners to the input element', async () => {
+		const onChange = jest.fn();
+		const TestComponent = {
+			template:
+				`<KvSelect id="test" @change="onChange">
+					<option>A</option>
+					<option>B</option>
+				</KvSelect>`,
+			components: { KvSelect },
+			methods: { onChange },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const selectEl = getByRole('combobox');
+		await userEvent.selectOptions(selectEl, 'B');
+		expect(onChange.mock.calls.length).toBe(1);
+	});
+
+	it('applies parent attributes to the input element', async () => {
+		const TestComponent = {
+			template: '<KvSelect id="test" name="test-select"></KvSelect>',
+			components: { KvSelect },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const selectEl = getByRole('combobox');
+		expect(selectEl.name).toBe('test-select');
+	});
+
+	it('applies parent styles to the root element', async () => {
+		const TestComponent = {
+			template: '<KvSelect id="test" style="padding-top:1234px"></KvSelect>',
+			components: { KvSelect },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.style.paddingTop).toEqual('1234px');
+	});
+
+	it('applies parent classes to the root element', async () => {
+		const TestComponent = {
+			template: '<KvSelect id="test" class="test-class"></KvSelect>',
+			components: { KvSelect },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.classList).toContain('test-class');
+	});
+
+	it('has no automated accessibility violations', async () => {
+		const TestComponent = {
+			template:
+				`<div>
+					<label for="test-select">Test select</label>
+					<KvSelect id="test-select">options</KvSelect>
+				</div>`,
+			components: { KvSelect },
+		};
+		const { container } = render(TestComponent);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

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

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

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

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

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

@@ -0,0 +1,99 @@
+import { render, fireEvent } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import '../../../../__mocks__/ResizeObserver';
+import KvTab from '../../../../vue/KvTab.vue';
+import KvTabPanel from '../../../../vue/KvTabPanel.vue';
+import KvTabs from '../../../../vue/KvTabs.vue';
+
+// jsdom does not include scrollIntoView, so define it to avoid errors when switching tabs
+window.HTMLElement.prototype.scrollIntoView = () => {};
+
+function renderOneTabSet() {
+	return render({
+		components: { KvTabs, KvTab, KvTabPanel },
+		template: `
+			<kv-tabs>
+				<template #tabNav>
+					<kv-tab forPanel="demo-1-first">First</kv-tab>
+					<kv-tab forPanel="demo-1-second">Second</kv-tab>
+					<kv-tab forPanel="demo-1-third">Third</kv-tab>
+					<kv-tab forPanel="demo-1-forth">Fourth is longer</kv-tab>
+				</template>
+				<template #tabPanels>
+					<kv-tab-panel id="demo-1-first"><p>First Panel</p></kv-tab-panel>
+					<kv-tab-panel id="demo-1-second"><p>Second Panel has <br>longer<br>content</p></kv-tab-panel>
+					<kv-tab-panel id="demo-1-third"><p>Third Panel</p></kv-tab-panel>
+					<kv-tab-panel id="demo-1-forth"><p>Fourth Panel</p></kv-tab-panel>
+				</template>
+			</kv-tabs>
+		`,
+	});
+}
+
+describe('KvTabs', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = renderOneTabSet();
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('renders with a role of "tablist", "tab", & "tabpanel"', async () => {
+		const { getByRole, getAllByRole } = renderOneTabSet();
+		expect(getByRole('tablist')).toBeDefined();
+		expect(getAllByRole('tab').length).toBe(4);
+		// expect(getByRole('tabpanel')).toBeDefined(); // TODO: make sure first panel reveals itself
+	});
+
+	// TODO: it renders with the first slide active by default
+
+	it('switches between tab panels when tabs are clicked', async () => {
+		const { getByText } = renderOneTabSet();
+
+		// Click third tab and expect the third panel to be visible
+		await fireEvent.click(getByText('Third'));
+		expect(getByText('First Panel')).not.toBeVisible();
+		expect(getByText('Third Panel')).toBeVisible();
+
+		// Click first tab and expect the first panel to be visible
+		await fireEvent.click(getByText('First'));
+		expect(getByText('First Panel')).toBeVisible();
+		expect(getByText('Third Panel')).not.toBeVisible();
+	});
+
+	it('switches between tab panels when the left and right arrows are pressed', async () => {
+		const { findByText } = renderOneTabSet();
+
+		// Focus on the first tab
+		const firstTab = await findByText('First');
+		firstTab.focus();
+
+		// Press arrow right twice and expect the third tab panel to be visible
+		userEvent.keyboard('{ArrowRight}{ArrowRight}');
+		expect(await findByText('Third Panel')).toBeVisible();
+
+		// Press arrow left once and expect the second tab panel to be visible
+		userEvent.keyboard('{ArrowLeft}');
+		expect(await findByText('Second Panel', { exact: false })).toBeVisible();
+	});
+
+	it('goes to first panel when home key is pressed and last panel when end key is pressed', async () => {
+		const { findByText } = renderOneTabSet();
+
+		// Focus on the first tab
+		const firstTab = await findByText('First');
+		firstTab.focus();
+
+		// Press arrow right once and expect the second tab panel to be visible
+		userEvent.keyboard('{ArrowRight}');
+		expect(await findByText('Second Panel', { exact: false })).toBeVisible();
+
+		// Press end key and expect the fourth panel to be visible
+		userEvent.keyboard('{End}');
+		expect(await findByText('Fourth Panel')).toBeVisible();
+
+		// Press home key and expect the first panel to be visible
+		userEvent.keyboard('{Home}');
+		expect(await findByText('First Panel')).toBeVisible();
+	});
+});

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

@@ -1,10 +1,8 @@
 import { render, fireEvent } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import KvTextInput from '../../../../vue/KvTextInput.vue';
 
-expect.extend(toHaveNoViolations);
-
 const KvTextInputTemplate = {
 	components: { KvTextInput },
 	template: `
@@ -28,7 +26,7 @@ describe('KvTextInput', () => {
 		const textInputEl = getByRole('textbox');
 
 		expect(textInputEl.value).toEqual('');
-		await userEvent.type(textInputEl, 'abc 123');
+		userEvent.type(textInputEl, 'abc 123');
 		expect(textInputEl.value).toEqual('abc 123');
 	});
 
@@ -47,6 +45,81 @@ describe('KvTextInput', () => {
 		expect(textInputEl.value).toEqual('');
 	});
 
+	it('works with v-model', async () => {
+		const TestComponent = {
+			template:
+				`<div>
+					<label for="text-input">Text input</label>
+					<KvTextInput v-model="textValue" id="text-input" />
+					<button @click="textValue = 'abc'">reset</button>
+					<span>The text value is {{ textValue }}</span>
+				</div>`,
+			components: { KvTextInput },
+			data: () => ({ textValue: 'abc' }),
+		};
+		const { getByRole, getByText } = render(TestComponent);
+		const textInputEl = getByRole('textbox');
+
+		// Check that the value is 'abc' initially
+		expect(getByText('The text value is abc')).toBeDefined();
+		expect(textInputEl.value).toEqual('abc');
+
+		// Type 'def' in the text input and expect the value to be 'abcdef' now
+		await userEvent.type(textInputEl, 'def');
+		expect(getByText('The text value is abcdef')).toBeDefined();
+		expect(textInputEl.value).toEqual('abcdef');
+
+		// Click the reset button and expect the value to be 'abc' again
+		await fireEvent.click(getByText('reset'));
+		expect(getByText('The text value is abc')).toBeDefined();
+		expect(textInputEl.value).toEqual('abc');
+	});
+
+	it('applies parent event listeners to the input element', async () => {
+		const onInput = jest.fn();
+		const TestComponent = {
+			template: '<KvTextInput id="test" @input="onInput" />',
+			components: { KvTextInput },
+			methods: { onInput },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const textInputEl = getByRole('textbox');
+		await userEvent.type(textInputEl, 'a');
+		expect(onInput.mock.calls.length).toBe(1);
+	});
+
+	it('applies parent attributes to the input element', async () => {
+		const TestComponent = {
+			template: '<KvTextInput id="test" name="test-text-input" />',
+			components: { KvTextInput },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const textInputEl = getByRole('textbox');
+		expect(textInputEl.name).toBe('test-text-input');
+	});
+
+	it('applies parent styles to the root element', async () => {
+		const TestComponent = {
+			template: '<KvTextInput id="test" style="padding-top:1234px" />',
+			components: { KvTextInput },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.style.paddingTop).toEqual('1234px');
+	});
+
+	it('applies parent classes to the root element', async () => {
+		const TestComponent = {
+			template: '<KvTextInput id="test" class="test-class" />',
+			components: { KvTextInput },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.classList).toContain('test-class');
+	});
+
 	it('has no automated accessibility violations', async () => {
 		const { container } = render(KvTextInputTemplate);
 		const results = await axe(container);
@@ -55,7 +128,7 @@ describe('KvTextInput', () => {
 	});
 
 	it('clear button cleans the input value', async () => {
-		const { getByRole } = render(KvTextInput, {
+		const { getByRole, findByRole, queryByRole } = render(KvTextInput, {
 			props: {
 				canClear: true,
 				valid: true,
@@ -63,12 +136,16 @@ describe('KvTextInput', () => {
 			},
 		});
 		const textInputEl = getByRole('textbox');
+
 		expect(textInputEl.value).toEqual('');
-		await userEvent.type(textInputEl, 'abc 123');
+		expect(queryByRole('button')).toBeNull();
+
+		userEvent.type(textInputEl, 'abc 123');
 		expect(textInputEl.value).toEqual('abc 123');
-		const buttonInputEl = getByRole('button');
-		expect(buttonInputEl).toBeDefined();
-		await fireEvent.click(buttonInputEl);
+		const buttonEl = await findByRole('button');
+		expect(buttonEl).toBeDefined();
+
+		await fireEvent.click(buttonEl);
 		expect(textInputEl.value).toEqual('');
 	});
 });

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

@@ -1,41 +1,37 @@
 import { render } from '@testing-library/vue';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import VueRouter from 'vue-router';
+import { axe } from 'jest-axe';
+import addVueRouter from '../../utils/addVueRouter';
 import KvTextLink from '../../../../vue/KvTextLink.vue';
 
-const router = new VueRouter();
-
-expect.extend(toHaveNoViolations);
-
 describe('Default Button', () => {
+	const renderTestTextLink = (options) => render(KvTextLink, addVueRouter({
+		slots: { default: 'Test Text Link' },
+		...options,
+	}));
+
 	it('renders as a button tag by default', () => {
-		const { getByRole } = render(KvTextLink, {
-			slots: { default: 'Test Button' },
-		});
-		getByRole('button', { name: 'Test Button' });
+		const { getByRole } = renderTestTextLink();
+		getByRole('button', { name: 'Test Text Link' });
 	});
 
 	it('renders as an anchor tag when passed an href prop', () => {
-		const { getByRole } = render(KvTextLink, {
+		const { getByRole } = renderTestTextLink({
 			props: { href: 'https://www.example.com/' },
-			slots: { default: 'Test Button' },
 		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
+		const anchorEl = getByRole('link', { name: 'Test Text Link' });
 		expect(anchorEl.href).toEqual('https://www.example.com/');
 	});
 
 	it('renders as an anchor tag when passed a route string', () => {
-		const { getByRole } = render(KvTextLink, {
+		const { getByRole } = renderTestTextLink({
 			props: { to: '/home' },
-			slots: { default: 'Test Button' },
-			routes:	router,
 		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
+		const anchorEl = getByRole('link', { name: 'Test Text Link' });
 		expect(anchorEl.href).toEqual('http://localhost/#/home');
 	});
 
 	it('renders as an anchor tag when passed a route object', () => {
-		const { getByRole } = render(KvTextLink, {
+		const { getByRole } = renderTestTextLink({
 			props: {
 				to: {
 					path: 'test-route-with-query',
@@ -44,17 +40,13 @@ describe('Default Button', () => {
 					},
 				},
 			},
-			slots: { default: 'Test Button' },
-			routes:	router,
 		});
-		const anchorEl = getByRole('link', { name: 'Test Button' });
+		const anchorEl = getByRole('link', { name: 'Test Text Link' });
 		expect(anchorEl.href).toEqual('http://localhost/#/test-route-with-query?param1=a');
 	});
 
 	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvTextLink, {
-			slots: { default: 'Test Button' },
-		});
+		const { container } = renderTestTextLink();
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});

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

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

package/tests/unit/utils/addVueRouter.js

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { isVue3 } from 'vue-demi';
+import * as VueRouter from 'vue-router';
+
+export default function addVueRouter(testingLibraryOptions, vueRouterOptions) {
+	const opts = { ...testingLibraryOptions };
+
+	if (isVue3) {
+		// create opts.global.plugins array if it does not exist
+		opts.global = opts.global ?? {};
+		opts.global.plugins = opts.global.plugins ?? [];
+
+		// add Vue Router to plugins array
+		opts.global.plugins.push(VueRouter.createRouter(vueRouterOptions ?? {
+			history: VueRouter.createWebHashHistory(),
+			routes: [{ path: '/:path(.*)', component: {} }],
+		}));
+	} else {
+		const VueRouterDefault = VueRouter.default;
+		opts.routes = new VueRouterDefault(vueRouterOptions);
+	}
+
+	return opts;
+}