Inline Edit QA Test Plan - Simple Text

QA Tests

Protocol
Perform the following tests using each browser/system environment

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

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-6 and 7-12 in order.

Site
Demo

Mouse

Test 1: Mouseover

• Procedure
  1. Open the browser and navigate to one of the specified URLs
  2. Using the mouse, place the cursor over one of the inline editable texts

• Expected Results
  • The inline editable text should be highlighted
  • The cursor should be a pointer cursor (e.g. hand)
  • After hovering the cursor over the inline edit field for about 2 seconds, a message saying "Select or press Enter to edit" should appear.

Test 2: Mouseover (off and on)

• Procedure
  1. Complete Test 1
  2. Move the cursor away from the inline editable field
  3. Move the cursor back over the inline editable field
• Expected Results
  • The highlighting on the inline edit field should be removed, when the cursor is removed
  • The inline edit field should be highlighted when the cursor is placed over it again

Test 3: Mouse, Activate Inline Edit Field

• Procedure
  1. Complete Test 2
  2. Using the mouse, click on the inline edit field
• Expected Results
  • The inline editable text should change into an editable text field containing the current content
  • The cursor should be a text cursor (e.g. i-bar)
  • Instruction text "Escape to cancel, Enter or Tab when finished" should be displayed below the text field

Test 4: Mouse, Edit

• Procedure
  1. Complete Test 3
  2. Using the keyboard, type an 'a' at the end of the text
  3. Using the mouse, click a blank spot outside of the editable text field
• Expected Results
  • If "Edit this" in italics was the original text, the words "Edit this." should be replaced with the letter 'a'.
  • If editing a field with existing content, the editable text field should change back to the view mode of the inline edit field, containing the same content with an 'a' appended to the end
  • An undo control should appear next to the inline edit field

Test 5: Mouse, Undo Edit

• Procedure
  1. Complete Test 4
  2. Using the mouse, click on the 'undo' link
• Expected Results
  • The content of the inline edit field should return to its initial value
  • The undo control should be replaced by a redo control

Test 6: Mouse, Redo Edit

• Procedure
  1. Complete Test 5
  2. Using the mouse, click on the redo control
• Expected Results
  • The content of the inline edit field should return to the value set in test 4
  • The redo control should be replaced by an undo control
• Stop Test
  • Refresh the browser to return the page to its initial state

Keyboard

Test 7: Keyboard, Focus on Inline Edit Field

• Procedure
  1. Open the browser and navigate to one of the specified URLs
  2. Using the keyboard, tap the 'tab' key until focus is on one of the inline edit fields
• Expected Results
  • The inline edit field should be highlighted

Test 8: Keyboard, Focus (On/Off) Inline Edit Field

• Procedure
  1. Complete Test 7
  2. Tap the 'tab' key to move focus off of the inline edit field
  3. Tap the 'tab' key again, until focus is back on the inline edit field
• Expected Results
  • The highlighting on the inline edit field should be removed when focus is lost
  • The inline edit field should be highlighted when focus is on it again

Test 9: Keyboard, Activate Inline Edit Field

• Procedure
  1. Complete Test 8
  2. Using the keyboard, tap the 'enter' or 'space' key
• Expected Results
  • The inline editable text should change into an editable text field containing the current content.
  • Instruction text "Escape to cancel, Enter or Tab when finished" should be displayed below the text field

Test 10: Keyboard, Edit

• Procedure
  1. Complete Test 9
  2. Using the keyboard, type an 'a' at the end of the text
  3. Using the keyboard, tap the 'enter' or 'tab' key
• Expected Results
  • If "Edit this" in italics was the original text, the words "Edit this." should be replaced with the letter 'a'.
  • If editing a field with existing content, the editable text field should change back to the view mode of the inline edit field, containing the same content with an 'a' appended to the end
  • An undo control should appear next to the inline edit field

Test 11: Keyboard, Undo

• Procedure
  1. Complete Test 10
  2. Using the keyboard, tap the 'tab' key until focus is on the undo control
  3. Using the keyboard, tap the 'enter'
• Expected Results
  • The content of the inline edit field should return to its initial value
  • The undo control should be replaced by a redo control

Test 12: Keyboard, Redo

• Procedure
  1. Complete Test 11
  2. Using the keyboard, tap the 'tab' key until focus is on the redo control
  3. Using the keyboard, tap the 'enter'
• Expected Results
  • The content of the inline edit field should return to the value set in test 10
  • The redo control should be replaced by an undo control
• 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
Demo

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: Double Click

• Procedure
  1. Open the browser and navigate to one of the specified URLs
  2. Using the mouse, click one of the inline edit fields
  3. Using the mouse, double click one of the words
• Expected Results
  • The entire word should be selected
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 2: Triple Click

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse, click one of the inline edit fields
  3. Using the mouse, triple click inside the inline edit field
• Expected Results
  • All of the text in the inline edit field should be selected
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 3: Edit With Letters

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse, click one of the inline edit fields
  3. Edit the text using only alphabetic characters (a - z, A-Z)
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 4: Edit With Numbers

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse, click one of the inline edit fields
  3. Edit the text using only numbers (0-9)
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 5: Edit With Symbols

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse, click one of the inline edit fields
  3. Edit the text using only punctuation and other such symbols (e.g. '/', '$' )
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 6: Edit with Non-Standard Characters/Symbols

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse click one of the inline edit fields
  3. Edit the text using only non-standard characters and symbols (see examples here: http://www.alanwood.net/unicode/miscellaneous_symbols.html and https://emojipedia.org)
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• Stop Test
  • Refresh the browser to return the page to its initial state

Test 7: Edit With Characters Separated By Spaces

• Procedure
  1. Open the browser and navigate to the specified URL
  2. Using the mouse, click one of the inline edit fields
  3. Edit the text by typing in some number of characters separated by spaces.
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• 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: Empty Field

• Procedure
  1. Open the browser and navigate to one of the specified URLs
  2. Using the mouse, select click one of the inline editable texts
  3. Delete all input values from the editable text field
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be a greyed invitation text saying "Edit this"
  • An undo control should appear next to the inline edit field
• 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, select click one of the inline editable texts
  3. Edit the text with a large number (e.g. 1000 characters) of characters without any gaps between ( generator )
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• 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, select click one of the inline editable texts
  3. Edit the text with a large number (e.g. 1000 characters) of characters with gaps between ( generator )
  4. Using the mouse, click on a blank spot outside of the editable text field
• Expected Results
  • The content of the inline edit field should be changed to the new value
  • An undo control should appear next to the inline edit field
• 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

*no tests yet*

Validation

________________________________________________________

Description
Tests to ensure that specifications are being met

Protocol
Perform these tasks on the following site.

Site
Demo

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