Tests directory

tests/.unit_tests.rb

@@ -0,0 +1,55 @@
+require 'compass'
+require 'compass/exec'
+require 'test/unit'
+require 'diffy'
+require 'colorize'
+require 'pathname'
+
+class TestCompassOutput < Test::Unit::TestCase
+
+  Compass.add_configuration 'config.rb'
+  Compass.configuration.project_path = Dir.pwd
+
+  # Remove all current Diff files
+  Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) }
+
+  Compass.compiler.sass_files.each do |sass_file|
+    test_name = File.basename(sass_file, '.*')
+
+    define_method "test_#{test_name}_compile " do
+      # Compiled CSS file path
+      test_file_pwd = Compass.compiler.corresponding_css_file(sass_file)
+
+      # Relative path of compiled CSS file from Tests directory
+      relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s
+
+      # Control files path
+      control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd
+
+      # The base path of the sub folders, making the folders if needed
+      base_pwd = relative_pwd.sub(File.basename(relative_pwd), '')
+      FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}"
+
+      # Compiles Sass file
+      Compass.compiler.compile sass_file, test_file_pwd  # Raises exception upon error
+
+      begin
+        # Assert that our test output matches our control output
+        passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red
+      ensure
+        # If there is a failure, generate a diff of the files and put it with the compiled file
+        if !passed
+          test_file = File.open(test_file_pwd).read;
+          control_file = File.open(control_file_pwd).read;
+          diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff"
+          diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true)
+
+          File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) }
+
+      	  puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black)
+        end
+      end
+    end
+  end
+end
+

tests/config.rb

@@ -0,0 +1,22 @@
+# Require any additional compass plugins here.]
+
+# File system locations
+sass_dir              = 'tests'
+css_dir               = 'output'
+
+# If developing an extension, add your extension's stylesheets folder as an import path.
+# add_import_path       '../stylesheets'
+
+# Set to true for easier debugging
+line_comments         = false
+# preferred_syntax      = :sass
+
+# CSS output style - :nested, :expanded, :compact, or :compressed
+output_style          = :expanded
+
+# Determine whether Compass asset helper functions generate relative
+# or absolute paths
+relative_assets       = true
+
+# Learn more:
+#   http://compass-style.org/docs/tutorials/configuration-reference/

tests/controls/README.md

@@ -0,0 +1 @@
+Place your expected output CSS files in here. Control files need to be named the same as their test counterpart and need to be located at the same relative path from the `tests/tests` directory.

tests/tests/README.md

@@ -0,0 +1,40 @@
+Place your test SCSS files in here. These files will be compiled into an `output` directory and those output files will be compared against our `controls`. If there is a difference, you will get a a diff of your `output` vs your `controls`.
+
+Each individual piece you're testing, from a function to a mixin to general usage, should be easy to identify what it is from the output CSS. The general convention to follow is something like the following:
+
+```scss
+//////////////////////////////
+// Functions
+//////////////////////////////
+/**
+  * Function Name Function 
+**/
+.function-name {
+  /* Each permutation of input/output that is possible should get a CSS comment */
+  /* No Defaulted Input */
+  _test: "function-name(input)";
+  _result: function-name(input);
+  /* Defaulted Input */
+  _test: "function-name(input, input2)";
+  _result: function-name(input, input2);
+}
+//////////////////////////////
+// Mixins
+//////////////////////////////
+/**
+  * Mixin Name 
+**/
+.mixin-name {
+  /* Each permutation of input/output that is possible should get a CSS comment */
+  /* No Defaulted Input */
+  _test: "mixin-name(input)"
+  @include mixin-name(input);
+  /* Defaulted Input */
+  _test: "mixin-name(input, input2)"
+  @include mixin-name(input, input2);
+}
+```
+
+You want representative examples of input/output. Don't be afraid to add tests as you need them, the more tests the better! It's very likely that, for complex systems, the total number of tests you write (and their related control) will outweigh your actual Compass framework.
+
+You're also encouraged to have multiple files in multiple folders to break down what you're testing into chunks in order to test small, discrete pieces.