TS 60 HTMLeditor

HTML Editor Test Specification for Netbeans 6.0

Author: Jindrich Sedek, updated by Vladimir Riha
Version: 1.2.0
Last update: 13.7.2011
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:


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 PHP Application project from PHP category and create new PHP project with default values.
    3. Use File | New File... to create new HTML document in Source Files location.
    • EXPECTED RESULT: Valid HTML5 document should be created.
      • In newest versions there is no Web Application or Web category. You have to create PHP/Java Web project and then create new HTML file inside these projects.
  2. Syntax 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.
    • 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 Right 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.
    • 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.
    • &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.
    • 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. Semantic coloring of code completion
    1. Use this code <table><tr>< type < and invoke code completion. Valid start tags should be at the beginning of the HTML completion in blue color and possible but semantically invalid tags should be grey and at the end of the list.
    2. Type </ and invoke code completion end tag should be offered. tr and table end tags should be blue as semantically valid (in case of HTML5 file, the end tags for table and tr are voluntary, thus end tags for body and html are offered as well), other end tags should be grey
    • EXPECTED RESULT: The code completion coloring should follow the HTML validity.
  8. 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. Select some (i.e. span) and confirm to paste it
    6. Move cursor inside the tag name (i.e. <spa|n>)
    7. Verify that help window is available for both HTML tags and their attributes.
    8. 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.
  9. CSS id and class code completion
    1. Paste this code at the end of the HTML file:
 <table id="t1">
   <tr id="first_line" class="basic"><td id="first_box" class="first"></td></tr>
   <tr class="" id=""><td></td></tr>
 </table>
    1. Invoke code completion for a class attribute of the second tr tag.
    2. basic and first items should be offered.
    3. Choose some item and verify that a class is correctly completed.
    4. Invoke code completion for an id attribute of the second tr tag.
    5. first_line and first_box and t1</t1> items should be offered.
    6. Choose some item and verify that an id s correctly completed.
    • The css code completion should allow to complete id or class selector which are used in current or any of the imported files.
  1. CSS id and class code completion from CSS code
    1. Replace the head of your HTML file with this code:
   <head>
       <title>JSP Page</title>
       <style type="text/css" >
           .xxx{color:red;}
           .yyy{background: orange;}
           #aaa{color:red;}
           #bbb{background: orange;}
       </style>
   </head>
    1. Use this code <tt> <div id="" class=""></div> somewhere in the document.
    2. Invoke code completion in id or class attribute of the div element.
    3. Verify that xxx and yyy are offered as class attributes and aaa and bbb are offered as id attributes.
    • The css code completion should allow to complete id or class selector which are used in style definition.
    1. Move the content of style element into separate file style.css and replace the style section with this link :<link href="style.css" type="text/css">.
    2. Verify that xxx and yyy are offered as class attributes and aaa and bbb are offered as id attributes.
    • The css code completion should allow to complete id or class selector which are used in style definition linked from separate css file.

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 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.
  1. 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.
  1. 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.
  1. 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 Format 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.
  1. 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.
  1. 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: Annotations

Purpose: This test suite checks that code warnings and errors.
Setup: No preparation is necessary for this test suite except having web project open.

  1. Incorrect code
    1. Create table without rows - <table> </table> -> an error message should be shown about missing rows.
    2. Create some row without cells inside - <tr> </tr> -> an error message should be shown about missing table cells.
    3. Add some table cells inside - <td> </td> -> no error should be show ;
    4. Type more HTML use cases verify that error and warnings are show for every incorrect HTML syntax and not for any correct HTML syntax.
    • EXPECTED RESULT: All HTML syntax error should be marked with error or at least a warning.
  1. Non existing tag, attribute
    1. Add some code with non existing attribute - <div font="Arial"></div> -> font is not correct and a warning should be shown.
    2. Add some code non existing tag - <simple> -> warning should be shown
    • EXPECTED RESULT: HTML tags and attributes should be checked according to the HTML specification.




Test suite: Other features

  1. "Line comment/uncomment"
    1. "Set cursor at some line in HTML document and press Ctrl + /. The line should get commented."
    2. "Press Ctrl + / again the line should get uncommented.
    • EXPECTED RESULT: "Line comment should commement/ uncomment the actual cursor line."
  1. "Selection comment/uncomment"
    1. "Select piece of code in HTML file press Ctrl + /. The selection should get commented."
    2. "Set cursor into the commented area and press Ctrl + / . The commented area should get uncommented.
    3. "Create two commented areas. Select code section covering pieces of both of them. Press Ctrl + / . Both sections should get merged.
    • EXPECTED RESULT: "Selection commement / uncomment action should work as intuitively as possible. See Toggle comment spec "
  1. "Select code action"
    1. Set cursor at your some HTML tag. Press Alt + Shift + .. The tag should get selected.
    2. Press Alt + Shift + . for second time. Whole the tag area should get selected
    3. Press Alt + Shift + . for third time. Whole area of the parent tag should get selected.
    4. Press Alt + Shift + ,. The selection should be reduced back to one tag area selection.
    5. Press Alt + Shift + , for second time. The selection should be reduced back just to one tag name selection.
    • EXPECTED RESULT: "The code selection should enalarge and reduce the selection in code blocks."
  1. "Navigation line"
    1. Set cursor at your some HTML tag. At the top of HTML editor are a navigation line should appear showing whole HTML path from <html> tag to the selected tag.
    2. Move cursor in document -> verify that the navigation line is updated accordingly.
    3. Click a tag name at the navigation line. Cursor should be moved in document at the location of the choosen tag.
    • EXPECTED RESULT: "The code navigation line should show the tree path of the actual tag in the document."
  1. "HTML Palette"
    1. Palette should be activated automatically after opening HTML file.
    2. Drag some HTML tag on palette, drop it into HTML page.
    3. Customize dialog should appear.
    4. Fill some data in the dialog and press OK button.
    5. The HTML code should be correctly generated at place of drop.
    6. Repeat previous steps with other palette items.
    • EXPECTED RESULT: "The HTML code should be genearated according to choosen item on the palette and according to filled data in the dialog."



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 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
      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."
  1. "Navigation"
    1. "Double click some node in navigator."
    • EXPECTED RESULT: "Cursor position should be move to selected rule in text editor."


Test suite: Refactoring

Purpose: This test suite checks that HTML refactoring is working correctly.
Setup: No preparation is necessary for this test suite except having web project open.

  1. Rename file
    1. Create new html file called A.html
    2. Create new html file called B.html
    3. In B.html, create link to the first file, using tag <a>
    4. In project window, right click on A.html and select Refactor|Rename
    5. Choose some new name
    • EXPECTED RESULT: The href attribute is automatically updated to the new name.

Test suite: HTML5 support

All the functionality mentioned above should be working with HTML5 files as well. Please test it. To specify HTML5, use the following doctype definition (if not already): <!doctype html>

  • Improved html code validation
  1. Create new HTML5 file
  2. Inside HEAD element, add following:
 
<style type="bad">
</style>
  1. Error should be highlighted, detailed info is shown as in the picure below
 	

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. Select Editor tab at the top of the dialog.
    3. Select General tab.
    4. Uncheck Use Code Folding option.
    5. Push OK button.
    • EXPECTED RESULT: An extra stripe for folding widgets gets removed and code can't be folded.
  1. Persistence
    1. Invoke Tools | Options from main menu.
    2. Press Editor tab at the top of the dialog.
    3. Select General tab.
    4. Uncheck Use Code Folding option again and press OK 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.
  1. 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.


  1. Code completion customization
    1. Invoke Tools/Options/Editor/Code Completion
    2. Select HTML language
    3. Disable all options
    4. Create a piece of code '<tr |>' invoke code completion, select 'accesskey' and complete code
    • The result should be '<tr accesskey|>' (no ="" is added)



Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo