add waitfornetworkidle

https://coveord.atlassian.net/browse/KIT-3540 test with no recommendations https://coveord.atlassian.net/browse/KIT-3540 no textarea https://coveord.atlassian.net/browse/KIT-3540
coveo · Sep 19, 2024 · b1ec210 · b1ec210
1 parent 0932ef8
commit b1ec210
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/e2e/atomic-recs-list.e2e.ts b/packages/atomic/src/components/recommendations/atomic-recs-list/e2e/atomic-recs-list.e2e.ts
@@ -84,3 +84,15 @@ test.describe('with a carousel', () => {
     );
   });
 });
+
+test('with no recommendations returned by the API, should render placeholders', async ({
+  recsList,
+  page,
+}) => {
+  await recsList.noRecommendations();
+  await recsList.load({story: 'default'});
+  await recsList.hydrated.waitFor();
+
+  await page.waitForLoadState('networkidle');
+  await expect(recsList.placeholder.first()).toBeVisible();
+});
diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/e2e/page-object.ts b/packages/atomic/src/components/recommendations/atomic-recs-list/e2e/page-object.ts
@@ -27,4 +27,21 @@ export class AtomicCommerceRecsListPageObject extends BasePageObject<'atomic-rec
   get prevButton() {
     return this.page.getByLabel('Previous');
   }
+
+  async noRecommendations() {
+    await this.page.route(
+      '**/search/v2?organizationId=searchuisamples',
+      async (route) => {
+        const response = await route.fetch();
+        const body = await response.json();
+        body.results = [];
+        await route.fulfill({
+          response,
+          json: body,
+        });
+      }
+    );
+
+    return this;
+  }
 }
diff --git a/packages/atomic/src/components/search/atomic-external/atomic-external.new.stories.tsx b/packages/atomic/src/components/search/atomic-external/atomic-external.new.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta = {
       <div>
         <h1>External components of interface #2</h1>
         <atomic-external selector="#interface-2">
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
           <atomic-query-summary></atomic-query-summary>
           <atomic-facet field="author" label="Author"></atomic-facet>
         </atomic-external>
@@ -48,7 +48,7 @@ const meta: Meta = {
           >
             <atomic-format-currency currency="USD"></atomic-format-currency>
           </atomic-numeric-facet>
-          <atomic-search-box textarea></atomic-search-box>
+          <atomic-search-box></atomic-search-box>
           <atomic-result-list></atomic-result-list>
         </atomic-search-interface>
       </div>