TS 74 JavaScriptEditor

JavaScript Editor Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 27th June 2013
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

  1. Default JavaScript coloring.
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. File:Ts73_jseditor_coloring.png
    2. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.


  1. Default JSON coloring.
{   
    "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. Copy the JSON above to JSON file
    2. File:Ts73_jseditor_coloring2.png
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.


  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.


Test suite: JSON

  1. Code folding
    1. download and open [2] file in the editor
    2. call View|Code Folds|Collapse All
    3. move mouse cursor over folded block 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. JSON Navigator
    1. use the JSON source above and paste it to NetBeans to JSON file
    2. Check that Navigator contains all declared properties and their type
    3. Double click on some node in Navigator
    • EXPECTED RESULT: Cursor is set to proper position in JSON file.
  3. 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

  1. Suspicious comparison
if (a == b) {
    a = 0;
}
    1. Copy the JS code above to JavaScript file
    • {{{1}}}
  1. Missing semicolon
var X = {
    first: 10,
    second: 'text'
}
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about missing semicolon


  1. Incorrect comma
var y = {
    first: 20,
    third: 30,
};
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect comma


  1. Weird assignment
while (a = b) {
    a++;
}
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about weird assignment


  1. Duplicate name of a property
var z = {
   first: "10",
   second: "text",
   first: 10
};
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about duplicate name of a property
  1. Incorrect jsDoc documentation I
/**
 * Incorrect Documentation due to parameter called foo
 * @param {type} param1
 * @param {type} foo
 * @returns {undefined}
 */
function test(param1){
}
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect documentation for parameter foo


  1. Incorrect jsDoc documentation II
/**
 * Parameter param2 not documented
 * @param {type} param1
 * @returns {undefined}
 */
function test2(param1, param2){
}
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Editor shows hint about incorrect documentation for parameter foo

Test suite jQuery

  1. jQuery methods
    1. $(document).
    2. Copy the JS code above to JavaScript file and invoke cc after "."
    • EXPECTED RESULT: Code completion offers jQuery methods together with help window.


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


  1. Selector completion III
    1.  $(document).find('a#foo.')
    2. Copy the JS code above to JavaScript file and invoke cc inside quotes after "."
    • EXPECTED RESULT: Code completion offers list of classes.
  1. Selector completion IV
    1. $(document).find('td[]')
    2. Copy the JS code above to JavaScript file and invoke cc inside []
    • EXPECTED RESULT: Code completion offers list of HTML attributes
  1. jQuery hyperlinking to CSS rule
    1. $(".test").find('td[]')
    2. 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

  1. Coloring
/**
 * 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. Copy the JS code above to JavaScript file
    2. File:Ts73_jseditor_doc.png
    • EXPECTED RESULT: Syntax Highlighting is the same as on image below.
  1. @type for functions
/**
 * 
 * @type Bar
 */
function foo(){}
    1. Copy the JS code above to JavaScript file
    • EXPECTED RESULT: Make sure that Navigator and code completion show Bar as returned type
  1. @type for variables
    1. /**var d;
    2. Copy the JS code above to JavaScript file
    3. Place cursor at the end of the line with 2 asterisks and hit Enter
    4. Rest of @type annotation is completed
    5. 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
  2. Class recognition
/**
 * @class
 */
function TestA(){}
 
/**
 * @constructor
 */
function TestB() {}
 
/**
 * @constructs
 */
function TestC() {}
    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)
  1. Autogenerating documentation

/**
function print(value, pretty) {
    if (pretty)
        return "<h1>" + value + "</h1>";
    else
        return 0;
}
    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
  1. Autogenerating documentation II
function Printer(name) {
 
/**
    this.print = function(value, pretty) {
        if (pretty)
            return "<h1>" + value + "</h1>";
        else
            return 0;
    };
 
}
    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
  1. Help window

/**
 * 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. 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
  1. Returned type
/**
 * 
 * @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. 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

  1. Wrapping
    1. Wrapping: before
var a,b,c,x = function() {
    return "yes"
}
    1. Wrapping: after
var a,
        b,
        c,
        x = function() {
            return "yes"
        }
    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


  1. Tabs and Indents
    1. Tabs And Indents: Before
var a = { log : function() { } }
    1. Tabs And Indents: After
var a = {
  log : function() {
  }
}
    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
  1. Spaces
    1. Spaces: Before
try {
    c = [1, 2, 3]
} catch (e) {
 
}
    1. Spaces: After
try {
    c = [1,2,3]
} catch(e) {
 
}
    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.

  1. Refactoring I
    1. Use following code and look for "TASK" which tells you what to rename. Make sure that appropriate identifiers are renamed.
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();
    • EXPECTED RESULT: All OK
  1. Refactoring II
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();
    • EXPECTED RESULT: All OK

Test suite Mark occurrences

  1. Mark occurrences

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
    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

Test suite Templates

  1. Built-in templates
/**
 * 
 */

var a ={
};
    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
  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

Test suite: ExtJS

  1. Ext.define
function SubClass() {
    this.parent = "MyAwesome";
    this.init = function() {
    };
}

Ext.define('My.awesome.Class', {
    child: new SubClass(),
    someProperty: 'something',
    someMethod: function(s) {
        alert(s + this.someProperty);
    }


});

var obj = new My.awesome.Class();
obj.
    1. In JS code, paste the code above
    2. Invoke cc on last line after the dot
    3. Properties/methods child, someProperty and someMethod() are offered
    4. Type ch and press Ctrl+Space, child should be completed
    5. Type "." dot and invoke cc
    • EXPECTED RESULT: Properties of SubClass should be offered (parent and init()). Also check Navigator that it shows proper structure
  1. Ext.define II
function SubClass() {
    this.parent = "MyAwesome";
    this.init = function() {
    };
}

Ext.define('My.awesome.Class', {
    child: new SubClass(),
    someProperty: 'something',
    someMethod: function(s) {
        alert(s + this.someProperty);
    }


});

var obj = new My.awesome.Class();
obj.
    1. In JS code, paste the code above
    2. Delete the "obj." and type "My."
    3. Invoke code completion
    4. "awesome" should be offered, type "a" to reduce list of suggestions and confirm it
    5. Type "." (so result is "My.awesome.") and invoke cc
    6. "Class" should be offered
    • EXPECTED RESULT: Everything works
  1. Ext.apply
    1. In JS code, paste the code below
var obj = {};
Ext.apply(obj, {
    test: 'test',
    config: {
        id: 'view',
        attempt: {
            one:1,
            two: 'preview'
        }
    }
});

    1. On empty line, start continuous completion (one by one property) for obj object
    2. Properties like test and config are offered, confirm config and check code completion for id and attempt
    3. Check that Navigator shows all properties of obj
    • EXPECTED RESULT: Everything works
  1. Ext object - cannot be properly tested due to limit 1MB to JS file to be parsed
    1. (requires ExtJS to be part of project) In JS file, type "Ext." and press Ctrl+Space twice
    2. List of Ext methods is offered (e.g. apply, create, defined
    • EXPECTED RESULT: Everything works
  2. Ext parameters
    1. In JS file, paste code below
Ext.application({
    
})
    1. Invoke CC at the 2nd empty line
    2. Properties like appFolder, appProperty or scope are offered
    3. Paste following to JS file
Ext.define('Test',{
    
})
    1. Again invoke cc at the empty 2nd line
    • EXPECTED RESULT: Properties like store or extend are offered
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