test infinite scrolling on account and explore page

ui-e2e-tests-utils/getMockStatusFn.ts

@@ -0,0 +1,67 @@
+import type { MastodonStatus } from 'wildebeest/frontend/src/types'
+
+/**
+ * generates a function that creates mock statuses when called,
+ * it uses a closure to keep track of the number of generated
+ * statuses to that they are consistently enumerated
+ * ('Mock Fetched Status #000', 'Mock Fetched Status #001', ...)
+ */
+export function getMockStatusFn(): () => MastodonStatus {
+	let numOfGeneratedMockStatuses = 0
+	return () => {
+		const paddedNum = `${numOfGeneratedMockStatuses}`.padStart(3, '0')
+		const status: MastodonStatus = {
+			id: `mock-fetch-status-${paddedNum}`,
+			created_at: new Date().toISOString(),
+			in_reply_to_id: null,
+			in_reply_to_account_id: null,
+			sensitive: false,
+			spoiler_text: '',
+			visibility: 'public',
+			language: 'en',
+			uri: '',
+			url: '',
+			replies_count: 0,
+			reblogs_count: 0,
+			favourites_count: 0,
+			edited_at: null,
+			content: `Mock Fetched Status #${paddedNum}`,
+			reblog: null,
+			account: {
+				id: '109355700962815786',
+				username: 'georgetakei',
+				acct: 'georgetakei@universeodon.com',
+				display_name: 'George Takei 🏳️‍🌈🖖🏽',
+				locked: false,
+				bot: false,
+				discoverable: true,
+				group: false,
+				created_at: '2022-11-15T00:00:00.000Z',
+				note: '\u003cp\u003eI boldly went to this new site. Follow for more recipes and tips.\u003c/p\u003e',
+				url: 'https://universeodon.com/@georgetakei',
+				avatar:
+					'https://files.mastodon.social/cache/accounts/avatars/109/355/700/962/815/786/original/7d278db7224de27d.jpg',
+				avatar_static:
+					'https://files.mastodon.social/cache/accounts/avatars/109/355/700/962/815/786/original/7d278db7224de27d.jpg',
+				header:
+					'https://files.mastodon.social/cache/accounts/headers/109/355/700/962/815/786/original/01c05d0b46e15480.jpg',
+				header_static:
+					'https://files.mastodon.social/cache/accounts/headers/109/355/700/962/815/786/original/01c05d0b46e15480.jpg',
+				followers_count: 331437,
+				following_count: 37,
+				statuses_count: 187,
+				last_status_at: '2023-01-04',
+				emojis: [],
+				fields: [],
+			},
+			media_attachments: [],
+			mentions: [],
+			tags: [],
+			emojis: [],
+			card: null,
+			poll: null,
+		}
+		numOfGeneratedMockStatuses++
+		return status
+	}
+}

ui-e2e-tests/account-page.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test'
+import { getMockStatusFn } from 'wildebeest/ui-e2e-tests-utils/getMockStatusFn'
 
 test('Navigation to and view of an account (with 1 post)', async ({ page }) => {
 	await page.goto('http://127.0.0.1:8788/explore')
@@ -45,3 +46,35 @@ test('Navigation to and view of an account (with 2 posts)', async ({ page }) =>
 	await expect(post2Locator.getByRole('img', { name: 'Avatar of Raffa123$' })).toBeVisible()
 	await expect(post2Locator).toContainText('Hi! My name is Rafael!')
 })
+
+test('Fetching of new account toots on scroll (infinite scrolling)', async ({ page, browserName }) => {
+	test.skip(browserName !== 'chromium', 'Only chromium tests this well')
+
+	const generateFakeStatus = getMockStatusFn()
+	await page.route('http://127.0.0.1:8788/api/v1/accounts/rafa/statuses?*', async (route) => {
+		const newStatuses = new Array(5).fill(null).map(generateFakeStatus)
+		await route.fulfill({ body: JSON.stringify(newStatuses) })
+	})
+
+	await page.goto('http://127.0.0.1:8788/explore')
+	await page.locator('article').filter({ hasText: "I'm Rafa, a designer and app" }).locator('i.fa-globe + span').click()
+	await page.waitForLoadState('networkidle')
+	await page.getByRole('link', { name: 'Rafa', exact: true }).click()
+	await page.waitForLoadState('networkidle')
+
+	for (let i = 0; i < 3; i++) {
+		await page.keyboard.down('End')
+		for (let j = 0; j < 5; j++) {
+			const paddedJ = `${i * 5 + j}`.padStart(3, '0')
+			// check that the new toots have been loaded
+			await expect(page.locator('article').filter({ hasText: `Mock Fetched Status #${paddedJ}` })).toBeVisible()
+		}
+		const paddedExtra = `${i * 5 + 6}`.padStart(3, '0')
+		// check that a 6th toot hasn't been loaded (since the mock endpoint returns 5 toots)
+		await expect(page.locator('article').filter({ hasText: `Mock Fetched Status #${paddedExtra}` })).not.toBeVisible()
+	}
+
+	const numOfMockFetchedToots = await page.locator('article').filter({ hasText: `Mock Fetched Status` }).count()
+	// check that all 15 toots have been loaded
+	expect(numOfMockFetchedToots).toBe(15)
+})

ui-e2e-tests/explore-page.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test'
+import { getMockStatusFn } from 'wildebeest/ui-e2e-tests-utils/getMockStatusFn'
 
 test('Display the list of toots in the explore page', async ({ page }) => {
 	await page.goto('http://127.0.0.1:8788/explore')
@@ -14,3 +15,32 @@ test('Display the list of toots in the explore page', async ({ page }) => {
 		await expect(page.locator('article').filter({ hasText: tootText })).toBeVisible()
 	}
 })
+
+test('Fetching of new toots on scroll (infinite scrolling)', async ({ page, browserName }) => {
+	test.skip(browserName !== 'chromium', 'Only chromium tests this well')
+
+	const generateFakeStatus = getMockStatusFn()
+	await page.route('http://127.0.0.1:8788/api/v1/timelines/public?*', async (route) => {
+		const newStatuses = new Array(5).fill(null).map(generateFakeStatus)
+		await route.fulfill({ body: JSON.stringify(newStatuses) })
+	})
+
+	await page.goto('http://127.0.0.1:8788/explore')
+	await page.waitForLoadState('networkidle')
+
+	for (let i = 0; i < 3; i++) {
+		await page.keyboard.down('End')
+		for (let j = 0; j < 5; j++) {
+			const paddedJ = `${i * 5 + j}`.padStart(3, '0')
+			// check that the new toots have been loaded
+			await expect(page.locator('article').filter({ hasText: `Mock Fetched Status #${paddedJ}` })).toBeVisible()
+		}
+		const paddedExtra = `${i * 5 + 6}`.padStart(3, '0')
+		// check that a 6th toot hasn't been loaded (since the mock endpoint returns 5 toots)
+		await expect(page.locator('article').filter({ hasText: `Mock Fetched Status #${paddedExtra}` })).not.toBeVisible()
+	}
+
+	const numOfMockFetchedToots = await page.locator('article').filter({ hasText: `Mock Fetched Status` }).count()
+	// check that all 15 toots have been loaded
+	expect(numOfMockFetchedToots).toBe(15)
+})