TS 74 LessSupport

LESS support Test Specification for NetBeans 7.4

Author: Vladimir Riha
Last update: 25th June 2013
Introduction: Test specification for LESS support in NetBeans

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


Contents


Test suite: Editor

  1. Syntax coloring

File:TS_74_LessSupport_coloring.png

    1. Open File:TS 74 LessSupport sample.less file in editor and compare syntax highlighting with the picture above
    • EXPECTED RESULT: Syntax highlighting is same as one the picture
  1. Elements completion
    1. Create a new LESS file
    2. type "d" and invoke code completion
    • EXPECTED RESULT: Items like datalist, dd, div etc. are offered
  2. Properties completion
    1. Create a new LESS file and paste following
    2.  
       a {  
        
        // cc here 
      }
    3. Invoke code completion
    • EXPECTED RESULT: CSS Properties are offered, like in css file
  3. Values completion
    1. Create a new LESS file and paste following
    2.  
       a {  
        
       color: // cc here 
      }
    3. Invoke code completion
    • EXPECTED RESULT: Values for color property are offered
  4. Variables completion
    1. Create a new LESS file
    2. Paste following into the file
    3. @nice-blue: #5B83AD;
      @light-blue: (@nice-blue + #111);
      #header { 
      color: @; 
      }
    4. Invoke code completion after @ on inside header rule
    • EXPECTED RESULT: Both variables are offered
  5. Mixin completion
    1. Create a new LESS file
    2. Paste following into the file
    3. .mixinA (@c){
        border-top: dotted 1px black;
      }
      .mixinB {
        border-top: dotted 1px black;
      }
      #menu a {
        color: #111;
        .
      }
    4. Invoke code completion after the dot on inside the rule
    • EXPECTED RESULT: Both mixins are offered, if you remove the dot and invoke cc again, only common CSS properties are offered
  6. Mixin completion II
    1. Create 3 new LESS files: A.less, B.less and partial.less
    2. Declare a mixin in both, B.less and partial.less file
    3. In A.less, paste following
    4. @import "partial.less";
      div {
        color: #111;
        .
      }
    5. Invoke code completion after the dot on inside the rule
    • EXPECTED RESULT: Mixin from included file is offered, not included is either not offered or with different color
  7. Parameter completion
    1. Create a new LESS file
    2. Paste following
    3. @rad:1;
      .test(@radius){
          border-radius: @
      }
    4. Invoke code completion after the @ inside the mixin
    • EXPECTED RESULT: rad and radius are offered
  8. Parameter completion II
    1. Create a new LESS file
    2. Paste following
    3. @oops:1;
      .mixin(@oops2) {
          color-2: @o;
      }
    4. Invoke code completion after the @o inside the mixin
    • EXPECTED RESULT: oops and oops2 should be offered (see issue 231777)
  9. Completion in mixin
    1. Create a new LESS file
    2. Paste following
    3. @oops:1;
      .mixin(@oops2) {
          }
    4. Invoke code completion at empty line inside mixin
    • EXPECTED RESULT: CSS Properties and HTML elements are offered. If you type something, list is reduced
  10. "Import code completion"
    1. Create a new Less file and in the same folder create a new folder "test" with another Less file inside
    2. type
      @import ""
      in the first Less file
    3. invoke code completion inside the quotes
    • EXPECTED RESULT: "List of files/folders in current directory is offered, type t to reduce the list to all starting with t. Finish completion for the test folder, press / and invoke cc again. File should be offered "
  11. "Navigation from import"
    1. Use the files from previous case
    2. Press Ctrl+Left Click on value of the import statement
    • EXPECTED RESULT: "Imported Less file is opened in editor"

Test suite: Navigator

  1. Directives
    1. Paste following code to less file
    2. @attr:1;
      @name:1;
      
      .jejda(@test){
          color: @test;
          font-size: @attr;
      }
      .pre{    
          .jejda(red);
      }
    • EXPECTED RESULT: Navigator shows variables and mixins, if variable is declared, it is bold

Test suite: Compile on save

  1. New file wizard
    1. Create a new LESS file, all default values
    2. Edit the file and save
    • EXPECTED RESULT: Upon first save, you are asked if you want to enable compile on save feature. If you press yes, then Project properties is opened
  2. New file wizard II
    1. Create a new HTML5 project
    2. Open new file wizard, select Less file, press Next
    3. Check compile on save and let the default values for watched directories
    4. place new less file into public_html/less directory
    5. Edit created file and save it
    • EXPECTED RESULT: Corresponding CSS file is created, if you change source less file, then CSS file is re-created
  3. Partials
    1. Create a new HTML5 project
    2. Open new file wizard, select LESS file, press Next
    3. Check compile on save and let the default values for watched directories
    4. place new less file into public_html/less directory
    5. Create new less file: public_html/less/view/partial.less
    6. Paste following into the less file in less directory (so not partial.less):
    7. @import "view/partial.less";
    8. Create a simple CSS rule in partial.less
    9. save the file
    • EXPECTED RESULT: "Parent" file with @imports is refreshed when imported file is modified and saved
  4. Watched directories
    1. Create a new HTML5 project
    2. Open project properties, enable Compile on Save for LESS in CSS Preprocessors and have 2 lines in watch field:
/less/folder -> /css2
/less/       -> /css
    1. Create corresponding less files in both directories
    2. Edit them and save
    • EXPECTED RESULT: Corresponding CSS file are created

Test suite: Refactoring

@attr2:2;
@attr:1;

.test2(@j){
    color: @j;
    font-size: @attr;
}
pre {    
    .test2(red);
}

  1. Mixins
    1. Paste code above to less file
    2. Select place cursor inside "test2" name
    3. All instances/usages are highlighted
    4. Press Ctrl+R and type new name, confirm it with Enter
    • EXPECTED RESULT: Mixin is renamed
  2. Variables
    1. Paste code above to less file
    2. Select place cursor inside "attr" name
    3. All instances/usages are highlighted
    4. Press Ctrl+R and type new name, confirm it with Enter
    • EXPECTED RESULT: Variable is renamed
  3. Parameters
    1. Paste code above to less file
    2. Select place cursor inside "@j" name
    3. All instances/usages are highlighted
    4. Press Ctrl+R and type new name, confirm it with Enter
    • EXPECTED RESULT: Parameter is renamed

Test suite: Debugging Information

Sample project File:TS 74 LessSupport Less debug.zip

Create a new HTML5 project and use the link above as a template. Once project is created, go to project properties and enable Less compiler

Following requires to have checked option "Generate extra information (debug)" for LESS compiler in Tools|Options|Miscellaneous|CSS Preprocessors. This property generates information into target css file that help to identify source less file.

  1. CSS Styles window
    1. Run index file in attached project in Chrome with NB integration or in Embedded browser
    2. Use inspect mode to select either div or span element
    • EXPECTED RESULT: CSS Styles shows information that given rule is generated and changes will be lost after recompilation. If you double click on css property or rule in either Properties or Applied rules part of CSS Styles window, proper scss file is opened. If you double click on property in Rule Editor part, generated css file is opened
  2. Live Reload
    1. Run the sample project in browser with NB integration
    2. open main.less and change color @color variable
    • EXPECTED RESULT: Change is visible in browser
  3. Disable debug information
    1. Go to Tools|Options|Miscellaneous|CSS Preprocessors and disable "Generate extra information (debug)" for LESS compiler
    2. re-save your less file
    • EXPECTED RESULT: Generated CSS file no longer contains debug information
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