Test: Add can view poll satus scenario

integration_test/tests/0-common/comon.spec.ts

@@ -1,35 +1,60 @@
-import { organizerWallet } from '@constants/staticWallets';
 import { setAllureEpic } from '@helpers/allure';
 import { expect } from '@playwright/test';
 import { test } from '@fixtures/walletExtension';
-import RepresentativesPage from '@pages/representativesPage';
-import HomePage from '@pages/homePage';
-import { faker } from '@faker-js/faker';
+
 
 
 test.beforeEach(async () => {
     await setAllureEpic('0. All Users');
 });
 
-test.use({ storageState: '.auth/organizer.json', wallet: organizerWallet });
-
+// test.use({ storageState: '.auth/organizer.json', wallet: organizerWallet });
+//
 
 test.describe('Polls', () => {
 
-
     /**
-     * Description
-     * The Convention Voting Tool (CVT) recognises a Convention Organiser (CO)
+     * Description: Anyone can see what stage in its lifecycle a poll is
      *
-     * User Story
-     * As a CO I want the CVT to know my status so that I can act on it
+     * User Story: As an observer, I want to know whether a poll is pending, open or closed, so that I know what to expect
      *
-     * Acceptance Criteria
-     * Given that I am a CO with my wallet connected, When I go to the homepage, Then I see the "create poll" button
+     * Acceptance Criteria: Given that I am looking at a given poll, when I look at it, then I can see its status
      */
-    test('01A. Given any user, can view all polls', async ({page}) => {
-        throw new Error("Not Implemented")
+    test('01A. Given any user, can view poll status', async ({ page }) => {
+        await page.goto('/');
+        await page.waitForSelector('[data-testid^="poll-card-"]');
+
+        let pollCards = page.locator('[data-testid^="poll-card-"]');
+
+        let pollCardCount = await pollCards.count();
+        expect(pollCardCount).toBeGreaterThan(0);
+
+        // Check that each poll card has a 'poll-status-chip' with "Concluded" or "Pending"
+        for (let i = 0; i < pollCardCount; i++) {
+            const statusChip = pollCards.nth(i).locator('[data-testid="poll-status-chip"]');
+
+            await expect(statusChip).toBeVisible();
+
+            const statusText = await statusChip.textContent();
+            expect(['Concluded', 'Pending','Voting']).toContain(statusText);
+        }
+
+        const randomIndex = Math.floor(Math.random() * pollCardCount);
+        const pollCard =  pollCards.nth(randomIndex)
+        const pollCardTestId = await pollCard.getAttribute('data-testid');
+        const pollId = pollCardTestId.split('-').pop();
+
+        await page.goto(`/polls/${pollId}`);
+
+
+        const pollPageStatusChip = page.getByTestId('poll-page-status-chip');
+        await expect(pollPageStatusChip).toBeVisible();
+
+        const statusText = await pollPageStatusChip.textContent();
+        expect(['Concluded', 'Pending','Voting']).toContain(statusText);
+
     });
+
     test('01B. Given any user, can view poll status', async ({page}) => {
         throw new Error("Not Implemented")
     });

src/components/polls/pollCard.tsx

@@ -37,15 +37,15 @@ export function PollCard(props: Props): JSX.Element {
     >
       <WidgetContainer>
         <Box display="flex" flexDirection="column" gap={1} height="100%">
-          <Typography variant="h5" fontWeight="bold">
+          <Typography variant="h5" fontWeight="bold" data-test-id={'poll-name-'+poll.id} >
             {poll.name}
           </Typography>
 
           <PollStatusChip status={poll.status} />
           {poll.status !== pollPhases.pending && (
             <PollVoteCount pollId={poll.id} />
           )}
-          <Typography variant="body1">{poll.description}</Typography>
+          <Typography variant="body1" data-test-id={'poll-description-'+poll.id}  >{poll.description}</Typography>
           <Box flexGrow={1} />
           <Box
             display="flex"
@@ -54,7 +54,7 @@ export function PollCard(props: Props): JSX.Element {
             alignItems="center"
             mt={2}
           >
-            <Typography>View</Typography>
+            <Typography data-test-id={'btn-poll-view-'+poll.id}>View</Typography>
             <LaunchRounded fontSize="small" />
           </Box>
         </Box>

src/components/polls/pollStatusChip.tsx

@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 
 interface Props {
   status: string;
+  testId?: string;
 }
 
 /**
@@ -13,7 +14,7 @@ interface Props {
  * @returns Chip with Status
  */
 export function PollStatusChip(props: Props): JSX.Element {
-  const { status } = props;
+  const { status,testId } = props;
 
   // If the status is not a valid poll phase, show it as unknown
   let pollStatusInfo: {
@@ -29,7 +30,7 @@ export function PollStatusChip(props: Props): JSX.Element {
   }
 
   return (
-    <Box data-testid="poll-status-chip">
+    <Box data-testid={testId || 'poll-status-chip'}>
       <Chip
         label={
           <Box display="flex" flexDirection="row" gap={1} alignItems="center">

src/pages/polls/[pollId]/index.tsx

@@ -84,7 +84,7 @@ export default function ViewPoll(): JSX.Element {
                 'View Poll'
               )}
             </Typography>
-            {poll && <PollStatusChip status={poll.status} />}
+            {poll && <PollStatusChip status={poll.status} testId='poll-page-status-chip' />}
           </Box>
           <PollVoteCount pollId={poll?.id?.toString() || ''} />
           <Grid container data-testid="poll-description">