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

Automation Test Creation | LPS-150906 Implement a DXP UI component to render walkthrough steps

    Details

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

      Description

      Create test automation to validate the critical test scenarios/cases of the related story.

      The focus of this task is to implement the CRITICAL and MAJOR tests of the parent epic, but if you believe that can and have time to implement the lower priority tests please, create one more subtask to it, and go ahead! 

      • Create a subtask for each testcase
      • Assign subtask to yourself
      • Send to liferay-frontend and request QA reviewer
      • Close subtask when merged

       

       

       

      Test Scenarios:

      Requirement Test Scenarios Covered by frontend/backend Unit Test? Test Priority (business impact)  Test Filename Testcase name
      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: Hotspot element is present
      And Then: popover element is not present
      no 5-critical  WalkthroughHotspot WillRenderAsInitialState
      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 hotspot element
      Then: popover is present
      And Then: hotspot element is not present
      no 5-critical WalkthroughHotspot  WillDisplayPopoverWhenClicked
      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 hotspot element
      When: Click close icon
      Then: hotspot element is present
      no 5-critical  WalkthroughPopover CanBeClosed
      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 hotspot element
      When: Click on next step
      And When: Click on close icon
      Then: hotspot element is present on the 2nd element
      no 4-major WalkthroughPopover  WhenClosedCanTransitionToHotSpotModeOnCurrentStepElement
       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 hotspot element until Step 4
      Then: element is outlined with a shadow
      no 2-low WalkthroughPopover  CanHaveAShadowAroundElement
      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 hotspot element
      Then: outside the element has a dark background overlay
      no 3-medium WalkthroughPopover  CanHaveADarkBackgroundOverlay
      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 hotspot element
      Then: title text is present on popover
      no 5-critical  WalkthroughPopover CanDisplayTitle
      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 hotspot element
      Then: title text is present on popover
      no   5-critical WalkthroughPopover   CanDisplayContent
      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
      And Given: Click hotspot element
      When: Click through all primary step buttons
      Then: Step number is displayed consecutively
      no  4-major  WalkthroughPopover  CanDisplayStepNumber 
      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 WalkthroughPopover  CanDisplayPreviousButtonOnIntermediateStep
      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 WalkthroughPopover  FirstStepDoesNotHavePreviousStepButton
      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 WalkthroughPopover  IntermediateStepHasPreviousAndNextStepPresent
      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 WalkthroughPopover  FinalStepCanTransitionToHotSpotMode
       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 WalkthroughPopover  CanDisplayErrorMessageIfElementDoesNotExist

       

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              susan.chen Susan Chen
              Reporter:
              john.co John Co
              Recent user:
              Susan Chen
              Participants of an Issue:
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package