@kiva/kv-components 4.8.6 → 5.0.0

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

@@ -1,184 +0,0 @@
-import { render, fireEvent } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvRadio from '../../../../vue/KvRadio.vue';
-
-const radioGroup = {
-	components: { KvRadio },
-	data() { return { testModel: 'foo' }; },
-	slots: { default: 'Test Radio' },
-	template: `
-		<fieldset>
-			<kv-radio
-				value="foo"
-				v-model="testModel"
-			>
-				foo
-			</kv-radio>
-			<kv-radio
-				value="bar"
-				v-model="testModel"
-			>
-				bar
-			</kv-radio>
-			<kv-radio
-				value="baz"
-				v-model="testModel"
-			>
-				baz
-			</kv-radio>
-		</fieldset>
-	`,
-};
-
-describe('KvRadio', () => {
-	it('renders with a role of "radio"', () => {
-		const { getByRole } = render(KvRadio, {
-			props: { value: 'foo' },
-			slots: { default: 'Test Radio' },
-		});
-		const radioEl = getByRole('radio');
-		expect(radioEl).toBeDefined();
-	});
-
-	it('can\'t be toggled when the disabled prop is true', async () => {
-		const { getByLabelText } = render(KvRadio, {
-			props: {
-				value: 'foo',
-				disabled: true,
-			},
-			slots: { default: 'Test Radio' },
-		});
-		const radioEl = getByLabelText('Test Radio');
-
-		expect(radioEl.checked).toEqual(false);
-		await radioEl.click();
-		expect(radioEl.checked).toEqual(false);
-	});
-
-	it('emits a change event when toggled', async () => {
-		const { getByLabelText, emitted } = render(KvRadio, {
-			props: { value: 'foo' },
-			slots: { default: 'Test Radio' },
-		});
-		const radioEl = getByLabelText('Test Radio');
-		await radioEl.click();
-		expect(emitted().change[0]).toEqual(['foo']);
-	});
-
-	it('One radio element can be checked at a time', async () => {
-		const { getAllByRole, getByLabelText } = render(radioGroup);
-		const radioEls = getAllByRole('radio');
-		expect(radioEls[0].value).toBe('foo');
-		expect(radioEls[1].value).toBe('bar');
-		expect(radioEls[2].value).toBe('baz');
-
-		expect(radioEls[0].checked).toBe(true);
-		expect(radioEls[1].checked).toBe(false);
-		expect(radioEls[2].checked).toBe(false);
-
-		const barEl = getByLabelText('baz');
-		await barEl.click();
-
-		expect(radioEls[0].checked).toBe(false);
-		expect(radioEls[1].checked).toBe(false);
-		expect(radioEls[2].checked).toBe(true);
-	});
-
-	it('works with v-model', async () => {
-		const TestComponent = {
-			template:
-				`<fieldset>
-					<KvRadio v-model="radioValue" value="foo">Foo</KvRadio>
-					<KvRadio v-model="radioValue" value="bar">Bar</KvRadio>
-					<KvRadio v-model="radioValue" value="baz">Baz</KvRadio>
-					<button @click="radioValue = 'baz'">choose baz</button>
-					<button @click="radioValue = ''">reset</button>
-					<span>The radio value is {{ radioValue }}</span>
-				</fieldset>`,
-			components: { KvRadio },
-			data: () => ({ radioValue: 'bar' }),
-		};
-		const { getByLabelText, getByText } = render(TestComponent);
-		const radioFoo = getByLabelText('Foo');
-		const radioBar = getByLabelText('Bar');
-		const radioBaz = getByLabelText('Baz');
-
-		// Check that the value is 'bar' initially
-		expect(getByText('The radio value is bar')).toBeDefined();
-		expect(radioFoo.checked).toBe(false);
-		expect(radioBar.checked).toBe(true);
-		expect(radioBaz.checked).toBe(false);
-
-		// Click the 'Foo' radio and expect the value to be 'foo' now
-		await fireEvent.click(radioFoo);
-		expect(getByText('The radio value is foo')).toBeDefined();
-		expect(radioFoo.checked).toBe(true);
-		expect(radioBar.checked).toBe(false);
-		expect(radioBaz.checked).toBe(false);
-
-		// Click the 'choose baz' button and expect the value to be 'baz' now
-		await fireEvent.click(getByText('choose baz'));
-		expect(getByText('The radio value is baz')).toBeDefined();
-		expect(radioFoo.checked).toBe(false);
-		expect(radioBar.checked).toBe(false);
-		expect(radioBaz.checked).toBe(true);
-
-		// Click the reset button and expect the value to be blank now
-		await fireEvent.click(getByText('reset'));
-		expect(getByText('The radio value is')).toBeDefined();
-		expect(radioFoo.checked).toBe(false);
-		expect(radioBar.checked).toBe(false);
-		expect(radioBaz.checked).toBe(false);
-	});
-
-	it('applies parent event listeners to the input element', async () => {
-		const onInput = jest.fn();
-		const TestComponent = {
-			template: '<KvRadio @input="onInput" value="foo">Foo</KvRadio>',
-			components: { KvRadio },
-			methods: { onInput },
-		};
-		const { getByRole } = render(TestComponent);
-
-		const radioEl = getByRole('radio');
-		await fireEvent.click(radioEl);
-		expect(onInput.mock.calls.length).toBe(1);
-	});
-
-	it('applies parent attributes to the input element', async () => {
-		const TestComponent = {
-			template: '<KvRadio name="test-radio" value="foo">Foo</KvRadio>',
-			components: { KvRadio },
-		};
-		const { getByRole } = render(TestComponent);
-
-		const radioEl = getByRole('radio');
-		expect(radioEl.name).toBe('test-radio');
-	});
-
-	it('applies parent styles to the root element', async () => {
-		const TestComponent = {
-			template: '<KvRadio style="padding-top:1234px" value="foo">Foo</KvRadio>',
-			components: { KvRadio },
-		};
-		const { container } = render(TestComponent);
-
-		expect(container.firstChild.style.paddingTop).toEqual('1234px');
-	});
-
-	it('applies parent classes to the root element', async () => {
-		const TestComponent = {
-			template: '<KvRadio class="test-class" value="foo">Foo</KvRadio>',
-			components: { KvRadio },
-		};
-		const { container } = render(TestComponent);
-
-		expect(container.firstChild.classList).toContain('test-class');
-	});
-
-	it('has no automated accessibility violations', async () => {
-		const { container } = render(radioGroup);
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,113 +0,0 @@
-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,120 +0,0 @@
-import { render, fireEvent } from '@testing-library/vue';
-import { axe } from 'jest-axe';
-import KvSwitch from '../../../../vue/KvSwitch.vue';
-
-describe('KvSwitch', () => {
-	const renderTestSwitch = (options) => render(KvSwitch, {
-		slots: { default: 'Test Switch' },
-		...options,
-	});
-
-	it('renders with a role of "switch"', () => {
-		const { getByRole } = renderTestSwitch();
-		const switchEl = getByRole('switch');
-
-		expect(switchEl).toBeDefined();
-	});
-
-	it('toggles the switch when the label is clicked', async () => {
-		const { getByText, getByLabelText } = renderTestSwitch();
-		const switchEl = getByText('Test Switch');
-		const switchInput = getByLabelText('Test Switch');
-
-		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 { getByText, getByLabelText } = renderTestSwitch({
-			props: { disabled: true },
-		});
-		const switchEl = getByText('Test Switch');
-		const switchInput = getByLabelText('Test Switch');
-
-		expect(switchInput.checked).toEqual(false);
-		await fireEvent.click(switchEl);
-		expect(switchInput.checked).toEqual(false);
-	});
-
-	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');
-
-		// Check that the value is `false` initially
-		expect(getByText('The switch value is false')).toBeDefined();
-		expect(switchInput.checked).toEqual(false);
-
-		// 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 } = renderTestSwitch();
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/vue';
-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';
-
-describe('KvTabPanel', () => {
-	it('has no automated accessibility violations', async () => {
-		const { container } = 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>
-			`,
-		});
-		const results = await axe(container);
-		expect(results).toHaveNoViolations();
-	});
-});

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

@@ -1,167 +0,0 @@
-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';
-import KvButton from '../../../../vue/KvButton.vue';
-import addVueRouter from '../../utils/addVueRouter';
-
-// 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();
-	});
-
-	it('verifies setTab method when called by a ref', async () => {
-		const {
-			getByRole,
-			getAllByRole,
-			getByText,
-		} = render({
-			components: {
-				KvTabs,
-				KvTab,
-				KvTabPanel,
-				KvButton,
-			},
-			data() {
-				return { selectedIndexCheck: null };
-			},
-			template: `
-				<div data-testid="tabContainer">
-					<kv-tabs @tab-changed="handleTabChanged" data-testid="tabInstance" ref="tabsRef">
-						<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>
-					<kv-button @click.native.prevent="setTabButtonClick(1)" role="tabSetButton">Set Tab</kv-button>
-					<p>Tab index is {{ selectedIndexCheck }}</p>
-				</div>
-			`,
-			methods: {
-				handleTabChanged() {
-					this.selectedIndexCheck = this?.$refs?.tabsRef?.tabContext?.selectedIndex;
-				},
-				setTabButtonClick() {
-					this?.$refs?.tabsRef?.tabContext?.setTab(0);
-				},
-			},
-		}, addVueRouter());
-
-		// check for our elements
-		expect(getByRole('tabSetButton')).toBeDefined();
-		expect(getByRole('tablist')).toBeDefined();
-		expect(getAllByRole('tab').length).toBe(4);
-
-		// 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();
-		// Test access and updating of property ref
-		// expect the selected index value to be set to our new tab index
-		expect(getByText('Tab index is 2')).toBeVisible();
-
-		// click the button to test our ref method
-		await userEvent.click(getByText('Set Tab'));
-		expect(getByText('Third Panel')).not.toBeVisible();
-		expect(getByText('First Panel')).toBeVisible();
-		// Test access and updating of property ref
-		// expect the selected index value to be set to our new tab index
-		expect(getByText('Tab index is 0')).toBeVisible();
-	});
-});