test: add more e2e tests in options.test.ts (#375)

Author: lumirlumir

e2e-tests/options.test.ts

@@ -16,27 +16,132 @@ test("should switch language and show options for each", async ({ page }) => {
 
 	const languageSelect = page.getByRole("combobox", { name: "Language" });
 
-	await languageSelect.click();
-	await page.getByRole("option", { name: "JSON" }).click();
-	await expect(
-		page.getByRole("switch", { name: "Allow Trailing Commas" }),
-	).toBeVisible();
-
-	await languageSelect.click();
-	await page.getByRole("option", { name: "Markdown" }).click();
-	await expect(
-		page.getByRole("combobox", { name: "Front Matter" }),
-	).toBeVisible();
-
-	await languageSelect.click();
-	await page.getByRole("option", { name: "CSS" }).click();
-	await expect(
-		page.getByRole("switch", { name: "Tolerant Parsing" }),
-	).toBeVisible();
-
-	await languageSelect.click();
-	await page.getByRole("option", { name: "HTML" }).click();
-	await expect(
-		page.getByRole("combobox", { name: "Template Engine Syntax" }),
-	).toBeVisible();
+	// JavaScript
+	await test.step("should show JavaScript options when JavaScript is selected", async () => {
+		await languageSelect.click();
+		await page
+			.getByRole("option", { exact: true, name: "JavaScript" })
+			.click();
+
+		// `Language` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Language" }),
+		).toHaveText("JavaScript");
+
+		// `Parser` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Parser" }),
+		).toHaveText("Espree");
+
+		// `Source Type` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Source Type" }),
+		).toHaveText("Module");
+
+		// `ECMAScript Version` Combobox
+		await expect(
+			page.getByRole("combobox", {
+				exact: true,
+				name: "ECMAScript Version",
+			}),
+		).toHaveText("Latest");
+
+		// `JSX` Switch
+		await expect(
+			page.getByRole("switch", {
+				exact: true,
+				name: "JSX",
+			}),
+		).toBeVisible();
+	});
+
+	// JSON
+	await test.step("should show JSON options when JSON is selected", async () => {
+		await languageSelect.click();
+		await page.getByRole("option", { exact: true, name: "JSON" }).click();
+
+		// `Language` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Language" }),
+		).toHaveText("JSON");
+
+		// `Mode` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Mode" }),
+		).toHaveText("jsonc");
+
+		// `Allow Trailing Commas` Switch
+		await expect(
+			page.getByRole("switch", {
+				exact: true,
+				name: "Allow Trailing Commas",
+			}),
+		).toBeVisible();
+	});
+
+	// Markdown
+	await test.step("should show Markdown options when Markdown is selected", async () => {
+		await languageSelect.click();
+		await page
+			.getByRole("option", { exact: true, name: "Markdown" })
+			.click();
+
+		// `Language` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Language" }),
+		).toHaveText("Markdown");
+
+		// `Mode` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Mode" }),
+		).toHaveText("CommonMark");
+
+		// `Front Matter` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Front Matter" }),
+		).toBeVisible();
+	});
+
+	// CSS
+	await test.step("should show CSS options when CSS is selected", async () => {
+		await languageSelect.click();
+		await page.getByRole("option", { exact: true, name: "CSS" }).click();
+
+		// `Language` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Language" }),
+		).toHaveText("CSS");
+
+		// `Tolerant Parsing` Switch
+		await expect(
+			page.getByRole("switch", { exact: true, name: "Tolerant Parsing" }),
+		).toBeVisible();
+	});
+
+	// HTML
+	await test.step("should show HTML options when HTML is selected", async () => {
+		await languageSelect.click();
+		await page.getByRole("option", { exact: true, name: "HTML" }).click();
+
+		// `Language` Combobox
+		await expect(
+			page.getByRole("combobox", { exact: true, name: "Language" }),
+		).toHaveText("HTML");
+
+		// `Template Engine Syntax` Combobox
+		await expect(
+			page.getByRole("combobox", {
+				exact: true,
+				name: "Template Engine Syntax",
+			}),
+		).toBeVisible();
+
+		// `Front Matter` Switch
+		await expect(
+			page.getByRole("switch", {
+				exact: true,
+				name: "Front Matter",
+			}),
+		).toBeVisible();
+	});
 });