cornercorner
FeaturesPluginsDocs & SupportCommunityPartners

HTML Editor Test Specification

Author: Jindrich Sedek
Version: 1.17.0
Last update: 12.6.2006
Introduction: This document contains procedures for testing HTML editor. HTML module provides this set of features: syntax highlighting, code completion with help window, code folding, bracket matching and reformating.
Comment: This test specification does not verify functionality of Swing HTML browser.

Table of Contents

Test suite 1: Syntax highlighting

Purpose: This test suite checks that syntax highlighting in HTML editor is correct.
Setup: No preparation is necessary for this test suite.

#Test caseDescription
1New HTML document
  1. Invoke File | New Project... from main menu.
  2. Select Web Application project from Web category and press Next
  3. Uncheck Set Source Level to 1.4 and press Finish.
  4. Use File | New File... to create new HTML document in Web Pages location.
RESULT:Valid 4.01 HTML document should be created.
test / NewProjectWizardsTest.java ; testDefaultNewWebModWizard()
2Syntax highlighting
  1. Copy whole content of this document into clipboard.
  2. Press CTRL+A in the editor and then click Edit | Paste from main menu.
  3. Editor should replace its content with text from clipboard. Compare the syntax highlighting with this picture.
RESULT: Proper colors should be used for tags (blue), attributes (green), values (pink), comments (grey), plain text (black) and metadata (ochre).

Test suite 2: Code completion

Purpose: This test suite checks that code completion in HTML editor is working correctly.
Setup: No preparation is necessary for this test suite except having web project open.
test / testHTMLCompletion.html

#Test caseDescription
1Tags completion
  1. Use New | File/Folder... action from popup menu of Web Pages node to create new HTML document.
  2. Press CTRL+A and type <h in the editor and press CTRL+Space.
  3. All tags starting with h letter should be offered and help window displayed.
  4. Type t letter which should reduce the list of suggestions to <html> item only. Press Enter.
RESULT: Context aware code completion and help window for selected item must show up if CTRL+Space shortcut is used. Upon pressing Enter selected tag must be completed.
2Attributes completion
  1. Press Left arrow and Space which should display all attributes of <html> tag.
  2. Press Enter key.
RESULT: Code completion offers attributes based on current tag. Now there must be <html dir=""> in the editor.
3Values completion
  1. Press CTRL+Space again having cursor between quotation marks.
  2. Two values ltr and rtl must show up.
  3. Press Down arrow and Enter.
RESULT: Suitable values should be offered in code completion where appropriate. Now <html dir="rtl"> tag should be in the editor.
4HTML entities completion
  1. Type & and wait for code completion.
  2. A long list of items will be suggested. Type q character.
  3. This should reduce the list to only 1 suggestion &quot;. Press Enter
RESULT: &quot; should be automatically completed so that you have <html dir="rtl">&quot;
5End tag completion
  1. Type <a somewhere in the editor and press CTRL+SPACE.
  2. All tags starting a letter should be offered and help window displayed.
  3. Press Enter key.
RESULT: After pressing Enter the <a> should be completed, end tag </a> should be appended and the cursor shoud be set between new tags.
6Smart Enter
  1. Set the cursor between start and end tags of a tag made in last Test case.
  2. Press Enter .
RESULT:
The end tag should be moved two lines lower and cursor shoud be set on the line between start and end tags. It should be indented like on the picture.
7Help window
  1. Type <t| somewhere inside body and press CTRL+Space.
  2. Code completion will show up together with help window. Use arrows to browse through items.
  3. Verify that help window displays appropriate description for selected tag.
  4. Press Shift+Arrow Down which will scroll down the contents of help window.
  5. Verify that help window is available for both HTML tags and their attributes.
  6. Try to press Ctrl+Shift+Space. The help window without code completion will be invoked.
RESULT: Help window is opened on each code completion invocation and its contents must be scrollable.

Test suite 3: Code folding

Purpose: This test suite checks that code folding in HTML editor is working correctly.
Setup: No preparation is necessary for this test suite except having web project open.
test / HTMLFoldingTest.java

#Test caseDescription
1Folds creation
  1. Open HTML document created in the first test suite.
  2. Set cursor between text and elements words in comment at line 9 and press Enter.
RESULT: Code folds must be created for all tags occupying more than one line and comments.
2Folds collapsing
  1. Put cursor somewhere into HTML document and press CTRL+NumPad-.
  2. Verify that current tag fold was collapsed.
  3. Right click editor area and select Code Folds | Collapse Fold from popup menu.
RESULT: Code folds must get collapsed/expanded on appropriate demand via shortcut or menu. Collapsed fold is represented by [+] icon and expanded by [-] icon in the stripe next to line numbers. Besides, collapsed tag is replaced by rectangle with appropriate identification e.g. <!--...--> in case of comments. If user moves mouse over the box, window with content of tag fold is displayed.
3Folds actions
  1. Press CTRL+Shift+NumPad- to collapse all folds in HTML document.
  2. Invoke View | Code Folds | Expand All from main menu to see whole file again.
  3. Right click in editor and choose Code Folds | Collapse All Comments from popup menu.
RESULT: All multiline comments or tags in HTML document should be collapsed/expanded on appropriate demand.
4Folds window
  1. Set the cursor on the <table> tag
  2. Press CTRL+NumPad- to collapse <table> fold in HTML document.
  3. Move the mouse focus over the folded text.
RESULT:
The window showing content of the folded code should be shown.

Test suite 4: Code formatting

Purpose: This test suite checks that code formatting and tag matching functions work correctly.
Setup: No preparation is necessary for this test suite except having web project open.

#Test caseDescription
1Reformat code
  1. Press CTRL+A and then repeat Shift+Tab multiple times until whole text is moved to left.
  2. Right click editor area and select Reformat Code action from popup menu.
  3. Select a piece of code and press Shift+Tab few times to break the code formating again.
  4. Change the selection to another lines and repeat step 2.
RESULT: HTML document must be reformated correctly i.e. contents of tags must be indented 4 spaces to right. If some part of code is selected just this part should be reformated.
test / HTMLFormatterTest.java ; testReformatSample()
2Code indentation
  1. Place cursor behind some close tag e.g. </small> and press Enter.
RESULT:Cursor at new line should inherit indentation used at previous line.
3Tag matching
  1. Place cursor behind some opening tag e.g. <head> at line 4.
RESULT: Matching end tag (at line 6 in this case) should be highlighted in purple color. The same happens vice versa if you select some end tag.

Test suite 5: Settings

Purpose: This test suite checks that HTML editor specific settings are working correctly and are persistent.
Setup: No preparation is necessary for this test suite except having web project open.

#Test caseDescription
1Folding switch
  1. Invoke Tools | Options from main menu.
  2. Press Advanced Options button at the bottom of the dialog.
  3. Select Editing | Editor Settings | HTML Editor node.
  4. Uncheck Code Folding Enabled option.
  5. Push Close button.
RESULT:An extra stripe for folding widgets gets removed and code can't be folded.
2Folding update
  1. Invoke Tools | Options from main menu.
  2. Press Advanced Options button at the bottom of the dialog.
  3. Select Editing | Editor Settings | HTML Editor node.
  4. Set Code Folding Update Interval to 10000 milliseconds.
  5. Check Code Folding Enabled option and press Close button.
RESULT: Code folding stripe appears immediatelly but code folds are computed after 10 seconds since code folding was turned on.
3Persistence
  1. Invoke Tools | Options from main menu.
  2. Press Advanced Options button at the bottom of the dialog.
  3. Select Editing | Editor Settings | HTML Editor node.
  4. Uncheck Code Folding Enabled option again and press Close button.
  5. Invoke File | Exit from main menu and restart NetBeans.
  6. Repeat steps 1 and 2.
RESULT: Both settings are not set to default values i.e. code folding is turned off and its update interval remains as 10000 ms.
4Coloring customization
  1. Invoke Tools|Options from main menu.
  2. Set the Fonts & Colors tab.
  3. Select HTML language.
  4. Choose the Character category.
  5. Set the Foreground color to Cyan. You shoud see the change in preview window.
  6. Press Close button.
  7. Type &amp; somewhere in the code editor.
RESULT:
The text coloring should be changed and all HTML entities should be writen by cyan color.
Generated: 2006 07 03 05:26
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems