TS 73 JavaScriptEditor

JavaScript Editor Test Specification for NetBeans 7.3

Author: Vladimir Riha
Last update: 25th September 2012
Introduction: Test specification for JavaScript editor in NetBeans

Mac OS specific details: To find Options on MacOS, go to Netbeans menu -> Preferences

Contents


Test suite: Syntax Highlighting

var globalVariable = "Text";       // global variables are not green now
  
 var globalObject = {
     property1: 10,                 // simple properties are green
     property2: "text",
     property3: {                   // object definition is black and bold
         anotherProperty: "10"
     },
     method1: function () {         // method name in definition is bold
         return this.property1;     // again simple proeprty are green
     }
 };
  
 (function () {
     var space = space || {};       // object definition out of the global space
      
     function test() {              // function name is also bold
         var privatevar = 10;       
         return privatevar;
     }
 })();
  1. Default JavaScript coloring.
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.

File:Ts73_jseditor_coloring.png

{   
    "server":{
        "runserver":true,
        "usedb":true,
        "webroot":"public",
        "domain":"http://localhost",
        "port" :1338,        
       "cache_relative_path":"./cache/",
       "slides_relative_path":"./public/data/slides/",
       "atom_refresh_interval": "0 0 */2 * * *", 
       "mm_lectures_interval": "0 * * * * *", 
        "db_uri": "mongodb://localhost/humla",
        "handlers_relative_path":"./handlers/",
        "models_relative_path":"./models/"
    },
    "plugins": [
        {"id":"administration","enable":true,"src":"./server_ext/administration/administration_ext.js"},
        {"id":"slideindex","enable":true,"src":"./server_ext/slideindex/slideindex_ext.js"},
        {"id":"atom","enable":true,"src":"./server_ext/atom/atom_module_ext.js"},
        {"id":"maintenance","enable":true,"src":"./server_ext/maintenance/maintenance_lecture_ext.js"},
        {"id":"gbooks","enable":true,"src":"./server_ext/gbooks/gbooks_ext.js"}
    ],  
    "models":[]
}
  1. Default JSON coloring.
    1. Copy the JSON above to JSON file
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.

File:Ts73_jseditor_coloring2.png

  1. Color of regular expression
    1. Check that following expression is in purple in editor: var reg=/reg/;
    • EXPECTED RESULT: RegExp is in purple.


Test suite: General

  1. Code folding
    1. download and open prototype.js file in the editor
    2. call View|Code Folds|Collapse All
    3. move mouse cursor over folded method and see hidden code
    4. call View|Code Folds|Expand All and check all is expanded
    5. collapse or expand fold in editor clicking plus or minus sign
    • EXPECTED RESULT: all actions are performed correctly
  2. Bracket matching
    1. check that editor automatically highlights matching parentheses, braces, brackets, string delimiters, regular expression delimiters, etc.
    2. type ( , automaticaly () is written, if you type closing ) , it removes the previous )
    3. that works for { too - issue 195515
    • EXPECTED RESULT: worked as discribed
  3. Formatting
    1. open prototype.js or any other .js file
    2. break formatting as you wish (e.g. press CTRL+A and then Shift+Tab several times)
    3. call Format context menu in editor (Alt+Shift+F)
    • EXPECTED RESULT: code is formatted.
  4. Formatting II - minimized file
    1. open [1]
    2. call Format context menu in editor (Alt+Shift+F)
    • EXPECTED RESULT: code is formatted.
  5. JSON Formatting
    1. use the JSON source above and paste it to NetBeans to JSON file
    2. press Ctrl+A and then Tab several times so the code is shifted
    3. call Format context menu in editor (Alt+Shift+F)
    • EXPECTED RESULT: JSON code is formatted.

Test suite: Code Completion

Open file File:Ts73 jseditor complexcc.js and follow instructions there. Each instruction is in comment that starts with

// TASK
// a|

This means you have to uncomment the line with "|", remove this character and invoke code completion

Test suite: Hints

if (a == b) {
    a = 0;
}
  1. Suspicious comparison
    1. Copy the JS code above to JavaScript file
    • {{{1}}}
var X = {
    first: 10,
    second: 'text'
}
  1. Missing semicolon
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about missing semicolon
var y = {
    first: 20,
    third: 30,
};
  1. Incorrect comma
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect comma
while (a = b) {
    a++;
}
  1. Weird assignment
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about weird assignment
var z = {
   first: "10",
   second: "text",
   first: 10
};
  1. Duplicate name of a property
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about duplicate name of a property
/**
 * Incorrect Documentation due to parameter called foo
 * @param {type} param1
 * @param {type} foo
 * @returns {undefined}
 */
function test(param1){
}
  1. Incorrect jsDoc documentation I
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect documentation for parameter foo
/**
 * Parameter param2 not documented
 * @param {type} param1
 * @returns {undefined}
 */
function test2(param1, param2){
}
  1. Incorrect jsDoc documentation II
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect documentation for parameter foo

Test suite jQuery

$(document).
  1. jQuery methods
    1. Copy the JS code above to JavaScript file and invoke cc after "."
    • EXPECTED RESULT: Code completion offers jQuery methods together with help window.
$(document).find('a').
  1. jQuery chained methods
    1. Copy the JS code above to JavaScript file and invoke cc after "."
    • EXPECTED RESULT: Code completion offers jQuery methods together with help window.
$(document).find('')
  1. Selector completion I
    1. Copy the JS code above to JavaScript file and invoke cc inside quotes
    • EXPECTED RESULT: Code completion offers list of css IDs and classes
$(document).find(':')
  1. Selector completion II
    1. Copy the JS code above to JavaScript file and invoke cc inside quotes after ":"
    • EXPECTED RESULT: Code completion offers list of jQuery selectors.
$(document).find('a#foo.')
  1. Selector completion III
    1. Copy the JS code above to JavaScript file and invoke cc inside quotes after "."
    • EXPECTED RESULT: Code completion offers list of classes.
$(document).find('td[]')
  1. Selector completion IV
    1. Copy the JS code above to JavaScript file and invoke cc inside []
    • EXPECTED RESULT: Code completion offers list of HTML attributes


$(".test").find('td[]')
  1. jQuery hyperlinking to CSS rule
    1. Copy following JS code and Ctrl+Click on the rule in quotes
    • EXPECTED RESULT: Appropriate css file with given rule is opened

Test suite jsDoc

/**
 * Create a new Hexagon instance.
 * @extends Shape
 * @class Hexagon is a class that is a <i>logical</i> sublcass of
 * {@link Shape} (thanks to the <code>@extends</code> tag), but in
 * reality it is completely unrelated to Shape.
 * @param {int} sideLength The length of one side for the new Hexagon
 * @example
 * var h = new Hexagon(2);
 * @return {Hexagon} description
 */
function Hexagon(sideLength) {
 
}
  1. Coloring
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.

File:Ts73_jseditor_doc.png

/**
 * 
 * @type Bar
 */
function foo(){}
  1. @type for functions
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Make sure that Navigator and code completion show Bar as returned type
/**
var d;
  1. @type for variables
    1. Copy the JS code above to JavaScript file
    2. Place cursor at the end of the line with 2 asterisks and hit Enter
    3. Rest of @type annotation is completed
    4. change "type" to "Date"
    • EXPECTED RESULT: Navigator and code completion show Bar as variable type. Invoke code completion for "d." and make sure that members of Date are offered
/**
 * @class
 */
function TestA(){}
 
/**
 * @constructor
 */
function TestB() {}
 
/**
 * @constructs
 */
function TestC() {}
  1. Class recognition
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: All functions are recognized as "classes" (constructors) in Navigator window (they have the yellow diamond icon)

/**
function print(value, pretty) {
    if (pretty)
        return "<h1>" + value + "</h1>";
    else
        return 0;
}
  1. Autogenerating documentation
    1. Copy the JS code above to JavaScript file
    2. press Enter after the "/**"
    3. Entire jsDoc should be expanded and contain two " @param {type} [paramName]" and "@return {Number|String}
    4. Navigator should reflect the content of @return and shows "Number|String" as returned type
    5. Remove the @return line, NetBeans should identify the return type without it
    • EXPECTED RESULT: Everything works
function Printer(name) {
 
/**
    this.print = function(value, pretty) {
        if (pretty)
            return "<h1>" + value + "</h1>";
        else
            return 0;
    };
 
}
  1. Autogenerating documentation II
    1. Copy the JS code above to JavaScript file
    2. press Enter after the "/**"
    3. Entire jsDoc should be expanded
    • EXPECTED RESULT: Everything works as in previous case



/**
 * Here is some text
 * @deprecated because it lies, use addEvo instead
 * @see This is <a href="http://netbeans.org">NetBeans!</a>
 * @param {Number} a first number
 * @param {Number} b second number
 * @extends Object
 * @since version 7.3
 * @returns {void} nothing useful
 * @example 
 * var c = sum(1,2);
 * @throws {OutOfMemeory} always
 */
function sum(a, b) {
    return a+b+1;
}
  1. Help window
    1. Copy the JS code above to JavaScript file
    2. invoke code completion for the sum() and check help window
    • EXPECTED RESULT: Help window shows correct information from jsDoc annotations
/**
 * 
 * @returns {Runner}
 */
function test(){
    var a = new Runner();
    return a;
}

var a = test();
a.n|

function Runner(object, name, dispose){
    this.name = name;
    this.notify = function(){};
}
  1. Returned type
    1. Copy the JS code above to JavaScript file
    2. invoke code completion at "|"
    • EXPECTED RESULT: CC offers properties from Runner: name and modify

Test suite Navigator window

Open file File:Ts73 jseditor complexcc.js and check Navigator window. It should look like the image below:

File:Ts73_jseditor_navigator.png

  1. Navigator basic interaction
    1. Try to double click on some item in Navigator. The appropriate code should be opened in IDE
    2. Try to sort items in Navigator
    3. Filters - see issue 148279
    • EXPECTED RESULT: Everything works
  1. New items in Navigator
    1. Create new variable for example: var myvar=new Date();
    2. Declare new function
    • EXPECTED RESULT: Changes in source are propagated into Navigator

Test suite Custom coloring

  1. Coloring
    1. Go To Tools|Options|Editor|Font & Colors, select JavaScript and String
    2. Change color of String to some custom value
    3. Confirm changes and verify that strings have different color (e.g. var a = "foo")
    • EXPECTED RESULT: Color of strings reflects new settings.

Test suite Custom formatting

Wrapping: before

var a,b,c,x = function() {
    return "yes"
}

Wrapping: after

var a,
        b,
        c,
        x = function() {
    return "yes"
}
  1. Wrapping
    1. Use the code above
    2. Go To Tools|Options|Editor|Formatting, select JavaScript and Wrapping
    3. Change Variables wrapping to always
    4. Confirm changes and format the code
    • EXPECTED RESULT: Formatted code looks like above

Tabs And Indents: Before

var a = {
    log : function() {
    }
}

Tabs And Indents: After

var a = {
  log : function() {
  }
}
  1. Tabs and Indents
    1. Use the code above
    2. Go To Tools|Options|Editor|Formatting, select JavaScript and Tabs and Indents
    3. Set Tab Size to 4 and Number of Spaces per Indent to 2
    4. Confirm changes and format the code
    • EXPECTED RESULT: Formatted code looks like above


Spaces: Before

try {
    c = [1, 2, 3]
} catch (e) {
 
}

Spaces: After

try {
    c = [1,2,3]
} catch(e) {
 
}
  1. Spaces
    1. Use the code above
    2. Go To Tools|Options|Editor|Formatting, select JavaScript and Spaces
    3. Uncheck "Before Parentheses" for "catch"
    4. Uncheck "Other" for "After Comma"
    5. Confirm changes and format the code
    • EXPECTED RESULT: Formatted code looks like above

Test suite Refactoring

Currently, NetBeans supports Instant Rename (in a single file). To use it, place your cursor inside the identifier you'd like to rename and press Ctrl+R. Use following code and look for "TASK" which tells you what to rename. Make sure that appropriate identifiers are renamed.

Test file:

function Player(url, name){
    this.name = name; 
 
    // public
    this.start = function(){
    };
    this.stop = function(){
        // calling private function
        foofuf();
    };
    // private
    function foofuf(){    
        document.write("private");
    };
 
    // TASK - rename static_int
    var static_int = 0;
    Player.prototype.getStatic = function(){ return static_int;};
    // TASK - rename setStatic
    Player.prototype.setStatic = function(v){ static_int = v; };
}

// TASK - rename Player
var p1 = new Player();
p1.setStatic(100);
// TASK - rename stop
p1.stop();

var a = {
    toString: function(){
        document.write("a");
    },
    name: "object literal notation",
    "this": "properties should be quoted but it's not necessary if their name doesn't match reserved keyword"
};


// TASK - rename this
a.this=1;//toString();

Test File 2:

function level0() {
  var var_a = "level0";// invoking refectoring through CTRL+R here

  function level1_1(){
    var_a = var_a;
    document.write("level1_1: " + var_a +  "<br/>");
  }
  function level1_2(){
    var var_a;
    document.write("level1_2: " + var_a +  "<br/>");
  }
  function level1_3 (){
    var_a = var_a;
    document.write("level1_3: " + var_a +  "<br/>");
  }
  function level1_4 (){
    this.level2_1 = function(){
      var_a = var_a;
      document.write("level2_1: " + var_a +  "<br/>");
    }
  }

  level1_1();
  level1_2();
  level1_3();
  var o = new level1_4();
  o.level2_1();
}
level0();

Test suite Mark occurrences

  1. Mark occurrences
    1. Use the code above
    2. try mark occurrences for each comment TEST followed by name of the property to be tested
    • EXPECTED RESULT: Mark occurrences work

var facet_ext = require('../server_ext/facet/facetengine_ext.js'); // TEST - facet_ext
var querystring = require('querystring');
 
app.get('/search/query/:schemakey', function(req, res){ // TEST - req and res
    var page = querystring.parse(require('url').parse(req.url).query)['page'];
    var baseUrl = req.headers.host+req.url+"";
    if(baseUrl.lastIndexOf("?",0)>-1)
        baseUrl  = baseUrl.substring(0, baseUrl.lastIndexOf("?",0));
    if(typeof page === "undefined"){
        page =1;
    }else{
        page = parseInt(page);
        if(page<1)
            page=1;
    }
    facet_ext.simpleQuery(decodeURIComponent(req.params.schemakey),"", res);
});
 
function Foo(name){ // TEST - name; result 2 occurrences
this.name = name;
}
 
var name = 1; // TEST - name; nothing is highlighted
 
var f = new Foo("bar");
console.log(f.name); // TEST - name in Foo() is highlighted
 
var g = {
 "name": "FooBar"
};
 
console.log(g.name);// TEST - name in "g" is highlighted

Test suite Templates

/**
 * 
 */
var a ={
     
};
  1. Built-in templates
    1. Use the code above and type "prf" on the blank line between "{" and "}"
    2. Press Tab
    • EXPECTED RESULT: Code is expanded, the result is on the image below. Repeat the same with embedded JS code in HTML file
/**
 * 
 */
var a ={
     propertyName: function(parameters) {
        
    },
};
  1. Custom templates
    1. Go to Tools|Options|Editor|Code Templates and select JavaScript from Language combo box
    2. Create your own template
    3. Try to use the new template in JavaScript file
    • EXPECTED RESULT: Code is expanded
  2. Documentation templates
    1. Again, use the code above, now place cursor on the 2nd line with asterisk
    2. type "au" and press tab
    • EXPECTED RESULT: Template is expanded and @author is inserted
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