Reorderer QA Test Plan - Layout Reorderer

Owned by Justin Obara
Last updated: Jun 24, 2021
7 min read

Reorderer QA Test Plan - Layout Reorderer

Environments

BrowserVersion
ChromeLatest Stable Release
FirefoxLatest Stable Release
MS EdgeLatest Stable Release
Safari [fluid:1]Latest Stable Release

[fluid:1] keyboard a11y can be slightly improved if you select the "all controls" option from "Keyboard Shortcuts" under the "Keyboard & Mouse" settings. May also need to use "option + tab" for tab navigation.

General QA Guidelines

General Use

  • Does the tool behave the way that you would expect
  • Are you surprised by anything
  • Does something take longer than you would expect
  • When the tool does something unexpected or takes too long to do something, does the tool provide appropriate feedback
On This Page
Specification

QA Tests

Protocol
Perform the following tests using each browser/system environment

Report issues at: http://issues.fluidproject.org/secure/Dashboard.jspa

Please search for issues before reporting them, so as to limit the number of duplicate entries.

Reorderer Jira Filter
Layout Customizer Jira Filter


Unit Test

Protocol
Launch the following website to execute unit tests.

Site
http://build.fluidproject.org/infusion/tests/component-tests/reorderer/all-tests.html

State Tests

Description
Ensures that the component properly traverses through the various states. 

Protocol
Perform these tasks on the following site, perform the tests 1-4 and 5-7 in order.

Site
Demo

Mouse 

Test 1: Mouseover

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
  • Expected Results
    • The pointer should be a move cursor (cross or hand)

Test 2: Mouse, Pickup Avatar

  • Procedure
    1. Complete Test 1
    2. Using the mouse, press and hold the 'left-mouse-button' down
    3. Using the mouse, drag slightly to the right
  • Expected Results
    • An avatar (representing the portlet) should be created
    • The avatar should remain under the pointer as you drag around

Test 3: Mouse, Move Avatar

  •  Procedure
    1. Complete Test 2
    2. Using the mouse, drag the avatar around the screen
  • Expected Results
    • Notice that drop targets appear as you move over valid drop points

Test 4: Mouse, Drop Avatar

  • Procedure
    1. Complete Test 3
    2. Using the mouse, release the 'left-mouse-button' over a drop target
  •  Expected Results
    • The avatar should drop and move the portlet to the new location
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move

Keyboard 

Test 5: Keyboard, Focus

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the keyboard, tap the 'tab' key until one of the portlets has focus
  • Expected Results
    • The styling of the element should change to indicate that the portlet has focus

Test 6: Keyboard, Navigate Portlets

  • Procedure
    1. Complete Test 5
    2. Using the keyboard, tap the 'i', 'j', 'k', 'm', or an 'arrow'
  • Expected Results
    • The keyboard focus styling should move to the other portlet
      • 'i' or 'up arrow' to move up
      • 'm' or 'down arrow' to move down
      • 'j' or 'left arrow' to move left
      • 'k' or 'right arrow' to move right

Test 7: Keyboard, Move Portlet

  •  Procedure
    1. Complete Test 6
    2. Using the keyboard, hold the 'ctrl' key (On Mac OS you'll need to also hold the 'command/Apple' key when using the arrows)
    3. Using the keyboard, while still holding down the 'ctrl' key use the navigation keys (see Test 6) to move the portlet
  • Expected Results
    • The portlet should move with the presses of the navigation key
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move

Assistive Technology (AT)

Description
Tests to ensure compatibility with Assistive Technologies.

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: AT Tests

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the state tests as a guide, attempt to navigate through each state of the system
      1. Example ATs
        1. Screen Readers: JAWS, NVDA, VoiceOver, Orca
        2. Built in AT features: Windows, Mac, Linux, iOS, Android
        3. Others ATs: Speech Recognition, Screen Magnifiers, switch access, etc.
  • Expected Results
    • All states of the system should be reachable and usable while using the AT

Task Oriented Functional Tests

Description
Ensures that the component is able to handle expected input.

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: Move Portlet

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar around the screen
    5. Using the mouse, release the 'left-mouse-button' over a drop target
  •  Expected Results
    • The avatar should drop and move the portlet to the new location
    • The other porlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 2: Scroll Page

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Adjust the browser size so that a vertical scroll bar appears
    3. Using the mouse, hover over the title bar of one of the unlocked portlets
    4. Using the mouse, press and hold the 'left-mouse-button' down
    5. Using the mouse, attempt to drag the avatar to a drop target that is currently off screen
    6. Using the mouse, release the 'left-mouse-button' over a drop target
  •  Expected Results
    • The screen should scroll, revealing the drop targets which were off screen
    • The avatar should drop and move the portlet to the new location
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state
    • Reset your browser size

Test 3: Move Portlet Below Locked Portlet

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar below the locked portlet
    5. Using the mouse, release the 'left-mouse-button' over a drop target
  •  Expected Results
    • The avatar should drop and move the portlet to the new location
    • The other porlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Boundary Tests

Description
Ensures proper functionality at the input limits 

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: Move to First Position

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar above the top portlet in the right column
    5. Using the mouse, release the 'left-mouse-button' over the drop target
  •  Expected Results
    • The avatar should drop and move the portlet to the new location
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 2: Move to Last Position

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar below the bottom portlet in the right column
    5. Using the mouse, release the 'left-mouse-button' over a drop target
  •  Expected Results
    • The avatar should drop and move the portlet to the new location
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 3: Move to an Empty Column

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets on the right hand side
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar below the bottom portlet in the left column
    5. Using the mouse, release the 'left-mouse-button' over a drop target
    6. Repeat steps 2 - 5 until all of the portlets from the right column are in the left column
    7. Follow steps 2 - 5 again, but this time move a portlet from the left column into the empty right column
  •  Expected Results
    • The avatar should drop and move the portlet to the new location at the top of the right column
    • The other portlets should shift to fill in the empty space where the portlet was originally located
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 4: Drop, not on a valid drop target

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar onto some whitespace in the browser
    5. Using the mouse, release the 'left-mouse-button'
  •  Expected Results
    • A drop target should always be present
    • The avatar should drop to the location of the drop target
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 5: Drop out of browser

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Adjust the size of the browser so that the desktop is visible
    3. Using the mouse, hover over the title bar of one of the unlocked portlets
    4. Using the mouse, press and hold the 'left-mouse-button' down
    5. Using the mouse, drag the avatar out of the browser
    6. Using the mouse, release the 'left-mouse-button'
  •  Expected Results
    • The avatar should drop to the location of the drop target
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test-to-Fail

Description
Tests which should cause errors or not be accepted as input 

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: Mouse, Move Portlet Above Locked Portlet

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of one of the unlocked portlets
    3. Using the mouse, press and hold the 'left-mouse-button' down
    4. Using the mouse, drag the avatar above the locked portlet
    5. Using the mouse, release the 'left-mouse-button' over a drop target
  • Expected Results
    • As the avatar is hovering over the locked portlet, an error message saying "This element can not be placed here. The element underneath is locked." should appear
    • The avatar should drop to the location of the drop target
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 2: Keyboard, Move Portlet Above Locked Portlet

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the keyboard, tap the 'tab' key until one of the portlets has focus
    3. Using the keyboard, tap the 'i', 'j', 'k', 'm', or an 'arrow' until the portlet, directly below the locked portlet, has focus
    4. Using the keyboard, hold the 'ctrl' key (on a Mac use the 'Apple' key)
    5. Using the keyboard, while still holding down the 'ctrl' key use the navigation keys (see step 3) to attempt to move the portlet above the locked portlet
  • Expected Results
    • On attempting to move the portlet above the locked portlet, an error message saying "This element can not be placed here. The element underneath is locked." should appear
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 3: Move Locked Portlet

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the title bar of the locked portlet
    3. Using the mouse, press and hold the 'left-mouse-button' down
  •  Expected Results
    • No avatar should be created
    • The locked portlet should not move
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 4: Keyboard, Attempt to tab through all portlets

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the keyboard, tap the 'tab' key until one of the portlets has focus
    3. Using the keyboard, tap either 'shift-tab' or 'tab' to navigate through the portlets
  • Expected Results
    • On pressing 'shift-tab' or 'tab' focus should not be on any portlet. Only the 'i', 'j', 'k', 'm', or an 'arrow' keys should move focus between portlets.
  • Stop Test
    • Refresh the browser to return the page to its initial state

Validation

Description
Tests to ensure that specifications are being met

Protocol
Perform these tasks on the following site.

Site
Demo

Test 1: HTML Validation

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. For each state of the system, validate the HTML markup
      1. Tools for validation
        1. Nu HTML Checker Bookmarklet
        2. Validity Chrome Extension
        3. Lighthouse Dev Tool
  • Expected Results
    • All of the HTML markup should properly validate in all states.
  • Stop Test
    • Refresh the browser to return the page to its initial state
    • Quit the tool you are using to validate

Test 2: WCAG Validation

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. For each state of the system (see: State Tests), ensure that the WCAG guidelines are being met to at least AA level
      1. Tools for validation (Note: Automated tools are not yet capable of catching all issues. It is important to go through the checklist, making use of automated tools where possible, and manual processes otherwise).
        1. WCAG AODA accessibility audit checklist
        2. tota11y Bookmarklet
        3. Lighthouse Dev Tool
  • Expected Results
    • Passes WCAG 2.0 AA requirements
  • Stop Test
    • Refresh the browser to return the page to its initial state
    • Quit the tool you are using to validate

Ad-hoc

Description
Improvised tests for quickly discovering critical issues, and uncovering ones that may be outside of formalized testing.

Protocol
Attempt to use the tool in various situations, using your imagination and freedom to explore the interface and interactions.

Site
Demo