From 41164f0564a9267895a42192b357c99c866a5d53 Mon Sep 17 00:00:00 2001
From: platane <me@platane.me>
Date: Sun, 25 Feb 2024 08:43:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/app/components/Lines/FlyingLabel.tsx |  4 +--
 packages/app/components/Lines/Lines.tsx       |  2 +-
 packages/e2e/tests/app.spec.ts                | 32 ++++++++++++-------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/app/components/Lines/FlyingLabel.tsx b/packages/app/components/Lines/FlyingLabel.tsx
index 1539bcd..5afd1cd 100644
--- a/packages/app/components/Lines/FlyingLabel.tsx
+++ b/packages/app/components/Lines/FlyingLabel.tsx
@@ -5,8 +5,8 @@ import type { ILocation } from "@tzr/location-index";
 import { css } from "@linaria/core";
 
 type Props = { location: ILocation; t: number };
-export const FlyingLabel = () => (
-  <Container>
+export const FlyingLabel = (props: React.ComponentProps<typeof Container>) => (
+  <Container {...props}>
     <span />
     <span />
     <span />
diff --git a/packages/app/components/Lines/Lines.tsx b/packages/app/components/Lines/Lines.tsx
index f2b560f..61c2484 100644
--- a/packages/app/components/Lines/Lines.tsx
+++ b/packages/app/components/Lines/Lines.tsx
@@ -79,7 +79,7 @@ export const Lines = () => {
               id={`location-item-${location.key}`}
               onClick={() => selectLocation(location)}
             >
-              <FlyingLabel />
+              <FlyingLabel data-test-id="flying-date" />
 
               {blocks[i].map(({ day, awake, office }, i) => (
                 <React.Fragment key={i}>
diff --git a/packages/e2e/tests/app.spec.ts b/packages/e2e/tests/app.spec.ts
index bdd05ef..8ed60b1 100644
--- a/packages/e2e/tests/app.spec.ts
+++ b/packages/e2e/tests/app.spec.ts
@@ -64,24 +64,34 @@ test("Should be able to move slider", async ({ page }) => {
   await page.getByLabel("date picker").fill("2024-02-01");
   await page.getByLabel("date picker").press("Enter");
 
-  await expect(page.getByText("February 1 at 12:00 PM")).toBeVisible();
+  const flyingDateLocator = page.locator(`[data-test-id="flying-date"]`);
+
+  {
+    const date = await flyingDateLocator.textContent();
+    expect(date).toBe("February 1 at 12:00 PM");
+  }
 
   await expect(page.getByLabel("avatar in the pose day")).toBeVisible();
 
-  //
-  const sliderLocator = page.getByLabel("date slider");
+  // slide 300px left
+  {
+    const sliderLocator = page.getByLabel("date slider");
 
-  await expect(sliderLocator).toBeVisible();
+    await expect(sliderLocator).toBeVisible();
 
-  const bb0 = (await sliderLocator.boundingBox())!;
-  const p0 = { x: bb0.x + bb0.width / 2, y: bb0.y + bb0.height / 2 };
+    const bb0 = (await sliderLocator.boundingBox())!;
+    const p0 = { x: bb0.x + bb0.width / 2, y: bb0.y + bb0.height / 2 };
 
-  await page.mouse.move(p0.x, p0.y);
-  await page.mouse.down();
-  await page.mouse.move(p0.x + 300, p0.y);
-  await page.mouse.up();
+    await page.mouse.move(p0.x, p0.y);
+    await page.mouse.down();
+    await page.mouse.move(p0.x + 300, p0.y);
+    await page.mouse.up();
+  }
 
-  await expect(page.getByText("February 2 at 5:30 AM")).toBeVisible();
+  {
+    const date = await flyingDateLocator.textContent();
+    expect(date).toBe("February 2 at 5:30 AM");
+  }
 
   await expect(page.getByLabel("avatar in the pose night")).toBeVisible();
 });