Merge branch 'develop'

.npmignore

@@ -10,4 +10,4 @@ gulp
 .babelrc
 .gitignore
 gulpfile.babel.js
-
+unit-tests

README.md

@@ -52,7 +52,7 @@ npm install mq-scss --save
 
 ```````````
 
-Import mq-scss at the top of your main Sass file (note that the exact path will differ depending on your folder structure)
+Import mq-scss at the top of your main Sass file (note that the exact path will differ depending on your folder structure).
 
 ``````scss
 @import "../node_modules/mq-scss/mq";
@@ -66,7 +66,7 @@ Import mq-scss at the top of your main Sass file (note that the exact path will
 
 ### Min/Max width
 
-In this example we state that we want the background of the element to be red by default but change to blue if the screen is less than or equal to 600px wide
+In this example we state that we want the background of the element to be red by default but change to blue if the screen is less than or equal to 600px wide.
 
 `````````````scss
 // SCSS
@@ -363,7 +363,7 @@ $MQ-[element]__[property]--[state]: ([range], [breakpoint-1], [breakpoint-2]);
 
 Here is the breakdown of what each part means. I tend to use camelCase for each group to keep the grouping clear.
 
-**$MQ** - MQ at the start tells us that it's a media query variable (helps when scanning through the code)
+**$MQ** - MQ at the start tells us that it's a media query variable (helps when scanning through the code).
 
 **[element]** - The target element name. So for `.car__door` [element] would be `door`.
 
@@ -1138,25 +1138,32 @@ If you wish to contribute to mq-scss, it now comes with a testing environment. T
 4. If you have never used gulp before, run `npm install gulp-cli -g`
 5. Run `gulp --open`
 
-I plan to eventually create proper automated unit tests. This is better than nothing though.
+It also comes with a batch of 46 unit tests that are used to ensure that all of the functionality remains intact. To run the unit tests:
+
+1. Run `gulp compile-tests` (refreshes the css files it tests against)
+2. Run `npm test`
 
 ## Change log
 
 This change log only covers major changes to the mixin. Due to how npm works, things like edits to the readme file require releasing whole new versions of the module to publish the edits. Those sorts of releases are not listed here.
 
+### v2.1.2
+
+- Added automated unit-tests.
+
 ### v2.1.0
 
 - Added the ability to debug mq statements by setting either the local `$debug` setting or the global `$mq-debug` setting to `true`.
-- Now supports media type only statements
-- Added a proper testing/demo environment to the repository (check out repo > `npm i` > `gulp --open`)
+- Now supports media type only statements.
+- Added a proper testing/demo environment to the repository (check out repo > `npm i` > `gulp --open`).
 - Added support for `not` as a short-hand for `not screen` media types.
 
 ### v2.0.0
 
 - Added the ability to define custom media types for individual mq statements.
-- **BREAKING CHANGE:** By default, no media type is added to the media query (previously it added "screen" as the media type to all media queries)
+- **BREAKING CHANGE:** By default, no media type is added to the media query (previously it added "screen" as the media type to all media queries).
     - If upgrading from v1.x you may want to add `"screen"` to the end of all your MQ statements to retain consistency with v1.x.
-    - eg. from `@include mq(max, 800px)` to `@include mq(max, 800px, 'screen')`
+    - eg. from `@include mq(max, 800px)` to `@include mq(max, 800px, 'screen')`.
 
 ### v1.3.2
 
@@ -1168,8 +1175,8 @@ This change log only covers major changes to the mixin. Due to how npm works, th
 
 ### v1.3.0
 
-- Added the `plus` keyword for improved handling of "and" statements
-- Changed the breakpoints list example to just a list of variables
+- Added the `plus` keyword for improved handling of "and" statements.
+- Changed the breakpoints list example to just a list of variables.
 
 ### v1.2.0
 

gulp/helpers/readFile.js

@@ -0,0 +1,10 @@
+import fs from 'fs';
+
+export default function readFile(fileName){
+	return new Promise((resolve, reject) => {
+		fs.readFile(fileName, 'utf8', (err, contents)=>{
+			if (err) throw new Error(err);
+			resolve(contents);
+		})
+	})
+}

gulp/helpers/unitTest.js

@@ -0,0 +1,11 @@
+import readFile from './readFile';
+
+export default function unitTest (fileName, dir, expectedResult){
+	test(fileName, ()=>{
+		return readFile(`${dir}/${fileName}.css`).then(css => {
+			expect( css ).toBe(expectedResult+'\n');
+		})
+	})
+}
+
+//__dirname

gulp/tasks/compile-tests.js

@@ -0,0 +1,22 @@
+
+import notifier from 'node-notifier';
+import { notification_icon_location } from '../config/shared-vars';
+
+export default function(gulp, plugins, args, config, taskTarget, browserSync) {
+
+	// Sass compilation
+	gulp.task('compile-tests', () => {
+		return gulp.src('unit-tests/*/**/*.scss')
+		.pipe(plugins.wait(100))//Helps prevent odd file not found error
+		.pipe(plugins.sass({
+			outputStyle: 'compressed',
+			precision: 10,
+			includePaths: [
+				'unit-tests',
+				'node_modules'
+			]
+		}).on('error', plugins.sass.logError))
+		.pipe(gulp.dest('unit-tests'))
+	});
+
+}

gulp/tasks/sass.js

@@ -5,7 +5,7 @@ import autoprefixer from 'autoprefixer';
 import px2rem from 'postcss-pxtorem';
 import gulpif from 'gulp-if';
 import notifier from 'node-notifier';
-import { notification_icon_location } from '../config/shared-vars';
+import { notification_icon_location, plugins } from '../config/shared-vars';
 
 export default function(gulp, plugins, args, config, taskTarget, browserSync) {
   let dirs = config.directories;
@@ -20,14 +20,18 @@ export default function(gulp, plugins, args, config, taskTarget, browserSync) {
 
   // Sass compilation
   gulp.task('sass', () => {
-    return gulp.src(path.join(dirs.source, dirs.styles, entries.css))
+    return gulp.src([
+      [dirs.source, dirs.styles, entries.css].join('/'),
+      'unit-tests/test-styles.scss',
+    ])
       .pipe(plugins.plumber((error)=>{
         console.log(`\n ${plugins.util.colors.red.bold('Sass failed to compile:')} ${plugins.util.colors.yellow(error.message)}\n`);
         //console.error(error.stack);
         return notifier.notify({title: 'Sass Error', message: `${path.basename(error.file)} line ${error.line}`, icon: notification_icon_location+'gulp-error.png'});
       }))
       .pipe(plugins.wait(100))//Helps prevent odd file not found error
       .pipe(plugins.sourcemaps.init())
+      .pipe(plugins.sassGlob())
       .pipe(plugins.sass({
         outputStyle: 'expanded',
         precision: 10,
@@ -38,7 +42,7 @@ export default function(gulp, plugins, args, config, taskTarget, browserSync) {
         ]
       }).on('error', plugins.sass.logError))
       .pipe(plugins.postcss([
-        autoprefixer({browsers: ['last 2 version', '> 5%', 'safari 5', 'ios 6', 'android 4', 'ie >= 9']}),
+        autoprefixer({browsers: ['last 2 version', '> 1%', 'ie >= 11'], grid: true }),
         px2rem(px2rem_settings)
       ]))
       .pipe(plugins.rename(function(path) {

gulpfile.babel.js

@@ -48,6 +48,7 @@ gulp.task('compile', gulp.series(
     'pug',
     'imagemin',
     'sass',
+    'compile-tests',
     'modernizr',
     'browserify',
   )
@@ -77,6 +78,3 @@ gulp.task('build', gulp.series(
 
 // Server tasks with watch
 gulp.task('serve', gulp.series('default'));
-
-// Testing
-gulp.task('test', gulp.series('eslint'));