feat: use testing library for unit testing (#87)

__tests__/src/align-content.test.js

@@ -1,26 +1,42 @@
-import apply from "../../dist/core/apply.js";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
 
+const wrapper = ({ children }) => (
+  <OsmiProvider>{children}</OsmiProvider>
+)
 
 test('content-start namespace', () => {
-  expect(apply('content-start')).toEqual({ alignContent: "flex-start" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-start')).toEqual([{ alignContent: "flex-start" }])
 })
 
 test('content-center namespace', () => {
-  expect(apply('content-center')).toEqual({ alignContent: "center" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-center')).toEqual([{ alignContent: "center" }])
 })
 
 test('content-end namespace', () => {
-  expect(apply('content-end')).toEqual({ alignContent: "flex-end" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-end')).toEqual([{ alignContent: "flex-end" }])
 })
 
 test('content-stretch namespace', () => {
-  expect(apply('content-stretch')).toEqual({ alignContent: "stretch" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-stretch')).toEqual([{ alignContent: "stretch" }])
 })
 
 test('content-between namespace', () => {
-  expect(apply('content-between')).toEqual({ alignContent: "space-between" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-between')).toEqual([{ alignContent: "space-between" }])
 })
 
 test('content-around namespace', () => {
-  expect(apply('content-around')).toEqual({ alignContent: "space-around" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('content-around')).toEqual([{ alignContent: "space-around" }])
 })

__tests__/src/align-items.test.js

@@ -1,21 +1,36 @@
-import apply from '../../dist/core/apply'
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+  <OsmiProvider>{children}</OsmiProvider>
+)
 
 test('items-stretch namespace', () => {
-  expect(apply('items-stretch')).toEqual({ alignItems: "stretch" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('items-stretch')).toEqual([{ alignItems: "stretch" }])
 })
 
 test('items-start namespace', () => {
-  expect(apply('items-start')).toEqual({ alignItems: "flex-start" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('items-start')).toEqual([{ alignItems: "flex-start" }])
 })
 
 test('items-center namespace', () => {
-  expect(apply('items-center')).toEqual({ alignItems: "center" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('items-center')).toEqual([{ alignItems: "center" }])
 })
 
 test('items-end namespace', () => {
-  expect(apply('items-end')).toEqual({ alignItems: "flex-end" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('items-end')).toEqual([{ alignItems: "flex-end" }])
 })
 
 test('items-baseline namespace', () => {
-  expect(apply('items-baseline')).toEqual({ alignItems: "baseline" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('items-baseline')).toEqual([{ alignItems: "baseline" }])
 })

__tests__/src/align-self.test.js

@@ -1,25 +1,42 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+  <OsmiProvider>{children}</OsmiProvider>
+)
 
 test('self-start namespace', () => {
-  expect(apply('self-start')).toEqual({ alignSelf: "flex-start" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-start')).toEqual([{ alignSelf: "flex-start" }])
 })
 
 test('self-center namespace', () => {
-  expect(apply('self-center')).toEqual({ alignSelf: "center" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-center')).toEqual([{ alignSelf: "center" }])
 })
 
 test('self-end namespace', () => {
-  expect(apply('self-end')).toEqual({ alignSelf: "flex-end" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-end')).toEqual([{ alignSelf: "flex-end" }])
 })
 
 test('self-auto namespace', () => {
-  expect(apply('self-auto')).toEqual({ alignSelf: "auto" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-auto')).toEqual([{ alignSelf: "auto" }])
 })
 
 test('self-stretch namespace', () => {
-  expect(apply('self-stretch')).toEqual({ alignSelf: "stretch" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-stretch')).toEqual([{ alignSelf: "stretch" }])
 })
 
 test('self-baseline namespace', () => {
-  expect(apply('self-baseline')).toEqual({ alignSelf: "baseline" })
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply('self-baseline')).toEqual([{ alignSelf: "baseline" }])
 })

__tests__/src/background-color.test.js

@@ -1,13 +1,24 @@
-import apply from "../../dist/core/apply"
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+  <OsmiProvider>{children}</OsmiProvider>
+)
 
 test('bg-black with default opacity', () => {
-  expect(apply("bg-black")).toEqual({ backgroundColor: "rgba(0, 0, 0, 1)"})
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply("bg-black")).toEqual([{ backgroundColor: "rgba(0, 0, 0, 1)"}])
 })
 
 test('bg-black with opacity 25', () => {
-  expect(apply("bg-black bg-opacity-25")).toEqual({ backgroundColor: "rgba(0, 0, 0, 0.25)"})
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply("bg-black bg-opacity-25")).toEqual([{ backgroundColor: "rgba(0, 0, 0, 0.25)"}])
 })
 
 test('bg-red-500 with opacity 25', () => {
-  expect(apply("bg-red-500 bg-opacity-25")).toEqual({ backgroundColor: "rgba(239, 68, 68, 0.25)"})
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply("bg-red-500 bg-opacity-25")).toEqual([{ backgroundColor: "rgba(239, 68, 68, 0.25)"}])
 })

__tests__/src/border-color.test.js

@@ -1,9 +1,18 @@
-import apply from "../../dist/core/apply"
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+  <OsmiProvider>{children}</OsmiProvider>
+)
 
 test("border-black with default opacity", () => {
-  expect(apply("border-black")).toEqual({ borderColor: "rgba(0, 0, 0, 1)"})
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply("border-black")).toEqual([{ borderColor: "rgba(0, 0, 0, 1)"}])
 })
 
 test("border-black with opacity 25", () => {
-  expect(apply("border-black border-opacity-25")).toEqual({ borderColor: "rgba(0, 0, 0, 0.25)"})
+  const { result } = renderHook(() => useStyles(), { wrapper })
+
+  expect(result.current.apply("border-black border-opacity-25")).toEqual([{ borderColor: "rgba(0, 0, 0, 0.25)"}])
 })