test(proposals): test list load (#39)

src/features/view-dao-proposals/components/DaoProposalsTable.tsx

@@ -75,7 +75,7 @@ export const DaoProposalsTable = ({ zna }: DaoProposalsTableProps) => {
 				<TableStatusMessage
 					className={styles.Message}
 					status={TableStatus.LOADING}
-					message={'Loading Proposals...'}
+					message={'Loading Proposals'}
 				/>
 			)}
 			{isEmpty && (

tests/e2e/pages/proposals.ts

@@ -0,0 +1,13 @@
+import { type Page } from '@playwright/test';
+
+export class ProposalsPage {
+	readonly page: Page;
+
+	constructor(page: Page) {
+		this.page = page;
+	}
+
+	async goto() {
+		await this.page.goto('/0.wilder.beasts/daos/proposals');
+	}
+}

tests/e2e/specs/browse-daos.spec.ts

@@ -6,29 +6,23 @@ test.beforeEach(async ({ page }) => {
 	await daos.goto();
 });
 
+// @note: this is a fragile test, but it will do for now
 test('can view a list of all DAOs in the network in list and grid view', async ({
 	page,
 }) => {
-	// Should see "Loading DAOs" message
 	await expect(page.getByText('Loading all DAOs')).toBeVisible();
-
+	await page.waitForSelector('[data-testid="zapp-daos-view-toggle"]');
 	const viewToggle = page.getByTestId('zapp-daos-view-toggle');
 
-	// Click first toggle option
+	// list view
 	await viewToggle.getByRole('radio').first().click();
-
-	// Should see all Wilder DAOs
-	// @note: this is a fragile test, but it will do for now
 	await expect(page.getByText('Wilder Beasts')).toBeVisible();
 	await expect(page.getByText('Wilder Moto')).toBeVisible();
 	await expect(page.getByText('Wilder Wheels')).toBeVisible();
 	await expect(page.getByText('Wilder Kicks')).toBeVisible();
 
-	// Click first toggle option
+	// grid view
 	await viewToggle.getByRole('radio').last().click();
-
-	// Should see all Wilder DAOs
-	// @note: this is a fragile test, but it will do for now
 	await expect(page.getByText('Wilder Beasts')).toBeVisible();
 	await expect(page.getByText('Wilder Moto')).toBeVisible();
 	await expect(page.getByText('Wilder Wheels')).toBeVisible();

tests/e2e/specs/view-dao-proposals.spec.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '../../../fixtures';
+import { ProposalsPage } from '../pages/proposals';
+
+test.beforeEach(async ({ page }) => {
+	const proposals = new ProposalsPage(page);
+	await proposals.goto();
+});
+
+// @note: this is a fragile test, but it will do for now
+test('can view a list of all proposals in a DAO', async ({ page }) => {
+	await expect(page.getByText('Loading Proposals')).toBeVisible();
+	await page.waitForSelector('[data-testid="zapp-daos-view-toggle"]');
+	const viewToggle = page.getByTestId('zapp-daos-view-toggle');
+
+	// list view
+	await viewToggle.getByRole('radio').first().click();
+	await expect(page.getByText("Let's Buy a GEN!")).toBeVisible();
+
+	// grid view
+	await viewToggle.getByRole('radio').last().click();
+	await expect(
+		page.getByText('This proposal is to gain funding for purchasing a Moto'),
+	).toBeVisible();
+});