TS 70 JSFeditor

JSF Editor Test Specification for NetBeans 7.0

Author: Vladimir Riha
Version: 1.2
Last update: 8th November 2011
Introduction: This document contains test specifications for testing JSF editor. Note: For JSF 2.2, namespaces are a bit different, e.g. http://xmlns.jcp.org/jsf/html

Contents


Test suite: Syntax highlighting

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

  1. JSF syntax highlighting
    1. Use File | New Project... to create new Java Web | Web Application project located in your home directory.
    2. In the 4th step Frameworks, check JavaServer Faces
    3. Replace contents of index.xhtml with text below and compare the colors with following picture
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"> 
   <body>      
      <ui:composition template="../template.xhtml"> 
        <ui:define name="content"> 
          <f:view> 
            <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/> 
            <h1>Listing Runs</h1> 
            <h:form> 
                <h:commandLink action="#{run.createSetup}" value="New Run"/> 
                <br /> 
            </h:form> 
        </f:view>          
        </ui:define> 
      </ui:composition> 
    </body> 
</html> 
    1. File:Syntaxjsf.png
    • {{{1}}}

Test suite: Indentation

Purpose: This test suite checks that auto indentation in JSF editor is working properly.
Setup: No preparation is necessary for this test suite except having web project open with one JSF page.

  1. Basic indentation
    1. Place the cursor at end of index.xhtml file and press Enter.
    2. Press Tab and type <a>| where | denotes cursor.
    3. Press Enter again.
    • EXPECTED RESULT: New line is created and cursor inherits column position of text at previous line. In this case it will be one TAB size indented to right.
  1. Reformat code
    1. In index.xhtml editor press CTRL+A.
    2. Press Shift+TAB at least 3 times so that whole text is shifted to left.
    3. Right click in editor area and select Format from popup menu.
    • EXPECTED RESULT: The whole source code is reformated according to JSF indentation engine settings. By default, everything inside an element is shifted one TAB to right.


Test suite: Code completion

Purpose: This test suite checks that code completion in JSF editor is working properly.
Setup: No preparation is necessary for this test suite except having web project open with one JSF page.

  1. Namespaces
    1. Create new jsf page (by File|New file|Web|JSF Page) index.xhtml and type inside HTML tag before > character following: xmlns:q=" and invoke code completion using Ctrl+Space.
  1. HTML Tags
    1. Create new jsf page index.xhtml and replace its html tag with text below the result section.
    2. Type < character and invoke code completion.
    3. Type ht and invoke completion. Only html tag is offered.
    4. Check some others html tag, complete the html tag
    5. Make sure that help windows appears with completion offers
    6. Move cursor inside the "<h|tml>"
    7. Use Ctrl+Shift+Space to display help window without code completion
    8. Having help window opened, use Ctrl+Down to scroll the help window.
    • EXPECTED RESULT: HTML Tags are offered, help window is shown and it is possible to scroll inside it using Ctrl+Down.
  2. JSF and other tags
    1. Create new jsf page index.xhtml and replace its html tag with text below
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"    
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:mdjnm="http://mojarra.dev.java.net/mojarra_ext"
      >
    1. For each prefix type <h: (for example for prefix h) and invoke code completion.
    2. Check that code completion offers elements from given namespace
    3. For each namespace make sure that help window is shown together with code completion
    4. Move cursor inside the completed tag (as in previous case with <html>)
    5. Use Ctrl+Shift+Space to display help window without code completion
    6. Having help window opened, use Ctrl+Down to scroll the help window.
    • EXPECTED RESULT: Tags from given namespaces are offered, help window is shown and it is possible to scroll inside it using Ctrl+Down.
  1. Autoinsert undeclared namespaces
    1. Create new jsf page index.xhtml
    2. On new line, type < and invoke code completion
    3. Elements from undeclared namespaces should be offered. Choose some element and press Enter.
    • EXPECTED RESULT: Namespace of the selected element is automatically declared in html element with correct prefix.

Test suite: Expression Language

  1. Basic completion for Expression Language
    1. Create new jsf page index.xhtml
    2. Type #{} and invoke code completion, then place the cursor in between the brackets
    3. Invoke code completion. Implicit objects like application should be offered.
    4. Select File|New File, in Categories choose JavaServer Faces and as a File type select JSF Managed Bean and create a new bean called MyBean.
    5. Editor with created java file is opened, define some function and variable.
    6. Generate setters and getters for the variable and add some javadoc comment to the function
    7. Open index.xhtml and again type #{} and place the cursor in between the brackets
    8. Type myB and invoke code completion. myBean should be offered, press Enter.
    9. Type . (dot) and again invoke code completion.
    10. Getter for the variable is auto completed
    11. Check Help window for the getter function
    • EXPECTED RESULT: All things are offered as written above, javadoc is displayed properly.


  1. Completion for Expression Language and nested beans
    1. Create new bean called InnerBean
@ManagedBean
@RequestScoped
public class InnerBean {
    private String innerMsg;
    public String getInnerMsg() {
        return innerMsg;
    }
    public void setInnerMsg(String innerMsg) {
        this.innerMsg = innerMsg;
    }
}
    1. Create new bean called SimpleBean
@ManagedBean
@RequestScoped
public class SimpleBean {
     private InnerBean ib;
     public InnerBean getIb() {
        return ib;
    }
    public void setIb(InnerBean ib) {
        this.ib = ib;
    }
}
    1. Open index.xhtml and type #{simpleBean.ib.|} and invoke code completion in position of |
    2. Check status of #214028.

File:Inner.PNG

    • EXPECTED RESULT: Property of nested bean (setter and property itself) InnerBean is offered.

Test suite: Code folding

Purpose: This test suite checks that code folding in JSF editor is working properly.
Setup: No preparation is necessary for this test suite except having web project open with one JSF page.

  1. Folds creation
    1. Create new jsf page with default settings
    2. Add some multiline html tags (e.g. div)
    3. Add some multiline tags with h prefix (e.g. h:form)
    • EXPECTED RESULT: Code folds are created for all tags occupying more than 1 line.
  2. Folds collapsing/expending
    1. Place cursor in some multiline tag
    2. Press Ctrl+Numpad-, fold is collapsed
    3. Select View|Code Folds|Expand Fold from main menu, fold is expand
    4. Press Ctrl+Shift+Numpad-, all folds are collapsed
    • EXPECTED RESULT: All commands work fine, pressing Ctrl+Shift+Numpad+ causes that all folds are expanded.


Test suite: Embeddings

  1. Creating embedded CSS style
    1. Create new jsf page.
    2. Copy some css code into clipboard.
    3. Create new tag <style> | </style> in head element and place cursor inside it.
    4. Paste code from clipboard.
    • EXPECTED RESULT: Code coloring, code folding and code completion should work in the same manner as in CSS specification, no error should be highlighted in the document.
  1. Editing Javascript code
    1. Create new tag <script> | </script> and place cursor inside it.
    2. Declare function function some_name(){ }
    3. Javascript code should get green background. Try code completion and some other most common editing features for javascript.
    • EXPECTED RESULT: Code coloring, code folding and code completion should work in the same manner as in Javascript specification, no error should be highlighted in the document.
  1. Using Expression Language in JS and CSS code
    1. Use EL #{} in both, style and script tag to generate some values.
    2. Javascript code should get green background. Try code completion and other editing features for EL.
    • EXPECTED RESULT: There should be not any errors and not any warnings for correctly generated javascript code in embedded sections, code coloring and completion should be as usual

Test suite: Composite Components

Purpose: This test suite checks creation of composite component.
Setup: No preparation is necessary for this test suite except having web project open with one JSF page.

  1. Composite components hyperlinking
    1. In jsf page, type following
       <p>Just test object</p>
    1. Highlight this code snippet, a yellow bulb icon should appear in the left, see picture below

File:Compos.png

    1. Left click on the icon and select Convert to Composite Component
    2. Choose some library prefix, i.e. lib, and press finish
    3. Add new namespace to jsf page
xmlns:lib ="http://java.sun.com/jsf/composite/ezcomp"
    1. New component replaced the original <p> tag. If you left the file name with default value, then you should see this:
<lib:out/>
    1. Move cursor over this and keep pressing Ctrl
    2. Tag turns to be underlined and cursor pointer changes to "hand"
    3. While keep pressing Ctrl, click on the tag
    • EXPECTED RESULT: Composite component source file opens in the editor.


  1. Create Composite component with Java Bean
    1. Create new java class called SimpleBean replace its source code with following:
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named("simplebean")
@RequestScoped
public class SimpleBean {
    private String msg;

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }   
}
    1. Create (or replace existing) new jsf page index.xhtml and replace its content with following:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
   >
  <h:head>
    <title>Hello world, index</title>
  </h:head>
  <h:body>
    <h1>Hello world</h1>
    <h:form>
       <h:panelGrid columns="2">
            <h:outputText value="Text:"/>
            <h:inputText value="#{simplebean.msg}" title="msg" 
                         id="msg" required="true"/>
        </h:panelGrid>
      <h:commandButton action="show" value="submit"/>
    </h:form>
  </h:body>
</html>
    1. Create (or replace existing) new jsf page show.xhtml and replace its content with following:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
  <h:head>
    <title>Hello world</title>
  </h:head>
  <h:body>
    <h1>Hello world</h1>
    <h:panelGrid columns="2">
      <h:outputText value="Msg:"/>
      <h:outputText value="#{simplebean.msg}" />
    </h:panelGrid>
  </h:body>
</html>
    1. Open index.xhtml and select the whole tag h:panelGrid
    2. Right mouse click, select Refactor and Convert to Comosite object, JSF Component Dialog appears
    3. Select File Name to hello and set prefix to ez, press Finish
    • EXPECTED RESULT: The selected tag is replace with <ez:hello /> and namespace for prefix ez is added.


  1. Create Composite component with attribute
    1. Use the files from previous test case. Check folder Web Pages/resources/ezcomp, there should be file hello.xhtml, open it
    2. Replace the cc:interface tag with following:
    <cc:interface>
        <cc:attribute name="helloWorldMsg" required="false"/>
    </cc:interface>
    1. At line before <h:panelGrid> tag, create new heading h1 and place cursor between the star and end tag <h1>|</h1>
    2. Type #{}, place cursor between the brackets and invoke code completion, list of offers should appears
    3. Type cc, the list is reduced to only 1 item, press Enter and type . , invoke code completion again
    4. Type attrs. and invoke completion again, the attribute helloWorldMsg is completed
    5. Switch back to index.xhtml, place cursor inside the new tag <ez:hell | /> and invoke code completion
    • EXPECTED RESULT: The new defined attribute is completed, type some value and run the application, check the page in browser that it shows proper values


Test suite: Refactoring

Purpose: This test suite checks that refactoring in jsf project is working correctly.
Setup: No preparation is necessary.

  1. Rename bean
    1. Create new simple bean from this code:

public class SimpleBean {
    private String msg;
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    1. If not, declare the bean in faces-config.xml (If the file is missing, create it by New File|JavaServerFaces|JSF Faces Configuration)
    <managed-bean>
        <managed-bean-name>simpleBean</managed-bean-name>
        <managed-bean-class>lr.SimpleBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    1. Use this bean in jsf page, like this:
#{simpleBean.msg}
    1. In project window, right click on the java bean, select Refactor|Rename and select some other name and hit Refactor
    • EXPECTED RESULT: The name of this class was changed in the java file and faces-config.xml as well.

Test suite: Miscellaneous

Purpose: This test suite checks that tag matching, hyperlinking and some other features are working properly.
Setup: No preparation is necessary for this test suite except having web project open with one JSF page.

  1. Tag matching
    1. Place cursor behind some opening tag e.g. <:head>
    2. Matching end tag (at line 7 in this case) should be highlighted in yellow color.
    3. Press CTRL + [[ which must move cursor to the </h:head> closing tag at line 7.
    • EXPECTED RESULT: When cursor is placed in opening tag, editor highlights corresponding closing tag and vice versa. Besides, it is possible to jump between them.
  1. Namespace hyperlinking
    1. Move cursor over the url address in xmlns attribute in html tag and keep pressing Ctrl
    2. Url address turns to be blue and cursor pointer changes to "hand"
    3. While keep pressing Ctrl, click on the url address
    • EXPECTED RESULT: Page with this address will open in your default web browser.
  1. Insert code
    1. In jsf page, press Alt+Ins (or right click and Insert Code)
    2. List of jsf components and Lorem Ipsum appears
    3. Select some item and press Enter
    • EXPECTED RESULT: If need, options dialog opens and after confirming the code is inserted.
  1. Line comment/uncomment
    1. Set cursor at some line in JSF page 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 JSF page and 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 some JSF 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.


Test suite: Settings

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

  1. Folding switch
    1. Invoke Tools | Options from main menu.
    2. Select Editor tab at the top of the dialog.
    3. Select General node.
    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. Select Editor tab at the top of the dialog.
    3. Select General node.
    4. Uncheck Use Code Folding option.
    5. Push OK button.
    6. Invoke File | Exit from main menu and restart NetBeans.
    7. Repeat steps 1 and 2.
    • EXPECTED RESULT: Code folding is turned off restart.


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