test(e2e): add more test cases

Author: metonym

tests/e2e/LineNumbers.customStartingLine.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import horizonDark from "svelte-highlight/styles/horizon-dark";
+
+  const code = "const add = (a: number, b: number) => a + b";
+</script>
+
+<svelte:head>
+  {@html horizonDark}
+</svelte:head>
+
+<Highlight language={typescript} {code} let:highlighted>
+  <LineNumbers {highlighted} startingLineNumber={100} />
+</Highlight>

tests/e2e/LineNumbers.hideBorder.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import horizonDark from "svelte-highlight/styles/horizon-dark";
+
+  const code = "const add = (a: number, b: number) => a + b";
+</script>
+
+<svelte:head>
+  {@html horizonDark}
+</svelte:head>
+
+<Highlight language={typescript} {code} let:highlighted>
+  <LineNumbers {highlighted} hideBorder />
+</Highlight>

tests/e2e/LineNumbers.wrapLines.test.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import typescript from "svelte-highlight/languages/typescript";
+  import horizonDark from "svelte-highlight/styles/horizon-dark";
+
+  const code = "const add = (a: number, b: number) => a + b";
+</script>
+
+<svelte:head>
+  {@html horizonDark}
+</svelte:head>
+
+<Highlight language={typescript} {code} let:highlighted>
+  <LineNumbers {highlighted} wrapLines />
+</Highlight>

tests/e2e/e2e.test.ts

@@ -1,8 +1,12 @@
 import { expect, test } from "@playwright/experimental-ct-svelte";
 import Highlight from "./Highlight.test.svelte";
 import HighlightAuto from "./HighlightAuto.test.svelte";
+import LineNumbersCustomStartingLine from "./LineNumbers.customStartingLine.test.svelte";
+import LineNumbersHideBorder from "./LineNumbers.hideBorder.test.svelte";
 import LineNumbers from "./LineNumbers.test.svelte";
+import LineNumbersWrapLines from "./LineNumbers.wrapLines.test.svelte";
 import SvelteHighlight from "./SvelteHighlight.test.svelte";
+
 test.use({ viewport: { width: 1200, height: 600 } });
 
 test("Highlight", async ({ mount, page }) => {
@@ -32,10 +36,61 @@ test("SvelteHighlight", async ({ mount, page }) => {
   await expect(page.locator(".hljs-attr")).toHaveText("on:click");
 });
 
-test("LineNumbers", async ({ mount, page }) => {
+test("LineNumbers - basic functionality", async ({ mount, page }) => {
   await mount(LineNumbers);
   await expect(page.getByText("1")).toBeVisible();
 
   await expect(page.locator(".hljs-keyword")).toHaveText("const");
   await expect(page.locator(".hljs-title")).toHaveText("add");
+
+  const lineNumbersColumn = page.locator("td.hljs").first();
+  await expect(lineNumbersColumn).toHaveCSS("position", "sticky");
+  await expect(lineNumbersColumn).not.toHaveClass(/hideBorder/);
+});
+
+test("LineNumbers - hide border", async ({ mount, page }) => {
+  await mount(LineNumbersHideBorder);
+
+  const lineNumbersColumn = page.locator("td.hljs").first();
+  await expect(lineNumbersColumn).toHaveClass(/hideBorder/);
+});
+
+test("LineNumbers - wrap lines", async ({ mount, page }) => {
+  await mount(LineNumbersWrapLines);
+
+  const preElement = page.locator("pre.wrapLines");
+  await expect(preElement).toBeVisible();
+});
+
+test("LineNumbers - custom starting number", async ({ mount, page }) => {
+  await mount(LineNumbersCustomStartingLine);
+
+  await expect(page.getByText("100")).toBeVisible();
+});
+
+test("Language tag styling", async ({ mount, page }) => {
+  await mount(Highlight, {
+    props: {
+      langtag: true,
+      code: "const x = 1;",
+      language: { name: "javascript", register: () => {} },
+      style: "--langtag-background: red; --langtag-color: white;",
+    },
+  });
+
+  const langTag = page.locator("[data-language]");
+  await expect(langTag).toBeVisible();
+  // Could add more specific style checks if needed
+});
+
+test("Auto-highlighting detects language", async ({ mount, page }) => {
+  await mount(HighlightAuto, {
+    props: {
+      code: "body { color: red; }",
+    },
+  });
+
+  // Should detect CSS and apply appropriate highlighting
+  await expect(page.locator(".hljs-selector-tag")).toBeVisible();
+  await expect(page.locator("pre")).toHaveAttribute("data-language", "css");
 });