me/pi-ku
1
0
Fork 0
mirror of https://github.com/ramvignesh-b/pi-ku.git synced 2026-05-04 00:56:34 +00:00
Code Issues Actions 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>
scripts/run-e2e.sh
+22 -2
View File
@@ -1,6 +1,8 @@
#!/bin/bash
set -e
# Usage: ./run-e2e.sh [--docker] [--ui]
# Use podman if available. Not everyone has it
CONTAINER_BIN=$(command -v podman || command -v docker)
if [ -z "$CONTAINER_BIN" ]; then
@@ -26,7 +28,7 @@ else
exit 1
fi
# This cleans up containers. Very useful for local e2e to free system resources immediately.
# This cleans up django backend process and containers. Very useful for local e2e to free system resources immediately.
cleanup() {
echo "Cleaning up..."
$CONTAINER_BIN rm -f "$DB_NAME" 2>/dev/null || true
@@ -59,4 +61,22 @@ mkdir -p ./tmp/logs
(cd backend && uv run manage.py serve) > ./tmp/logs/backend.log 2>&1 &
BACKEND_PID=$!
cd frontend && bun run test:e2e "$@"
TEST_COMMAND="test:e2e"
MODE="local"
for arg in "$@"; do
echo "$arg"
if [ "$arg" = "--ui" ]; then
TEST_COMMAND="test:e2e:ui"
fi
if [ "$arg" = "--docker" ]; then
MODE="docker"
fi
done
# optionally using docker to run playwright since someone at microsoft thought it'd be nice to not support fedora :)
if [ $MODE = "docker" ]; then
$CONTAINER_BIN run --rm -it --network host -v $(pwd):/e2e:Z -w /e2e/frontend -p 43008:43008 mcr.microsoft.com/playwright:v1.59.1-noble npm run $TEST_COMMAND
else
cd frontend && bun run $TEST_COMMAND
fi