TS 74 HTML5Project

HTML/JavaScript project Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 25th June 2013
Introduction: Test specification for HTML5 project type in NetBeans

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

Contents


Test suite: New project

  1. Create empty project

File:Ts73_html5project_settings.png

    1. Invoke New Project dialog
    2. Select HTML/JavaScript and HTML5 Application
    3. Finish with default values
    • EXPECTED RESULT: New project is created. It contains single index.html file and 4 folders: config, nbproject, public_html and test. Make sure that default settings correspond to the image above
  1. Create project with standard template
    1. Invoke New Project dialog
    2. select HTML/JavaScript and HTML5 Application
    3. In the 3rd step Site Template, select Download Online Template
    4. Select HTML5 Boilerplate and check template's description below
    5. Press Next
    6. In the JavaScript Libraries step, there are already selected some libraries that are bundled with the template. Check that you cannot remove them
    7. Use text field next to Available to filter list of libraries
    8. Select e.g. Dojo and click to the Version column. List of available versions of Dojo is offered, pick some and add it to the project
    9. Change Libraries Folder to "js/libs_custom" and finish the process
    • EXPECTED RESULT: New project is created. Make sure it contains js/libs and js/libs_custom (withi Dojo library) folders as well as some default files from HTML5 Boilerplate (icons, readme.md....)
  2. Create project with custom template
    1. Having the project from previous step, right click on it in Projects window
    2. Select Save as Template
    3. In the opened dialog, you can specify what should be in the template. Uncheck the same items as on the image below
    4. Select some template name and location
    5. Press Finish
    6. Now invoke New Project dialog, sleect HTML/JavaScript and HTML5 Application
    7. Select "Select Archive" and point to the location of your template, press Next
    8. In the JavaScript Libraries step, there are already selected some libraries that are bundled with the template. Check that you cannot remove them
    9. press Finish
    • EXPECTED RESULT: New project is created from custom template. Make sure it doesn't contain the files/folders unchecked in Save as template dialogs

Test suite: New project with sources

  1. Create Project with existing sources
    1. (have some sources ready in folderA)
    2. Invoke New Project dialog and select HTML/JavaScript and HTML5 Application with existing sources
    3. Set Site Root to folderA
    4. Project name is set to "folderA"
    5. Default project directory is set to "folderA"
    6. Finish the dialog
    • EXPECTED RESULT: New project is created. Site Root is set to "folderA" (is empty as instead of ".") , Unit Tests is empty. Web Root is set to "/folderA".
  2. Import AngularJS project
    1. Create a new project with Angular online template
    2. Close this project in NetBeans
    3. Open project's folder and remove folder "nbproject"
    4. Invoke New Project dialog and select HTML/JavaScript and HTML5 Application with existing sources
    5. Set Site Root to (projectFolder)/app
    6. Project name is set to "AngularJsApplication"
    7. Finish the dialog
    • EXPECTED RESULT: New project is created. Site Root is set to "app" , Unit Tests to "test" and Configuration Files to "config"

Test suite: Resolve project's problems

  1. Fix Unit Tests folder
    1. Create a new project with AngularJS seed online template
    2. Externally rename (project)/test folder to (project)/test2
    3. In NetBeans in Projects window, project has warning icon
    4. Right click on it and select Resolve project problems
    5. In the opened dialog, there is a message "Invalid Unit Tests" with full description
    6. Click on Resolve and select (project)/test2 and confirm it
    • EXPECTED RESULT: Problem is now marked as resolved and the warning icon on project's node is no longer present. Repeat the same steps but with site root (so rename (project)/app to (project)/app2 etc.
  2. Fix Configuration folder
    1. Create a new project with AngularJS seed online template
    2. Close NetBeans
    3. Externally rename (project)/conf folder to (project)/conf2
    4. Start NetBeans
    5. Project Problems dialog is opened, click on Resolve
    6. Follow steps like in previous test case
    • EXPECTED RESULT: Problem is now marked as resolved and the warning icon on project's node is no longer present

Test suite: JavaScript libraries

  1. Update libraries
    1. Go to Project Properties (right click on project) and select JavaScript files category
    2. Label shows "Updated: never"
    3. Click on this label to update libraries
    4. Progress in IDE's bottom shows progress of update operation
    5. Once it finishes, check again Project Properties and make sure it shows date of last update
    6. Open your cache dir and go to html5/jslibs, there should be file cdnjs.zip
    7. Open this archive and delete folder jquery in ajax/libs and save changes
    8. restart IDE
    9. try to create a new HTML5 project, in step with JavaScript files, make sure jQuery is missing
    10. click on "Updated (date)" to update JS files again
    • EXPECTED RESULT: After the update, jQuery is again in the list.

Test suite: Project settings

  1. Site Root and Unit Tests folders
    1. Go to Project Properties (right click on project) and select Sources category
    2. Modify Site Root
    3. Confirm changes
    • EXPECTED RESULT: List of files under Site Root in Projects window is changed and contains only files from the selected Site Root. Repeat the same with Unit Tests folder. Node that this node is not displayed in Projects window if it doesn't contain any file.
  2. Main file to run
    1. Go to Project Properties (right click on project)
    2. Change Start file
    3. Right click on project and select Run
    • EXPECTED RESULT: Start file is opened in browser.
  3. Main file to run II
    1. Go to Project Properties (right click on project)
    2. Change Start file to some non-existing one
    • EXPECTED RESULT: Warning message saying that main file is invalid is displayed in Project Properties.
  4. Web root settings
    1. Go to Project Properties (right click on project) and select Run category
    2. Change Web Root to e.g. "myweb"
    3. Right click on project and select Run
    • EXPECTED RESULT: The project is running and URL contains e.g. localhost:8383/myweb/(startfile).
  5. Remote files
    1. Create a new HTML project and add script tag for JS file from some URL and link tag for some CSS file
    2. Save file
    3. In Projects window, there is a node called Remote Files, make sure it contains the added CSS and JS files
    4. Modify some html file and add a new <script> tag with src attribute pointing to some URL address
    5. Save the file
    • EXPECTED RESULT: Remote Files contains the new script. Try to open it in IDE, it should be read-only.
  6. Browser settings
    1. Go to Project Properties (right click on project) and select Run category
    2. By default (if you run in browser with NetBeans integration), Auto Refresh and Highlight Selection are enabled
    3. Change browser to some without NetBeans integration
    • EXPECTED RESULT: The 2 options are no longer available.
  7. Auto Refresh
    1. Go to Project Properties (right click on project) and select Run category
    2. Uncheck the Auto Refresh option
    3. Run some html file
    4. File is opened in browser, now edit it in IDE and save
    • EXPECTED RESULT: File is not refreshed in browser.
  8. Import JavaScript files
    1. Open Project Properties for some HTML5/JavaScript project
    2. Select JavaScript files category
    • EXPECTED RESULT: There is a list of available JS libraries, make sure it all works the same as in New Project wizard. In the right column there is a list of already used JS files in the project and these files cannot be removed/altered from this dialog.

Test suite: Network monitor

  1. Network Monitor
    1. Create a new Responsive Rabbits demo
    2. Run file about.html in browser with NB integration
    3. In browser, click on "Load REST data" button
    • EXPECTED RESULT: Network monitor shows this request, there are 3 panels: Headers, Response, Callstack. If you click on Headers, you can see list of request and response headers. Response panel contains formatted response, try to check the checkbox in bottom right corner to see unformatted response. Callstack panel shows JS callstack when this request was made. If you click on some frame, given code is opened in editor. Note that for Embdedd browser, callstack panel is not available
  2. JSONP
    1. Create a new EmberJSTrek sample project
    2. run index.html in Chrome with NB integration
    3. In Network Monitor, there is a single request, check the Response panel of this request
    • EXPECTED RESULT:Formatted response looks like common JSON, if you check to see raw data, you can see it is actually JSONP
  3. Incorrect request
    1. Having the same project from previous case, open js/app.js file
    2. On line 53, change the URL to point to http://netbeans.org
    3. On following line, remove the "dataType: jsonp" line at all
    4. Run index.html and check Network Monitor
    • EXPECTED RESULT:Request is marked as red because it failed, you can see explanation text why this could happen (available only for some failures)
  4. WebSockets
    1. Create JavaEE|WebSocket auction sample project and run it in Chrome with NB integration
    2. In opened page, type name and click on the button
    • EXPECTED RESULT:There is a new blue request in Network Monitor with new panel Frames where are websocket messages are being printed
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