TS 74 SassSupport

Sass support Test Specification for NetBeans 7.4

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

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

Contents


Test suite: Editor

  1. Directives
    1. Create a new SASS file and type @ on new line
    2. Invoke code completion
    • EXPECTED RESULT: CSS and Sass directives like @include, @each or @else are offered
  2. Syntax coloring

File:TS_74_SassSupport_coloring.png

    1. Open File:TS 74 SassSupport sample.scss 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 Sass 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 Sass 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 Sass 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 Sass file and paste following
    2.  $redColor: red;
      $blueColor: blue;
      a {
          color: $
      
      }
    3. Invoke code completion after $
    4. Two variables @redColor and @blueColor should be offered, type r
    5. List is narrowed down to single proposal, invoke code completion again
    • EXPECTED RESULT: Variable $redColor is autocompleted
  5. Mixin completion
    1. Create 2 Sass files: file1.sass and folder/_file2.sass
    2. Paste following to file1.sass and save it:
    3.  @import "folder/file2"; 
      @mixin test2($para) { 
      }
      
      div{
          @include t; // cc here
      } 
    4. Paste following to folder/_folder2.sass and save it:
    5. @mixin test{}
      
    6. in file1.sass, invoke code completion in @include statement after "t"
    • EXPECTED RESULT: 2 mixins are offered. Pick one and confirm it and it should be completed. Create another sass file, don't include it in file1.sass . Then repeat steps above and make sure mixin from non-include file is not offered
  6. Mixin completion II
    1. Create sass file with following content:
    2.  @mixin test2($para) {
          color: 
      }
      
    3. Invoke code completion on after ":"
    • EXPECTED RESULT: Values for CSS colors are offered, if you type $ and invoke cc, then $para is autocompleted - see issue 230734
  7. Mixin completion III
    1. Create sass file with following content:
    2.  @mixin test2($para) {
          }
      
    3. Invoke code completion on empty line between curly braces
    • EXPECTED RESULT: CSS properties are offered - see issue 231091
  8. Code completion inside directives
    1. Paste following into sass file
    2.  @for $i from 1 through 3 { 
        .item-#{$i} { 
       }
      }
    3. Invoke code completion inside the empty curly braces
    • EXPECTED RESULT: CSS properties are offered, type c and list should be reduced to items matching c as a prefix
  9. Code completion inside directives II
    1. Paste following into sass file
    2. @for $i from 1 through 3 { 
         @media tv {  
      
       }
      }
    3. Invoke code completion inside the empty curly braces
    • EXPECTED RESULT: HTML elements are offered, type d and list should be reduced to items matching d as a prefix
  10. Code completion inside directives III
    1. Paste following into sass file
    2. @for $i from 1 through 3 { 
         @media tv {  
      
       }
      }
    3. Type @ and invoke code completion inside the empty curly braces
    • EXPECTED RESULT: Sass control directives are offered, type w and list should be reduced to items matching w as a prefix
  11. Code completion for parameters
    1. Paste following into sass file
    2. @mixin border($color, $color2:red) { 
          color: $c ;
      }
      
    3. Invoke code completion after $c
    • EXPECTED RESULT: color and color2 are offered
  12. Code completion after @extend
    1. Paste following into sass file
    2.  #pes{
      
      }
      .kocka{
      }
      .krecek{}
      .seriousError {
        @extend .;
      
      }
    3. Invoke code completion after "." in @extend
    • EXPECTED RESULT: List of class rules are offered. The same happens with # for IDs. Declare class and different file and repeat steps above. Code completion should offer also class from different files
  13. String interpolation
    1. Paste following into sass file
    2.  $attr:1;
      $name:1;
      
      p.#{$name} {
        #{$attr}-color: blue;
      }
      
    3. Invoke code completion at position of "|" in #{$|attr}-co
    • EXPECTED RESULT: Variables attr and name are offered. If you select one, it is completed
  14. "Import code completion"
    1. Create a new Sass file and in the same folder create a new folder "test" with another Sass file inside
    2. type
      @import ""
      in the first Sass 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 "
  15. "Navigation from import"
    1. Use the files from previous case
    2. Press Ctrl+Left Click on value of the import statement
    • EXPECTED RESULT: "Imported Scss file is opened in editor"

Test suite: Navigator

  1. Directives
    1. Paste following code to sass file
    2. $attr:1;
      $name:1;p.#{$name} {
        #{$attr}-color: blue;
      }
      @mixin test($j){
      }
      
    • EXPECTED RESULT: Navigator shows variables and mixins, if variable is declared, it is bold

Test suite: Refactoring

$attr:1;
$name:1;

p.#{$name} {    
    @include test2(red)
}



@mixin test2($j){
    color: $j;
    font-size: $attr;
}
  1. Mixins
    1. Paste code above to sass 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 sass file
    2. Select place cursor inside "name" 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 sass 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: Compile on save

  1. New file wizard
    1. Create a new SASS 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 SASS file, press Next
    3. Check compile on save and let the default values for watched directories
    4. place new sass file into public_html/scss directory
    5. Edit created file and save it
    • EXPECTED RESULT: Corresponding CSS file is created, if you source sass file, then CSS file is re-created
  3. Partials
    1. Create a new HTML5 project
    2. Open new file wizard, select SASS file, press Next
    3. Check compile on save and let the default values for watched directories
    4. place new sass file into public_html/scss directory
    5. Paste following into the new file:
    6. @import "folder/test"; 
      @import "folder2/_test";
      @import "folder3/_test.scss";
    7. Create new sass files: public_html/scss/folder/_test.scss, public_html/scss/folder2/_test.scss and public_html/scss/folder3/_test.scss
    8. in public_html/scss/folder/_test.scss , create a simple CSS rule
    9. save the file
    • EXPECTED RESULT: "Parent" file with @imports is refreshed when imported file is modified and saved. Repeat the same with the rest partials that are imported slightly differently
  4. Watched directories
    1. Create a new HTML5 project
    2. Open project properties, enable Compile on Save for Sass in CSS Preprocessors and have 2 lines in watch field:
/scss/folder -> /css2
/scss/       -> /css
    1. Create corresponding sass file in both directories
    2. Edit them and save
    • EXPECTED RESULT: Corresponding CSS file are created

Test suite: Debugging Information

Sample project File:TS 74 SassSupport Sass debug.zip

Following requires to have checked option "Generate extra information (debug)" for Sass compiler in Tools|Options|Miscellaneous|CSS Preprocessors. This property generates information into target css file that help to identify source scss file. In the project above, enable Sass compiler and save some scss file to recompile css.

  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 one of the divs on page
    • 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.scss and change color in #test2 rule
    • 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 Sass compiler
    2. re-save your sass 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