me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 08:56:52 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: stabilize e2e letter reveal spec, and optionally dockerize playwright execution

Browse Source
This commit is contained in:
ramvignesh-b
2026-04-23 04:42:17 +05:30
parent 7ff4c1de29
commit f509d74f62
5 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/letter.spec.ts
+8 -7
View File
@@ -186,23 +186,24 @@ test.describe("Letter Drafting (Real Backend)", () => {
await expect(page.getByText(/breaking the seal/i)).toBeHidden({
timeout: 10000,
});
// Check recipient on the front of the envelope
await expect(page.getByText(new RegExp(recipientName, "i"))).toBeVisible();
// Flip the envelope to the back (click the recipient name or the front div to flip)
// Flip the envelope to the back
await page.getByText(new RegExp(recipientName, "i")).click();
// Wait for flip transition (2s)
await page.waitForTimeout(2500);
// Reveal the letter: click seal then click letter
// Wait for flip animation to progress
await page.getByAltText("Seal").waitFor({ state: "visible" });
await page.getByAltText("Seal").click({ force: true });
await page.getByAltText("Seal").click();
// Wait for flap transition
await page.waitForTimeout(1500);
// Click the letter to pull it out
await page.locator("#letter").click({ force: true });
await page.locator("#letter").click();
// Wait for reveal transition
await expect(page.locator("#letter")).toBeHidden({ timeout: 15000 });
await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
// Also check if we are redirected to the Reader if we manually go to the Editor URL
const readerUrl = page.url();
frontend/package.json
+1 -1
View File
@@ -16,7 +16,7 @@
"test:watch": "vitest",
"test:coverage": "vitest run --coverage",
"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui"
"test:e2e:ui": "playwright test --ui --ui-host=0.0.0.0 --ui-port=43008"
},
"dependencies": {
"@fontsource-variable/jost": "^5.2.8",
frontend/playwright.config.ts
+1 -2
View File
@@ -14,7 +14,6 @@ const baseUrl = getBaseUrl(
env.FRONTEND_PORT,
);
console.log(baseUrl);
export default defineConfig({
timeout: 60000,
expect: {
@@ -61,7 +60,7 @@ export default defineConfig({
/* Run your local dev server before starting the tests */
webServer: {
command: "bun run dev -- --mode e2e",
command: "npm run dev -- --mode e2e",
url: getBaseUrl(
process.env.SSL_ENABLED === "true",
process.env.FRONTEND_DOMAIN,
frontend/src/components/ui/EnvelopeReveal.tsx
+6 -6
View File
@@ -20,6 +20,7 @@ export function EnvelopeReveal({
const flapCheckbox = useRef<HTMLInputElement>(null);
const handleClick = () => {
if (revealLetter) return;
setRevealLetter(true);
setTimeout(() => {
onRevealComplete();
@@ -45,7 +46,7 @@ export function EnvelopeReveal({
</div>
<img
className={
"translate-y-24 delay-2000 absolute z-6 peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1500 cursor-pointer"
"translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1500 cursor-pointer"
}
src={waxSeal}
alt="Seal"
@@ -53,22 +54,21 @@ export function EnvelopeReveal({
/>
<button
id="letter"
className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-63 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-63 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-2000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
onClick={handleClick}
></button>
<div
id="env-right"
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3"
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-3 -mr-48 z-3 pointer-events-none"
></div>
<div
id="env-left"
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3"
className="absolute h-70 w-105 bg-base-300 mask mask-triangle-4 -ml-48 z-3 pointer-events-none"
></div>
<button
id="env-bottom"
className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3"
onClick={() => setIsFlipped((prev) => !prev)}
className="absolute h-70 w-45 bg-base-200 mask mask-triangle-2 scale-y-[-1] mt-15 scale-x-240 z-3 pointer-events-none"
></button>
</div>