Merge branch 'feature/additional-tests' into develop

README.md

@@ -67,7 +67,7 @@ breakpoint.only('m', 'xl')
 There is also a shorthand for mobile first media queries (min-width). Calling `breakpoint.m` is the same as `breakpoint.up('m')`.
 
 ```javascript
-`breakpoint.m'`
+breakpoint.m
 // Will return a media query with a min-width of 768
 // @media only screen and (min-width: 768px)
 ```
@@ -119,9 +119,9 @@ const Button = styled.button`
 });
 ```
 
-The first mixin `breakpoint.down(s)`, will give the styled button component a font size of 12px, at a breakpoint lower than "s", i.e. max-width(320px).
+The first mixin `breakpoint.down(s)`, will give the styled button component a font size of 12px, at a breakpoint bellow "s", i.e. max-width(320px).
 
-The second mixin `breakpoint.m`, uses the short hand version of `breakpoint.up.('m')`, and will give the button a background of `palevioletred`, at a breakpoint higher than "m", i.e. min-width(768).
+The second mixin `breakpoint.m`, uses the short hand version of `breakpoint.up.('m')`, and will give the button a background of `palevioletred`, at a breakpoint above "m", i.e. min-width(768).
 
 ---
 

package.json

@@ -88,7 +88,5 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
-  "dependencies": {
-    "@humblebee/styled-components-breakpoint": "^1.2.1"
-  }
+  "dependencies": {}
 }

src/index.spec.js

@@ -3,7 +3,6 @@ import media, {
   mediaWidthRule,
   ruleTemplate,
   mediaTemplate,
-  getMedia,
   getSmallestMedia,
   getNextMedia,
   mediaRules,
@@ -35,13 +34,13 @@ describe('mediaWidthRule', () => {
 describe('ruleTemplate', () => {
   it('Returns a width rule', () => {
     expect(ruleTemplate('min-width', 600)).toEqual('(min-width: 600px)');
-  })
+  });
 });
 
 describe('mediaTemplate', () => {
   it('Returns a @media query', () => {
     expect(mediaTemplate('(min-width: 600px)')).toEqual('@media only screen and (min-width: 600px)');
-  })
+  });
 });
 
 test('getSmallestMedia', () => {
@@ -50,28 +49,81 @@ test('getSmallestMedia', () => {
 
 describe('getNextMedia', () => {
   it('finds the next breakpoint and returns it as a number', () => {
-    expect(getNextMedia({ xs: 10, s: 20, m: 30, l: 40 }, 20)).toEqual(30);
+    expect(getNextMedia({
+      xs: 10, s: 20, m: 30, l: 40,
+    }, 20)).toEqual(30);
   });
   it('throws an error if the passed width is equal to the widest breakpoint', () => {
-    expect(() => { getNextMedia({ xs: 10, s: 20, m: 30, l: 40 }, 40); }).toThrow();
-  })
+    expect(() => {
+      getNextMedia({
+        xs: 10, s: 20, m: 30, l: 40,
+      }, 40);
+    }).toThrow();
+  });
 });
 
 
 describe('mediaRules', () => {
   it('returns min-width when the rule is "up"', () => {
     expect(mediaRules(breakpoints, 'm', 'up')).toBe('(min-width: 768px)');
-  })
+  });
   it('returns max-width rule when the rule is "down"', () => {
     expect(mediaRules(breakpoints, 'm', 'down')).toBe('(max-width: 768px)');
-  })
-  it('returns a range rule between min and max-width when both width and bound is present', () => {
+  });
+  it('returns a range rule between min and max-width when both width and bound are present', () => {
     expect(mediaRules(breakpoints, 'm', 'only', 'l')).toBe('(min-width: 768px) and (max-width: 992px)');
-  })
+  });
   it('returns a range rule between max and min-width when the bound is lower than the width', () => {
     expect(mediaRules(breakpoints, 'm', 'only', 's')).toBe('(max-width: 768px) and (min-width: 576px)');
-  })
+  });
   it('returns a range rule between the width and the next upper breakpoint when the rule is "only" and the bound is undefined', () => {
     expect(mediaRules(breakpoints, 'm', 'only')).toBe('(min-width: 768px) and (max-width: 992px)');
-  })
-})
+  });
+});
+
+describe('breakpoint', () => {
+  const bp = media(breakpoints);
+  // it('returns a set of shorthand functions', () => {
+  //
+  // })
+  describe('utilities', () => {
+    describe('only', () => {
+      it('Implicitly returns a range media query between breakpoint "m" and the next upper breakpoint', () => {
+        expect(bp.only('m')`baground: red;`[1]).toMatch('@media only screen and (min-width: 768px) and (max-width: 992px)');
+      });
+      it('Returns a range media query between the first and second arguemt', () => {
+        expect(bp.only('m', 'xl')`baground: red;`[1]).toMatch('@media only screen and (min-width: 768px) and (max-width: 1200px)');
+      });
+      it('Returns a range media query stating from a higher breakpoint going down', () => {
+        expect(bp.only('xl', 'm')`baground: red;`[1]).toMatch('@media only screen and (max-width: 1200px) and (min-width: 768px)');
+      });
+    });
+    describe('down', () => {
+      it('Returns a max-widht media query', () => {
+        expect(bp.down('m')`baground: red;`[1]).toMatch('@media only screen and (max-width: 768px)');
+      });
+    });
+    describe('up', () => {
+      it('Returns a min-widht media query', () => {
+        expect(bp.up('m')`baground: red;`[1]).toMatch('@media only screen and (min-width: 768px)');
+      });
+    });
+    describe('shorthand', () => {
+      it('Returns the min-widht media query for breakpoint xs', () => {
+        expect(bp.xs`baground: red;`[1]).toMatch('@media only screen and (min-width: 320px)');
+      });
+      it('Returns the min-widht media query for breakpoint s', () => {
+        expect(bp.s`baground: red;`[1]).toMatch('@media only screen and (min-width: 576px)');
+      });
+      it('Returns the min-widht media query for breakpoint m', () => {
+        expect(bp.m`baground: red;`[1]).toMatch('@media only screen and (min-width: 768px)');
+      });
+      it('Returns the min-widht media query for breakpoint l', () => {
+        expect(bp.l`baground: red;`[1]).toMatch('@media only screen and (min-width: 992px)');
+      });
+      it('Returns the min-widht media query for breakpoint xl', () => {
+        expect(bp.xl`baground: red;`[1]).toMatch('@media only screen and (min-width: 1200px)');
+      });
+    });
+  });
+});

yarn.lock

@@ -5706,7 +5706,7 @@ request-promise@^4.1.1:
     stealthy-require "^1.1.0"
     tough-cookie ">=2.3.3"
 
-request@2, request@^2.58.0, request@^2.74.0, request@^2.79.0, request@~2.83.0:
+request@2, request@^2.74.0, request@^2.79.0, request@~2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -5733,7 +5733,7 @@ request@2, request@^2.58.0, request@^2.74.0, request@^2.79.0, request@~2.83.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
-[email protected]:
+[email protected], request@^2.58.0:
   version "2.77.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.77.0.tgz#2b00d82030ededcc97089ffa5d8810a9c2aa314b"
   dependencies: