Update e2e tests

test/src/pages/index.tsx

@@ -11,7 +11,32 @@ export default function Home() {
       </Head>
 
       <main>
-        <Sparkline values={[1, 2, 1, 4, 6, 8, 6]} width={50} height={50} />
+        <Sparkline
+          values={[1, 2, 1, 4, 6, 8, 6]}
+          width={100}
+          height={100}
+          lineColor="#00FF00"
+          lineWidth={4}
+          fillColor="#9DFF9D"
+        />
+
+        <Sparkline
+          values={[3, 2, 4, 3, 3, 2, 3]}
+          width={100}
+          height={100}
+          lineColor="#EED202"
+          lineWidth={4}
+          fillColor="#FFE900"
+        />
+
+        <Sparkline
+          values={[4, 3, 4, 6, 5, 4, 2]}
+          width={100}
+          height={100}
+          lineColor="red"
+          lineWidth={4}
+          fillColor="#FF9999"
+        />
       </main>
     </>
   )

test/src/styles/globals.css

@@ -2,6 +2,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  background: #99afd7;
 }
 
 main {

test/tests/index.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/')
+})
+
+test.describe('Sparkline', () => {
+  test('renders with width and height', async ({ page }) => {
+    await expect(page.locator('[data-sandbox-sparkline]').first()).toHaveCSS(
+      'width',
+      '100px'
+    )
+    await expect(page.locator('[data-sandbox-sparkline]').first()).toHaveCSS(
+      'height',
+      '100px'
+    )
+  })
+
+  test('renders line with values', async ({ page }) => {
+    await expect(
+      page.locator('[data-sandbox-sparkline] path').nth(1)
+    ).toHaveAttribute(
+      'd',
+      'M0 92  L 0 92, L 17 83, L 33 92, L 50 67, L 67 50, L 83 33, L 100 50'
+    )
+  })
+})