test: 🚨 added media utility tests

Author: Can-Sahin

internals/startingTemplate/src/styles/__tests__/media.test.ts

@@ -0,0 +1,14 @@
+import { media, sizes } from '../media';
+import { css } from 'styled-components/macro';
+
+describe('media', () => {
+  it('should return media query in css', () => {
+    const mediaQuery = media.small`color:red;`.join('');
+    const cssVersion = css`
+      @media (min-width: ${sizes.small}px) {
+        color: red;
+      }
+    `.join('');
+    expect(mediaQuery).toEqual(cssVersion);
+  });
+});

internals/startingTemplate/src/styles/media.ts

@@ -17,7 +17,7 @@ import {
  */
 
 // Update your breakpoints if you want
-const sizes = {
+export const sizes = {
   small: 600,
   medium: 1024,
   large: 1440,

src/styles/__tests__/media.test.ts

@@ -0,0 +1,14 @@
+import { media, sizes } from '../media';
+import { css } from 'styled-components/macro';
+
+describe('media', () => {
+  it('should return media query in css', () => {
+    const mediaQuery = media.small`color:red;`.join('');
+    const cssVersion = css`
+      @media (min-width: ${sizes.small}px) {
+        color: red;
+      }
+    `.join('');
+    expect(mediaQuery).toEqual(cssVersion);
+  });
+});

src/styles/media.ts

@@ -17,7 +17,7 @@ import {
  */
 
 // Update your breakpoints if you want
-const sizes = {
+export const sizes = {
   small: 600,
   medium: 1024,
   large: 1440,