fix the e2e tests for now (they will be made better eventually)

Author: HoodieRocks

playwright.config.ts

@@ -5,5 +5,6 @@ export default defineConfig({
 		command: "npm run build && npm run preview",
 		port: 4173,
 	},
+	fullyParallel: true,
 	testDir: "src/tests/e2e",
 });

src/lib/components/text/ShadowColorButton.svelte

@@ -26,13 +26,13 @@
 	}: Props = $props();
 </script>
 
-<label bind:this={labelElement} {dir}>
-	<button
-		aria-label="Shadow Color"
-		{@attach tooltip}
-		class="p-1 {small
-			? 'text-sm'
-			: 'text-lg'} rounded-md bg-zinc-800 font-medium hover:bg-white/3">
+<button
+	aria-label="Shadow Color"
+	{@attach tooltip}
+	class="p-1 {small
+		? 'text-sm'
+		: 'text-lg'} rounded-md font-medium hover:bg-white/3">
+	<label bind:this={labelElement} {dir}>
 		<IconShadow />
-	</button>
-</label>
+	</label>
+</button>

src/routes/+page.svelte

@@ -559,6 +559,7 @@
 	<div
 		class="font-minecraft w-full grow overflow-auto bg-zinc-800 first:focus:outline-none"
 		spellcheck="false"
+		id="wysiwyg-box"
 		bind:this={element}>
 	</div>
 

src/tests/e2e/basic.test.ts

@@ -12,16 +12,14 @@ test("home page loads", async ({ page }) => {
 
 test("blank text updates with formatted output", async ({ page }) => {
 	await page.getByLabel("Keybinds").waitFor();
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	const output = page.locator("#outputbox").first();
 	await expect(output).toHaveText(`"lorem ipsum"`);
 });
 
 test("the bold button should work", async ({ page }) => {
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	await textbox.selectText();
 	let button = page.getByRole("button", { name: "Bold " });
@@ -34,8 +32,7 @@ test("the bold button should work", async ({ page }) => {
 });
 
 test("the italic button should work", async ({ page }) => {
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	await textbox.selectText();
 	let button = page.getByRole("button", { name: "Italic " });
@@ -48,8 +45,7 @@ test("the italic button should work", async ({ page }) => {
 });
 
 test("the strikethrough button should work", async ({ page }) => {
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	await textbox.selectText();
 	let button = page.getByRole("button", { name: "Strikethrough " });
@@ -62,8 +58,7 @@ test("the strikethrough button should work", async ({ page }) => {
 });
 
 test("the underline button should work", async ({ page }) => {
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	await textbox.selectText();
 	let button = page.getByRole("button", { name: "Underline " });
@@ -76,11 +71,27 @@ test("the underline button should work", async ({ page }) => {
 });
 
 test("the obfuscation button should work", async ({ page }) => {
-	const textbox = page.getByRole("textbox").nth(1);
-	await textbox.click();
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
 	await textbox.fill("lorem ipsum");
 	await textbox.selectText();
 	let button = page.getByRole("button", { name: "Obfuscated " });
 	await button.click();
 	expect(await textbox.locator("p>span.obfuscated").count()).toBeGreaterThan(0);
 });
+
+test("the shadow color button should work", async ({ page }) => {
+	const textbox = page.locator("#wysiwyg-box>[role=textbox]").first();
+	await textbox.fill("lorem ipsum");
+	await textbox.selectText();
+	let button = page.getByRole("button", { name: "Shadow Color" });
+	await button.click();
+	const colorInput = page.locator('input[aria-label="hex color"]');
+	await colorInput.fill("#ff0000");
+	await colorInput.press("Enter");
+	expect(
+		await textbox.locator('p>span[style*="text-shadow"]').count(),
+	).toBeGreaterThan(0);
+	await expect(
+		textbox.locator('p>span[style*="text-shadow"]').first(),
+	).toHaveAttribute("style", "text-shadow: rgb(255, 0, 0) 2px 2px 0px;");
+});