@kiva/kv-components 3.0.1 → 3.0.2

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.1...@kiva/kv-components@3.0.2) (2022-03-18)
+
+
+### Bug Fixes
+
+* clean up tests console errors and props ([37a6da9](https://github.com/kiva/kv-ui-elements/commit/37a6da9b4439463e777ae503b7ccff6562b9c81f))
+* ensure reactive ref state without timeout ([eda1553](https://github.com/kiva/kv-ui-elements/commit/eda1553304e6ed4199e35dbd73cb821b87bf3175))
+* return additional items for access as refs in vue2 ([b34ee52](https://github.com/kiva/kv-ui-elements/commit/b34ee52c39357bb7469418717d99c08a937c5cb8))
+
+
+
+
+
 ## [3.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.0...@kiva/kv-components@3.0.1) (2022-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "2a8ff1a1fb9a3ad59f371d1e938a858e52372c62"
+  "gitHead": "8704a80f645946a36d1f4ae7a7696770177b4b47"
 }

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

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

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

@@ -1,10 +1,31 @@
 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(KvTabPanel);
+		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

@@ -5,6 +5,8 @@ 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 = () => {};
@@ -30,7 +32,6 @@ function renderOneTabSet() {
 		`,
 	});
 }
-
 describe('KvTabs', () => {
 	it('has no automated accessibility violations', async () => {
 		const { container } = renderOneTabSet();
@@ -96,4 +97,71 @@ describe('KvTabs', () => {
 		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();
+	});
 });

package/vue/KvTabs.vue

@@ -44,8 +44,8 @@
  * ```
  *  <kv-tabs>
  *   <template #tabNav>
- *    <kv-tab for="foo">Foo</kv-tab>
- *    <kv-tab for="bar">Bar</kv-tab>
+ *    <kv-tab for-panel="foo">Foo</kv-tab>
+ *    <kv-tab for-panel="bar">Bar</kv-tab>
  *   </template>
  *   <template #tabPanels>
  *    <kv-tab-panel id="foo">Foo content</kv-tab-panel>
@@ -163,6 +163,7 @@ export default {
 		return {
 			handleKeyDown,
 			selectedTabEl,
+			tabContext,
 		};
 	},
 };