Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-150906

Implement a DXP UI component to render walkthrough steps

    Details

    • Type: Story
    • Status: Closed
    • Priority: Minor
    • Resolution: Completed
    • Affects Version/s: None
    • Fix Version/s: Master
    • Component/s: JS APIs and Utilities
    • Labels:
      None

      Description

      Goal of this task is to create a DXP high-level react component in charge of:

      • Building/configuring each specific walkthrough step for the current page, according to the JSON specification that applies to it (LPS-150776)
      • Manage state of the walktrhough for the page: current step, current interaction mode (popover/hotspot)

      Walktrhough steps managed by this component will be compositions of existing Clay components such as the ClayPopover or OverlayMask

      Any additional component required to implement the walktrhough steps will be added to Clay in a new ticket in the current epic (Hotspot)

      Acceptance criteria

      • DXP includes a Walkthrough react component that takes a JSON object, already filtered with only the steps applicable to the current page
      • Component will parse the JSON and set the initial state as first step in the list, then render it. By default, in this iteration, the initial step will be rendered in hotspot mode
      • Component will render the current step as follows
        • If mode is hotspot, the <hotspot> will be rendered next to the current step's nodeToHighlight, according to the hotspot positioning policy defined in the JSON. If that node is not unique, it will use the first occurrrence and report a warning in the console
        • If mode is popover, component will render an overaly mask uncovering the current step's nodeToHighlight. If needed, vertical scroll will be made to position the nodeToHighlight in the visible area. Then, the popover will be rendered next to the highlighted element, according to the popover positioning policy defined in the JSON. 
        • Popover will contain a title and the content specified in the JSON (no translations supported in this iteration). Also, depending on the current step, popover will include buttons as per the design (first step, intermediate steps, last step)
      • When closing the popover, component will switch to hotspot mode in the current step
      • When clicking on the hotspot,  component will switch to popover mode in the current step

       

      Test Scenarios:

      Requirement Test Scenarios Covered by frontend/backend Unit Test? Test Priority (business impact)  Chrome
      Pass/Fail
      Sample walkthrough component that renders a clickable hotspot element on page as initial state. Given: frontend-js-components-sample-web deployed to test page
      When: Navigate to Walkable tab on sample portlet
      Then: Hospot element is present
      And Then: popover element is not present
      no 5-critical  
      When clicking on the hotspot, component will switch to popover mode in the current step. Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      When: Click hospot element
      Then: popover is present
      And Then: hotspot element is not present
      no 5-critical  
      When closing popover, component will switch to hotspot mode in the current step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: Click hospot element
      When: Click close icon
      Then: hotspot element is present
      no 5-critical  
      When closing popover, component will switch to hotspot mode in the current step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: Click hospot element
      When: Click on next step
      And When: Click on close icon
      Then: hotspot element is present on the 2nd element
      no 4-major  
       In popover mode, component highlights the element in current step with either of the following: 1. The element is outlined with a shadow 2. The element does not have a shadow, and outside the element has a dark background overlay Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      When: Click hospot element
      Then: element is outlined with a shadow (depends on how the portlet is configured, may need to go to subsequent popovers)
      no 2-low  
      A dark background overlay can be toggled per step with JSON. Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      When: Click hospot element
      Then: outside the element has a dark background overlay (depends on how the portlet is configured, may need to go to subsequent popovers to check)
      no 3-medium  
      In popover mode, popover contains a title and content specified in JSON.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      When: Click hospot element
      Then: title text is present on popover
      And Then: content is present on popover
      no 5-critical  
      In popover mode, popover contains a button to transition to previous step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: popover mode
      When: navigate to 2nd step popover
      Then: Then previous step button is present
      And When: click on previous step button
      And Then: 1st step popover is present
      And Then: 2nd step popover is not present
      no 5-critical  
      In popover mode, popover contains a button to transition to next step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: popover mode When: on 1st step popover
      Then: previous step button is not present
      And Then: the primary button next step is present
      And When: click on next step button Then: 2nd step popover is present And Then: 1st step popover is not present
      no 5-critical  
      In popover mode, popover contains a button to transition to next step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: popover mode
      When: on 1st step popover
      And When: Click on next steps until final step
      Then: Able to reach final step 5
      And Then: primary button is present
      And Then: secondary button previous step is present
      no 5-critical  
      In popover mode, popover contains a button to transition to next step.  Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      And Given: popover mode
      When: on 1st step popover
      And When: Click on all next steps
      Then: transitions to hotspot mode
      And Then: hotspot is on final element
      And Then: popover is not present
      no 5-critical  
       If the JSON file includes an element that does not exist on the page, when the walkthrough transitions to that step, then there would be an error message displayed to the user. User can still continue to previous/next steps. Given: JSON file includes an element that does not exist on the page/sample portlet
      And Given: frontend-js-components-sample-web deployed to test page
      And Given: Navigate to Walkable tab on sample portlet
      When: popover mode transitions to the step that has no element
      Then: error message is displayed
      no 3-medium  

      Exploratory Test Scenarios:

      Requirement Test Scenarios Covered by frontend/backend Unit Test? Test Priority (business impact)  Chrome (latest)
      Pass/Fail
      Firefox (latest)
      Pass/Fail
      Safari (latest)
      Pass/Fail
      Edge (latest)
      Pass/Fail
        Given sample walkthrough component (Walkthrough tab in frontend-js-components-sample-web), check basic functionality and visually ok. 10 mins exploratory each browser. no  3-medium  n/a      
      In hotspot mode, the hotspot element will be rendered next to current step and is visibly contained within boundaries of the page. Manipulate browser page and location of hotpost element to try and break the UI no 3-medium n/a   n/a  
      In popover mode, popover is visibly contained within boundaries of the page, regardless of where the element is positioned on the page. manipulate browser page and location of popover element to try and break UI no 3-medium   n/a    n/a

        Attachments

          Issue Links

          There are no Sub-Tasks for this issue.

            Activity

              People

              Assignee:
              team-frontend-infrastucture Product Team Frontend Infrastructure
              Reporter:
              daniel.sanz Daniel Sanz
              Engineering Assignee:
              Diego Nascimento
              Recent user:
              Felipe Lins
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  Master