Compare commits
8 Commits
v0.1.6.33
...
71c7f2aab5
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
71c7f2aab5 | ||
|
|
096682929d | ||
|
|
cebdf7a5a2 | ||
|
|
afbdb74516 | ||
|
|
9372264174 | ||
|
|
25680a19b6 | ||
|
|
fb3e4c10dd | ||
|
|
b7293a4614 |
@@ -24,10 +24,12 @@ COPY --from=deps /app/node_modules ./node_modules
|
|||||||
COPY . .
|
COPY . .
|
||||||
|
|
||||||
# Extract version: use build arg if provided, otherwise get from git, fallback to package.json
|
# Extract version: use build arg if provided, otherwise get from git, fallback to package.json
|
||||||
|
# Only use tags that are reachable from the current commit to ensure version matches the code
|
||||||
RUN if [ -n "$APP_VERSION" ]; then \
|
RUN if [ -n "$APP_VERSION" ]; then \
|
||||||
echo "$APP_VERSION" > /tmp/version.txt; \
|
echo "$APP_VERSION" > /tmp/version.txt; \
|
||||||
else \
|
else \
|
||||||
(git describe --tags --always 2>/dev/null || \
|
(git describe --tags --exact-match 2>/dev/null || \
|
||||||
|
git describe --tags --abbrev=0 2>/dev/null || \
|
||||||
(grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4 | sed 's/^/v/') || \
|
(grep -o '"version": "[^"]*"' package.json 2>/dev/null | cut -d'"' -f4 | sed 's/^/v/') || \
|
||||||
echo "dev") > /tmp/version.txt; \
|
echo "dev") > /tmp/version.txt; \
|
||||||
fi && \
|
fi && \
|
||||||
|
|||||||
@@ -22,8 +22,8 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
const [progress, setProgress] = useState(0);
|
const [progress, setProgress] = useState(0);
|
||||||
const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
|
const [hasPlayedOnce, setHasPlayedOnce] = useState(false);
|
||||||
|
|
||||||
const [processedSrc, setProcessedSrc] = useState(src);
|
const [processedSrc, setProcessedSrc] = useState<string | null>(null);
|
||||||
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState(unlockedSeconds);
|
const [processedUnlockedSeconds, setProcessedUnlockedSeconds] = useState<number | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log('[AudioPlayer] MOUNTED');
|
console.log('[AudioPlayer] MOUNTED');
|
||||||
@@ -41,7 +41,7 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
let startPos = startTime;
|
let startPos = startTime;
|
||||||
|
|
||||||
// If same song but more time unlocked, start from where previous segment ended
|
// If same song but more time unlocked, start from where previous segment ended
|
||||||
if (src === processedSrc && unlockedSeconds > processedUnlockedSeconds) {
|
if (processedSrc !== null && src === processedSrc && processedUnlockedSeconds !== null && unlockedSeconds > processedUnlockedSeconds) {
|
||||||
startPos = startTime + processedUnlockedSeconds;
|
startPos = startTime + processedUnlockedSeconds;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -62,8 +62,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
|
const initialPercent = unlockedSeconds > 0 ? (initialElapsed / unlockedSeconds) * 100 : 0;
|
||||||
setProgress(Math.min(initialPercent, 100));
|
setProgress(Math.min(initialPercent, 100));
|
||||||
|
|
||||||
setHasPlayedOnce(false); // Reset for new segment
|
// Only reset hasPlayedOnce if the song changed, not if just more time was unlocked
|
||||||
|
if (processedSrc !== null && src !== processedSrc) {
|
||||||
|
setHasPlayedOnce(false); // Reset for new song
|
||||||
onHasPlayedChange?.(false); // Notify parent
|
onHasPlayedChange?.(false); // Notify parent
|
||||||
|
}
|
||||||
|
|
||||||
// Update processed state
|
// Update processed state
|
||||||
setProcessedSrc(src);
|
setProcessedSrc(src);
|
||||||
@@ -72,7 +75,11 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
if (autoPlay) {
|
if (autoPlay) {
|
||||||
// Delay play slightly to ensure currentTime sticks
|
// Delay play slightly to ensure currentTime sticks
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const playPromise = audioRef.current?.play();
|
if (audioRef.current) {
|
||||||
|
// Use startPos (which may be startTime + processedUnlockedSeconds if more time was unlocked)
|
||||||
|
// instead of always using startTime
|
||||||
|
audioRef.current.currentTime = startPos;
|
||||||
|
const playPromise = audioRef.current.play();
|
||||||
if (playPromise !== undefined) {
|
if (playPromise !== undefined) {
|
||||||
playPromise
|
playPromise
|
||||||
.then(() => {
|
.then(() => {
|
||||||
@@ -86,8 +93,13 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
setIsPlaying(false);
|
setIsPlaying(false);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, 150);
|
}, 150);
|
||||||
}
|
}
|
||||||
|
} else if (startTime !== undefined && audioRef.current.currentTime < startTime) {
|
||||||
|
// If startTime is set and currentTime is before it, reset to startTime
|
||||||
|
// This handles the case where the audio element was reset or reloaded
|
||||||
|
audioRef.current.currentTime = startTime;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
|
}, [src, unlockedSeconds, startTime, autoPlay, processedSrc, processedUnlockedSeconds]);
|
||||||
@@ -97,6 +109,16 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
play: () => {
|
play: () => {
|
||||||
if (!audioRef.current) return;
|
if (!audioRef.current) return;
|
||||||
|
|
||||||
|
// Check if we need to reset to startTime
|
||||||
|
const current = audioRef.current.currentTime;
|
||||||
|
const elapsed = current - startTime;
|
||||||
|
|
||||||
|
// Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
|
||||||
|
if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
|
||||||
|
// Reset to start of segment
|
||||||
|
audioRef.current.currentTime = startTime;
|
||||||
|
}
|
||||||
|
|
||||||
const playPromise = audioRef.current.play();
|
const playPromise = audioRef.current.play();
|
||||||
if (playPromise !== undefined) {
|
if (playPromise !== undefined) {
|
||||||
playPromise
|
playPromise
|
||||||
@@ -121,8 +143,20 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
|
|
||||||
if (isPlaying) {
|
if (isPlaying) {
|
||||||
audioRef.current.pause();
|
audioRef.current.pause();
|
||||||
|
setIsPlaying(false);
|
||||||
} else {
|
} else {
|
||||||
|
// Check if we need to reset to startTime
|
||||||
|
const current = audioRef.current.currentTime;
|
||||||
|
const elapsed = current - startTime;
|
||||||
|
|
||||||
|
// Reset if: never played before, current position is before startTime, or we've exceeded the unlocked segment
|
||||||
|
if (!hasPlayedOnce || current < startTime || elapsed >= unlockedSeconds) {
|
||||||
|
// Reset to start of segment
|
||||||
|
audioRef.current.currentTime = startTime;
|
||||||
|
}
|
||||||
|
|
||||||
audioRef.current.play();
|
audioRef.current.play();
|
||||||
|
setIsPlaying(true);
|
||||||
onPlay?.();
|
onPlay?.();
|
||||||
|
|
||||||
if (hasPlayedOnce) {
|
if (hasPlayedOnce) {
|
||||||
@@ -132,7 +166,6 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
|
|||||||
onHasPlayedChange?.(true); // Notify parent
|
onHasPlayedChange?.(true); // Notify parent
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setIsPlaying(!isPlaying);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleTimeUpdate = () => {
|
const handleTimeUpdate = () => {
|
||||||
|
|||||||
88
docs/TESTING.md
Normal file
88
docs/TESTING.md
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
# Integration Testing
|
||||||
|
|
||||||
|
Hördle uses [Playwright](https://playwright.dev/) for end-to-end (E2E) integration testing. These tests ensure that critical flows like gameplay, authentication, and admin management function correctly across different browsers.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
Ensure you have the Playwright browsers installed:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx playwright install
|
||||||
|
```
|
||||||
|
|
||||||
|
## Running Tests
|
||||||
|
|
||||||
|
### Headless Mode (CI/CLI)
|
||||||
|
|
||||||
|
To run all tests in headless mode (Chromium, Firefox, WebKit):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run test:e2e
|
||||||
|
```
|
||||||
|
|
||||||
|
### UI Mode (Interactive)
|
||||||
|
|
||||||
|
To run tests with a UI to inspect traces and watch execution:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run test:e2e:ui
|
||||||
|
```
|
||||||
|
|
||||||
|
### Specific Test File
|
||||||
|
|
||||||
|
To run a specific test file:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx playwright test tests/gameplay.spec.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
### Specific Project (Browser)
|
||||||
|
|
||||||
|
To run tests only on a specific browser (e.g., Chromium):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx playwright test --project=chromium
|
||||||
|
```
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
The Playwright configuration is located in `playwright.config.ts`. It sets up the base URL (default: `http://localhost:3000`) and the web server command to start the app if it's not running.
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
* **`ADMIN_PASSWORD`**: The tests assume the admin password is `'admin123'`.
|
||||||
|
* In `app/api/admin/login/route.ts`, the login logic has been enhanced to check if `ADMIN_PASSWORD` is a bcrypt hash (starts with `$2b$`) or plain text.
|
||||||
|
* For local testing, you can set `ADMIN_PASSWORD="admin123"` in your `.env` or `.env.local` (though the default fallback in the code also handles this).
|
||||||
|
* **Curator Credentials**: The mock Curator login page (`app/[locale]/curator/page.tsx`) mocks validation for testing.
|
||||||
|
* Username: `elpatron`
|
||||||
|
* Password: `example_password`
|
||||||
|
|
||||||
|
## Test Structure
|
||||||
|
|
||||||
|
Tests are located in the `tests/` directory:
|
||||||
|
|
||||||
|
* **`auth.spec.ts`**: Verifies public access and admin login flows.
|
||||||
|
* **`admin.spec.ts`**: Checks the Admin Dashboard, including access protection and visibility of sections (Dashboard, Daily Puzzles, etc.).
|
||||||
|
* **`curator.spec.ts`**: Verifies the Curator login form and authentication flows (valid/invalid credentials).
|
||||||
|
* **`gameplay.spec.ts`**: Tests the core game loop: loading the game, playing audio, interaction with the prompt, and submitting a guess.
|
||||||
|
|
||||||
|
## Troubleshooting & Known Issues
|
||||||
|
|
||||||
|
### Next.js Development Overlay (`nextjs-portal`)
|
||||||
|
|
||||||
|
In development mode (`npm run dev`), Next.js injects an overlay (`<nextjs-portal>`) for hot reloading feedback. This overlay can sometimes intercept clicks intended for UI elements, causing tests to fail with "element is not clickable" or timeout errors.
|
||||||
|
|
||||||
|
**Solution:**
|
||||||
|
We inject a CSS style in the `beforeEach` hook of our tests to hide this overlay:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.addStyleTag({ content: 'nextjs-portal, #nextjs-dev-overlay, [data-nextjs-dev-overlay] { display: none !important; }' });
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### WebKit (Safari) Stability
|
||||||
|
|
||||||
|
WebKit can be slower or more sensitive to timing in some environments. If tests fail on WebKit but pass on other browsers:
|
||||||
|
1. Try increasing the timeout in `playwright.config.ts`.
|
||||||
|
2. Use `await page.waitForTimeout(500)` or specific assertions like `await expect(page).toHaveURL(...)` to allow for transition times, as implemented in `tests/admin.spec.ts`.
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.33",
|
"version": "0.1.6.36",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
@@ -63,8 +63,10 @@ fi
|
|||||||
./scripts/backup-restic.sh
|
./scripts/backup-restic.sh
|
||||||
|
|
||||||
# Nur neueste Version holen (shallow fetch), vollständiges Repo ist im Deployment nicht nötig
|
# Nur neueste Version holen (shallow fetch), vollständiges Repo ist im Deployment nicht nötig
|
||||||
echo "📥 Fetching latest commit (shallow clone) from git..."
|
# Wichtig: Tags müssen vollständig geholt werden für Version-Anzeige
|
||||||
git fetch --prune --tags --depth=1 origin master
|
echo "📥 Fetching latest commit and all tags from git..."
|
||||||
|
git fetch --prune --tags origin master
|
||||||
|
git fetch --tags origin
|
||||||
git reset --hard origin/master
|
git reset --hard origin/master
|
||||||
|
|
||||||
# Prüfe und erstelle/repariere Netzwerk falls nötig
|
# Prüfe und erstelle/repariere Netzwerk falls nötig
|
||||||
|
|||||||
Reference in New Issue
Block a user