feat(quantic): refactored QuanticResultAction to make it use the Quan…

…ticTooltip component (#3359) * refactored QuanticResultAction with the QuanticTooltip component * method names updated
coveo · Nov 3, 2023 · 9221f84 · 9221f84
1 parent 6b2dd15
commit 9221f84
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 72 deletions.
diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-actions.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-actions.ts
@@ -5,11 +5,17 @@ import {
 
 const resultQuickviewActions = (selector: ResultQuickviewSelector) => {
   return {
-    clickPreview: (variant?: string) =>
+    clickPreview: () =>
       selector
-        .buttonPreview(variant)
+        .buttonPreview()
         .click()
         .logAction('When clicking preview button'),
+
+    hoverOverPreview: () =>
+      selector
+        .buttonPreviewContainer()
+        .trigger('mouseenter')
+        .logAction('When hovering over the preview button'),
   };
 };
 

diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-expectations.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-expectations.ts
@@ -7,14 +7,29 @@ import {
   ResultQuickviewSelectors,
 } from './result-quickview-selectors';
 
+export type PreviewVariantType = 'brand' | 'outline-brand' | 'result-action';
+
 function resultQuickviewExpectations(selector: ResultQuickviewSelector) {
   return {
-    displayButtonPreview: (display: boolean, variant?: string) => {
+    displayButtonPreview: (display: boolean) => {
       selector
-        .buttonPreview(variant)
+        .buttonPreview()
         .should(display ? 'exist' : 'not.exist')
         .logDetail(`${should(display)} display the button preview`);
     },
+    displayCorrectPreviewButtonVariant: (variant: PreviewVariantType) => {
+      const expectedCssVariantClasses = {
+        brand: 'slds-button_brand',
+        'outline-brand': 'slds-button_outline-brand',
+        'result-action': 'slds-button_icon-border-filled',
+      };
+      selector
+        .buttonPreview()
+        .should('have.class', expectedCssVariantClasses[`${variant}`])
+        .log(
+          `the preview button should be displayed in the ${variant} variant`
+        );
+    },
     displayButtonPreviewIcon: (display: boolean) => {
       selector
         .buttonPreviewIcon()
@@ -29,9 +44,9 @@ function resultQuickviewExpectations(selector: ResultQuickviewSelector) {
         .should('contain', iconName)
         .logDetail(`the icon in button preview should contain "${iconName}"`);
     },
-    buttonPreviewIsDisabled: (disabled: boolean, variant?: string) => {
+    buttonPreviewIsDisabled: (disabled: boolean) => {
       selector
-        .buttonPreview(variant)
+        .buttonPreview()
         .invoke('attr', 'disabled')
         .should(disabled ? 'exist' : 'not.exist')
         .logDetail(`The button preview ${should(disabled)} be disabled`);

diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-selectors.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview-selectors.ts
@@ -3,7 +3,8 @@ import {ComponentSelector, CypressSelector} from '../../common-selectors';
 export const resultQuickviewComponent = 'c-quantic-result-quickview';
 
 export interface ResultQuickviewSelector extends ComponentSelector {
-  buttonPreview: (variant?: string) => CypressSelector;
+  buttonPreview: () => CypressSelector;
+  buttonPreviewContainer: () => CypressSelector;
   buttonPreviewIcon: () => CypressSelector;
   sectionPreview: () => CypressSelector;
   closeButton: () => CypressSelector;
@@ -19,10 +20,12 @@ export interface ResultQuickviewSelector extends ComponentSelector {
 export const ResultQuickviewSelectors: ResultQuickviewSelector = {
   get: () => cy.get(resultQuickviewComponent),
 
-  buttonPreview: (variant?: string) =>
-    variant
-      ? ResultQuickviewSelectors.get().find('.slds-button_' + variant)
-      : ResultQuickviewSelectors.get().find('.quickview__button-base'),
+  buttonPreviewContainer: () =>
+    ResultQuickviewSelectors.get().find(
+      '[data-cy="quick-view-button__container"]'
+    ),
+  buttonPreview: () =>
+    ResultQuickviewSelectors.get().find('[data-cy="quick-view-button"]'),
   buttonPreviewIcon: () =>
     ResultQuickviewSelectors.buttonPreview().find('lightning-icon'),
   sectionPreview: () => ResultQuickviewSelectors.get().find('section'),
@@ -40,5 +43,5 @@ export const ResultQuickviewSelectors: ResultQuickviewSelector = {
     ResultQuickviewSelectors.get().find(
       '.quickview__content-container .iframe-wrapper .quickview__spinner-container'
     ),
-  tooltip: () => ResultQuickviewSelectors.get().find('.slds-popover'),
+  tooltip: () => ResultQuickviewSelectors.get().find('[data-cy="tooltip"]'),
 };
diff --git a/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts b/packages/quantic/cypress/e2e/default-2/result-quickview/result-quickview.cypress.ts
@@ -5,14 +5,19 @@ import {
 } from '../../../page-objects/search';
 import {scope} from '../../../reporters/detailed-collector';
 import {ResultQuickviewActions as Actions} from './result-quickview-actions';
-import {ResultQuickviewExpectations as Expect} from './result-quickview-expectations';
+import {
+  ResultQuickviewExpectations as Expect,
+  PreviewVariantType,
+} from './result-quickview-expectations';
+
+const variants = ['brand', 'outline-brand', 'result-action'];
 
 interface ResultQuickviewOptions {
   result: string;
   maximumPreviewSize: number;
   previewButtonIcon: string;
   previewButtonLabel: string;
-  previewButtonVariant: string;
+  previewButtonVariant: PreviewVariantType;
   tooltip: string;
 }
 
@@ -101,17 +106,6 @@ describe('quantic-result-quickview', () => {
         Expect.displaySectionPreview(true);
       });
 
-      scope('custom #previewButtonVariant', () => {
-        visitResultQuickview({
-          previewButtonVariant: 'outline-brand',
-        });
-        mockResultHtmlContent('div');
-
-        Expect.displayButtonPreview(true, 'outline-brand');
-        Actions.clickPreview('outline-brand');
-        Expect.displaySectionPreview(true);
-      });
-
       scope('custom #tooltip', () => {
         const customTooltip = 'Quick view';
         visitResultQuickview({
@@ -120,21 +114,29 @@ describe('quantic-result-quickview', () => {
         mockResultHtmlContent('div');
 
         Expect.displayButtonPreview(true);
+        Actions.hoverOverPreview();
         Expect.displayTooltip(customTooltip);
       });
     });
   });
 
-  describe('with #previewButtonVariant set to result-action', () => {
-    it('should display the quickview button as a result action', () => {
-      visitResultQuickview({
-        previewButtonVariant: 'result-action',
-      });
-      mockResultHtmlContent('div');
+  describe('the preview button with custom variants', () => {
+    variants.forEach((variantValue) => {
+      it(`should display the quick view button in the ${variantValue} variant`, () => {
+        visitResultQuickview({
+          previewButtonVariant: <PreviewVariantType>variantValue,
+        });
+        mockResultHtmlContent('div');
 
-      scope('when loading the page', () => {
-        Expect.events.receivedEvent(true, resultActionRegister);
-        Expect.displayButtonPreview(true, 'icon-border-filled');
+        scope('when loading the page', () => {
+          if (variantValue === 'result-action') {
+            Expect.events.receivedEvent(true, resultActionRegister);
+          }
+          Expect.displayButtonPreview(true);
+          Expect.displayCorrectPreviewButtonVariant(
+            <PreviewVariantType>variantValue
+          );
+        });
       });
     });
   });

diff --git a/...ntic/force-app/main/default/lwc/quanticResultAction/__tests__/quanticResultAction.test.js b/...ntic/force-app/main/default/lwc/quanticResultAction/__tests__/quanticResultAction.test.js
@@ -6,6 +6,11 @@ const functionsMocks = {
   listener: jest.fn(() => {}),
 };
 
+const selectors = {
+  tooltip: 'c-quantic-tooltip',
+  tooltipContent: 'c-quantic-tooltip > div[slot="content"]',
+};
+
 const exampleLabel = 'example label';
 const exampleSelectedLabel = 'example label on';
 const exampleIconName = 'example icon name';
@@ -91,11 +96,15 @@ describe('c-quantic-result-action', () => {
     const resultActionButton = element.shadowRoot.querySelector(
       'lightning-button-icon-stateful'
     );
-    const tooltip = element.shadowRoot.querySelector('.slds-popover_tooltip');
+    const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+    const tooltipContent = element.shadowRoot.querySelector(
+      selectors.tooltipContent
+    );
 
     expect(resultActionButton).not.toBeNull();
     expect(tooltip).not.toBeNull();
-    expect(tooltip.textContent).toBe(exampleLabel);
+    expect(tooltipContent).not.toBeNull();
+    expect(tooltipContent.textContent).toBe(exampleLabel);
     expect(resultActionButton.iconName).toBe(exampleIconName);
   });
 
@@ -190,10 +199,14 @@ describe('c-quantic-result-action', () => {
       const element = createTestComponent({...defaultOptions, selected: true});
       await flushPromises();
 
-      const tooltip = element.shadowRoot.querySelector('.slds-popover_tooltip');
+      const tooltip = element.shadowRoot.querySelector(selectors.tooltip);
+      const tooltipContent = element.shadowRoot.querySelector(
+        selectors.tooltipContent
+      );
 
       expect(tooltip).not.toBeNull();
-      expect(tooltip.textContent).toBe(exampleSelectedLabel);
+      expect(tooltipContent).not.toBeNull();
+      expect(tooltipContent.textContent).toBe(exampleSelectedLabel);
     });
 
     it('should display the correct icon', async () => {

diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultAction/quanticResultAction.html b/packages/quantic/force-app/main/default/lwc/quanticResultAction/quanticResultAction.html
@@ -1,5 +1,5 @@
 <template>
-  <div class="slds-is-relative slds-show_inline result-action_container result-action_white-container">
+  <div class="slds-is-relative slds-show_inline result-action_container result-action_white-container" onmouseenter={showTooltip} onmouseleave={hideTooltip}>
     <template if:true={loading}>
       <button class={loadingClasses} aria-label={displayedLabel}>
         <div class="slds-spinner_container slds-var-m-around_xx-small">
@@ -16,10 +16,9 @@
       </lightning-button-icon-stateful>
     </template>
     <template if:true={displayedLabel}>
-      <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left result-action_tooltip slds-fall-into-ground"
-        aria-hidden="true">
-        <div class="slds-popover__body">{displayedLabel}</div>
-      </div>
+      <c-quantic-tooltip>
+        <div slot="content">{displayedLabel}</div>
+      </c-quantic-tooltip>
     </template>
   </div>
 </template>
diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultAction/quanticResultAction.js b/packages/quantic/force-app/main/default/lwc/quanticResultAction/quanticResultAction.js
@@ -130,6 +130,21 @@ export default class QuanticResultAction extends LightningElement {
     this.dispatchEvent(resultActionEvent);
   }
 
+  showTooltip() {
+    this.tooltipComponent?.showTooltip();
+  }
+
+  hideTooltip() {
+    this.tooltipComponent?.hideTooltip();
+  }
+
+  /**
+   * @returns {Object}
+   */
+  get tooltipComponent() {
+    return this.template.querySelector('c-quantic-tooltip');
+  }
+
   /**
    * Returns the label to be displayed in the tooltip.
    */

diff --git a/...uantic/force-app/main/default/lwc/quanticResultActionStyles/quanticResultActionStyles.css b/...uantic/force-app/main/default/lwc/quanticResultActionStyles/quanticResultActionStyles.css
@@ -1,30 +1,9 @@
-.slds-nubbin_bottom-left:before,
-.slds-nubbin_bottom-left:after {
-  left: 50%;
-}
-
-.slds-popover_tooltip {
-  width: max-content;
-}
-
-.result-action_tooltip {
-  position: absolute;
-  top: -3rem;
-  left: 50%;
-  transform: translate(-50%, 0);
-}
-
 .result-action_white-container {
   background-color: white;
   display: inline-block;
   border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
 }
 
-.result-action_container:hover > .result-action_tooltip {
-  visibility: visible;
-  opacity: 1;
-}
-
 .result-action_button {
   --lwc-borderWidthThin: 0.5px;
 }

diff --git a/...ges/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.html b/...ges/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.html
@@ -1,6 +1,6 @@
 <template>
-  <div class={buttonContainerClass}>
-    <button aria-hidden={isQuickviewOpen} class={buttonClass} onclick={openQuickview} title={buttonTitle}
+  <div data-cy="quick-view-button__container" class={buttonContainerClass} onmouseenter={showTooltip} onmouseleave={hideTooltip}>
+    <button data-cy="quick-view-button" aria-hidden={isQuickviewOpen} class={buttonClass} onclick={openQuickview} title={buttonTitle}
       disabled={hasNoPreview} aria-label={buttonAriaLabelValue}>
       <template if:true={hasButtonLabel}> {previewButtonLabel} </template>
       <template if:true={hasIcon}>
@@ -10,10 +10,9 @@
       </template>
     </button>
     <template if:true={tooltip}>
-      <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left result-action_tooltip slds-fall-into-ground"
-        aria-hidden="true">
-        <div class="slds-popover__body">{tooltip}</div>
-      </div>
+      <c-quantic-tooltip>
+        <div slot="content">{tooltip}</div>
+      </c-quantic-tooltip>
     </template>
   </div>
   <template if:true={isQuickviewOpen}>

diff --git a/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js b/packages/quantic/force-app/main/default/lwc/quanticResultQuickview/quanticResultQuickview.js
@@ -229,6 +229,21 @@ export default class QuanticResultQuickview extends LightningElement {
     this._isLoading = false;
   }
 
+  showTooltip() {
+    this.tooltipComponent?.showTooltip();
+  }
+
+  hideTooltip() {
+    this.tooltipComponent?.hideTooltip();
+  }
+
+  /**
+   * @returns {Object}
+   */
+  get tooltipComponent() {
+    return this.template.querySelector('c-quantic-tooltip');
+  }
+
   get contentURL() {
     return this.state.contentURL?.includes(
       encodeURIComponent(this.result.uniqueId)

diff --git a/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.css b/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.css
@@ -1,7 +1,7 @@
 .tooltip__content {
   left: 50%;
   transform: translate(-50%, -100%);
-  top: -0.7rem;
+  top: -0.4rem;
 }
 
 .tooltip__content--visible {

diff --git a/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.html b/packages/quantic/force-app/main/default/lwc/quanticTooltip/quanticTooltip.html
@@ -1,5 +1,5 @@
 <template>
-  <div class={tooltipCSSClass} aria-hidden="true">
+  <div data-cy="tooltip" class={tooltipCSSClass} aria-hidden="true">
     <div class="slds-popover__body">
       <slot name="content"></slot>
     </div>