Details

    • Technical Testing
    • Status: Closed
    • Minor
    • Resolution: Completed
    • None
    • None
    • JS APIs and Utilities
    • None
    • 1
    • S05E03 - Tibia, S05E04 - Half Life, S05E05 - Tetris

    Description

      Context

      When the story/epic has started development phase, please...

      1. Hold a Kickoff meeting with Devs/PM/Design/Owners
      2. Debate/ask questions to the team about your doubts about how to test this epic
      3. Create Test scenarios / test cases
      4. Ask the team to review for feedback and check if we need to add more test 
      5. You may use the following as a template for topics to ask/clarify  spreadsheet
        1. Remember it is one template, so feel free to add more questions/information, remove unnecessary questions/information

      Output

      1. Our table with the Test scenarios / test cases to be validated in the validation phase.
        1. Follow the example that we have in this ticket - LPS-121721.
      2. After reviewed by team, add finalized table to parent story/epic description
      3. Add test cases to Test Map

      Acceptance criteria:

      1. Sample walkthrough component that renders a clickable hotspot element on page as initial state.
      2. In hotspot mode, the hotspot element will be rendered next to current step and is visibly contained within boundaries of the page.
      3. When clicking on the hotspot, component will switch to popover mode in the current step.
      4. When closing popover, component will switch to hotspot mode in the current step.
      5. 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
      6. In popover mode, popover is visibly contained within boundaries of the page, regardless of where the element is positioned on the page.
      7. In popover mode, popover contains a title and content specified in JSON.
      8. In popover mode, popover contains a button to transition to previous step.
      9. In popover mode, popover contains a button to transition to next step.
      10.  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.
      11. A dark background overlay can be toggled per step with JSON.
      12. Can add a JS snippet to any page (using the Javascript textarea under page configuration) which does the following:
        • Requires the walkthrough component
        • Renders it in the current page with a piece of JSON

      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

        Activity

          People

            john.co John Co
            john.co John Co
            Kiyoshi Lee Kiyoshi Lee
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Packages

                Version Package