From 5313a4edf172209e272435b6f8cf45966ae11688 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 6 Apr 2022 11:47:19 +0100
Subject: [PATCH] fix unit + browser tests (#926)

---
 .../app/src/components/Textbox/Textbox.svelte |  2 +-
 .../src/components/Textbox/Textbox.test.ts    | 24 +++++++++----------
 ui/packages/app/test/blocks-basic.spec.ts     | 16 ++++++-------
 ui/packages/app/test/input-output.spec.ts     |  6 +++--
 ui/packages/form/src/CheckboxGroup.svelte     |  2 +-
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/ui/packages/app/src/components/Textbox/Textbox.svelte b/ui/packages/app/src/components/Textbox/Textbox.svelte
index 09df497c18..3cb18da748 100644
--- a/ui/packages/app/src/components/Textbox/Textbox.svelte
+++ b/ui/packages/app/src/components/Textbox/Textbox.svelte
@@ -5,7 +5,7 @@
 
 	export let label: string;
 	export let value: string = " ";
-	export let default_value: string;
+	export let default_value: string | false = false;
 	export let style: string = "";
 	export let lines: number;
 	export let placeholder: string = "";
diff --git a/ui/packages/app/src/components/Textbox/Textbox.test.ts b/ui/packages/app/src/components/Textbox/Textbox.test.ts
index 17a27d42bb..a586b15182 100644
--- a/ui/packages/app/src/components/Textbox/Textbox.test.ts
+++ b/ui/packages/app/src/components/Textbox/Textbox.test.ts
@@ -9,26 +9,26 @@ describe("Textbox", () => {
 	afterEach(() => cleanup());
 
 	test("renders provided value", () => {
-		const { container } = render(Textbox, {
-			theme: "default",
+		const { container, getByLabelText } = render(Textbox, {
 			lines: 1,
 			mode: "dynamic",
-			value: "hello world"
+			value: "hello world",
+			label: "Textbox"
 		});
 
-		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+		const item: HTMLInputElement = getByLabelText("Textbox");
 		assert.equal(item.value, "hello world");
 	});
 
 	test("changing the text should update the value", async () => {
-		const { container, component } = render(Textbox, {
-			theme: "default",
+		const { component, getByLabelText } = render(Textbox, {
 			lines: 1,
 			mode: "dynamic",
-			value: ""
+			value: "",
+			label: "Textbox"
 		});
 
-		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+		const item: HTMLInputElement = getByLabelText("Textbox");
 
 		const mock = spy();
 		component.$on("change", mock);
@@ -46,15 +46,15 @@ describe("Textbox", () => {
 	});
 
 	test("component should respect placeholder", async () => {
-		const { container, component } = render(Textbox, {
-			theme: "default",
+		const { getByLabelText } = render(Textbox, {
 			lines: 1,
 			mode: "dynamic",
 			value: "",
-			placeholder: "placeholder text"
+			placeholder: "placeholder text",
+			label: "Textbox"
 		});
 
-		const item: HTMLInputElement = container.querySelector(".input-text ")!;
+		const item: HTMLInputElement = getByLabelText("Textbox");
 		assert.equal(item.placeholder, "placeholder text");
 	});
 });
diff --git a/ui/packages/app/test/blocks-basic.spec.ts b/ui/packages/app/test/blocks-basic.spec.ts
index 8c4bb2d6eb..63d82bf903 100644
--- a/ui/packages/app/test/blocks-basic.spec.ts
+++ b/ui/packages/app/test/blocks-basic.spec.ts
@@ -32,7 +32,7 @@ test("renders the correct elements", async ({ page }) => {
 	const description = await page.locator(".output-markdown");
 	await expect(description).toContainText("Detect Disease From Scan");
 
-	const checkboxes = await page.locator(".input-checkbox-group");
+	const checkboxes = await page.locator("data-testid=checkbox-group");
 	await expect(checkboxes).toContainText("Covid Malaria Lung Cancer");
 
 	const tabs = await page.locator("button", { hasText: /X-ray|CT Scan/ });
@@ -58,8 +58,11 @@ test("can run an api request and display the data", async ({ page }) => {
 
 	await page.goto("http://localhost:3000");
 
-	await page.locator('button:has-text("Covid")').click();
-	await page.locator('button:has-text("Lung Cancer")').click();
+	// await page.locator('button:has-text("Covid")').click();
+	// await page.locator('button:has-text("Lung Cancer")').click();
+
+	await page.check("label:has-text('Covid')");
+	await page.check("label:has-text('Lung Cancer')");
 
 	const run_button = await page.locator("button", { hasText: /Run/ });
 
@@ -69,10 +72,5 @@ test("can run an api request and display the data", async ({ page }) => {
 	]);
 
 	const json = await page.locator(".output-json");
-	await expect(await json.innerText()).toContain(
-		`{
-Covid: 0.75,
-Lung Cancer: 0.25
-}`
-	);
+	await expect(json).toContainText(`Covid: 0.75, Lung Cancer: 0.25`);
 });
diff --git a/ui/packages/app/test/input-output.spec.ts b/ui/packages/app/test/input-output.spec.ts
index 1c4c587a45..040b85a1bb 100644
--- a/ui/packages/app/test/input-output.spec.ts
+++ b/ui/packages/app/test/input-output.spec.ts
@@ -30,12 +30,14 @@ test("a component acts as both input and output", async ({ page }) => {
 	await mock_api(page, [["world hello"]]);
 	await page.goto("http://localhost:3000");
 
-	const textbox = await page.locator(".input-text");
+	const textbox = await page.locator("label:has-text('None')");
 	const button = await page.locator("button");
 
 	await textbox.fill("hello world");
 
 	await Promise.all([button.click(), page.waitForResponse("**/api/predict/")]);
 
-	await expect(await page.inputValue(".input-text")).toEqual("world hello");
+	await expect(await page.inputValue("label:has-text('None')")).toEqual(
+		"world hello"
+	);
 });
diff --git a/ui/packages/form/src/CheckboxGroup.svelte b/ui/packages/form/src/CheckboxGroup.svelte
index 99d27d60c7..9cbb1f1890 100644
--- a/ui/packages/form/src/CheckboxGroup.svelte
+++ b/ui/packages/form/src/CheckboxGroup.svelte
@@ -25,7 +25,7 @@
 >
 	<BlockTitle>{label}</BlockTitle>
 
-	<div class="flex flex-wrap gap-2">
+	<div class="flex flex-wrap gap-2" data-testid="checkbox-group">
 		{#each choices as choice, i}
 			<label class="gr-box gr-box-sm ">
 				<input