From 8372ea296a8844cb4d0ef4f2504f70b0c8c3b8f2 Mon Sep 17 00:00:00 2001 From: dario-piotrowicz Date: Sat, 4 Feb 2023 16:19:37 +0000 Subject: [PATCH] replace ui tests with e2e tests implemented with playwright --- .github/workflows/PRs.yml | 42 +- .gitignore | 5 +- .vscode/extensions.json | 3 + frontend/package.json | 2 +- frontend/src/components/Status/index.tsx | 4 +- frontend/src/dummyData.tsx | 649 ------------------ .../routes/(frontend)/[accountId]/index.tsx | 2 +- frontend/test/account.spec.ts | 30 - frontend/test/posts-page.spec.ts | 38 - package.json | 3 +- playwright.config.ts | 107 +++ ui-e2e-tests/account-page.spec.ts | 14 + ui-e2e-tests/explore-page.spec.ts | 16 + ui-e2e-tests/invidivual-toot.spec.ts | 20 + yarn.lock | 13 + 15 files changed, 206 insertions(+), 742 deletions(-) create mode 100644 .vscode/extensions.json delete mode 100644 frontend/test/account.spec.ts delete mode 100644 frontend/test/posts-page.spec.ts create mode 100644 playwright.config.ts create mode 100644 ui-e2e-tests/account-page.spec.ts create mode 100644 ui-e2e-tests/explore-page.spec.ts create mode 100644 ui-e2e-tests/invidivual-toot.spec.ts diff --git a/.github/workflows/PRs.yml b/.github/workflows/PRs.yml index 494c958..2ebf305 100644 --- a/.github/workflows/PRs.yml +++ b/.github/workflows/PRs.yml @@ -28,25 +28,6 @@ jobs: - name: Run API tests run: yarn test - test-ui: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - name: Setup node - uses: actions/setup-node@v3 - with: - node-version: 16.13.x - - - name: Install - run: yarn && yarn --cwd frontend - - - name: Initialize local database - run: yarn database:create-mock - - - name: Run UI tests - run: yarn test:ui - lint: runs-on: ubuntu-latest steps: @@ -72,3 +53,26 @@ jobs: - name: Check frontend linting run: yarn lint:frontend + test-ui: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Setup node + uses: actions/setup-node@v3 + with: + node-version: 16.13.x + - name: Install dependencies + run: yarn + - name: Run App in the background + run: yarn ci-dev-test-ui & + - name: Install Playwright Browsers + run: yarn playwright install --with-deps + - name: Run Playwright tests + run: yarn playwright test + - uses: actions/upload-artifact@v3 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.gitignore b/.gitignore index 3a23a2b..4f9aa34 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,7 @@ node_modules/ yarn-error.log package-lock.json .wrangler/state/d1/*.sqlite3 -.DS_Store \ No newline at end of file +.DS_Store +/test-results/ +/playwright-report/ +/playwright/.cache/ diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..15c8608 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["ms-playwright.playwright"] +} diff --git a/frontend/package.json b/frontend/package.json index fbb41c9..8e188e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,7 +7,7 @@ }, "private": true, "scripts": { - "lint": "eslint src mock-db test adaptors", + "lint": "eslint src mock-db adaptors", "build": "vite build && vite build -c adaptors/cloudflare-pages/vite.config.ts", "dev": "vite --mode ssr", "watch": "concurrently \"vite build -w\" \"vite build -w -c adaptors/cloudflare-pages/vite.config.ts\"" diff --git a/frontend/src/components/Status/index.tsx b/frontend/src/components/Status/index.tsx index 8ea9775..d567e1d 100644 --- a/frontend/src/components/Status/index.tsx +++ b/frontend/src/components/Status/index.tsx @@ -23,7 +23,7 @@ export default component$((props: Props) => { const handleContentClick = $(() => nav(statusUrl)) return ( -
+
@@ -61,7 +61,7 @@ export default component$((props: Props) => {
)} -
+
) }) diff --git a/frontend/src/dummyData.tsx b/frontend/src/dummyData.tsx index 6df456d..292ef29 100644 --- a/frontend/src/dummyData.tsx +++ b/frontend/src/dummyData.tsx @@ -80,94 +80,6 @@ const mastodonRawStatuses: MastodonStatus[] = [ card: null, poll: null, }, - { - id: '109630506194830406', - created_at: '2023-01-04T10:39:20.000Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://toot.cafe/users/baldur/statuses/109630505660962387', - url: 'https://toot.cafe/@baldur/109630505660962387', - replies_count: 155, - reblogs_count: 2480, - favourites_count: 260, - edited_at: null, - content: - "\u003cp\u003eTurns out that Adobe is collecting all of its customers' pictures into a machine learning training set.\u003c/p\u003e\u003cp\u003eThis is opt-out, not opt-in so if you use Lightroom, for example, it defaults to adding all of your photos to the set.\u003c/p\u003e\u003cp\u003eIf these are unpublished pictures, work-in-progress, etc. they'll still be analysed as soon as they're synced.\u003c/p\u003e\u003cp\u003eI've been using Lightroom to sync photos from my Windows desktop to my iPad. Now I need to reconsider that.\u003c/p\u003e", - reblog: null, - account: { - id: '64642', - username: 'baldur', - acct: 'baldur@toot.cafe', - display_name: 'Baldur Bjarnason', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2017-04-08T00:00:00.000Z', - note: '\u003cp\u003eWeb developer and consultant based in Hveragerði, Iceland. Lapsed Interactive Media Academic. Webby Tech Stuff and webby book stuff.\u003c/p\u003e', - url: 'https://toot.cafe/@baldur', - avatar: 'https://files.mastodon.social/accounts/avatars/000/064/642/original/a4c67dbd738b6f5b.jpeg', - avatar_static: 'https://files.mastodon.social/accounts/avatars/000/064/642/original/a4c67dbd738b6f5b.jpeg', - header: 'https://files.mastodon.social/cache/accounts/headers/000/064/642/original/e8a8cb96679d5d29.jpg', - header_static: 'https://files.mastodon.social/cache/accounts/headers/000/064/642/original/e8a8cb96679d5d29.jpg', - followers_count: 1964, - following_count: 455, - statuses_count: 12973, - last_status_at: '2023-01-04', - emojis: [], - fields: [ - { - name: 'Blog', - value: - '\u003ca href="https://www.baldurbjarnason.com/" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class=""\u003ebaldurbjarnason.com/\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: '2023-01-04T20:34:39.109+00:00', - }, - { - name: 'Links \u0026 Notes', - value: - '\u003ca href="http://notes.baldurbjarnason.com/" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttp://\u003c/span\u003e\u003cspan class=""\u003enotes.baldurbjarnason.com/\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { name: 'Pronouns', value: 'he/him', verified_at: null }, - { - name: 'Book', - value: - '\u003ca href="https://softwarecrisis.baldurbjarnason.com/" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003esoftwarecrisis.baldurbjarnason\u003c/span\u003e\u003cspan class="invisible"\u003e.com/\u003c/span\u003e\u003c/a\u003e', - verified_at: '2023-01-04T20:34:39.185+00:00', - }, - ], - }, - media_attachments: [ - { - id: '109630506084581245', - type: 'image', - url: 'https://files.mastodon.social/cache/media_attachments/files/109/630/506/084/581/245/original/968cd8d217cc7b76.png', - preview_url: - 'https://files.mastodon.social/cache/media_attachments/files/109/630/506/084/581/245/small/968cd8d217cc7b76.png', - remote_url: - 'https://assets.toot.cafe/media_attachments/files/109/630/491/751/043/615/original/10037d58ac287455.png', - preview_remote_url: null, - text_url: null, - meta: { - focus: { x: -0.95, y: 0.1 }, - original: { width: 2265, height: 454, size: '2265x454', aspect: 4.988986784140969 }, - small: { width: 1072, height: 215, size: '1072x215', aspect: 4.986046511627907 }, - }, - description: - 'This is a picture of the opt-out form. "Content Analysis: Adobe may analyze your content using techniques such as machine learning (e.g. for Pattern recognition) to develop and improve our products and services. If you prefer that Adobe not analyze your files to develop and improve our products and services, you can opt out of content analysis at any time. This setting does not apply in certain limited circumstances."', - blurhash: 'U9S6PlIURjod00R*axRjRioLj@WB~qaeWCof', - }, - ], - mentions: [], - tags: [], - emojis: [], - card: null, - poll: null, - }, { id: '109630407170172986', created_at: '2023-01-04T10:14:17.855Z', @@ -243,164 +155,6 @@ const mastodonRawStatuses: MastodonStatus[] = [ card: null, poll: null, }, - { - id: '109631901093755451', - created_at: '2023-01-04T16:34:13.360Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/QasimRashid/statuses/109631901093755451', - url: 'https://mastodon.social/@QasimRashid/109631901093755451', - replies_count: 36, - reblogs_count: 236, - favourites_count: 385, - edited_at: null, - content: - '\u003cp\u003eReagan was extremely destructive to declare “Government is not the solution to our problem, Government is the problem.”\u003c/p\u003e\u003cp\u003eHas the \u0026quot;Party of Lincoln\u0026quot; forgotten that Lincoln proudly said, \u0026quot;Our Government is of, by, \u0026amp; for the people.\u0026quot;\u003c/p\u003e\u003cp\u003eTo declare Government as the problem is to declare the American people as the problem. And when you declare people as the problem, you become exclusive, cruel, \u0026amp; unjust. That\u0026#39;s not pro-America—it\u0026#39;s literally anti-America. That\u0026#39;s what the GOP has become. Vote Them Out.\u003c/p\u003e', - reblog: null, - application: { name: 'Web', website: null }, - account: { - id: '109257982635114466', - username: 'QasimRashid', - acct: 'QasimRashid', - display_name: 'Qasim Rashid, Esq.', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2022-10-30T00:00:00.000Z', - note: '\u003cp\u003eHuman Rights Lawyer • Author • Dad Jokes • Host of The Qasim Rashid Show on Sirius XM Channel 126 Sundays @ 10am EST\u003c/p\u003e', - url: 'https://mastodon.social/@QasimRashid', - avatar: 'https://files.mastodon.social/accounts/avatars/109/257/982/635/114/466/original/515326afc9591b4d.jpeg', - avatar_static: - 'https://files.mastodon.social/accounts/avatars/109/257/982/635/114/466/original/515326afc9591b4d.jpeg', - header: 'https://files.mastodon.social/accounts/headers/109/257/982/635/114/466/original/68927aa0ee32a4aa.jpeg', - header_static: - 'https://files.mastodon.social/accounts/headers/109/257/982/635/114/466/original/68927aa0ee32a4aa.jpeg', - followers_count: 41780, - following_count: 15, - statuses_count: 441, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [ - { - name: 'Join My Email List Serve', - value: - '\u003ca href="https://landing.mailerlite.com/webforms/landing/q9i0r8" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003elanding.mailerlite.com/webform\u003c/span\u003e\u003cspan class="invisible"\u003es/landing/q9i0r8\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Download TurnSignl', - value: - '\u003ca href="https://www.turnsignl.com/gift" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class=""\u003eturnsignl.com/gift\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'See my work on LinkTree', - value: - '\u003ca href="https://linktr.ee/qasimrashid" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003elinktr.ee/qasimrashid\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - ], - }, - media_attachments: [], - mentions: [], - tags: [], - emojis: [], - card: null, - poll: null, - }, - { - id: '109631508174370483', - created_at: '2023-01-04T14:54:17.844Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/noybeu/statuses/109631508174370483', - url: 'https://mastodon.social/@noybeu/109631508174370483', - replies_count: 14, - reblogs_count: 433, - favourites_count: 359, - edited_at: null, - content: - '\u003cp\u003e🚨BREAKING: Following noyb litigation, \u003cspan class="h-card"\u003e\u003ca href="https://mastodon.social/@meta" class="u-url mention"\u003e@\u003cspan\u003emeta\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e (Facebook and Instagram) has been prohibited from using personal data for advertisement. \u003cbr /\u003eThe \u003ca href="https://mastodon.social/tags/GDPR" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003eGDPR\u003c/span\u003e\u003c/a\u003e decision signals a major blow to Meta\u0026#39;s business model in Europe, as Meta faces a € 390 Mio fine.\u003cbr /\u003e➡\u003ca href="https://noyb.eu/en/breaking-meta-prohibited-use-personal-data-advertisment" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003enoyb.eu/en/breaking-meta-prohi\u003c/span\u003e\u003cspan class="invisible"\u003ebited-use-personal-data-advertisment\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - reblog: null, - application: { name: 'Moa', website: 'https://moa.party/' }, - account: { - id: '106493575070050794', - username: 'noybeu', - acct: 'noybeu', - display_name: 'noyb.eu', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2021-06-29T00:00:00.000Z', - note: '\u003cp\u003enoyb is a non-profit association committed to the legal enforcement of European data protection laws. So far, noyb has filed more than 900 cases against numerous intentional infringements - including companies such as Google, Apple, Facebook and Amazon. More than 5,200 supporting members fund our work. \u003cbr /\u003e\u003ca href="https://mastodon.social/tags/MyPrivacyIsNoneOfYourBusiness" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003eMyPrivacyIsNoneOfYourBusiness\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - url: 'https://mastodon.social/@noybeu', - avatar: 'https://files.mastodon.social/accounts/avatars/106/493/575/070/050/794/original/1011f2bd8a6832c9.png', - avatar_static: - 'https://files.mastodon.social/accounts/avatars/106/493/575/070/050/794/original/1011f2bd8a6832c9.png', - header: 'https://files.mastodon.social/accounts/headers/106/493/575/070/050/794/original/71aad47f84153592.png', - header_static: - 'https://files.mastodon.social/accounts/headers/106/493/575/070/050/794/original/71aad47f84153592.png', - followers_count: 4637, - following_count: 28, - statuses_count: 402, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [ - { - name: 'Find out more!', - value: - '\u003ca href="https://noyb.eu/en" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003enoyb.eu/en\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Contact us!', - value: - '\u003ca href="https://noyb.eu/en/contact" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003enoyb.eu/en/contact\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Support us!', - value: - '\u003ca href="https://noyb.eu/en/support-us" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003enoyb.eu/en/support-us\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - ], - }, - media_attachments: [], - mentions: [{ id: '149281', username: 'meta', url: 'https://mastodon.social/@meta', acct: 'meta' }], - tags: [{ name: 'gdpr', url: 'https://mastodon.social/tags/gdpr' }], - emojis: [], - card: { - url: 'https://noyb.eu/en/breaking-meta-prohibited-use-personal-data-advertisment', - title: 'BREAKING: Meta prohibited from use of personal data for advertisment', - description: - 'After almost five years, the Irish DPC decided on a noyb complaint and required Facebook, Instagram and WhatsApp to stop using the personal data of users for advertisement in the EU.', - type: 'link', - author_name: '', - author_url: '', - provider_name: 'noyb.eu', - provider_url: '', - html: '', - width: 400, - height: 210, - image: 'https://files.mastodon.social/cache/preview_cards/images/051/365/739/original/938e17fbc95e33da.png', - embed_url: '', - blurhash: 'UhC+3io}D+Rk%%obI_WYE1aKt7oeJ=e;x9oI', - }, - poll: null, - }, { id: '109632119277219029', created_at: '2023-01-04T17:29:42.531Z', @@ -833,239 +587,6 @@ const mastodonRawStatuses: MastodonStatus[] = [ card: null, poll: null, }, - { - id: '109632713176169854', - created_at: '2023-01-04T20:00:44.704Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/drewharwell/statuses/109632713176169854', - url: 'https://mastodon.social/@drewharwell/109632713176169854', - replies_count: 5, - reblogs_count: 86, - favourites_count: 81, - edited_at: null, - content: - '\u003cp\u003eAnother Black man falsely accused of a crime and arrested because of a bad facial recognition search. Fourth or so we know about; probably many more we don\u0026#39;t. Arrested while driving to a family Thanksgiving and kept in jail for 7 days, even though he\u0026#39;d never been in the same state as the crime scene\u003c/p\u003e\u003cp\u003e\u003ca href="https://www.nola.com/news/crime_police/jpso-used-facial-recognition-to-arrest-a-man-it-was-wrong/article_0818361a-8886-11ed-8119-93b98ecccc8d.html" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class="ellipsis"\u003enola.com/news/crime_police/jps\u003c/span\u003e\u003cspan class="invisible"\u003eo-used-facial-recognition-to-arrest-a-man-it-was-wrong/article_0818361a-8886-11ed-8119-93b98ecccc8d.html\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - reblog: null, - application: { name: 'Web', website: null }, - account: { - id: '108199052370473764', - username: 'drewharwell', - acct: 'drewharwell', - display_name: 'Drew Harwell', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2022-04-26T00:00:00.000Z', - note: '\u003cp\u003eWashington Post tech reporter\u003c/p\u003e', - url: 'https://mastodon.social/@drewharwell', - avatar: 'https://files.mastodon.social/accounts/avatars/108/199/052/370/473/764/original/9cdc007e80fa36b6.jpg', - avatar_static: - 'https://files.mastodon.social/accounts/avatars/108/199/052/370/473/764/original/9cdc007e80fa36b6.jpg', - header: 'https://files.mastodon.social/accounts/headers/108/199/052/370/473/764/original/58ea725bc8892149.jpg', - header_static: - 'https://files.mastodon.social/accounts/headers/108/199/052/370/473/764/original/58ea725bc8892149.jpg', - followers_count: 56520, - following_count: 540, - statuses_count: 266, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [ - { - name: 'post', - value: - '\u003ca href="https://www.washingtonpost.com/people/drew-harwell/" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class="ellipsis"\u003ewashingtonpost.com/people/drew\u003c/span\u003e\u003cspan class="invisible"\u003e-harwell/\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'stories', - value: - '\u003ca href="https://drewharwell.com/" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003edrewharwell.com/\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: '2022-12-17T03:55:27.729+00:00', - }, - { name: 'email', value: 'drew.harwell@washpost.com', verified_at: null }, - ], - }, - media_attachments: [], - mentions: [], - tags: [], - emojis: [], - card: { - url: 'https://www.nola.com/news/crime_police/jpso-used-facial-recognition-to-arrest-a-man-it-was-wrong/article_0818361a-8886-11ed-8119-93b98ecccc8d.html', - title: 'JPSO used facial recognition technology to arrest a man. The tech was wrong.', - description: - 'Technology has given police vast reach to compare the faces of criminal suspects against a trove of mug shots, driver’s licenses, and even selfies plucked from social media.', - type: 'link', - author_name: '', - author_url: '', - provider_name: 'NOLA.com', - provider_url: '', - html: '', - width: 400, - height: 210, - image: 'https://files.mastodon.social/cache/preview_cards/images/051/232/307/original/91126fa3d3ce205c.jpg', - embed_url: '', - blurhash: 'UCEyPf~qxVElo~NGV@?ID%V@j?IoIo%MofRP', - }, - poll: null, - }, - { - id: '109632522004818269', - created_at: '2023-01-04T19:12:07.668Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/atomicpoet/statuses/109632522004818269', - url: 'https://mastodon.social/@atomicpoet/109632522004818269', - replies_count: 3, - reblogs_count: 66, - favourites_count: 112, - edited_at: null, - content: - '\u003cp\u003e9,000,0000 Mastodon users!\u003c/p\u003e\u003cp\u003e🎉🎊👯‍♀️\u003c/p\u003e\u003cp\u003eThat\u0026#39;s 1,000,000 more than last month!\u003c/p\u003e', - reblog: null, - application: { name: 'Web', website: null }, - account: { - id: '449871', - username: 'atomicpoet', - acct: 'atomicpoet', - display_name: 'Chris Trottier', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2018-08-17T00:00:00.000Z', - note: '\u003cp\u003eProduct, QA \u0026amp; marketing @ \u003ca href="https://mastodon.social/tags/GreatApe" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003eGreatApe\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e\u003cp\u003ePutting the sauce in awesome.\u003c/p\u003e', - url: 'https://mastodon.social/@atomicpoet', - avatar: 'https://files.mastodon.social/accounts/avatars/000/449/871/original/bca314eefafe5e50.jpg', - avatar_static: 'https://files.mastodon.social/accounts/avatars/000/449/871/original/bca314eefafe5e50.jpg', - header: 'https://static-cdn.mastodon.social/headers/original/missing.png', - header_static: 'https://static-cdn.mastodon.social/headers/original/missing.png', - followers_count: 12518, - following_count: 842, - statuses_count: 15783, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [ - { - name: 'Longform Articles', - value: - '\u003ca href="https://blog.atomicpoet.org/s/4CRkW9zvj#" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003eblog.atomicpoet.org/s/4CRkW9zv\u003c/span\u003e\u003cspan class="invisible"\u003ej#\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - ], - }, - media_attachments: [ - { - id: '109632519737974793', - type: 'image', - url: 'https://files.mastodon.social/media_attachments/files/109/632/519/737/974/793/original/1453ab9af640581e.png', - preview_url: - 'https://files.mastodon.social/media_attachments/files/109/632/519/737/974/793/small/1453ab9af640581e.png', - remote_url: null, - preview_remote_url: null, - text_url: null, - meta: { - original: { width: 1464, height: 660, size: '1464x660', aspect: 2.2181818181818183 }, - small: { width: 714, height: 322, size: '714x322', aspect: 2.217391304347826 }, - focus: { x: 0.0, y: 0.0 }, - }, - description: - '9,015,908 accounts \n+713 in the last hour\n+16,467 in the last day\n+114,542 in the last week\n\nCredit: @mastodonusercount@bitcoinhackers.org', - blurhash: 'UKB::DWAMxog3DjFwIf+mln$S$bI*xWBb^ja', - }, - ], - mentions: [], - tags: [], - emojis: [], - card: null, - poll: null, - }, - { - id: '109632471367890980', - created_at: '2023-01-04T18:59:15.006Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/pixelfed/statuses/109632471367890980', - url: 'https://mastodon.social/@pixelfed/109632471367890980', - replies_count: 20, - reblogs_count: 77, - favourites_count: 91, - edited_at: null, - content: - '\u003cp\u003e✨ Our Android app beta is now available!\u003c/p\u003e\u003cp\u003eDownload the APK here: \u003ca href="https://dl.apps.pixelcdn.net/pixelfed-android-beta/pixelfed-android-v1.0.0.1.apk" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003edl.apps.pixelcdn.net/pixelfed-\u003c/span\u003e\u003cspan class="invisible"\u003eandroid-beta/pixelfed-android-v1.0.0.1.apk\u003c/span\u003e\u003c/a\u003e \u003ca href="https://mastodon.social/tags/pixelfedApp" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003epixelfedApp\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - reblog: null, - application: { name: 'Web', website: null }, - account: { - id: '354718', - username: 'pixelfed', - acct: 'pixelfed', - display_name: 'pixelfed', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2018-05-11T00:00:00.000Z', - note: '\u003cp\u003eA fresh take on photo sharing, powered by ActivityPub federation.\u003c/p\u003e\u003cp\u003eSmile 😁\u003c/p\u003e\u003cp\u003eMatrix: \u003ca href="https://matrix.to/#/#pixelfed:matrix.org" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003ematrix.to/#/#pixelfed:matrix.o\u003c/span\u003e\u003cspan class="invisible"\u003erg\u003c/span\u003e\u003c/a\u003e\u003cbr /\u003eDiscord: \u003ca href="https://discord.gg/MHvDHaSzmc" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003ediscord.gg/MHvDHaSzmc\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - url: 'https://mastodon.social/@pixelfed', - avatar: 'https://files.mastodon.social/accounts/avatars/000/354/718/original/bc09f9ddbf551808.png', - avatar_static: 'https://files.mastodon.social/accounts/avatars/000/354/718/original/bc09f9ddbf551808.png', - header: 'https://files.mastodon.social/accounts/headers/000/354/718/original/d304f6bfd7bb8eba.png', - header_static: 'https://files.mastodon.social/accounts/headers/000/354/718/original/d304f6bfd7bb8eba.png', - followers_count: 41377, - following_count: 7, - statuses_count: 3164, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [ - { - name: 'Website', - value: - '\u003ca href="https://pixelfed.org" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003epixelfed.org\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'GitHub Repo', - value: - '\u003ca href="https://github.com/pixelfed/pixelfed" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003egithub.com/pixelfed/pixelfed\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Patreon', - value: - '\u003ca href="https://www.patreon.com/dansup" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class=""\u003epatreon.com/dansup\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Join Pixelfed', - value: - '\u003ca href="https://pixelfed.org/join" target="_blank" rel="nofollow noopener noreferrer me"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003epixelfed.org/join\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - ], - }, - media_attachments: [], - mentions: [], - tags: [{ name: 'pixelfedapp', url: 'https://mastodon.social/tags/pixelfedapp' }], - emojis: [], - card: null, - poll: null, - }, { id: '109630453680616888', created_at: '2023-01-04T10:26:07.590Z', @@ -1142,176 +663,6 @@ const mastodonRawStatuses: MastodonStatus[] = [ card: null, poll: null, }, - { - id: '109631957438516371', - created_at: '2023-01-04T16:48:23.000Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://kolektiva.social/users/chadloder/statuses/109631956800592985', - url: 'https://kolektiva.social/@chadloder/109631956800592985', - replies_count: 18, - reblogs_count: 183, - favourites_count: 58, - edited_at: null, - content: - '\u003cp\u003e"Loder was banned from Twitter by an order from owner Elon Musk, according to a former employee who saw a screenshot of the notes accompanying the decision." \u003ca href="https://www.washingtonpost.com/technology/2023/01/04/mudge-finds-a-new-job/?utm_source=rss\u0026amp;utm_medium=referral\u0026amp;utm_campaign=wp_business-technology" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttps://www.\u003c/span\u003e\u003cspan class="ellipsis"\u003ewashingtonpost.com/technology/\u003c/span\u003e\u003cspan class="invisible"\u003e2023/01/04/mudge-finds-a-new-job/?utm_source=rss\u0026amp;utm_medium=referral\u0026amp;utm_campaign=wp_business-technology\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - reblog: null, - account: { - id: '109322386275378066', - username: 'chadloder', - acct: 'chadloder@kolektiva.social', - display_name: 'Chad Loder', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2022-11-11T00:00:00.000Z', - note: '\u003cp\u003eCommunity activist, cybersecurity expert, citizen journalist based in Los Angeles 🌴☀️ they/them\u003c/p\u003e', - url: 'https://kolektiva.social/@chadloder', - avatar: - 'https://files.mastodon.social/cache/accounts/avatars/109/322/386/275/378/066/original/e1f0496aa53de5ae.jpeg', - avatar_static: - 'https://files.mastodon.social/cache/accounts/avatars/109/322/386/275/378/066/original/e1f0496aa53de5ae.jpeg', - header: - 'https://files.mastodon.social/cache/accounts/headers/109/322/386/275/378/066/original/22c3586102ea798a.jpeg', - header_static: - 'https://files.mastodon.social/cache/accounts/headers/109/322/386/275/378/066/original/22c3586102ea798a.jpeg', - followers_count: 25490, - following_count: 145, - statuses_count: 277, - last_status_at: '2023-01-04', - emojis: [], - fields: [ - { name: 'Pronouns', value: 'they/them', verified_at: null }, - { - name: 'Support', - value: - '\u003ca href="https://opencollective.com/sb-mutual-aid-care-club" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class="ellipsis"\u003eopencollective.com/sb-mutual-a\u003c/span\u003e\u003cspan class="invisible"\u003eid-care-club\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - { - name: 'Newsletter', - value: - '\u003ca href="https://newsletter.extremism.io/" rel="nofollow noopener noreferrer" target="_blank"\u003e\u003cspan class="invisible"\u003ehttps://\u003c/span\u003e\u003cspan class=""\u003enewsletter.extremism.io/\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e', - verified_at: null, - }, - ], - }, - media_attachments: [], - mentions: [], - tags: [], - emojis: [], - card: { - url: 'https://www.washingtonpost.com/technology/2023/01/04/mudge-finds-a-new-job/', - title: 'Twitter whistleblower Zatko lands new job at a security consulting firm', - description: - "The position will be Zatko's first full-time role since being fired by Twitter a year ago after clashing with then-CEO Parag Agrawal over security concerns.", - type: 'link', - author_name: 'Joseph Menn', - author_url: 'https://www.washingtonpost.com/people/joseph-menn/', - provider_name: 'The Washington Post', - provider_url: '', - html: '', - width: 400, - height: 267, - image: 'https://files.mastodon.social/cache/preview_cards/images/051/352/164/original/5113d7d073439c14.jpeg', - embed_url: '', - blurhash: 'UF8NLft70KM{RPf5ogj]I;WW$*ofIUWB%2of', - }, - poll: null, - }, - { - id: '109632497385063147', - created_at: '2023-01-04T19:05:52.012Z', - in_reply_to_id: null, - in_reply_to_account_id: null, - sensitive: false, - spoiler_text: '', - visibility: 'public', - language: 'en', - uri: 'https://mastodon.social/users/ZachWeinersmith/statuses/109632497385063147', - url: 'https://mastodon.social/@ZachWeinersmith/109632497385063147', - replies_count: 2, - reblogs_count: 81, - favourites_count: 90, - edited_at: null, - content: - '\u003cp\u003eArt\u003cbr /\u003e\u003ca href="http://smbc-comics.com/comic/art-5" target="_blank" rel="nofollow noopener noreferrer"\u003e\u003cspan class="invisible"\u003ehttp://\u003c/span\u003e\u003cspan class=""\u003esmbc-comics.com/comic/art-5\u003c/span\u003e\u003cspan class="invisible"\u003e\u003c/span\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href="https://mastodon.social/tags/smbc" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003esmbc\u003c/span\u003e\u003c/a\u003e \u003ca href="https://mastodon.social/tags/hiveworks" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003ehiveworks\u003c/span\u003e\u003c/a\u003e \u003ca href="https://mastodon.social/tags/comics" class="mention hashtag" rel="tag"\u003e#\u003cspan\u003ecomics\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e', - reblog: null, - application: { name: 'Web', website: null }, - account: { - id: '109521032613939160', - username: 'ZachWeinersmith', - acct: 'ZachWeinersmith', - display_name: 'Zach Weinersmith', - locked: false, - bot: false, - discoverable: true, - group: false, - created_at: '2022-12-16T00:00:00.000Z', - note: '\u003cp\u003eThe SMBC guy. Co-author of Soonish, illustrator of Open Borders, scop of Bea Wolf.\u003c/p\u003e', - url: 'https://mastodon.social/@ZachWeinersmith', - avatar: 'https://files.mastodon.social/accounts/avatars/109/521/032/613/939/160/original/6d6588cad807dfbc.png', - avatar_static: - 'https://files.mastodon.social/accounts/avatars/109/521/032/613/939/160/original/6d6588cad807dfbc.png', - header: 'https://files.mastodon.social/accounts/headers/109/521/032/613/939/160/original/8368e47ebdb7f00f.jpg', - header_static: - 'https://files.mastodon.social/accounts/headers/109/521/032/613/939/160/original/8368e47ebdb7f00f.jpg', - followers_count: 4112, - following_count: 514, - statuses_count: 142, - last_status_at: '2023-01-04', - noindex: false, - emojis: [], - fields: [], - }, - media_attachments: [ - { - id: '109632496463648132', - type: 'image', - url: 'https://files.mastodon.social/media_attachments/files/109/632/496/463/648/132/original/377a487b66d536a5.png', - preview_url: - 'https://files.mastodon.social/media_attachments/files/109/632/496/463/648/132/small/377a487b66d536a5.png', - remote_url: null, - preview_remote_url: null, - text_url: null, - meta: { - original: { width: 684, height: 1035, size: '684x1035', aspect: 0.6608695652173913 }, - small: { width: 390, height: 590, size: '390x590', aspect: 0.6610169491525424 }, - }, - description: null, - blurhash: 'UZM@P.oMS]tQ~oWFtQRkt8RlR*s;ITt8V_f#', - }, - ], - mentions: [], - tags: [ - { name: 'smbc', url: 'https://mastodon.social/tags/smbc' }, - { name: 'hiveworks', url: 'https://mastodon.social/tags/hiveworks' }, - { name: 'comics', url: 'https://mastodon.social/tags/comics' }, - ], - emojis: [], - card: { - url: 'https://www.smbc-comics.com/comic/art-5', - title: 'Saturday Morning Breakfast Cereal - Art', - description: 'Saturday Morning Breakfast Cereal - Art', - type: 'link', - author_name: '', - author_url: '', - provider_name: '', - provider_url: '', - html: '', - width: 264, - height: 400, - image: 'https://files.mastodon.social/cache/preview_cards/images/051/383/962/original/e5475d7b609a7221.png', - embed_url: '', - blurhash: 'UYMtHcoMS]tQ~oWEtQRkt8NIR*s;ITt8V_f#', - }, - poll: null, - }, { id: '109631141900228904', created_at: '2023-01-04T13:21:08.938Z', diff --git a/frontend/src/routes/(frontend)/[accountId]/index.tsx b/frontend/src/routes/(frontend)/[accountId]/index.tsx index 64058b7..35deab9 100644 --- a/frontend/src/routes/(frontend)/[accountId]/index.tsx +++ b/frontend/src/routes/(frontend)/[accountId]/index.tsx @@ -108,7 +108,7 @@ export default component$(() => {
))} -
+
{stats.map(({ name, value }) => (
{value} diff --git a/frontend/test/account.spec.ts b/frontend/test/account.spec.ts deleted file mode 100644 index 634c47c..0000000 --- a/frontend/test/account.spec.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { fetch } from 'undici' - -describe('Account page', () => { - it('should display the basic information of an account', async () => { - const response = await fetch(`http://0.0.0.0:6868/@BethanyBlack`) - expect(response.status).toBe(200) - const body = await response.text() - expect(body).toMatch(/]*alt="Avatar of Bethany Black"[^<>]*>/) - expect(body).toMatch(/

]*>Bethany Black<\/h2>/) - expect(body).toMatch( - /
]*>
]*>Joined<\/dt>[^<>]*
]*>[A-Z][a-z]{2} \d{1,2}, \d{4}<\/dd>[^<>]*<\/div>/ - ) - - expect(body).toMatch( - /
]*>
]*>Joined<\/dt>[^<>]*
]*>[A-Z][a-z]{2} \d{1,2}, \d{4}<\/dd>[^<>]*<\/div>/ - ) - - const stats = [ - { name: 'Posts', value: 1 }, - { name: 'Posts', value: 1 }, - { name: 'Following', value: 0 }, - { name: 'Followers', value: 0 }, - ] - - stats.forEach(({ name, value }) => { - const regex = new RegExp(`]*>${value}[^<>]*]*>${name}`) - expect(body).toMatch(regex) - }) - }) -}) diff --git a/frontend/test/posts-page.spec.ts b/frontend/test/posts-page.spec.ts deleted file mode 100644 index 45abf5f..0000000 --- a/frontend/test/posts-page.spec.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { fetch } from 'undici' - -describe('Posts timeline page', () => { - it('should display a list of statuses for the home page', async () => { - const response = await fetch('http://0.0.0.0:6868/') - expect(response.status).toBe(200) - const body = await response.text() - expect(body).toContain('We did it!') - }) - - it('should display a list of statuses for the explore page', async () => { - const response = await fetch('http://0.0.0.0:6868/explore/') - expect(response.status).toBe(200) - const body = await response.text() - expect(body).toContain('We did it!') - }) -}) - -describe('Toot details', () => { - it('should show an individual toot', async () => { - // Find a specific toot in the list - const exploreResponse = await fetch('http://0.0.0.0:6868/explore/') - const exploreBody = await exploreResponse.text() - const match = exploreBody.match(/href="\/(@BethanyBlack\/[0-9a-z-]*)"/) - - // Fetch the page for it and validate the result - const tootPath = match?.[1] - expect(tootPath).toBeTruthy() - const response = await fetch(`http://0.0.0.0:6868/${tootPath}`) - expect(response.status).toBe(200) - const body = await response.text() - // validate the toot content itself - expect(body).toContain('We did it!') - // validate replies - expect(body).toContain('Yes we did!') - expect(body).toContain('Yes you guys did it!') - }) -}) diff --git a/package.json b/package.json index 273daa1..3f6ca14 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@cloudflare/workers-types": "^4.20221111.1", "@databases/split-sql-query": "1.0.3", "@databases/sql": "3.2.0", + "@playwright/test": "^1.30.0", "@types/jest": "^29.2.4", "@types/node": "^18.11.11", "@typescript-eslint/eslint-plugin": "^5.46.1", @@ -37,7 +38,7 @@ "database:migrate": "yarn d1 migrations apply DATABASE", "database:create-mock": "rm -f .wrangler/state/d1/DATABASE.sqlite3 && yarn database:migrate --local && node ./frontend/mock-db/run.mjs", "dev": "export COMMIT_HASH=$(git rev-parse HEAD) && yarn build && yarn database:migrate --local && yarn pages dev frontend/dist --d1 DATABASE --persist --compatibility-date=2022-12-20 --live-reload", - "test:ui": "yarn build && yarn database:create-mock && concurrently --success command-1 --kill-others \"yarn pages dev frontend/dist --d1 DATABASE --persist --port 6868 --compatibility-date=2022-12-20 || true\" \"yarn --cwd frontend jest --verbose\"", + "ci-dev-test-ui": "yarn build && yarn database:create-mock && yarn pages dev frontend/dist --d1 DATABASE --persist --port 8788 --compatibility-date=2022-12-20", "deploy:init": "yarn pages project create wildebeest && yarn d1 create wildebeest", "deploy": "yarn build && yarn database:migrate && yarn pages publish frontend/dist --project-name=wildebeest" }, diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..97b0db3 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,107 @@ +import type { PlaywrightTestConfig } from '@playwright/test' +import { devices } from '@playwright/test' + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: './ui-e2e-tests', + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, + }, + /* Run tests in files in parallel */ + fullyParallel: true, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: 'html', + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + // baseURL: 'http://localhost:3000', + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: 'on-first-retry', + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: 'chromium', + use: { + ...devices['Desktop Chrome'], + }, + }, + + { + name: 'firefox', + use: { + ...devices['Desktop Firefox'], + }, + }, + + { + name: 'webkit', + use: { + ...devices['Desktop Safari'], + }, + }, + + /* Test against mobile viewports. */ + // { + // name: 'Mobile Chrome', + // use: { + // ...devices['Pixel 5'], + // }, + // }, + // { + // name: 'Mobile Safari', + // use: { + // ...devices['iPhone 12'], + // }, + // }, + + /* Test against branded browsers. */ + // { + // name: 'Microsoft Edge', + // use: { + // channel: 'msedge', + // }, + // }, + // { + // name: 'Google Chrome', + // use: { + // channel: 'chrome', + // }, + // }, + ], + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', + + /* Run your local dev server before starting the tests */ + // webServer: { + // command: 'npm run start', + // port: 3000, + // }, +} + +export default config diff --git a/ui-e2e-tests/account-page.spec.ts b/ui-e2e-tests/account-page.spec.ts new file mode 100644 index 0000000..7357df1 --- /dev/null +++ b/ui-e2e-tests/account-page.spec.ts @@ -0,0 +1,14 @@ +import { test, expect } from '@playwright/test' + +test('Navigation to and view of an account', async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + await page.getByRole('article').getByRole('link', { name: 'Ben Rosengart', exact: true }).click() + await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click() + await page.waitForLoadState('networkidle') + await page.getByRole('link', { name: 'Ben Rosengart', exact: true }).click() + await expect(page.getByRole('img', { name: 'Header of Ben Rosengart' })).toBeVisible() + await expect(page.getByRole('img', { name: 'Avatar of Ben Rosengart' })).toBeVisible() + await expect(page.getByRole('heading', { name: 'Ben Rosengart' })).toBeVisible() + await expect(page.getByText('Joined')).toBeVisible() + await expect(page.getByTestId('stats')).toHaveText('1Posts0Following0Followers') +}) diff --git a/ui-e2e-tests/explore-page.spec.ts b/ui-e2e-tests/explore-page.spec.ts new file mode 100644 index 0000000..e9aa2f1 --- /dev/null +++ b/ui-e2e-tests/explore-page.spec.ts @@ -0,0 +1,16 @@ +import { test, expect } from '@playwright/test' + +test('Display the list of toots in the explore page', async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + + const tootsTextsToCheck = [ + 'Hi, meet HiDock', + 'George Santos is in serious trouble.', + 'The real message of Jurassic Park is that you get the Unix and IT support you pay for.', + 'BREAKING: Black smoke coming from Capitol chimney.', + ] + + for (const tootText of tootsTextsToCheck) { + await expect(page.locator('article').filter({ hasText: tootText })).toBeVisible() + } +}) diff --git a/ui-e2e-tests/invidivual-toot.spec.ts b/ui-e2e-tests/invidivual-toot.spec.ts new file mode 100644 index 0000000..09b18d9 --- /dev/null +++ b/ui-e2e-tests/invidivual-toot.spec.ts @@ -0,0 +1,20 @@ +import { test, expect } from '@playwright/test' + +test('Navigation to and view of an individual toot', async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + await page.locator('article').filter({ hasText: 'Ken White' }).locator('i.fa-globe + span').click() + + const backButtonLocator = page.locator('a', { hasText: 'Back' }) + await expect(backButtonLocator).toBeVisible() + + const avatarLocator = page.locator('img[alt="Avatar of Ken White"]') + await expect(avatarLocator).toBeVisible() + + const userLinkLocator = page.locator('a[href="/@Popehat"]', { hasText: 'Ken White' }) + await expect(userLinkLocator).toBeVisible() + + const tootContentLocator = page.locator('p', { + hasText: 'Just recorded the first Serious Trouble episode of the new year, out tomorrow.', + }) + await expect(tootContentLocator).toBeVisible() +}) diff --git a/yarn.lock b/yarn.lock index 4d83f6b..0e7addd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -828,6 +828,14 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" +"@playwright/test@^1.30.0": + version "1.30.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.30.0.tgz#8c0c4930ff2c7be7b3ec3fd434b2a3b4465ed7cb" + integrity sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw== + dependencies: + "@types/node" "*" + playwright-core "1.30.0" + "@sentry/core@7.28.1": version "7.28.1" resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.28.1.tgz#c712ce17469b18b01606108817be24a99ed2116e" @@ -3513,6 +3521,11 @@ pkg-dir@^4.2.0: dependencies: find-up "^4.0.0" +playwright-core@1.30.0: + version "1.30.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.30.0.tgz#de987cea2e86669e3b85732d230c277771873285" + integrity sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g== + prebuild-install@^7.1.0: version "7.1.1" resolved "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz"