diff --git a/playwright.config.js b/playwright.config.js new file mode 100644 index 0000000..166128d --- /dev/null +++ b/playwright.config.js @@ -0,0 +1,14 @@ +// @ts-check +const { defineConfig } = require('@playwright/test'); + +module.exports = defineConfig({ + testDir: 'tests/e2e', + testMatch: '*.spec.js', + workers: 1, // tests share one FreshRSS user + timeout: 30000, + use: { + baseURL: 'http://localhost:8080', + viewport: { width: 390, height: 844 }, + browserName: 'chromium', + }, +}); diff --git a/static/read-more.css b/static/read-more.css index 0c42493..1fe2976 100644 --- a/static/read-more.css +++ b/static/read-more.css @@ -2,6 +2,7 @@ * max-height only: the article must keep a non-zero height so that * FreshRSS still marks it as read when scrolled past. */ .flux .text.read-more-collapsed { + box-sizing: border-box; /* configured height = visible height, padding included */ max-height: var(--read-more-height, 250px); overflow: hidden; position: relative; diff --git a/tests/e2e/docker-compose.yml b/tests/e2e/docker-compose.yml new file mode 100644 index 0000000..3379224 --- /dev/null +++ b/tests/e2e/docker-compose.yml @@ -0,0 +1,33 @@ +# Test environment: FreshRSS pinned to the production version + a static feed server. +name: freshrss-read-more-e2e +services: + freshrss: + image: freshrss/freshrss:1.30.4 + ports: + - "8080:80" + volumes: + - ../..:/var/www/FreshRSS/extensions/freshrss-read-more:ro + environment: + TZ: Europe/Paris + INTERNAL_HOST_ALLOWLIST: "feeds:80" + FRESHRSS_INSTALL: |- + --default-user test + --auth-type none + --db-type sqlite + --base-url http://localhost:8080 + --language fr + FRESHRSS_USER: |- + --user test + --password testtest1 + --language fr + healthcheck: + test: ["CMD", "cli/health.php"] + interval: 3s + timeout: 10s + retries: 30 + depends_on: + - feeds + feeds: + image: nginx:alpine + volumes: + - ./fixtures:/usr/share/nginx/html:ro diff --git a/tests/e2e/fixtures/feed.xml b/tests/e2e/fixtures/feed.xml new file mode 100644 index 0000000..da6e907 --- /dev/null +++ b/tests/e2e/fixtures/feed.xml @@ -0,0 +1,64 @@ + + + + Newsletter de test + http://feeds/ + Flux de test Read More + + Article 1 + http://feeds/article-1 + http://feeds/article-1 + Fri, 06 Nov 2026 11:00:00 GMT + <p>Paragraphe 1 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 2 + http://feeds/article-2 + http://feeds/article-2 + Fri, 06 Nov 2026 10:00:00 GMT + <p>Paragraphe 1 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 3 + http://feeds/article-3 + http://feeds/article-3 + Fri, 06 Nov 2026 09:00:00 GMT + <p>Paragraphe 1 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 4 + http://feeds/article-4 + http://feeds/article-4 + Fri, 06 Nov 2026 08:00:00 GMT + <p>Paragraphe 1 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 5 + http://feeds/article-5 + http://feeds/article-5 + Fri, 06 Nov 2026 07:00:00 GMT + <p>Paragraphe 1 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 6 + http://feeds/article-6 + http://feeds/article-6 + Fri, 06 Nov 2026 06:00:00 GMT + <p>Paragraphe 1 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 7 + http://feeds/article-7 + http://feeds/article-7 + Fri, 06 Nov 2026 05:00:00 GMT + <p>Paragraphe 1 de l’article 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + Article 8 + http://feeds/article-8 + http://feeds/article-8 + Fri, 06 Nov 2026 04:00:00 GMT + <p>Paragraphe 1 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 2 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 3 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 4 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 5 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 6 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 7 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 8 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 9 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 10 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 11 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 12 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 13 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 14 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p><p>Paragraphe 15 de l’article 8. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> + + + diff --git a/tests/e2e/fixtures/subscriptions.opml b/tests/e2e/fixtures/subscriptions.opml new file mode 100644 index 0000000..fbc03e3 --- /dev/null +++ b/tests/e2e/fixtures/subscriptions.opml @@ -0,0 +1,7 @@ + + + Read More e2e + + + + diff --git a/tests/e2e/read-more.spec.js b/tests/e2e/read-more.spec.js new file mode 100644 index 0000000..6e8bab9 --- /dev/null +++ b/tests/e2e/read-more.spec.js @@ -0,0 +1,115 @@ +// @ts-check +// Requires `bash tests/e2e/setup.sh` (FreshRSS 1.30.4 on http://localhost:8080). +const { test, expect } = require('@playwright/test'); +const { execFileSync } = require('node:child_process'); +const path = require('node:path'); + +const COMPOSE = path.join(__dirname, 'docker-compose.yml'); +const READER = '/i/?a=reader&state=2'; // unread only + +function reset(height = 250) { + execFileSync('docker', ['compose', '-f', COMPOSE, 'exec', '-T', '--user', 'www-data', 'freshrss', + 'php', '/var/www/FreshRSS/extensions/freshrss-read-more/tests/e2e/reset.php', String(height)]); +} + +// Entries are sorted newest first: "Article 1" is the first .flux. +const fluxByTitle = (page, n) => page.locator('.flux', { hasText: `Article ${n}.` }).first(); + +async function scrollPast(page, flux) { + await flux.evaluate((el) => { + const r = el.getBoundingClientRect(); + window.scrollBy(0, r.bottom + 20); + }); + await page.waitForTimeout(1000); // FreshRSS throttles onScroll at 500 ms + await page.evaluate(() => window.dispatchEvent(new Event('scroll'))); +} + +test.beforeEach(() => reset()); + +test('long entries collapsed', async ({ page }) => { + await page.goto(READER); + for (const n of [1, 2, 3, 4, 5, 6, 8]) { + const flux = fluxByTitle(page, n); + await expect(flux).toHaveAttribute('data-read-more', 'collapsed'); + await expect(flux.locator('.read-more-btn')).toHaveCount(1); + await expect(flux.locator('.read-more-btn')).toHaveText('Lire plus'); + const text = flux.locator('.text'); + expect(await text.evaluate((el) => getComputedStyle(el).maxHeight)).toBe('250px'); + expect(await text.evaluate((el) => el.getBoundingClientRect().height)).toBeLessThanOrEqual(250); + } +}); + +test('short entry not collapsed', async ({ page }) => { + await page.goto(READER); + const flux = fluxByTitle(page, 7); + await expect(flux).toHaveAttribute('data-read-more', 'short'); + await expect(flux.locator('.read-more-btn')).toHaveCount(0); +}); + +test('collapsed entry marked read after scrolling past', async ({ page }) => { + await page.goto(READER); + const flux = fluxByTitle(page, 1); + await expect(flux).toHaveAttribute('data-read-more', 'collapsed'); + await expect(flux).toHaveClass(/not_read/); + await scrollPast(page, flux); + await expect(flux).not.toHaveClass(/not_read/, { timeout: 5000 }); + await page.waitForTimeout(500); // let the mark-read request land + await page.goto(READER); + await expect(page.locator('.flux', { hasText: 'Article 2.' }).first()).toBeVisible(); + await expect(page.locator('.flux', { hasText: 'Article 1.' })).toHaveCount(0); +}); + +test('read more expands without changing read state or scroll', async ({ page }) => { + await page.goto(READER); + const flux = fluxByTitle(page, 1); + const button = flux.locator('.read-more-btn'); + await button.scrollIntoViewIfNeeded(); + const before = await page.evaluate(() => window.scrollY); + await button.click(); + await expect(flux).toHaveAttribute('data-read-more', 'expanded'); + expect(await flux.locator('.text').evaluate((el) => getComputedStyle(el).maxHeight)).toBe('none'); + await expect(button).toHaveCount(0); + await expect(flux).toHaveClass(/not_read/); + const after = await page.evaluate(() => window.scrollY); + expect(Math.abs(after - before)).toBeLessThan(5); +}); + +test('expanded entry marked read after scrolling past', async ({ page }) => { + await page.goto(READER); + const flux = fluxByTitle(page, 2); + await flux.locator('.read-more-btn').click(); + await expect(flux).toHaveAttribute('data-read-more', 'expanded'); + const height = await flux.evaluate((el) => el.getBoundingClientRect().height); + expect(height).toBeGreaterThan(375); + await scrollPast(page, flux); + await expect(flux).not.toHaveClass(/not_read/, { timeout: 5000 }); +}); + +test('normal view untouched', async ({ page }) => { + await page.goto('/i/?a=normal&state=2'); + await expect(page.locator('.flux').first()).toBeAttached(); + await expect(page.locator('.read-more-btn')).toHaveCount(0); + await expect(page.locator('.flux[data-read-more]')).toHaveCount(0); +}); + +test('config height is clamped', async ({ page }) => { + const configUrl = '/i/?c=extension&a=configure&e=' + encodeURIComponent('Read More'); + const submit = async (value) => { + await page.goto(configUrl); + const csrf = await page.locator('input[name="_csrf"]').first().inputValue(); + const res = await page.request.post(configUrl, { + form: { _csrf: csrf, collapsed_height: String(value) }, + }); + expect(res.ok()).toBeTruthy(); + // FreshRSS answers 304 within the same second: bust the cache. + await page.goto(configUrl + '&t=' + Date.now()); + return page.locator('#collapsed_height').inputValue(); + }; + expect(await submit(5)).toBe('100'); + expect(await submit(99999)).toBe('2000'); + expect(await submit(400)).toBe('400'); + await page.goto(READER); + const text = fluxByTitle(page, 1).locator('.text'); + expect(await text.evaluate((el) => getComputedStyle(el).maxHeight)).toBe('400px'); + expect(await text.evaluate((el) => el.getBoundingClientRect().height)).toBeLessThanOrEqual(400); +}); diff --git a/tests/e2e/reset.php b/tests/e2e/reset.php new file mode 100644 index 0000000..48d0e7e --- /dev/null +++ b/tests/e2e/reset.php @@ -0,0 +1,20 @@ +exec('UPDATE entry SET is_read = 0'); +echo "reset ok (height=$height)\n"; diff --git a/tests/e2e/setup.sh b/tests/e2e/setup.sh new file mode 100755 index 0000000..e8875c4 --- /dev/null +++ b/tests/e2e/setup.sh @@ -0,0 +1,18 @@ +#!/usr/bin/env bash +# Start (or with --down, stop and wipe) the e2e FreshRSS 1.30.4 environment. +set -euo pipefail +cd "$(dirname "$0")" +compose=(docker compose -f docker-compose.yml) + +if [[ "${1:-}" == "--down" ]]; then + "${compose[@]}" down -v + exit 0 +fi + +"${compose[@]}" up -d --wait +run() { "${compose[@]}" exec -T --user www-data freshrss "$@"; } +ext=/var/www/FreshRSS/extensions/freshrss-read-more +run cli/import-for-user.php --user test --filename "$ext/tests/e2e/fixtures/subscriptions.opml" || true +run cli/actualize-user.php --user test +run php "$ext/tests/e2e/reset.php" 250 +echo "FreshRSS e2e ready on http://localhost:8080"