test(ranking): add e2e coverage for restore, clear form and required behavior

Signed-off-by: paul bochtler <65470117+datapumpernickel@users.noreply.github.com>

Author: datapumpernickel

playwright/e2e/ranking-question.spec.ts

@@ -0,0 +1,95 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, mergeTests } from '@playwright/test'
+import { test as formTest } from '../support/fixtures/form.ts'
+import { test as appNavigationTest } from '../support/fixtures/navigation.ts'
+import { test as randomUserTest } from '../support/fixtures/random-user.ts'
+import { test as submitTest } from '../support/fixtures/submit.ts'
+import { test as topBarTest } from '../support/fixtures/topBar.ts'
+import { QuestionType } from '../support/sections/QuestionType.ts'
+import { FormsView } from '../support/sections/TopBarSection.ts'
+
+const test = mergeTests(
+	randomUserTest,
+	appNavigationTest,
+	formTest,
+	topBarTest,
+	submitTest,
+)
+
+test.describe('Ranking question', () => {
+	test.beforeEach(async ({ page, appNavigation, form }) => {
+		await page.goto('apps/forms')
+		await page.waitForURL(/apps\/forms\/?$/)
+		await appNavigation.clickNewForm()
+		await form.fillTitle('Ranking test form')
+
+		await form.addQuestion(QuestionType.Ranking)
+		const questions = await form.getQuestions()
+		await questions[0].fillTitle('Rank snacks')
+		await questions[0].addAnswer('Pretzels')
+		await questions[0].addAnswer('Popcorn')
+		await questions[0].addAnswer('Nuts')
+	})
+
+	test('Restores unsubmitted ranking from local storage on reload', async ({
+		topBar,
+		submitView,
+		page,
+	}) => {
+		await topBar.toggleView(FormsView.View)
+
+		await submitView.rankOption('Rank snacks', 'Pretzels')
+		await submitView.rankOption('Rank snacks', 'Popcorn')
+
+		await page.reload()
+
+		const question = submitView.getQuestion('Rank snacks')
+		await expect(
+			question.getByRole('button', { name: 'Remove from ranking' }),
+		).toHaveCount(2)
+	})
+
+	test('Clear form resets ranked options', async ({ topBar, submitView }) => {
+		await topBar.toggleView(FormsView.View)
+
+		await submitView.rankOption('Rank snacks', 'Pretzels')
+		await submitView.rankOption('Rank snacks', 'Popcorn')
+		await submitView.clearForm()
+
+		const question = submitView.getQuestion('Rank snacks')
+		await expect(
+			question.getByRole('button', { name: 'Remove from ranking' }),
+		).toHaveCount(0)
+		await expect(
+			question.getByRole('button', { name: 'Pretzels' }),
+		).toBeVisible()
+		await expect(question.getByRole('button', { name: 'Popcorn' })).toBeVisible()
+	})
+
+	test('Required ranking blocks submit until all options are ranked', async ({
+		topBar,
+		submitView,
+		form,
+	}) => {
+		const questions = await form.getQuestions()
+		await questions[0].toggleRequired()
+
+		await topBar.toggleView(FormsView.View)
+
+		await submitView.submitButton.click()
+		await expect(submitView.successMessage).not.toBeVisible()
+
+		await submitView.rankOption('Rank snacks', 'Pretzels')
+		await submitView.submitButton.click()
+		await expect(submitView.successMessage).not.toBeVisible()
+
+		await submitView.rankOption('Rank snacks', 'Popcorn')
+		await submitView.rankOption('Rank snacks', 'Nuts')
+		await submitView.submit()
+		await expect(submitView.successMessage).toBeVisible()
+	})
+})

playwright/support/sections/QuestionType.ts

@@ -11,6 +11,7 @@ export enum QuestionType {
 	File = 'File',
 	LinearScale = 'Linear scale',
 	LongAnswer = 'Long text',
+	Ranking = 'Ranking',
 	RadioButtons = 'Radio buttons',
 	ShortAnswer = 'Short answer',
 }

playwright/support/sections/SubmitSection.ts

@@ -6,10 +6,12 @@
 import type { Locator, Page, Response } from '@playwright/test'
 
 export class SubmitSection {
+	public readonly clearFormButton: Locator
 	public readonly submitButton: Locator
 	public readonly successMessage: Locator
 
 	constructor(public readonly page: Page) {
+		this.clearFormButton = this.page.getByRole('button', { name: 'Clear form' })
 		this.submitButton = this.page.getByRole('button', { name: 'Submit' })
 		this.successMessage = this.page.getByText(
 			'Thank you for completing the form!',
@@ -99,6 +101,29 @@ export class SubmitSection {
 		await this.page.getByRole('option', { name: optionName }).click()
 	}
 
+	/**
+	 * Rank an option by clicking it in the unranked pool.
+	 *
+	 * @param questionName the title of the question
+	 * @param optionName the option text to move into ranked list
+	 */
+	public async rankOption(
+		questionName: string | RegExp,
+		optionName: string | RegExp,
+	): Promise<void> {
+		const question = this.getQuestion(questionName)
+		await question.getByRole('button', { name: optionName }).click()
+	}
+
+	/**
+	 * Click clear form and confirm the dialog.
+	 */
+	public async clearForm(): Promise<void> {
+		await this.clearFormButton.click()
+		const dialog = this.page.getByRole('dialog', { name: 'Clear form' })
+		await dialog.getByRole('button', { name: 'Clear' }).click()
+	}
+
 	/** Click submit and wait for the API response. */
 	public async submit(): Promise<Response> {
 		const response = this.page.waitForResponse(