Front Page

User FAQ
Developer FAQ
Community Docs
Development
Quality
Dream Team
Popular Projects
Bug DashBoard
Hudson
Sources
Nightly
Wiki Etiquette
Formatting Rules
Terms Of Use
Unlinked Pages
Undefined Pages
Page Index
Recent Changes
Find Page

[RSS]

HTML Editor Test Specification for Netbeans 6.0

Author: Jindrich Sedek
Version: 1.17.0
Last update: 19.7.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.
Comments:

Table of Contents

Test suite: Syntax highlighting

Purpose: This test suite checks that syntax highlighting in HTML editor is correct.
Setup: No preparation is necessary for this test suite.
  1. New 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.
    • EXPECTED RESULT: Valid 4.01 HTML document should be created.
  2. Syntax highlighting
    1. Copy whole content of this document(info) 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.
    • EXPECTED RESULT: Proper colors should be used. See ui colors specification

Test suite: 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
  1. Tags 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.
    • EXPECTED 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.
  2. Attributes completion
    1. Press Left arrow and Space which should display all attributes of <html> tag.
    2. Press Enter key.
    • EXPECTED RESULT: Code completion offers attributes based on current tag. Now there must be <html dir=""> in the editor.
  3. Values 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.
    • EXPECTED RESULT: Suitable values should be offered in code completion where appropriate. Now <html dir="rtl"> tag should be in the editor.
  4. HTML 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.
    • EXPECTED RESULT: &quot; should be automatically completed so that you have <html dir="rtl"> &quot;
  5. End 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.
    4. After pressing Enter start tag <a> should be completed and end tag </a> should be offered in new completion window. Press Enter.
    • EXPECTED RESULT: End tag </a> should be appended and the cursor shoud be set between new tags.
  6. Smart Enter
    1. Set the cursor between start and end tags of a tag made in last Test case.
    2. Press Enter .
    • EXPECTED 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.
  7. Help 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 CTRL+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.
    • EXPECTED RESULT: Help window is opened on each code completion invocation and its contents must be scrollable.

Test suite: 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
  1. Folds creation
    1. Open HTML document(info) created in the first test suite.
    2. Set cursor between text and elements words in comment at line 9 and press Enter.
    • EXPECTED RESULT: Code folds must be created for all tags occupying more than one line and comments.
  2. Folds 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.
    • EXPECTED 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.
  3. Folds 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 from popup menu.
    • EXPECTED RESULT: All should be collapsed.
  4. Folds 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.
    • EXPECTED RESULT: The window showing content of the folded code should be shown.

Test suite: 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.
  1. Reformat 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.
    • EXPECTED 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.
  2. Code indentation
    1. Place cursor behind some close tag e.g. </small> and press Enter.
    • EXPECTED RESULT: Cursor at new line should inherit indentation used at previous line.
  3. Tag matching
    1. Place cursor behind some opening tag e.g. <head> at line 4.
    • EXPECTED 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: Embedded CSS style

Purpose: This test suite checks that embedded CSS style can be well edited in HTML.
Setup: No preparation is necessary for this test suite except having web project open.
  1. Creating embedded CSS style
    1. Use File | New File... to create new HTML document in Web Pages location.
    2. Copy whole content of this document (info) into clipboard.
    3. Press CTRL+A in the editor and then click Edit | Paste from main menu.
    4. Editor should replace its content with text from clipboard.
    • EXPECTED RESULT: Code coloring, code folding and code completion should work in the same manner as in CSS specification


Test suite: Navigator

Purpose: This test suite checks that navigator follows HTML code editing .
Setup: No preparation is necessary for this test suite except having web project open.

  1. Creating Navigator node
    1. Type <table> </table> at the end of your HTML page.
    2. New node containing table text should be created in Navigator window.
    3. Insert <tr></tr> inside table tag.
    4. New node containg tr should appear in Navigator Window and table node should become closeable.
    • EXPECTED RESULT: "Navigator should show actual tree of your HTML code."
  2. "Navigation"
    1. "Double click some node in navigator."
    • EXPECTED RESULT: "Cursor position should be move to selected rule in text editor."

Test suite: 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.
  1. Folding 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.
    • EXPECTED RESULT: An extra stripe for folding widgets gets removed and code can't be folded.
  2. Persistence
    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.
    • EXPECTED RESULT: Both settings are not set to default values i.e. code folding is turned off and its update interval remains as 10000 ms.
  3. Coloring 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.
    • EXPECTED RESULT: The text coloring should be changed and all HTML entities should be writen by cyan color.

Attachments

html.txt Info on html.txt 1258 bytes
syntax.txt Info on syntax.txt 1164 bytes