Merge pull request #1807 from henrycatalinismith/undocumented/react-1…

…8.3.0-plus-playwright-fixes Update react & react-dom to 18.3.0 and fix playwright flakiness
zetkin · Mar 17, 2024 · 3b6c2fa · 3b6c2fa
2 parents fe220a5 + d5d7c50
commit 3b6c2fa
Show file tree

Hide file tree

Showing 17 changed files with 189 additions and 133 deletions.
diff --git a/integrationTesting/tests/organize/campaigns/list/list.spec.ts b/integrationTesting/tests/organize/campaigns/list/list.spec.ts
@@ -22,12 +22,12 @@ test.describe('Campaigns list page ', () => {
       WelcomeNewMembers,
     ]);
 
+    const campaignCards = page.locator('data-testid=campaign-card');
+
     await page.goto(appUri + '/organize/1/projects');
+    await campaignCards.first().waitFor({ state: 'visible' });
 
-    const numCampaignCards = await page.$$eval(
-      'data-testid=campaign-card',
-      (items) => items.length
-    );
+    const numCampaignCards = await campaignCards.count();
     expect(numCampaignCards).toEqual(2);
   });
 });
diff --git a/integrationTesting/tests/organize/journeys/instance-detail/display.spec.ts b/integrationTesting/tests/organize/journeys/instance-detail/display.spec.ts
@@ -27,24 +27,21 @@ test.describe('Journey instance detail page', () => {
       ClarasOnboarding
     );
 
+    const title = page.locator(
+      `[data-testid=page-title]:has-text("${ClarasOnboarding.title}")`
+    );
+    const breadcrumbTitle = page.locator(
+      `[aria-label=breadcrumb]:has-text("${ClarasOnboarding.title}")`
+    );
+
     await page.goto(appUri + '/organize/1/journeys/1/1');
+    await title.waitFor({ state: 'visible' });
+    await breadcrumbTitle.waitFor({ state: 'visible' });
+
+    const numTitles = await title.count();
+    const numBreadcrumbTitles = await breadcrumbTitle.count();
 
-    // Check that the title is visible in the right place
-    expect(
-      await page
-        .locator(
-          `[data-testid=page-title]:has-text("${ClarasOnboarding.title}")`
-        )
-        .count()
-    ).toEqual(1);
-
-    // Check that the title is also in the breadcrumbs
-    expect(
-      await page
-        .locator(
-          `[aria-label=breadcrumb]:has-text("${ClarasOnboarding.title}")`
-        )
-        .count()
-    ).toEqual(1);
+    expect(numTitles).toEqual(1);
+    expect(numBreadcrumbTitles).toEqual(1);
   });
 });
diff --git a/integrationTesting/tests/organize/journeys/instance-detail/reopen.spec.ts b/integrationTesting/tests/organize/journeys/instance-detail/reopen.spec.ts
@@ -36,6 +36,13 @@ test.describe('Journey instance details page', () => {
         ClarasOnboarding
       );
 
+      const openStatus = page.locator(
+        'data-testid=journey-status >> text=Open'
+      );
+      const reopenButton = page.locator(
+        'data-testid=JourneyInstanceReopenButton'
+      );
+
       await page.goto(appUri + '/organize/1/journeys/1/1');
 
       await Promise.all([
@@ -44,9 +51,11 @@ test.describe('Journey instance details page', () => {
           `**/orgs/${KPD.id}/journey_instances/${ClarasOnboarding.id}`
         ),
         // Click close instance button
-        page.locator('data-testid=JourneyInstanceReopenButton').click(),
+        reopenButton.click(),
       ]);
 
+      await openStatus.waitFor({ state: 'visible' });
+
       // Check patch request has correct data
       expect(
         patchInstanceMock.log<ZetkinJourneyInstance>()[0].data?.closed

diff --git a/integrationTesting/tests/organize/journeys/instance-detail/sidebar.spec.ts b/integrationTesting/tests/organize/journeys/instance-detail/sidebar.spec.ts
@@ -30,15 +30,15 @@ test.describe('Journey instance detail page sidebar', () => {
       ClarasOnboarding
     );
 
+    const assignees = page.locator(
+      `[data-testid=ZetkinSection-assignees] [data-testid=JourneyPerson-${ClarasOnboarding.assignees[0].id}]`
+    );
+
     await page.goto(appUri + '/organize/1/journeys/1/1');
+    await assignees.first().waitFor({ state: 'visible' });
 
-    expect(
-      await page
-        .locator(
-          `[data-testid=ZetkinSection-assignees] [data-testid=JourneyPerson-${ClarasOnboarding.assignees[0].id}]`
-        )
-        .count()
-    ).toEqual(1);
+    const numAssignees = await assignees.count();
+    expect(numAssignees).toEqual(1);
   });
 
   test('lets user assign new person to the journey instance', async ({
@@ -196,15 +196,15 @@ test.describe('Journey instance detail page sidebar', () => {
       ClarasOnboarding
     );
 
+    const subjects = page.locator(
+      `[data-testid=ZetkinSection-subjects] [data-testid=JourneyPerson-${ClarasOnboarding.subjects[0].id}]`
+    );
+
     await page.goto(appUri + '/organize/1/journeys/1/1');
+    await subjects.first().waitFor({ state: 'visible' });
 
-    expect(
-      await page
-        .locator(
-          `[data-testid=ZetkinSection-subjects] [data-testid=JourneyPerson-${ClarasOnboarding.subjects[0].id}]`
-        )
-        .count()
-    ).toEqual(1);
+    const numSubjects = await subjects.count();
+    expect(numSubjects).toEqual(1);
   });
 
   //put request works

diff --git a/integrationTesting/tests/organize/journeys/instance-milestones/milestones.spec.ts b/integrationTesting/tests/organize/journeys/instance-milestones/milestones.spec.ts
@@ -29,14 +29,15 @@ test.describe('Journey instance page Milestones tab', () => {
       ClarasOnboarding
     );
 
-    await page.goto(appUri + '/organize/1/journeys/1/1/milestones');
-
-    const journeyMilestoneCards = await page.$$eval(
-      'data-testid=JourneyMilestoneCard',
-      (items) => items.length
+    const journeyMilestoneCards = page.locator(
+      'data-testid=JourneyMilestoneCard'
     );
 
-    expect(journeyMilestoneCards).toEqual(3);
+    await page.goto(appUri + '/organize/1/journeys/1/1/milestones');
+    await journeyMilestoneCards.first().waitFor({ state: 'visible' });
+
+    const numCards = await journeyMilestoneCards.count();
+    expect(numCards).toEqual(3);
   });
 
   test('displays message if there are no milestones.', async ({
@@ -90,22 +91,24 @@ test.describe('Journey instance page Milestones tab', () => {
       { ...AttendMeeting, deadline: newDeadline }
     );
 
+    const datePicker = page.locator(
+      '[data-testid=JourneyMilestoneCard] [data-testid=JourneyMilestoneCard-datePicker] button[aria-label*="Choose"]'
+    );
+    const june24 = page.locator('button:has-text("24")');
+
     await page.goto(appUri + '/organize/1/journeys/1/1/milestones');
+    await datePicker.first().waitFor({ state: 'visible' });
 
     //Click datepicker in first JourneyMilestoneCard
-    await page
-      .locator(
-        '[data-testid=JourneyMilestoneCard] [data-testid=JourneyMilestoneCard-datePicker] button[aria-label*="Choose"]'
-      )
-      .first()
-      .click();
+    await datePicker.first().click();
+    await june24.waitFor({ state: 'visible' });
 
     await Promise.all([
       page.waitForResponse(
         `**/orgs/${KPD.id}/journey_instances/${ClarasOnboarding.id}/milestones/${AttendMeeting.id}`
       ),
       //Click June 24 to trigger setting new deadline
-      await page.locator('button:has-text("24")').click(),
+      await june24.click(),
     ]);
 
     //Expect the deadline to be the newly set deadline

diff --git a/integrationTesting/tests/organize/journeys/list.spec.ts b/integrationTesting/tests/organize/journeys/list.spec.ts
@@ -21,13 +21,12 @@ test.describe('Journeys list page', () => {
       MarxistTraining,
     ]);
 
-    await page.goto(appUri + '/organize/1/journeys');
+    const journeyCards = page.locator('data-testid=journey-card');
 
-    const numJourneysCards = await page.$$eval(
-      'data-testid=journey-card',
-      (items) => items.length
-    );
+    await page.goto(appUri + '/organize/1/journeys');
+    await journeyCards.first().waitFor({ state: 'visible' });
 
+    const numJourneysCards = await journeyCards.count();
     expect(numJourneysCards).toEqual(2);
   });
 });
diff --git a/integrationTesting/tests/organize/search.spec.ts b/integrationTesting/tests/organize/search.spec.ts
@@ -37,13 +37,17 @@ test.describe('Search', async () => {
       SpeakToFriendAboutReferendum,
     ]);
 
+    const searchButton = page.locator('data-testid=SearchDialog-activator');
+    const searchField = page.locator('#SearchDialog-inputField');
+
     await page.goto(appUri + '/organize/1/projects/1');
+    await searchButton.waitFor({ state: 'visible' });
+
     await page.keyboard.press('/');
+    await searchField.waitFor({ state: 'visible' });
 
-    // Check dialog open
-    expect(
-      await page.locator('#SearchDialog-inputField').isVisible()
-    ).toBeTruthy();
+    const isVisible = await searchField.isVisible();
+    expect(isVisible).toBeTruthy();
   });
 
   test('shows error indicator if error fetching results', async ({

diff --git a/integrationTesting/tests/organize/tags/add.spec.ts b/integrationTesting/tests/organize/tags/add.spec.ts
@@ -1,11 +1,11 @@
 import { expect } from '@playwright/test';
 import test from '../../../fixtures/next';
 
-import ActivistTag from '../../../mockData/orgs/KPD/tags/Activist';
 import ClaraZetkin from '../../../mockData/orgs/KPD/people/ClaraZetkin';
 import CodingSkillsTag from '../../../mockData/orgs/KPD/tags/Coding';
 import KPD from '../../../mockData/orgs/KPD';
 import OccupationTag from '../../../mockData/orgs/KPD/tags/Occupation';
+import PlaysGuitarTag from '../../../mockData/orgs/KPD/tags/PlaysGuitar';
 
 test.describe('Tag manager', () => {
   test.beforeEach(({ moxy, login }) => {
@@ -25,37 +25,47 @@ test.describe('Tag manager', () => {
 
   test('lets user add tag', async ({ page, appUri, moxy }) => {
     moxy.setZetkinApiMock(`/orgs/${KPD.id}/people/tags`, 'get', [
-      ActivistTag,
+      PlaysGuitarTag,
       CodingSkillsTag,
     ]);
     moxy.setZetkinApiMock(
       `/orgs/${KPD.id}/people/${ClaraZetkin.id}/tags`,
       'get',
       []
     );
+
     const { log: putTagLog } = moxy.setZetkinApiMock(
-      `/orgs/1/people/${ClaraZetkin.id}/tags/${ActivistTag.id}`,
+      `/orgs/1/people/${ClaraZetkin.id}/tags/${PlaysGuitarTag.id}`,
       'put'
     );
 
-    await page.goto(appUri + `/organize/1/people/${ClaraZetkin.id}`);
+    const addTagButton = page.locator('text=Add tag');
+    const playsGuitar = page.locator('text=Plays Guitar');
+
+    page.goto(appUri + `/organize/1/people/${ClaraZetkin.id}`);
+    addTagButton.waitFor({ state: 'visible' });
 
     await page.locator('text=Add tag').click();
 
+    await playsGuitar.waitFor({ state: 'visible' });
+
+    // Select tag
+    await playsGuitar.click();
+
     moxy.setZetkinApiMock(`/orgs/1/people/${ClaraZetkin.id}/tags`, 'get', [
-      ActivistTag,
+      PlaysGuitarTag,
     ]);
 
-    // Select tag
-    await page.click('text=Activist');
+    // Wait for the tag to appear on the page
+    await playsGuitar.waitFor({ state: 'visible' });
 
     // Expect to have made request to put tag
     expect(putTagLog().length).toEqual(1);
   });
 
   test('lets user add value tag', async ({ page, appUri, moxy }) => {
     moxy.setZetkinApiMock(`/orgs/${KPD.id}/people/tags`, 'get', [
-      ActivistTag,
+      PlaysGuitarTag,
       CodingSkillsTag,
       OccupationTag,
     ]);
@@ -65,7 +75,7 @@ test.describe('Tag manager', () => {
       []
     );
     const { log: putTagLog } = moxy.setZetkinApiMock(
-      `/orgs/1/people/${ClaraZetkin.id}/tags/${ActivistTag.id}`,
+      `/orgs/1/people/${ClaraZetkin.id}/tags/${OccupationTag.id}`,
       'put'
     );
 
@@ -97,7 +107,7 @@ test.describe('Tag manager', () => {
     appUri,
   }) => {
     moxy.setZetkinApiMock(`/orgs/${KPD.id}/people/tags`, 'get', [
-      ActivistTag,
+      PlaysGuitarTag,
       CodingSkillsTag,
     ]);
     moxy.setZetkinApiMock(
@@ -106,7 +116,7 @@ test.describe('Tag manager', () => {
       []
     );
     moxy.setZetkinApiMock(
-      `/orgs/1/people/${ClaraZetkin.id}/tags/${ActivistTag.id}`,
+      `/orgs/1/people/${ClaraZetkin.id}/tags/${PlaysGuitarTag.id}`,
       'put',
       undefined,
       401
@@ -117,7 +127,7 @@ test.describe('Tag manager', () => {
     await page.locator('text=Add tag').click();
 
     // Select tag
-    await page.click('text=Activist');
+    await page.click('text=Plays Guitar');
 
     // Show error
     await page.locator('data-testid=Snackbar-error').waitFor();