Fix issue when override mixin get replaced with the empty one. Add test case

Author: Hannu Pelkonen

lib/app/sass/_styleguide_custom_variables.scss

@@ -1,2 +1,7 @@
 // This file will be overwritten by styleguide:generate task if user specifies custom UI colors
 // This file should always exists since it is importendin app.scss
+
+@mixin styleguide_custom_styles {
+  // User can re-define this mixin to create custom style overrides
+  // This mixin is included in the end of the application stylesheet
+}

lib/app/sass/_styleguide_variables.scss

@@ -36,9 +36,4 @@ $header-height: 90px !default;
 $menu-height: 40px !default;
 
 $content-max-width: 68em !default;
-$mobile: "screen and (max-width: 768px)" !default;
-
-@mixin styleguide_custom_styles {
-  // This mixin is included in the end of UI stylesheet
-  // You can override any styleguide internal style here
-}
+$mobile: "screen and (max-width: 768px)" !default;

lib/app/sass/app.scss

@@ -2,11 +2,6 @@ $fa-font-path: '../assets/fonts';
 @import 'components/font-awesome/font-awesome';
 @import 'bourbon';
 
-@mixin styleguide_custom_styles {
-  // User can re-define this mixin in styleguide_custom_variables to create custom style overrides
-  // This mixin is included in the end of this file
-}
-
 @import 'styleguide_custom_variables';
 @import 'styleguide_variables';
 @import 'styleguide_mixins';

test/integration/assert-styleguide-custom-variables.js

@@ -0,0 +1,22 @@
+var expect = require('chai').expect;
+
+module.exports = (function() {
+
+  var file;
+
+  return {
+    set: function(fileObj) {
+      file = fileObj;
+    },
+    register: function() {
+      it('should exist', function() {
+        expect(file).to.be.an('object');
+      });
+
+      it('should custom colors definition', function() {
+        expect(file.contents.toString()).to.contain('$primary_color: #00FF00;');
+      });
+    }
+  };
+
+}());

test/integration/assertions.js

@@ -5,5 +5,6 @@ module.exports = {
   atRules: require('./assert-at-rules'),
   styleguideCss: require('./assert-styleguide-css'),
   appCss: require('./assert-app-css'),
-  styleguideJson: require('./assert-styleguide-json')
+  styleguideJson: require('./assert-styleguide-json'),
+  styleguideCustomVariables: require('./assert-styleguide-custom-variables')
 };

test/integration/structure.test.js

@@ -108,6 +108,26 @@ describe('styleguide_at_rules.css', function() {
 
 });
 
+describe('sass/_styleguide_custom_variables.scss', function() {
+
+  assertions.styleguideCustomVariables.register();
+
+  before(function(done) {
+    this.timeout(5000);
+    var files = [];
+    styleguideGenerateStream().pipe(
+      through.obj(collector(files), function(callback) {
+        console.log(files);
+        var css = findFile(files, 'sass/_styleguide_custom_variables.scss');
+        assertions.styleguideCustomVariables.set(css);
+        callback();
+        done();
+      })
+    );
+  });
+
+});
+
 describe('overview.html', function() {
 
   assertions.overviewHtml.register();

test/integration/test-config.js

@@ -10,5 +10,6 @@ module.exports = {
   ],
   commonClass: ['custom-class-1', 'custom-class-2'],
   styleVariables: path.resolve(__dirname, '../projects/scss-project/source/styles/_styleguide_variables.scss'),
+  customColors: path.resolve(__dirname, '../projects/scss-project/source/styles/custom_colors.scss'),
   filesConfig: []
 };

test/projects/scss-project/source/styles/custom_colors.scss

@@ -0,0 +1,3 @@
+// Test custom color
+
+$primary_color: #00FF00;