Adds web forms test coverage

Author: latin-panda

packages/web-forms/src/components/controls/RankControl.vue

@@ -86,15 +86,16 @@ const swapItems = (index: number, newPosition: number) => {
 	<ControlText :question="question" />
 
 	<VueDraggable
-		v-model="options"
 		:id="question.nodeId"
+		v-model="options"
 		:delay="HOLD_DELAY"
 		:disabled="question.currentState.readonly"
 		ghost-class="fade-moving"
 		class="rank-control"
 		@update="setValues">
 		<div
 			v-for="(option, index) in options"
+			:id="option.value"
 			:key="option.value"
 			class="rank-option"
 			:class="{ 'moving': highlight.index.value === index }"

packages/web-forms/tests/components/FormQuestion.test.ts

@@ -1,10 +1,11 @@
 import InputControl from '@/components/controls/Input/InputControl.vue';
 import SelectControl from '@/components/controls/SelectControl.vue';
+import RankControl from '@/components/controls/RankControl.vue';
 import UnsupportedControl from '@/components/controls/UnsupportedControl.vue';
 import type { SelectNode } from '@getodk/xforms-engine';
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
-import FormQuestion from '../../src/components/FormQuestion.vue';
+import FormQuestion from '@/components/FormQuestion.vue';
 import { fakeUnsupportedControlNode, getReactiveForm, globalMountOptions } from '../helpers';
 
 const mountComponent = async (formPath: string, questionNumber: number) => {
@@ -39,6 +40,20 @@ describe('FormQuestion', () => {
 		expect(component.find('label').text()).toEqual('1. Select a fruit');
 	});
 
+	it('shows Rank control for rank nodes', async () => {
+		const component = await mountComponent('1-rank.xml', 0);
+
+		const rankControl = component.findComponent(RankControl);
+
+		expect(rankControl.exists()).toBe(true);
+
+		expect(component.find('label').text()).toEqual('What values guide your decision-making?');
+		expect(component.find('#creativity_and_innovation .rank-label').text()).toEqual(
+			'Creativity and Innovation'
+		);
+		expect(component.find('#family_and_friends .rank-label').text()).toEqual('Family and Friends');
+	});
+
 	it('shows UnsupportedControl for unsupported / unimplemented question type', () => {
 		const component = mount(FormQuestion, {
 			props: {

packages/web-forms/tests/components/RankControl.test.ts

@@ -0,0 +1,103 @@
+import { describe, expect, it } from 'vitest';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import { getReactiveForm, globalMountOptions } from '../helpers';
+import FormQuestion from '@/components/FormQuestion.vue';
+import RankControl from '@/components/controls/RankControl.vue';
+import { RankNode } from '@getodk/xforms-engine';
+
+describe('RankControl', () => {
+	const getAllOptions = (rankControl: VueWrapper): string[] => {
+		return rankControl.findAll('.rank-label').map((element) => element.text());
+	};
+
+	const getRankControl = async () => {
+		const xform = await getReactiveForm('1-rank.xml');
+
+		const component = mount(FormQuestion, {
+			props: {
+				question: xform.currentState.children[0] as RankNode,
+			},
+			global: globalMountOptions,
+		});
+
+		return component.findComponent(RankControl);
+	};
+
+	const swapItems = (options: string[], indexA: number, indexB: number) => {
+		const temp = options[indexA];
+		options[indexA] = options[indexB];
+		options[indexB] = temp;
+	};
+
+	const moveOptionUp = async (rankControl: VueWrapper, optionIndex: number) => {
+		const buttonMoveUp: DOMWrapper<HTMLElement> = rankControl.find(
+			`.rank-option:nth-child(${optionIndex}) button:first-child`
+		);
+		expect(buttonMoveUp.exists()).toBe(true);
+		await buttonMoveUp.trigger('click');
+	};
+
+	const moveOptionDown = async (rankControl: VueWrapper, optionIndex: number) => {
+		const buttonMoveUp: DOMWrapper<HTMLElement> = rankControl.find(
+			`.rank-option:nth-child(${optionIndex}) button:nth-child(2)`
+		);
+		expect(buttonMoveUp.exists()).toBe(true);
+		await buttonMoveUp.trigger('click');
+	};
+
+	it('should render all options', async () => {
+		const expectedOptions = [
+			'Career Growth and Learning Opportunities',
+			'Building a Supportive Community',
+			'Financial Stability',
+			'Pursuit of Hobbies and Passions',
+			'Health',
+			'Family and Friends',
+			'Personal Development and Mindfulness',
+			'Environmental Sustainability',
+			'Creativity and Innovation',
+			'Time Management and Work-Life Balance',
+		];
+
+		const rankControl = (await getRankControl()) as VueWrapper;
+		expect(rankControl.exists()).toBe(true);
+
+		const allOptions = getAllOptions(rankControl);
+		expect(allOptions.length).toEqual(10);
+
+		const allOptionsExist = expectedOptions.every((option) => allOptions.includes(option));
+		expect(allOptionsExist).toBe(true);
+	});
+
+	it('should rank options using buttons', async () => {
+		const rankControl = (await getRankControl()) as VueWrapper;
+		expect(rankControl.exists()).toBe(true);
+
+		const expectedOptions = getAllOptions(rankControl);
+		swapItems(expectedOptions, 4, 3);
+		swapItems(expectedOptions, 6, 7);
+
+		await moveOptionUp(rankControl, 5);
+		await moveOptionDown(rankControl, 7);
+
+		const allRankedOptions = getAllOptions(rankControl);
+		const sameOrder = expectedOptions.every((value, index) => value === allRankedOptions[index]);
+		expect(sameOrder).toBe(true);
+	});
+
+	it('should not move options if they are the first or last one', async () => {
+		const rankControl = (await getRankControl()) as VueWrapper;
+		expect(rankControl.exists()).toBe(true);
+
+		const expectedOptions = getAllOptions(rankControl);
+		swapItems(expectedOptions, 3, 2);
+
+		await moveOptionUp(rankControl, 1);
+		await moveOptionUp(rankControl, 4);
+		await moveOptionDown(rankControl, 10);
+
+		const allRankedOptions = getAllOptions(rankControl);
+		const sameOrder = expectedOptions.every((value, index) => value === allRankedOptions[index]);
+		expect(sameOrder).toBe(true);
+	});
+});