// Jasmine unit tests // To run tests, run these commands from the project root: // 1. `npm install -g jasmine-node` // 2. `jasmine-node spec` /* global describe, it, expect */ "use strict"; var postcss = require("postcss"); var pxtorem = require(".."); var basicCSS = ".rule { font-size: 15px }"; var filterPropList = require("../lib/filter-prop-list"); describe("pxtorem", function() { it("should work on the readme example", function() { var input = "h1 { margin: 0 0 20px; font-size: 32px; line-height: 1.2; letter-spacing: 1px; }"; var output = "h1 { margin: 0 0 20px; font-size: 2rem; line-height: 1.2; letter-spacing: 0.0625rem; }"; var processed = postcss(pxtorem()).process(input).css; expect(processed).toBe(output); }); it("should replace the px unit with rem", function() { var processed = postcss(pxtorem()).process(basicCSS).css; var expected = ".rule { font-size: 0.9375rem }"; expect(processed).toBe(expected); }); it("should ignore non px properties", function() { var expected = ".rule { font-size: 2em }"; var processed = postcss(pxtorem()).process(expected).css; expect(processed).toBe(expected); }); it("should handle < 1 values and values without a leading 0 - legacy", function() { var rules = ".rule { margin: 0.5rem .5px -0.2px -.2em }"; var expected = ".rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }"; var options = { propWhiteList: ["margin"] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should handle < 1 values and values without a leading 0", function() { var rules = ".rule { margin: 0.5rem .5px -0.2px -.2em }"; var expected = ".rule { margin: 0.5rem 0.03125rem -0.0125rem -.2em }"; var options = { propList: ["margin"] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should not add properties that already exist", function() { var expected = ".rule { font-size: 16px; font-size: 1rem; }"; var processed = postcss(pxtorem()).process(expected).css; expect(processed).toBe(expected); }); it("should remain unitless if 0", function() { var expected = ".rule { font-size: 0px; font-size: 0; }"; var processed = postcss(pxtorem()).process(expected).css; expect(processed).toBe(expected); }); }); describe("value parsing", function() { it("should not replace values in double quotes or single quotes - legacy", function() { var options = { propWhiteList: [] }; var rules = ".rule { content: '16px'; font-family: \"16px\"; font-size: 16px; }"; var expected = ".rule { content: '16px'; font-family: \"16px\"; font-size: 1rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should not replace values in double quotes or single quotes", function() { var options = { propList: ["*"] }; var rules = ".rule { content: '16px'; font-family: \"16px\"; font-size: 16px; }"; var expected = ".rule { content: '16px'; font-family: \"16px\"; font-size: 1rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should not replace values in `url()` - legacy", function() { var options = { propWhiteList: [] }; var rules = ".rule { background: url(16px.jpg); font-size: 16px; }"; var expected = ".rule { background: url(16px.jpg); font-size: 1rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should not replace values in `url()`", function() { var options = { propList: ["*"] }; var rules = ".rule { background: url(16px.jpg); font-size: 16px; }"; var expected = ".rule { background: url(16px.jpg); font-size: 1rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should not replace values with an uppercase P or X", function() { var options = { propList: ["*"] }; var rules = ".rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }"; var expected = ".rule { margin: 0.75rem calc(100% - 14PX); height: calc(100% - 1.25rem); font-size: 12Px; line-height: 1rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); }); describe("rootValue", function() { // Deprecate it("should replace using a root value of 10 - legacy", function() { var expected = ".rule { font-size: 1.5rem }"; var options = { root_value: 10 }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); it("should replace using a root value of 10", function() { var expected = ".rule { font-size: 1.5rem }"; var options = { rootValue: 10 }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); it("should replace using different root values with different files", function() { var css2 = ".rule { font-size: 20px }"; var expected = ".rule { font-size: 1rem }"; var options = { rootValue: function(input) { if (input.from.indexOf("basic.css") !== -1) { return 15; } return 20; } }; var processed1 = postcss(pxtorem(options)).process(basicCSS, { from: "/tmp/basic.css" }).css; var processed2 = postcss(pxtorem(options)).process(css2, { from: "/tmp/whatever.css" }).css; expect(processed1).toBe(expected); expect(processed2).toBe(expected); }); }); describe("unitPrecision", function() { // Deprecate it("should replace using a decimal of 2 places - legacy", function() { var expected = ".rule { font-size: 0.94rem }"; var options = { unit_precision: 2 }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); it("should replace using a decimal of 2 places", function() { var expected = ".rule { font-size: 0.94rem }"; var options = { unitPrecision: 2 }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); }); describe("propWhiteList", function() { // Deprecate it("should only replace properties in the white list - legacy", function() { var expected = ".rule { font-size: 15px }"; var options = { prop_white_list: ["font"] }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); it("should only replace properties in the white list - legacy", function() { var expected = ".rule { font-size: 15px }"; var options = { propWhiteList: ["font"] }; var processed = postcss(pxtorem(options)).process(basicCSS).css; expect(processed).toBe(expected); }); it("should only replace properties in the white list - legacy", function() { var css = ".rule { margin: 16px; margin-left: 10px }"; var expected = ".rule { margin: 1rem; margin-left: 10px }"; var options = { propWhiteList: ["margin"] }; var processed = postcss(pxtorem(options)).process(css).css; expect(processed).toBe(expected); }); it("should only replace properties in the prop list", function() { var css = ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }"; var expected = ".rule { font-size: 1rem; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 1rem }"; var options = { propWhiteList: ["*font*", "margin*", "!margin-left", "*-right", "pad"] }; var processed = postcss(pxtorem(options)).process(css).css; expect(processed).toBe(expected); }); it("should only replace properties in the prop list with wildcard", function() { var css = ".rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }"; var expected = ".rule { font-size: 16px; margin: 1rem; margin-left: 5px; padding: 5px; padding-right: 16px }"; var options = { propWhiteList: ["*", "!margin-left", "!*padding*", "!font*"] }; var processed = postcss(pxtorem(options)).process(css).css; expect(processed).toBe(expected); }); it("should replace all properties when white list is empty", function() { var rules = ".rule { margin: 16px; font-size: 15px }"; var expected = ".rule { margin: 1rem; font-size: 0.9375rem }"; var options = { propWhiteList: [] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); }); describe("selectorBlackList", function() { // Deprecate it("should ignore selectors in the selector black list - legacy", function() { var rules = ".rule { font-size: 15px } .rule2 { font-size: 15px }"; var expected = ".rule { font-size: 0.9375rem } .rule2 { font-size: 15px }"; var options = { selector_black_list: [".rule2"] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should ignore selectors in the selector black list", function() { var rules = ".rule { font-size: 15px } .rule2 { font-size: 15px }"; var expected = ".rule { font-size: 0.9375rem } .rule2 { font-size: 15px }"; var options = { selectorBlackList: [".rule2"] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should ignore every selector with `body$`", function() { var rules = "body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }"; var expected = "body { font-size: 1rem; } .class-body$ { font-size: 16px; } .simple-class { font-size: 1rem; }"; var options = { selectorBlackList: ["body$"] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); it("should only ignore exactly `body`", function() { var rules = "body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }"; var expected = "body { font-size: 16px; } .class-body { font-size: 1rem; } .simple-class { font-size: 1rem; }"; var options = { selectorBlackList: [/^body$/] }; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); }); describe("replace", function() { it("should leave fallback pixel unit with root em value", function() { var options = { replace: false }; var processed = postcss(pxtorem(options)).process(basicCSS).css; var expected = ".rule { font-size: 15px; font-size: 0.9375rem }"; expect(processed).toBe(expected); }); }); describe("mediaQuery", function() { // Deprecate it("should replace px in media queries", function() { var options = { media_query: true }; var processed = postcss(pxtorem(options)).process( "@media (min-width: 500px) { .rule { font-size: 16px } }" ).css; var expected = "@media (min-width: 31.25rem) { .rule { font-size: 1rem } }"; expect(processed).toBe(expected); }); it("should replace px in media queries", function() { var options = { mediaQuery: true }; var processed = postcss(pxtorem(options)).process( "@media (min-width: 500px) { .rule { font-size: 16px } }" ).css; var expected = "@media (min-width: 31.25rem) { .rule { font-size: 1rem } }"; expect(processed).toBe(expected); }); }); describe("minPixelValue", function() { it("should not replace values below minPixelValue", function() { var options = { propWhiteList: [], minPixelValue: 2 }; var rules = ".rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }"; var expected = ".rule { border: 1px solid #000; font-size: 1rem; margin: 1px 0.625rem; }"; var processed = postcss(pxtorem(options)).process(rules).css; expect(processed).toBe(expected); }); }); describe("filter-prop-list", function() { it('should find "exact" matches from propList', function() { var propList = [ "font-size", "margin", "!padding", "*border*", "*", "*y", "!*font*" ]; var expected = "font-size,margin"; expect(filterPropList.exact(propList).join()).toBe(expected); }); it('should find "contain" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "*border*", "*", "*y", "!*font*" ]; var expected = "margin,border"; expect(filterPropList.contain(propList).join()).toBe(expected); }); it('should find "start" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "border*", "*", "*y", "!*font*" ]; var expected = "border"; expect(filterPropList.startWith(propList).join()).toBe(expected); }); it('should find "end" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "border*", "*", "*y", "!*font*" ]; var expected = "y"; expect(filterPropList.endWith(propList).join()).toBe(expected); }); it('should find "not" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "border*", "*", "*y", "!*font*" ]; var expected = "padding"; expect(filterPropList.notExact(propList).join()).toBe(expected); }); it('should find "not contain" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "!border*", "*", "*y", "!*font*" ]; var expected = "font"; expect(filterPropList.notContain(propList).join()).toBe(expected); }); it('should find "not start" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "!border*", "*", "*y", "!*font*" ]; var expected = "border"; expect(filterPropList.notStartWith(propList).join()).toBe(expected); }); it('should find "not end" matches from propList and reduce to string', function() { var propList = [ "font-size", "*margin*", "!padding", "!border*", "*", "!*y", "!*font*" ]; var expected = "y"; expect(filterPropList.notEndWith(propList).join()).toBe(expected); }); });