Inline Edit QA Test Plan - Rich Text

Inline Edit QA Test Plan - Rich Text

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

QA Tests


ProtocolPerform 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.

Inline Edit Jira Filter


Unit Test

Protocol

 Launch the following website to execute unit tests.

Site
http://build.fluidproject.org/infusion/tests/component-tests/inlineEdit/html/InlineEdit-test.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-7 and 8-14 in order.

Site
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/

Mouse

Test 1: Mouseover

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, hover over the 'Edit' link
  • Expected Results
    • A message saying "Use the Edit link to make changes." should appear

Test 2: Mouse, Enter Edit Mode

  • Procedure
    1. Complete Test 1
    2. Using the mouse, click the 'Edit' link
  • Expected Results
    • The content should now be in edit mode,
    • A rich-text editor should be open
    • The 'save' and 'cancel' buttons should be visible
    • The pointer should be an i-bar

Test 3: Mouse, Edit

  • Procedure
    1. Complete Test 2, leaving the content in edit mode
    2. Using the mouse, click in the content area to place the cursor in front of the first character
    3. Using the keyboard, tap the 'a' key
  • Expected Results
    • The content should remain in edit mode, with an 'a' at the beginning

Test 4: Mouse, Cancel

  • Procedure
    1. Complete Test 3, leaving the content in edit mode
    2. Using the mouse, click the cancel button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should not have saved the edit. The 'a', added in Test 3, should not be present.

Test 5: Mouse, New Edit

  • Procedure
    1. Complete Test 4
    2. Using the mouse, click the 'Edit' link
    3. Using the mouse, click in the content area to place the cursor in front of the first character
    4. Using the keyboard, tap the 'b' key
  • Expected Results
    • The content should be open in edit mode, with the rich-text editor, save button, and cancel button. There Should be no 'a' at the front of the content
    • The content should remain in edit mode, with a 'b' at the beginning

Test 6: Mouse, Save

  • Procedure
    1. Complete Test 5
    2. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value. The 'b', added in Test 5, should still be present.

Test 7: Verify Edit

  • Procedure
    1. Complete Test 6
    2. Using the mouse, click the 'Edit' link
    3. Using the mouse, click the rich-text inline edit field
  • Expected Results
    • The content should now be in edit mode,
    • A rich-text editor should be open
    • The 'save' and 'cancel' buttons should be visible. There should be a 'b' at the front of the content
  • Stop Test
    • Refresh the browser to return the page to its initial state

Keyboard

Test 8: Keyboard, Enter Edit Mode

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the keyboard, tap the 'tab' key until the 'Edit' link has focus
    3. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The content should now be in edit mode
    • A rich-text editor should be open
    • The 'save' and 'cancel' buttons should be visible

Test 10: Keyboard, Edit

  • Procedure
    1. Complete Test 9
    2. Using the keyboard, tap the 'a' key
  • Expected Results
    • The content should remain in edit mode, with an 'a' where the caret was

Test 11: Keyboard, Cancel

  • Procedure
    1. Complete Test 10, leaving the content in edit mode
    2. Using the keyboard, tap the 'tab' key until the 'cancel' button has focus
    3. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should not have saved the edit. The 'a', added in Test 9, should not be present.

Test 12: Keyboard, New Edit

  • Procedure
    1. Complete Test 11
    2. Using the keyboard, tap the 'tab' key until the 'Edit' link has focus
    3. Using the keyboard, tap the 'enter' key
    4. Using the keyboard, tap the 'b' key
  • Expected Results
    • The content should be open in edit mode, with the rich-text editor, save button, and cancel button. The 'a' that you entered in Test 10 should not be there
    • The content should remain in edit mode, with a 'b' where the caret was

Test 13: Keyboard, Save

  • Procedure
    1. Complete Test 12
    2. Using the keyboard, tap the 'tab' key until the 'save' button has focus
    3. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value. The 'b', added in Test 12, should still be present.

Test 14: Keyboard, Verify Edit

  • Procedure
    1. Complete Test 13
    2. Using the keyboard, tap the 'tab' key until the 'Edit' link has focus
    3. Using the keyboard, tap the 'enter' key
  • Expected Results
    • The content should now be in edit mode
    • A rich-text editor should be open
    • The 'save' and 'cancel' buttons should be visible. There should be a 'b' at the front of the content
  • Stop Test
    • Refresh the browser to return the page to its initial state

Assistive Technology (AT)

Description
Tests to ensure compatibility with Assistive Technologies.

Protocol
Perform these tasks on the following site.

Site
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/

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: JAWSNVDAVoiceOverOrca
        2. Built in AT features: WindowsMacLinuxiOSAndroid
        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
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/

Test 1: Edit With Letters

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text using only alphabetic characters (a - z, A-Z)
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 2: Edit With Numbers

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text using only numbers (0-9)
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 3: Edit With Symbols

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text using only punctuation and other such symbols (e.g. '/', '$' )
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 4: Edit With Non-Standard Characters/Symbols

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text using only non-standard characters and symbols (see examples here: http://www.alanwood.net/unicode/miscellaneous_symbols.html)
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 5: Edit With Special Characters

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Attempt to edit the text by pasting in text containing special characters (e.g. new line, tab)
    4. Using the mouse, click the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 6: Edit With Characters Separated by Spaces

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text by typing in some number of characters separated by tabs or spaces.
    4. Using the mouse, click the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 7: Edit With Code/Script

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Attempt to edit the text by pasting in some string of code
    4. Using the mouse, click the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value, without executing any of the code
  • 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
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/

Test 1: Empty

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Delete all input values from the content area
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should now read: "Click Edit"
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 2: Many Characters (Not Separated)

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text with a large number (e.g. 1000 characters) of characters without any gaps ( generator )
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value, with the text wrapping to new lines as necessary
  • Stop Test
    • Refresh the browser to return the page to its initial state

Test 3: Many Characters (Separated)

  • Procedure
    1. Open the browser and navigate to the specified URL
    2. Using the mouse, click the 'Edit' link
    3. Edit the text with a large number (e.g. 1000 characters) of characters with gaps between ( generator )
    4. Using the mouse, click on the 'save' button
  • Expected Results
    • The content should have left edit mode
    • The rich-text editor should have closed
    • The 'save' and 'cancel' buttons should not be present
    • The content should display the new value, with the text wrapping to new lines appropriately
  • 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
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/


*no tests yet*

Validation

Description
Tests to ensure that specifications are being met

Protocol
Perform these tasks on the following site.

Site
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/

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
http://build.fluidproject.org/infusion/tests/manual-tests/components/inlineEdit/rich/