Mocha tests

24 files changed, 512 insertions, 0 deletions

diff --git a/test/less/main.less b/test/less/main.less
new file mode 100644
index 0000000..cdde369
--- /dev/null
+++ b/test/less/main.less
@@ -0,0 +1,45 @@
+@import "../../less/rfs";
+
+// responsive-font-size property with `px` unit
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  .responsive-font-size(32px);
+}
+
+// responsive-font-size property with `rem` unit
+.selector-2 {
+  .responsive-font-size(2rem);
+}
+
+// responsive-font-size property with !important
+.selector-3 {
+  .responsive-font-size(2rem, true);
+}
+
+// rfs shorthand
+.selector-4 {
+  .rfs(2rem);
+}
+
+// not supported unit
+.selector-5 {
+  .responsive-font-size(2em);
+}
+
+// special value
+.selector-6 {
+  .responsive-font-size(inherit);
+}
+
+// responsive-font-size property inside @support-query
+@supports (display: flex) {
+  .selector-7 {
+    .rfs(28px);
+  }
+}
+
+// responsive-font-size property without unit
+.selector-8 {
+  .responsive-font-size(32);
+}
diff --git a/test/less/test-1.less b/test/less/test-1.less
new file mode 100644
index 0000000..bdb4ce0
--- /dev/null
+++ b/test/less/test-1.less
@@ -0,0 +1 @@
+@import "main";
diff --git a/test/less/test-2.less b/test/less/test-2.less
new file mode 100644
index 0000000..ce73abf
--- /dev/null
+++ b/test/less/test-2.less
@@ -0,0 +1,2 @@
+@import "main";
+@enable-responsive-font-sizes: false;
diff --git a/test/less/test-3.less b/test/less/test-3.less
new file mode 100644
index 0000000..2b0c180
--- /dev/null
+++ b/test/less/test-3.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-class: "disable";
diff --git a/test/less/test-4.less b/test/less/test-4.less
new file mode 100644
index 0000000..c47e198
--- /dev/null
+++ b/test/less/test-4.less
@@ -0,0 +1,2 @@
+@import "main";
+@rfs-class: "enable";
diff --git a/test/lib/result.js b/test/lib/result.js
new file mode 100644
index 0000000..8f59a36
--- /dev/null
+++ b/test/lib/result.js
@@ -0,0 +1,49 @@
+// Packages
+const prettier = require("prettier");
+const fs = require("fs");
+const sass = require('node-sass');
+const less = require('less');
+const stylus = require('stylus');
+
+// Strings
+const encoding = 'utf8';
+const dir = `${__dirname}/../`;
+
+// Functions
+const format = css => prettier.format(css, {parser: "css"}).replace(/(\n)(\n)/g, '$1');
+const getFileContent = (folder, id, ext) => fs.readFileSync(`${dir}${folder}/${id}.${ext}`, {encoding});
+
+// Postcss
+const postcss = require('postcss');
+const rfs = require('../../');
+const postcsstests = require('../postcss/tests.js');
+const postcsscss = getFileContent('postcss', 'main', 'css');
+
+// Exports
+module.exports = {
+  // Return formatted expected result
+  expected: (id) => format(getFileContent('result', id, 'css')),
+
+  // Return parsed css
+  sass: (id) => format(sass.renderSync({file: `${dir}sass/${id}.scss`}).css.toString(encoding)),
+
+  // Return parsed css
+  less: (id) => {
+    return less.render(getFileContent('less', id, 'less'), {paths: [dir + 'less'], syncImport: true}).then((result) => {
+      return format(result.css);
+    });
+  },
+
+  stylus: (id) => {
+    let formattedCSS = '';
+    stylus.render(getFileContent('stylus', id, 'styl'), {filename: `${dir}stylus/${id}.styl`}, (err, css) => {
+      if (err) {
+        throw err;
+      }
+      formattedCSS = format(css);
+    });
+    return formattedCSS;
+  },
+
+  postcss: (id) => format(postcss(rfs(postcsstests[id])).process(postcsscss).css)
+};
diff --git a/test/lib/tests.js b/test/lib/tests.js
new file mode 100644
index 0000000..38120ba
--- /dev/null
+++ b/test/lib/tests.js
@@ -0,0 +1,18 @@
+module.exports = [
+  {
+    id: 'test-1',
+    name: 'Default build'
+  },
+  {
+    id: 'test-2',
+    name: 'Disable responsive font size'
+  },
+  {
+    id: 'test-3',
+    name: 'Disabled class'
+  },
+  {
+    id: 'test-4',
+    name: 'Enable class'
+  },
+];
diff --git a/test/postcss/main.css b/test/postcss/main.css
new file mode 100644
index 0000000..d1027ca
--- /dev/null
+++ b/test/postcss/main.css
@@ -0,0 +1,35 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  responsive-font-size: 32px;
+}
+
+.selector-2 {
+  responsive-font-size: 2rem;
+}
+
+.selector-3 {
+  responsive-font-size: 2rem !important;
+}
+
+.selector-4 {
+  rfs: 2rem;
+}
+
+.selector-5 {
+  responsive-font-size: 2em;
+}
+
+.selector-6 {
+  responsive-font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    rfs: 28px;
+  }
+}
+
+.selector-8 {
+  responsive-font-size: 32;
+}
diff --git a/test/postcss/tests.js b/test/postcss/tests.js
new file mode 100644
index 0000000..6de7d8b
--- /dev/null
+++ b/test/postcss/tests.js
@@ -0,0 +1,12 @@
+module.exports = {
+  'test-1': {},
+  'test-2': {
+    enableResponsiveFontSizes: false
+  },
+  'test-3': {
+    class: 'disable'
+  },
+  'test-4': {
+    class: 'enable'
+  }
+};
diff --git a/test/result/test-1.css b/test/result/test-1.css
new file mode 100644
index 0000000..6494bd3
--- /dev/null
+++ b/test/result/test-1.css
@@ -0,0 +1,65 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem
+}
+@media (max-width: 1200px) {
+  .selector-1 {
+    font-size: calc(1.325rem + .9vw)
+  }
+}
+
+.selector-2 {
+  font-size: 2rem
+}
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.325rem + .9vw)
+  }
+}
+
+.selector-3 {
+  font-size: 2rem !important
+}
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.325rem + .9vw) !important
+  }
+}
+
+.selector-4 {
+  font-size: 2rem
+}
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.325rem + .9vw)
+  }
+}
+
+.selector-5 {
+  font-size: 2em
+}
+
+.selector-6 {
+  font-size: inherit
+}
+
+@supports (display:flex) {
+  .selector-7 {
+    font-size: 1.75rem
+  }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.3rem + .6vw)
+    }
+  }
+}
+
+.selector-8 {
+  font-size: 2rem
+}
+@media (max-width: 1200px) {
+  .selector-8 {
+    font-size: calc(1.325rem + .9vw)
+  }
+}
diff --git a/test/result/test-2.css b/test/result/test-2.css
new file mode 100644
index 0000000..6c0e66e
--- /dev/null
+++ b/test/result/test-2.css
@@ -0,0 +1,35 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem;
+}
+
+.selector-2 {
+  font-size: 2rem;
+}
+
+.selector-3 {
+  font-size: 2rem !important;
+}
+
+.selector-4 {
+  font-size: 2rem;
+}
+
+.selector-5 {
+  font-size: 2em;
+}
+
+.selector-6 {
+  font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 1.75rem;
+  }
+}
+
+.selector-8 {
+  font-size: 2rem;
+}
diff --git a/test/result/test-3.css b/test/result/test-3.css
new file mode 100644
index 0000000..fcc95b5
--- /dev/null
+++ b/test/result/test-3.css
@@ -0,0 +1,66 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+}
+.selector-1, .disable-responsive-font-size .selector-1, .selector-1.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-1 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-2, .disable-responsive-font-size .selector-2, .selector-2.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-2 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-3, .disable-responsive-font-size .selector-3, .selector-3.disable-responsive-font-size {
+  font-size: 2rem !important;
+}
+@media (max-width: 1200px) {
+  .selector-3 {
+    font-size: calc(1.325rem + 0.9vw) !important;
+  }
+}
+
+.selector-4, .disable-responsive-font-size .selector-4, .selector-4.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-4 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-5 {
+  font-size: 2em;
+}
+
+.selector-6 {
+  font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7, .disable-responsive-font-size .selector-7, .selector-7.disable-responsive-font-size {
+    font-size: 1.75rem;
+  }
+  @media (max-width: 1200px) {
+    .selector-7 {
+      font-size: calc(1.3rem + 0.6vw);
+    }
+  }
+}
+.selector-8, .disable-responsive-font-size .selector-8, .selector-8.disable-responsive-font-size {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .selector-8 {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
diff --git a/test/result/test-4.css b/test/result/test-4.css
new file mode 100644
index 0000000..d63c63d
--- /dev/null
+++ b/test/result/test-4.css
@@ -0,0 +1,64 @@
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .enable-responsive-font-size .selector-1, .selector-1.enable-responsive-font-size {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-2 {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .enable-responsive-font-size .selector-2, .selector-2.enable-responsive-font-size {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-3 {
+  font-size: 2rem !important;
+}
+@media (max-width: 1200px) {
+  .enable-responsive-font-size .selector-3, .selector-3.enable-responsive-font-size {
+    font-size: calc(1.325rem + 0.9vw) !important;
+  }
+}
+
+.selector-4 {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .enable-responsive-font-size .selector-4, .selector-4.enable-responsive-font-size {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
+
+.selector-5 {
+  font-size: 2em;
+}
+
+.selector-6 {
+  font-size: inherit;
+}
+
+@supports (display: flex) {
+  .selector-7 {
+    font-size: 1.75rem;
+  }
+  @media (max-width: 1200px) {
+    .enable-responsive-font-size .selector-7, .selector-7.enable-responsive-font-size {
+      font-size: calc(1.3rem + 0.6vw);
+    }
+  }
+}
+.selector-8 {
+  font-size: 2rem;
+}
+@media (max-width: 1200px) {
+  .enable-responsive-font-size .selector-8, .selector-8.enable-responsive-font-size {
+    font-size: calc(1.325rem + 0.9vw);
+  }
+}
diff --git a/test/sass/main.scss b/test/sass/main.scss
new file mode 100644
index 0000000..55d8882
--- /dev/null
+++ b/test/sass/main.scss
@@ -0,0 +1,45 @@
+@import "../../sass/rfs";
+
+// responsive-font-size property with `px` unit
+.selector-1 {
+  background-color: #f00;
+  width: 300px;
+  @include responsive-font-size(32px);
+}
+
+// responsive-font-size property with `rem` unit
+.selector-2 {
+  @include responsive-font-size(2rem);
+}
+
+// responsive-font-size property with !important
+.selector-3 {
+  @include responsive-font-size(2rem, true);
+}
+
+// rfs shorthand
+.selector-4 {
+  @include rfs(2rem);
+}
+
+// not supported unit
+.selector-5 {
+  @include responsive-font-size(2em);
+}
+
+// special value
+.selector-6 {
+  @include responsive-font-size(inherit);
+}
+
+// responsive-font-size property inside @support-query
+@supports (display: flex) {
+  .selector-7 {
+    @include rfs(28px);
+  }
+}
+
+// responsive-font-size property without unit
+.selector-8 {
+  @include responsive-font-size(32);
+}
diff --git a/test/sass/test-1.scss b/test/sass/test-1.scss
new file mode 100644
index 0000000..bdb4ce0
--- /dev/null
+++ b/test/sass/test-1.scss
@@ -0,0 +1 @@
+@import "main";
diff --git a/test/sass/test-2.scss b/test/sass/test-2.scss
new file mode 100644
index 0000000..9c8f267
--- /dev/null
+++ b/test/sass/test-2.scss
@@ -0,0 +1,2 @@
+$enable-responsive-font-sizes: false;
+@import "main";
diff --git a/test/sass/test-3.scss b/test/sass/test-3.scss
new file mode 100644
index 0000000..e9cf9bc
--- /dev/null
+++ b/test/sass/test-3.scss
@@ -0,0 +1,2 @@
+$rfs-class: "disable";
+@import "main";
diff --git a/test/sass/test-4.scss b/test/sass/test-4.scss
new file mode 100644
index 0000000..18f8b97
--- /dev/null
+++ b/test/sass/test-4.scss
@@ -0,0 +1,2 @@
+$rfs-class: "enable";
+@import "main";
diff --git a/test/stylus/main.styl b/test/stylus/main.styl
new file mode 100644
index 0000000..f8b2fb8
--- /dev/null
+++ b/test/stylus/main.styl
@@ -0,0 +1,28 @@
+@import "../../stylus/rfs"
+
+.selector-1
+  background-color: #f00
+  width: 300px
+  responsive-font-size(32px)
+
+.selector-2
+  responsive-font-size(2rem)
+
+.selector-3
+  responsive-font-size(2rem, true)
+
+.selector-4
+  rfs(2rem)
+
+.selector-5
+  responsive-font-size(2em)
+
+.selector-6
+  responsive-font-size(inherit)
+
+@supports (display: flex)
+  .selector-7
+    rfs(28px)
+
+.selector-8
+  responsive-font-size(32)
diff --git a/test/stylus/test-1.styl b/test/stylus/test-1.styl
new file mode 100644
index 0000000..bdb4ce0
--- /dev/null
+++ b/test/stylus/test-1.styl
@@ -0,0 +1 @@
+@import "main";
diff --git a/test/stylus/test-2.styl b/test/stylus/test-2.styl
new file mode 100644
index 0000000..1ecdedc
--- /dev/null
+++ b/test/stylus/test-2.styl
@@ -0,0 +1,2 @@
+$enable-responsive-font-sizes = false
+@import "main";
diff --git a/test/stylus/test-3.styl b/test/stylus/test-3.styl
new file mode 100644
index 0000000..f52a0c3
--- /dev/null
+++ b/test/stylus/test-3.styl
@@ -0,0 +1,2 @@
+$rfs-class = "disable"
+@import "main";
diff --git a/test/stylus/test-4.styl b/test/stylus/test-4.styl
new file mode 100644
index 0000000..e9903f5
--- /dev/null
+++ b/test/stylus/test-4.styl
@@ -0,0 +1,2 @@
+$rfs-class = "enable"
+@import "main";
diff --git a/test/test.js b/test/test.js
new file mode 100644
index 0000000..dab9efb
--- /dev/null
+++ b/test/test.js
@@ -0,0 +1,29 @@
+const assert = require('assert');
+const tests = require("./lib/tests.js");
+const styles = ['Less', 'Sass', 'Stylus', 'PostCSS'];
+const result = require("./lib/result.js");
+
+styles.forEach((style) => {
+  describe(style, function () {
+    tests.forEach((test) => {
+      it(test.name, function (done) {
+        const generated = result[style.toLowerCase()](test.id);
+        const expected = result.expected(test.id);
+        // If promise:
+        if (typeof generated.then === 'function') {
+          generated.then((generated) => {
+            assert.equal(generated, expected);
+            done();
+          }).catch((error) => {
+            done(error);
+          });
+        }
+        else {
+          assert.equal(generated, expected);
+          done();
+        }
+      });
+    });
+  });
+});
+