From ff63584e8e726688b86d09f1d7521a5fb4a4c5b7 Mon Sep 17 00:00:00 2001
From: Alex Prudhomme <78121423+alexprudhomme@users.noreply.github.com>
Date: Thu, 10 Oct 2024 10:41:19 -0400
Subject: [PATCH] test(atomic): fix flaky atomic-external tests (#4515)

https://coveord.atlassian.net/browse/CDX-1594
---
 .../e2e/atomic-external.e2e.ts                | 65 ++++++++++---------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/packages/atomic/src/components/search/atomic-external/e2e/atomic-external.e2e.ts b/packages/atomic/src/components/search/atomic-external/e2e/atomic-external.e2e.ts
index 526428e14ec..a7776c4665f 100644
--- a/packages/atomic/src/components/search/atomic-external/e2e/atomic-external.e2e.ts
+++ b/packages/atomic/src/components/search/atomic-external/e2e/atomic-external.e2e.ts
@@ -1,39 +1,44 @@
 import {test, expect} from './fixture';
 
-test.describe('External Test Suite', () => {
-  test.describe('when modifying state of a component (search box) that is a child of an atomic-external component', () => {
-    test.beforeEach(async ({external}) => {
-      await external.load();
+test.describe('when modifying state of a component (search box) that is a child of an atomic-external component', () => {
+  test.beforeEach(async ({external, page}) => {
+    await external.load();
+    await external.hydrated.waitFor();
 
-      await external.searchBox
-        .locator('[part="textarea"]')
-        .fill('hello', {timeout: 1000});
+    await page
+      .locator('atomic-external')
+      .getByLabel('Search field with suggestions')
+      .waitFor({state: 'visible', timeout: 5000});
 
-      await external.searchBox.press('Enter');
-    });
+    await page
+      .locator('atomic-external')
+      .getByLabel('Search field with suggestions')
+      .fill('hello');
 
-    test("other components' state under the same atomic-external should be affected", async ({
-      external,
-    }) => {
-      await expect(external.querySummary).toHaveText(/hello/);
-    });
+    await external.searchBox.press('Enter');
+  });
+
+  test("other components' state under the same atomic-external should be affected", async ({
+    external,
+  }) => {
+    await expect(external.querySummary).toHaveText(/hello/);
+  });
 
-    test("other components' state under the linked atomic-search-interface should be affected", async ({
-      page,
-    }) => {
-      const querySummary = page.locator(
-        'atomic-search-interface#interface-2 > atomic-query-summary'
-      );
-      await expect(querySummary).toHaveText(/hello/);
-    });
+  test("other components' state under the linked atomic-search-interface should be affected", async ({
+    page,
+  }) => {
+    const querySummary = page.locator(
+      'atomic-search-interface#interface-2 > atomic-query-summary'
+    );
+    await expect(querySummary).toHaveText(/hello/);
+  });
 
-    test("other components' state under a different atomic-search-interface should not be affected", async ({
-      page,
-    }) => {
-      const querySummary = page.locator(
-        'atomic-search-interface#interface-1 > atomic-query-summary'
-      );
-      await expect(querySummary).not.toHaveText(/hello/);
-    });
+  test("other components' state under a different atomic-search-interface should not be affected", async ({
+    page,
+  }) => {
+    const querySummary = page.locator(
+      'atomic-search-interface#interface-1 > atomic-query-summary'
+    );
+    await expect(querySummary).not.toHaveText(/hello/);
   });
 });