fix(atomic): open recommendations in a single tab with _blank

https://coveord.atlassian.net/browse/SVCC-4611
coveo · Feb 10, 2025 · 6b150b1 · 6b150b1
1 parent fce76e3
commit 6b150b1
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/...s/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.new.stories.tsx b/...s/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.new.stories.tsx
@@ -74,6 +74,24 @@ export const RecsWithFullTemplate: Story = {
   },
 };
 
+export const RecsOpeningInNewTab: Story = {
+  tags: ['test'],
+  args: {
+    'slots-default': `<atomic-recs-result-template>
+            <template slot="link">
+              <atomic-result-link>
+                <a slot="attributes" target="_blank"></a>
+              </atomic-result-link>
+            </template>
+            <template>
+              <atomic-result-section-title>
+                <span>Title Section</span>
+              </atomic-result-section-title>
+            </template>
+          </atomic-recs-result-template>`,
+  },
+};
+
 export const RecsAsCarousel: Story = {
   args: {
     'attributes-number-of-recommendations-per-page': 4,

diff --git a/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx b/packages/atomic/src/components/recommendations/atomic-recs-list/atomic-recs-list.tsx
@@ -319,6 +319,9 @@ export class AtomicRecsList implements InitializableComponent<RecsBindings> {
   }
 
   private getPropsForAtomicRecsResult(recommendation: RecsResult) {
+    const linkContent =
+      this.itemTemplateProvider.getLinkTemplateContent(recommendation);
+
     return {
       interactiveResult: buildRecsInteractiveResult(this.bindings.engine, {
         options: {result: recommendation},
@@ -333,8 +336,8 @@ export class AtomicRecsList implements InitializableComponent<RecsBindings> {
         this.imageSize
       ),
       content: this.itemTemplateProvider.getTemplateContent(recommendation),
-      linkContent:
-        this.itemTemplateProvider.getLinkTemplateContent(recommendation),
+      linkContent,
+      stopPropagation: !!linkContent,
       store: this.bindings.store,
       density: this.density,
       display: this.display,

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
@@ -101,6 +101,24 @@ test.describe('when there are no enough recommendations for multiple pages', ()
   });
 });
 
+test.describe('when recommendations open in a new tab', async () => {
+  test.beforeEach(async ({recsList}) => {
+    await recsList.load({story: 'recs-opening-in-new-tab'});
+    await recsList.hydrated.waitFor();
+  });
+
+  test.only('should open a single tab when clicking a recommendation', async ({
+    recsList,
+    context,
+  }) => {
+    const pagePromise = context.waitForEvent('page');
+    await recsList.recommendation.first().click();
+    await pagePromise;
+
+    expect(context.pages().length).toBe(2);
+  });
+});
+
 test('with no recommendations returned by the API, should render placeholders', async ({
   recsList,
   page,