Write tests with jest (Coverage 100%)

.babelrc.js

@@ -7,4 +7,17 @@ const presets = [
   ],
 ];
 
-module.exports = { presets };
+const testPresets = [
+  [
+    "@babel/react",
+  ],
+];
+
+module.exports = {
+  presets,
+  env: {
+    test: {
+      presets: testPresets,
+    },
+  },
+};

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  endOfLine: "lf",
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "es5",
+}

AUTHORS

@@ -5,3 +5,4 @@
 
 Mohammad Rajabifard <hi@morajabi.me>
 +Behnam Rajabifard <b.rajabifard@gmail.com>
++Tim Hagn <mail@timhagn.com>

__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`generatedDefaultMedia() expect <Box /> to have matching media style rules 1`] = `
+.c0 {
+  background: black;
+}
+
+@media (max-width:768px) {
+  .c0 {
+    background: red;
+  }
+}
+
+@media (min-width:768px) and (max-width:1170px) {
+  .c0 {
+    background: green;
+  }
+}
+
+@media (min-width:1170px) {
+  .c0 {
+    background: blue;
+  }
+}
+
+@media (max-width:1170px) {
+  .c0 {
+    background: white;
+  }
+}
+
+@media (min-width:450px) {
+  .c0 {
+    background: yellow;
+  }
+}
+
+<div
+  className="c0"
+/>
+`;

__tests__/convertors.test.js

@@ -0,0 +1,65 @@
+import { defaultBreakpoints } from '../src/index';
+import { pxToEm, pxToRem } from '../src/convertors';
+
+export const itBreakPoints = {
+  huge: '1440',
+  large: '1170',
+  medium: '768',
+  small: '450',
+};
+
+describe(`pxToEm()`, () => {
+  it('pxToEm to equal defaultBreakpoints converted to em', () => {
+    expect(pxToEm(defaultBreakpoints, 16)).toEqual({
+      huge: '90em',
+      large: '73.125em',
+      medium: '48em',
+      small: '28.125em',
+    });
+  });
+
+  it('pxToEm without ratio to equal defaultBreakpoints converted to em', () => {
+    expect(pxToEm(defaultBreakpoints)).toEqual({
+      huge: '90em',
+      large: '73.125em',
+      medium: '48em',
+      small: '28.125em',
+    });
+  });
+
+  it('pxToEm itBreakPoints to equal itBreakPoints', () => {
+    expect(pxToEm(itBreakPoints, 16)).toEqual(itBreakPoints);
+  });
+
+  it('pxToEm with integer to match empty Object', () => {
+    expect(pxToRem(16, 16)).toMatchObject({});
+  });
+});
+
+describe(`pxToEm()`, () => {
+  it('pxToRem to equal defaultBreakpoints converted to rem', () => {
+    expect(pxToRem(defaultBreakpoints, 16)).toEqual({
+      huge: '90rem',
+      large: '73.125rem',
+      medium: '48rem',
+      small: '28.125rem',
+    });
+  });
+
+  it('pxToRem without ratio to equal defaultBreakpoints converted to rem', () => {
+    expect(pxToRem(defaultBreakpoints)).toEqual({
+      huge: '90rem',
+      large: '73.125rem',
+      medium: '48rem',
+      small: '28.125rem',
+    });
+  });
+
+  it('pxToRem itBreakPoints to equal itBreakPoints', () => {
+    expect(pxToRem(itBreakPoints, 16)).toEqual(itBreakPoints);
+  });
+
+  it('pxToRem {} to equal {}', () => {
+    expect(pxToRem({}, 16)).toEqual({});
+  });
+});

__tests__/index.test.js

@@ -0,0 +1,173 @@
+import 'jest-styled-components';
+import { generateMedia, defaultBreakpoints } from '../src/index';
+import React from 'react';
+import renderer from 'react-test-renderer';
+import styled from 'styled-components';
+import { css } from 'styled-components';
+
+const generatedDefaultMedia = generateMedia(defaultBreakpoints);
+
+const Box = styled.div`
+  background: black;
+
+  ${generatedDefaultMedia.lessThan('medium')`
+    background: red;
+  `}
+
+  ${generatedDefaultMedia.between('medium', 'large')`
+    /* screen width is between 768px (medium) and 1170px (large) */
+    background: green;
+  `}
+
+  ${generatedDefaultMedia.greaterThan('large')`
+    /* screen width is greater than 1170px (large) */
+    background: blue;
+  `}
+
+  ${generatedDefaultMedia.to.large`
+    background: white;
+  `}
+
+  ${generatedDefaultMedia.from.small`
+    background: yellow;
+  `}
+`;
+
+describe(`generatedDefaultMedia()`, () => {
+  it('expect <Box /> to have matching media style rules', () => {
+    let tree = renderer.create(<Box/>).toJSON();
+    expect(tree).toMatchSnapshot();
+    expect(tree).toHaveStyleRule('background', 'red', {
+      media: '(max-width:768px)',
+    });
+    expect(tree).toHaveStyleRule('background', 'green', {
+      media: '(min-width:768px) and (max-width:1170px)',
+    });
+    expect(tree).toHaveStyleRule('background', 'blue', {
+      media: '(min-width:1170px)',
+    });
+    expect(tree).toHaveStyleRule('background', 'white', {
+      media: '(max-width:1170px)',
+    });
+    expect(tree).toHaveStyleRule('background', 'yellow', {
+      media: '(min-width:450px)',
+    });
+  });
+});
+
+describe(`lessThan()`, () => {
+  it('expect lessThan("medium") to create Array', () => {
+    let tree = renderer
+        .create(
+            css`
+        ${generatedDefaultMedia.lessThan('medium')`
+    background: red
+  `}
+      `
+        )
+        .toJSON();
+    let itArray = [
+      '\n    @media (max-width: ',
+      '768px',
+      ') {\n      ',
+      '\n    background: red\n  ',
+      '\n    }\n  ',
+    ];
+    expect(tree).toEqual(expect.arrayContaining(itArray));
+  });
+});
+
+describe(`between()`, () => {
+  it('expect between("medium", "large") to create Array', () => {
+    let tree = renderer
+        .create(
+            css`
+        ${generatedDefaultMedia.between('medium', 'large')`
+    background: green;
+  `}
+      `
+        )
+        .toJSON();
+    let itArray = [
+      '\n    @media (min-width: ',
+      '768px',
+      ') and\n      (max-width: ',
+      '1170px',
+      ') {\n      ',
+      '\n    background: green;\n  ',
+      '\n    }\n  ',
+    ];
+    expect(tree).toEqual(expect.arrayContaining(itArray));
+  });
+});
+
+describe(`greaterThan()`, () => {
+  it('expect greaterThan("large") to create Array', () => {
+    let tree = renderer
+        .create(
+            css`
+        ${generatedDefaultMedia.greaterThan('large')`
+    background: blue;
+  `}
+      `
+        )
+        .toJSON();
+    let itArray = [
+      '\n    @media (min-width: ',
+      '1170px',
+      ') {\n      ',
+      '\n    background: blue;\n  ',
+      '\n    }\n  ',
+    ];
+    expect(tree).toEqual(expect.arrayContaining(itArray));
+  });
+
+  it('expect greaterThan(320) to create Array', () => {
+    let tree = renderer
+        .create(
+            css`
+        ${generatedDefaultMedia.greaterThan('320')`
+    background: blue;
+  `}
+      `
+        )
+        .toJSON();
+    let itArray = [
+      '\n    @media (min-width: ',
+      '320',
+      ') {\n      ',
+      '\n    background: blue;\n  ',
+      '\n    }\n  ',
+    ];
+    expect(tree).toEqual(expect.arrayContaining(itArray));
+  });
+
+  it('expect greaterThan() to create Array', () => {
+    let tree = renderer
+        .create(
+            css`
+        ${generatedDefaultMedia.greaterThan('')`
+    background: blue;
+  `}
+      `
+        )
+        .toJSON();
+    let itArray = [
+      '\n    @media (min-width: ',
+      '0',
+      ') {\n      ',
+      '\n    background: blue;\n  ',
+      '\n    }\n  ',
+    ];
+    expect(tree).toEqual(expect.arrayContaining(itArray));
+  });
+});
+
+describe(`defaultBreakpoints`, () => {
+  it('expect defaultBreakpoints to equal sizes', () => {
+    expect(defaultBreakpoints.small).toEqual('450px');
+    expect(defaultBreakpoints.medium).toEqual('768px');
+    expect(defaultBreakpoints.large).toEqual('1170px');
+    expect(defaultBreakpoints.huge).toEqual('1440px');
+  });
+});