diff --git a/frontend/src/components/StatusAccountCard/StatusAccountCard.tsx b/frontend/src/components/StatusAccountCard/StatusAccountCard.tsx index abeed9c..80dd826 100644 --- a/frontend/src/components/StatusAccountCard/StatusAccountCard.tsx +++ b/frontend/src/components/StatusAccountCard/StatusAccountCard.tsx @@ -20,7 +20,9 @@ export const StatusAccountCard = component$<{
-
{getDisplayNameElement(status.account)}
+
+ {getDisplayNameElement(status.account)} +
@{subText === 'username' ? status.account.username : status.account.acct}
diff --git a/ui-e2e-tests/account-page.spec.ts b/ui-e2e-tests/account-page.spec.ts index ea5ea70..e0b9339 100644 --- a/ui-e2e-tests/account-page.spec.ts +++ b/ui-e2e-tests/account-page.spec.ts @@ -1,41 +1,26 @@ import { test, expect } from '@playwright/test' -const navigationsVia = ['name link', 'avatar'] as const +test(`Navigation via to and view of an account (with 1 post)`, async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + await page.getByRole('article').getByRole('link').filter({ hasText: 'Ben, just Ben' }).first().click() + await expect(page.getByTestId('account-info').getByRole('img', { name: 'Header of Ben, just Ben' })).toBeVisible() + await expect(page.getByTestId('account-info').getByRole('img', { name: 'Avatar of Ben, just Ben' })).toBeVisible() + await expect(page.getByTestId('account-info').getByRole('heading', { name: 'Ben, just Ben' })).toBeVisible() + await expect(page.getByTestId('account-info').getByText('Joined')).toBeVisible() + await expect(page.getByTestId('account-info').getByTestId('stats')).toHaveText('1Posts0Following0Followers') -navigationsVia.forEach((via) => - test(`Navigation via ${via} to and view of an account (with 1 post)`, async ({ page }) => { - await page.goto('http://127.0.0.1:8788/explore') - await page.getByRole('article').getByRole('link', { name: 'Ben, just Ben', exact: true }).click() - await page.getByRole('link', { name: 'Ben, just Ben', exact: true }).click() - await page.waitForLoadState('networkidle') - const linkOption = - via === 'name link' ? { name: 'Ben, just Ben', exact: true } : { name: 'Avatar of Ben, just Ben' } - await page.getByRole('link', linkOption).click() - await expect(page.getByTestId('account-info').getByRole('img', { name: 'Header of Ben, just Ben' })).toBeVisible() - await expect(page.getByTestId('account-info').getByRole('img', { name: 'Avatar of Ben, just Ben' })).toBeVisible() - await expect(page.getByTestId('account-info').getByRole('heading', { name: 'Ben, just Ben' })).toBeVisible() - await expect(page.getByTestId('account-info').getByText('Joined')).toBeVisible() - await expect(page.getByTestId('account-info').getByTestId('stats')).toHaveText('1Posts0Following0Followers') - - expect(await page.getByTestId('account-statuses').getByRole('article').count()).toBe(1) - await expect( - page.getByTestId('account-statuses').getByRole('article').getByRole('img', { name: 'Avatar of Ben, just Ben' }) - ).toBeVisible() - await expect(page.getByTestId('account-statuses').getByRole('article')).toContainText( - 'A very simple update: all good!' - ) - }) -) + expect(await page.getByTestId('account-statuses').getByRole('article').count()).toBe(1) + await expect( + page.getByTestId('account-statuses').getByRole('article').getByRole('img', { name: 'Avatar of Ben, just Ben' }) + ).toBeVisible() + await expect(page.getByTestId('account-statuses').getByRole('article')).toContainText( + 'A very simple update: all good!' + ) +}) test('Navigation to and view of an account (with 2 posts)', async ({ page }) => { await page.goto('http://127.0.0.1:8788/explore') - await page - .locator('article') - .filter({ hasText: "I'm Rafael and I am a web designer" }) - .locator('i.fa-globe + span') - .click() - await page.waitForLoadState('networkidle') - await page.getByRole('link', { name: 'Raffa123$', exact: true }).click() + await page.getByRole('article').getByRole('link').filter({ hasText: 'Raffa123$' }).first().click() await expect(page.getByTestId('account-info').getByRole('img', { name: 'Header of Raffa123$' })).toBeVisible() await expect(page.getByTestId('account-info').getByRole('img', { name: 'Avatar of Raffa123$' })).toBeVisible() diff --git a/ui-e2e-tests/custom-emojis.spec.ts b/ui-e2e-tests/custom-emojis.spec.ts index 6e89afa..24ca8dd 100644 --- a/ui-e2e-tests/custom-emojis.spec.ts +++ b/ui-e2e-tests/custom-emojis.spec.ts @@ -40,7 +40,11 @@ test('View of custom emojis in an toots author display name', async ({ page, bro .locator('i.fa-globe + span') .click() - const customEmojiLocator = page.getByRole('link', { name: 'George :verified: 👍', exact: true }).getByRole('img') + const customEmojiLocator = page + .getByRole('link') + .filter({ hasText: 'George' }) + .getByTestId('account-display-name') + .getByRole('img') await expect(customEmojiLocator).toBeVisible() await expect(customEmojiLocator).toHaveAttribute( 'src', diff --git a/ui-e2e-tests/infinite-scrolling.spec.ts b/ui-e2e-tests/infinite-scrolling.spec.ts index d023db2..7c29362 100644 --- a/ui-e2e-tests/infinite-scrolling.spec.ts +++ b/ui-e2e-tests/infinite-scrolling.spec.ts @@ -26,9 +26,7 @@ test.describe('Infinite (statuses) scrolling', () => { description: 'in account page', goToPageFn: async (page: Page) => { await page.goto('http://127.0.0.1:8788/explore') - await page.locator('article').filter({ hasText: "I'm Rafael" }).locator('i.fa-globe + span').click() - await page.waitForLoadState('networkidle') - await page.getByRole('link', { name: 'Raffa123$', exact: true }).click() + await page.getByRole('article').getByRole('link').filter({ hasText: 'Raffa123$' }).first().click() await expect(page.getByTestId('account-info').getByRole('img', { name: 'Header of Raffa123$' })).toBeVisible() }, fetchUrl: 'http://127.0.0.1:8788/api/v1/accounts/Rafael/statuses?*', diff --git a/ui-e2e-tests/invidivual-toot.spec.ts b/ui-e2e-tests/invidivual-toot.spec.ts index b8fe628..46e64e2 100644 --- a/ui-e2e-tests/invidivual-toot.spec.ts +++ b/ui-e2e-tests/invidivual-toot.spec.ts @@ -1,13 +1,21 @@ 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: 'Ben, just Ben' }).locator('i.fa-globe + span').click() - await expect(page.getByRole('button', { name: 'Back' })).toBeVisible() - await expect(page.getByRole('link', { name: 'Avatar of Ben, just Ben' })).toBeVisible() - await expect(page.getByRole('link', { name: 'Ben, just Ben', exact: true })).toBeVisible() - await expect(page.locator('span', { hasText: 'A very simple update: all good!' })).toBeVisible() -}) +const navigationVias = ['time link', 'toot content'] as const + +navigationVias.forEach((via) => + test(`Navigation to and view of an individual toot via ${via}`, async ({ page }) => { + await page.goto('http://127.0.0.1:8788/explore') + if (via === 'time link') { + await page.locator('article').filter({ hasText: 'Ben, just Ben' }).locator('i.fa-globe + span').click() + } else { + await page.getByText('A very simple update: all good!').click() + } + await expect(page.getByRole('button', { name: 'Back' })).toBeVisible() + await expect(page.getByRole('link', { name: 'Avatar of Ben, just Ben' })).toBeVisible() + await expect(page.getByTestId('account-display-name').filter({ hasText: 'Ben, just Ben' })).toBeVisible() + await expect(page.locator('span', { hasText: 'A very simple update: all good!' })).toBeVisible() + }) +) test('Navigation to and view of an individual toot with images', async ({ page }) => { await page.goto('http://127.0.0.1:8788/explore') @@ -18,7 +26,7 @@ test('Navigation to and view of an individual toot with images', async ({ page } .click() await expect(page.getByRole('button', { name: 'Back' })).toBeVisible() await expect(page.getByRole('link', { name: 'Avatar of Raffa123$' })).toBeVisible() - await expect(page.getByRole('link', { name: 'Raffa123$', exact: true })).toBeVisible() + await expect(page.getByTestId('account-display-name').filter({ hasText: 'Raffa123$' })).toBeVisible() await expect(page.locator('p', { hasText: "I'm Rafael and I am a web designer!" })).toBeVisible() expect(await page.getByTestId('media-gallery').getByRole('img').count()).toBe(4) await expect(page.getByTestId('images-modal')).not.toBeVisible() @@ -57,7 +65,7 @@ test("Navigation to and view of a toot's replies", async ({ page }) => { .click() await expect(page.getByRole('link', { name: 'Avatar of Zak Smith' })).toBeVisible() - await expect(page.getByRole('link', { name: 'Zak Smith', exact: true })).toBeVisible() + await expect(page.getByTestId('account-display-name').filter({ hasText: 'Zak Smith' })).toBeVisible() await expect(page.getByText('Yes we did!')).toBeVisible() await page.getByRole('button', { name: 'Back' }).click() @@ -72,6 +80,6 @@ test("Navigation to and view of a toot's replies", async ({ page }) => { .click() await expect(page.getByRole('link', { name: 'Avatar of Penny' })).toBeVisible() - await expect(page.getByRole('link', { name: 'Penny', exact: true })).toBeVisible() + await expect(page.getByTestId('account-display-name').filter({ hasText: 'Penny' })).toBeVisible() await expect(page.getByText('Yes you guys did it!')).toBeVisible() })