diff --git a/__tests__/src/align-content.test.js b/__tests__/src/align-content.test.js
index 7c5627c..040f103 100644
--- a/__tests__/src/align-content.test.js
+++ b/__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 }) => (
+ {children}
+)
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" }])
})
diff --git a/__tests__/src/align-items.test.js b/__tests__/src/align-items.test.js
index e012ad6..adee117 100644
--- a/__tests__/src/align-items.test.js
+++ b/__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 }) => (
+ {children}
+)
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" }])
})
diff --git a/__tests__/src/align-self.test.js b/__tests__/src/align-self.test.js
index ce5cd82..b69b8b3 100644
--- a/__tests__/src/align-self.test.js
+++ b/__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 }) => (
+ {children}
+)
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" }])
})
diff --git a/__tests__/src/background-color.test.js b/__tests__/src/background-color.test.js
index 5821144..c293d0e 100644
--- a/__tests__/src/background-color.test.js
+++ b/__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 }) => (
+ {children}
+)
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)"}])
})
diff --git a/__tests__/src/border-color.test.js b/__tests__/src/border-color.test.js
index 1a9016f..320f5c0 100644
--- a/__tests__/src/border-color.test.js
+++ b/__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 }) => (
+ {children}
+)
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)"}])
})
diff --git a/__tests__/src/border-radius.test.js b/__tests__/src/border-radius.test.js
index 909c14d..6be5dee 100644
--- a/__tests__/src/border-radius.test.js
+++ b/__tests__/src/border-radius.test.js
@@ -1,217 +1,330 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('rounded-none namespace', () => {
- expect(apply('rounded-none')).toEqual({ borderRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded-none')).toEqual([{ borderRadius: 0 }]);
})
test('rounded-sm namespace', () => {
- expect(apply('rounded-sm')).toEqual({ borderRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded-sm')).toEqual([{ borderRadius: 2 }]);
})
test('rounded namespace', () => {
- expect(apply('rounded')).toEqual({ borderRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded')).toEqual([{ borderRadius: 4 }]);
})
test('rounded-md namespace', () => {
- expect(apply('rounded-md')).toEqual({ borderRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded-md')).toEqual([{ borderRadius: 6 }]);
})
test('rounded-lg namespace', () => {
- expect(apply('rounded-lg')).toEqual({ borderRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded-lg')).toEqual([{ borderRadius: 8 }]);
})
test('rounded-full namespace', () => {
- expect(apply('rounded-full')).toEqual({ borderRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('rounded-full')).toEqual([{ borderRadius: 9999 }]);
})
test('rounded-t-none namespace', () => {
- expect(apply("rounded-t-none")).toEqual({ borderTopLeftRadius: 0, borderTopRightRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t-none")).toEqual([{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }]);
})
test('rounded-r-none namespace', () => {
- expect(apply("rounded-r-none")).toEqual({ borderTopRightRadius: 0, borderBottomRightRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r-none")).toEqual([{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }]);
})
test('rounded-b-none namespace', () => {
- expect(apply("rounded-b-none")).toEqual({ borderBottomRightRadius: 0, borderBottomLeftRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b-none")).toEqual([{ borderBottomRightRadius: 0, borderBottomLeftRadius: 0 }]);
})
test('rounded-l-none namespace', () => {
- expect(apply("rounded-l-none")).toEqual({ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l-none")).toEqual([{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }]);
})
test('rounded-t-sm namespace', () => {
- expect(apply("rounded-t-sm")).toEqual({ borderTopLeftRadius: 2, borderTopRightRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t-sm")).toEqual([{ borderTopLeftRadius: 2, borderTopRightRadius: 2 }]);
})
test('rounded-r-sm namespace', () => {
- expect(apply("rounded-r-sm")).toEqual({ borderTopRightRadius: 2, borderBottomRightRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r-sm")).toEqual([{ borderTopRightRadius: 2, borderBottomRightRadius: 2 }]);
})
test('rounded-b-sm namespace', () => {
- expect(apply("rounded-b-sm")).toEqual({ borderBottomRightRadius: 2, borderBottomLeftRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b-sm")).toEqual([{ borderBottomRightRadius: 2, borderBottomLeftRadius: 2 }]);
})
test('rounded-l-sm namespace', () => {
- expect(apply("rounded-l-sm")).toEqual({ borderTopLeftRadius: 2, borderBottomLeftRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l-sm")).toEqual([{ borderTopLeftRadius: 2, borderBottomLeftRadius: 2 }]);
})
test('rounded-t namespace', () => {
- expect(apply("rounded-t")).toEqual({ borderTopLeftRadius: 4, borderTopRightRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t")).toEqual([{ borderTopLeftRadius: 4, borderTopRightRadius: 4 }]);
})
test('rounded-r namespace', () => {
- expect(apply("rounded-r")).toEqual({ borderTopRightRadius: 4, borderBottomRightRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r")).toEqual([{ borderTopRightRadius: 4, borderBottomRightRadius: 4 }]);
})
test('rounded-b namespace', () => {
- expect(apply("rounded-b")).toEqual({ borderBottomRightRadius: 4, borderBottomLeftRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b")).toEqual([{ borderBottomRightRadius: 4, borderBottomLeftRadius: 4 }]);
})
test('rounded-l namespace', () => {
- expect(apply("rounded-l")).toEqual({ borderTopLeftRadius: 4, borderBottomLeftRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l")).toEqual([{ borderTopLeftRadius: 4, borderBottomLeftRadius: 4 }]);
})
test('rounded-t-md namespace', () => {
- expect(apply("rounded-t-md")).toEqual({ borderTopLeftRadius: 6, borderTopRightRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t-md")).toEqual([{ borderTopLeftRadius: 6, borderTopRightRadius: 6 }]);
})
test('rounded-r-md namespace', () => {
- expect(apply("rounded-r-md")).toEqual({ borderTopRightRadius: 6, borderBottomRightRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r-md")).toEqual([{ borderTopRightRadius: 6, borderBottomRightRadius: 6 }]);
})
test('rounded-b-md namespace', () => {
- expect(apply("rounded-b-md")).toEqual({ borderBottomRightRadius: 6, borderBottomLeftRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b-md")).toEqual([{ borderBottomRightRadius: 6, borderBottomLeftRadius: 6 }]);
})
test('rounded-l-md namespace', () => {
- expect(apply("rounded-l-md")).toEqual({ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l-md")).toEqual([{ borderTopLeftRadius: 6, borderBottomLeftRadius: 6 }]);
})
test('rounded-t-lg namespace', () => {
- expect(apply("rounded-t-lg")).toEqual({ borderTopLeftRadius: 8, borderTopRightRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t-lg")).toEqual([{ borderTopLeftRadius: 8, borderTopRightRadius: 8 }]);
})
test('rounded-r-lg namespace', () => {
- expect(apply("rounded-r-lg")).toEqual({ borderTopRightRadius: 8, borderBottomRightRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r-lg")).toEqual([{ borderTopRightRadius: 8, borderBottomRightRadius: 8 }]);
})
test('rounded-b-lg namespace', () => {
- expect(apply("rounded-b-lg")).toEqual({ borderBottomRightRadius: 8, borderBottomLeftRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b-lg")).toEqual([{ borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }]);
})
test('rounded-l-lg namespace', () => {
- expect(apply("rounded-l-lg")).toEqual({ borderTopLeftRadius: 8, borderBottomLeftRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l-lg")).toEqual([{ borderTopLeftRadius: 8, borderBottomLeftRadius: 8 }]);
})
test('rounded-t-full namespace', () => {
- expect(apply("rounded-t-full")).toEqual({ borderTopLeftRadius: 9999, borderTopRightRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-t-full")).toEqual([{ borderTopLeftRadius: 9999, borderTopRightRadius: 9999 }]);
})
test('rounded-r-full namespace', () => {
- expect(apply("rounded-r-full")).toEqual({ borderTopRightRadius: 9999, borderBottomRightRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-r-full")).toEqual([{ borderTopRightRadius: 9999, borderBottomRightRadius: 9999 }]);
})
test('rounded-b-full namespace', () => {
- expect(apply("rounded-b-full")).toEqual({ borderBottomRightRadius: 9999, borderBottomLeftRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-b-full")).toEqual([{ borderBottomRightRadius: 9999, borderBottomLeftRadius: 9999 }]);
})
test('rounded-l-full namespace', () => {
- expect(apply("rounded-l-full")).toEqual({ borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-l-full")).toEqual([{ borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999 }]);
})
test('rounded-tl-none namespace', () => {
- expect(apply("rounded-tl-none")).toEqual({ borderTopLeftRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl-none")).toEqual([{ borderTopLeftRadius: 0 }]);
})
test('rounded-tr-none namespace', () => {
- expect(apply("rounded-tr-none")).toEqual({ borderTopRightRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr-none")).toEqual([{ borderTopRightRadius: 0 }]);
})
test('rounded-br-none namespace', () => {
- expect(apply("rounded-br-none")).toEqual({ borderBottomRightRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br-none")).toEqual([{ borderBottomRightRadius: 0 }]);
})
test('rounded-bl-none namespace', () => {
- expect(apply("rounded-bl-none")).toEqual({ borderBottomLeftRadius: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl-none")).toEqual([{ borderBottomLeftRadius: 0 }]);
})
test('rounded-tl-sm namespace', () => {
- expect(apply("rounded-tl-sm")).toEqual({ borderTopLeftRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl-sm")).toEqual([{ borderTopLeftRadius: 2 }]);
})
test('rounded-tr-sm namespace', () => {
- expect(apply("rounded-tr-sm")).toEqual({ borderTopRightRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr-sm")).toEqual([{ borderTopRightRadius: 2 }]);
})
test('rounded-br-sm namespace', () => {
- expect(apply("rounded-br-sm")).toEqual({ borderBottomRightRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br-sm")).toEqual([{ borderBottomRightRadius: 2 }]);
})
test('rounded-bl-sm namespace', () => {
- expect(apply("rounded-bl-sm")).toEqual({ borderBottomLeftRadius: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl-sm")).toEqual([{ borderBottomLeftRadius: 2 }]);
})
test('rounded-tl namespace', () => {
- expect(apply("rounded-tl")).toEqual({ borderTopLeftRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl")).toEqual([{ borderTopLeftRadius: 4 }]);
})
test('rounded-tr namespace', () => {
- expect(apply("rounded-tr")).toEqual({ borderTopRightRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr")).toEqual([{ borderTopRightRadius: 4 }]);
})
test('rounded-br namespace', () => {
- expect(apply("rounded-br")).toEqual({ borderBottomRightRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br")).toEqual([{ borderBottomRightRadius: 4 }]);
})
test('rounded-bl namespace', () => {
- expect(apply("rounded-bl")).toEqual({ borderBottomLeftRadius: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl")).toEqual([{ borderBottomLeftRadius: 4 }]);
})
test('rounded-tl-md namespace', () => {
- expect(apply("rounded-tl-md")).toEqual({ borderTopLeftRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl-md")).toEqual([{ borderTopLeftRadius: 6 }]);
})
test('rounded-tr-md namespace', () => {
- expect(apply("rounded-tr-md")).toEqual({ borderTopRightRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr-md")).toEqual([{ borderTopRightRadius: 6 }]);
})
test('rounded-br-md namespace', () => {
- expect(apply("rounded-br-md")).toEqual({ borderBottomRightRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br-md")).toEqual([{ borderBottomRightRadius: 6 }]);
})
test('rounded-bl-md namespace', () => {
- expect(apply("rounded-bl-md")).toEqual({ borderBottomLeftRadius: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl-md")).toEqual([{ borderBottomLeftRadius: 6 }]);
})
test('rounded-tl-lg namespace', () => {
- expect(apply("rounded-tl-lg")).toEqual({ borderTopLeftRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl-lg")).toEqual([{ borderTopLeftRadius: 8 }]);
})
test('rounded-tr-lg namespace', () => {
- expect(apply("rounded-tr-lg")).toEqual({ borderTopRightRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr-lg")).toEqual([{ borderTopRightRadius: 8 }]);
})
test('rounded-br-lg namespace', () => {
- expect(apply("rounded-br-lg")).toEqual({ borderBottomRightRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br-lg")).toEqual([{ borderBottomRightRadius: 8 }]);
})
test('rounded-bl-lg namespace', () => {
- expect(apply("rounded-bl-lg")).toEqual({ borderBottomLeftRadius: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl-lg")).toEqual([{ borderBottomLeftRadius: 8 }]);
})
test('rounded-tl-full namespace', () => {
- expect(apply("rounded-tl-full")).toEqual({ borderTopLeftRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tl-full")).toEqual([{ borderTopLeftRadius: 9999 }]);
})
test('rounded-tr-full namespace', () => {
- expect(apply("rounded-tr-full")).toEqual({ borderTopRightRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-tr-full")).toEqual([{ borderTopRightRadius: 9999 }]);
})
test('rounded-br-full namespace', () => {
- expect(apply("rounded-br-full")).toEqual({ borderBottomRightRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-br-full")).toEqual([{ borderBottomRightRadius: 9999 }]);
})
test('rounded-bl-full namespace', () => {
- expect(apply("rounded-bl-full")).toEqual({ borderBottomLeftRadius: 9999 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rounded-bl-full")).toEqual([{ borderBottomLeftRadius: 9999 }]);
})
diff --git a/__tests__/src/border-style.test.js b/__tests__/src/border-style.test.js
index 36b61b7..85dc0e7 100644
--- a/__tests__/src/border-style.test.js
+++ b/__tests__/src/border-style.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 }) => (
+ {children}
+)
test('border-solid namespace', () => {
- expect(apply("border-solid")).toEqual({ borderStyle: "solid" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-solid")).toEqual([{ borderStyle: "solid" }]);
})
test('border-dotted namespace', () => {
- expect(apply("border-dotted")).toEqual({ borderStyle: "dotted" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-dotted")).toEqual([{ borderStyle: "dotted" }]);
})
test('border-dashed namespace', () => {
- expect(apply("border-dashed")).toEqual({ borderStyle: "dashed" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-dashed")).toEqual([{ borderStyle: "dashed" }]);
})
diff --git a/__tests__/src/border-width.test.js b/__tests__/src/border-width.test.js
index b8a7f98..97f5ef6 100644
--- a/__tests__/src/border-width.test.js
+++ b/__tests__/src/border-width.test.js
@@ -1,101 +1,156 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('border namespace', () => {
- expect(apply("border")).toEqual({ borderWidth: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border")).toEqual([{ borderWidth: 1 }]);
})
test('border-0 namespace', () => {
- expect(apply("border-0")).toEqual({ borderWidth: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-0")).toEqual([{ borderWidth: 0 }]);
})
test('border-2 namespace', () => {
- expect(apply("border-2")).toEqual({ borderWidth: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-2")).toEqual([{ borderWidth: 2 }]);
})
test('border-4 namespace', () => {
- expect(apply("border-4")).toEqual({ borderWidth: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-4")).toEqual([{ borderWidth: 4 }]);
})
test('border-8 namespace', () => {
- expect(apply("border-8")).toEqual({ borderWidth: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-8")).toEqual([{ borderWidth: 8 }]);
})
test('border-t namespace', () => {
- expect(apply("border-t")).toEqual({ borderTopWidth: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-t")).toEqual([{ borderTopWidth: 1 }]);
})
test('border-r namespace', () => {
- expect(apply("border-r")).toEqual({ borderRightWidth: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-r")).toEqual([{ borderRightWidth: 1 }]);
})
test('border-b namespace', () => {
- expect(apply("border-b")).toEqual({ borderBottomWidth: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-b")).toEqual([{ borderBottomWidth: 1 }]);
})
test('border-l namespace', () => {
- expect(apply("border-l")).toEqual({ borderLeftWidth: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-l")).toEqual([{ borderLeftWidth: 1 }]);
})
test('border-t-0 namespace', () => {
- expect(apply("border-t-0")).toEqual({borderTopWidth: 0})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-t-0")).toEqual([{borderTopWidth: 0}]);
})
test('border-r-0 namespace', () => {
- expect(apply("border-r-0")).toEqual({borderRightWidth: 0})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-r-0")).toEqual([{borderRightWidth: 0}]);
})
test('border-b-0 namespace', () => {
- expect(apply("border-b-0")).toEqual({borderBottomWidth: 0})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-b-0")).toEqual([{borderBottomWidth: 0}]);
})
test('border-l-0 namespace', () => {
- expect(apply("border-l-0")).toEqual({borderLeftWidth: 0})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-l-0")).toEqual([{borderLeftWidth: 0}]);
})
test('border-t-2 namespace', () => {
- expect(apply("border-t-2")).toEqual({borderTopWidth: 2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-t-2")).toEqual([{borderTopWidth: 2}]);
})
test('border-r-2 namespace', () => {
- expect(apply("border-r-2")).toEqual({borderRightWidth: 2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-r-2")).toEqual([{borderRightWidth: 2}]);
})
test('border-b-2 namespace', () => {
- expect(apply("border-b-2")).toEqual({borderBottomWidth: 2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-b-2")).toEqual([{borderBottomWidth: 2}]);
})
test('border-l-2 namespace', () => {
- expect(apply("border-l-2")).toEqual({borderLeftWidth: 2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-l-2")).toEqual([{borderLeftWidth: 2}]);
})
test('border-t-4 namespace', () => {
- expect(apply("border-t-4")).toEqual({borderTopWidth: 4})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-t-4")).toEqual([{borderTopWidth: 4}]);
})
test('border-r-4 namespace', () => {
- expect(apply("border-r-4")).toEqual({borderRightWidth: 4})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-r-4")).toEqual([{borderRightWidth: 4}]);
})
test('border-b-4 namespace', () => {
- expect(apply("border-b-4")).toEqual({borderBottomWidth: 4})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-b-4")).toEqual([{borderBottomWidth: 4}]);
})
test('border-l-4 namespace', () => {
- expect(apply("border-l-4")).toEqual({borderLeftWidth: 4})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-l-4")).toEqual([{borderLeftWidth: 4}]);
})
test('border-t-8 namespace', () => {
- expect(apply("border-t-8")).toEqual({borderTopWidth: 8})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-t-8")).toEqual([{borderTopWidth: 8}]);
})
test('border-r-8 namespace', () => {
- expect(apply("border-r-8")).toEqual({borderRightWidth: 8})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-r-8")).toEqual([{borderRightWidth: 8}]);
})
test('border-b-8 namespace', () => {
- expect(apply("border-b-8")).toEqual({borderBottomWidth: 8})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-b-8")).toEqual([{borderBottomWidth: 8}]);
})
test('border-l-8 namespace', () => {
- expect(apply("border-l-8")).toEqual({borderLeftWidth: 8})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("border-l-8")).toEqual([{borderLeftWidth: 8}]);
})
diff --git a/__tests__/src/flex-direction.test.js b/__tests__/src/flex-direction.test.js
index 001f257..542cbd5 100644
--- a/__tests__/src/flex-direction.test.js
+++ b/__tests__/src/flex-direction.test.js
@@ -1,17 +1,30 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('row namespace', () => {
- expect(apply("row")).toEqual({ flexDirection: "row" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("row")).toEqual([{ flexDirection: "row" }]);
})
test('col namespace', () => {
- expect(apply("col")).toEqual({ flexDirection: "column" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("col")).toEqual([{ flexDirection: "column" }]);
})
test('row-reverse namespace', () => {
- expect(apply("row-reverse")).toEqual({ flexDirection: "row-reverse" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("row-reverse")).toEqual([{ flexDirection: "row-reverse" }]);
})
test('col-reverse namespace', () => {
- expect(apply("col-reverse")).toEqual({ flexDirection: "column-reverse" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("col-reverse")).toEqual([{ flexDirection: "column-reverse" }]);
})
diff --git a/__tests__/src/flex-grow.test.js b/__tests__/src/flex-grow.test.js
index 917b10d..0bb3479 100644
--- a/__tests__/src/flex-grow.test.js
+++ b/__tests__/src/flex-grow.test.js
@@ -1,53 +1,84 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('flex-grow namespace', () => {
- expect(apply("flex-grow")).toEqual({ flex: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow")).toEqual([{ flex: 1 }]);
})
test('flex-grow-0 namespace', () => {
- expect(apply("flex-grow-0")).toEqual({ flex: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-0")).toEqual([{ flex: 0 }]);
})
test('flex-grow-2 namespace', () => {
- expect(apply("flex-grow-2")).toEqual({ flex: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-2")).toEqual([{ flex: 2 }]);
})
test('flex-grow-3 namespace', () => {
- expect(apply("flex-grow-3")).toEqual({ flex: 3 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-3")).toEqual([{ flex: 3 }]);
})
test('flex-grow-4 namespace', () => {
- expect(apply("flex-grow-4")).toEqual({ flex: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-4")).toEqual([{ flex: 4 }]);
})
test('flex-grow-5 namespace', () => {
- expect(apply("flex-grow-5")).toEqual({ flex: 5 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-5")).toEqual([{ flex: 5 }]);
})
test('flex-grow-6 namespace', () => {
- expect(apply("flex-grow-6")).toEqual({ flex: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-6")).toEqual([{ flex: 6 }]);
})
test('flex-grow-7 namespace', () => {
- expect(apply("flex-grow-7")).toEqual({ flex: 7 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-7")).toEqual([{ flex: 7 }]);
})
test('flex-grow-8 namespace', () => {
- expect(apply("flex-grow-8")).toEqual({ flex: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-8")).toEqual([{ flex: 8 }]);
})
test('flex-grow-9 namespace', () => {
- expect(apply("flex-grow-9")).toEqual({ flex: 9 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-9")).toEqual([{ flex: 9 }]);
})
test('flex-grow-10 namespace', () => {
- expect(apply("flex-grow-10")).toEqual({ flex: 10 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-10")).toEqual([{ flex: 10 }]);
})
test('flex-grow-11 namespace', () => {
- expect(apply("flex-grow-11")).toEqual({ flex: 11 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-11")).toEqual([{ flex: 11 }]);
})
test('flex-grow-12 namespace', () => {
- expect(apply("flex-grow-12")).toEqual({ flex: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-grow-12")).toEqual([{ flex: 12 }]);
})
diff --git a/__tests__/src/flex-shrink.test.js b/__tests__/src/flex-shrink.test.js
index 0adf019..665bc3e 100644
--- a/__tests__/src/flex-shrink.test.js
+++ b/__tests__/src/flex-shrink.test.js
@@ -1,53 +1,84 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('flex-shrink namespace', () => {
- expect(apply("flex-shrink")).toEqual({ flexShrink: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink")).toEqual([{ flexShrink: 1 }]);
})
test('flex-shrink-0 namespace', () => {
- expect(apply("flex-shrink-0")).toEqual({ flexShrink: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-0")).toEqual([{ flexShrink: 0 }]);
})
test('flex-shrink-2 namespace', () => {
- expect(apply("flex-shrink-2")).toEqual({ flexShrink: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-2")).toEqual([{ flexShrink: 2 }]);
})
test('flex-shrink-3 namespace', () => {
- expect(apply("flex-shrink-3")).toEqual({ flexShrink: 3 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-3")).toEqual([{ flexShrink: 3 }]);
})
test('flex-shrink-4 namespace', () => {
- expect(apply("flex-shrink-4")).toEqual({ flexShrink: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-4")).toEqual([{ flexShrink: 4 }]);
})
test('flex-shrink-5 namespace', () => {
- expect(apply("flex-shrink-5")).toEqual({ flexShrink: 5 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-5")).toEqual([{ flexShrink: 5 }]);
})
test('flex-shrink-6 namespace', () => {
- expect(apply("flex-shrink-6")).toEqual({ flexShrink: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-6")).toEqual([{ flexShrink: 6 }]);
})
test('flex-shrink-7 namespace', () => {
- expect(apply("flex-shrink-7")).toEqual({ flexShrink: 7 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-7")).toEqual([{ flexShrink: 7 }]);
})
test('flex-shrink-8 namespace', () => {
- expect(apply("flex-shrink-8")).toEqual({ flexShrink: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-8")).toEqual([{ flexShrink: 8 }]);
})
test('flex-shrink-9 namespace', () => {
- expect(apply("flex-shrink-9")).toEqual({ flexShrink: 9 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-9")).toEqual([{ flexShrink: 9 }]);
})
test('flex-shrink-10 namespace', () => {
- expect(apply("flex-shrink-10")).toEqual({ flexShrink: 10 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-10")).toEqual([{ flexShrink: 10 }]);
})
test('flex-shrink-11 namespace', () => {
- expect(apply("flex-shrink-11")).toEqual({ flexShrink: 11 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-11")).toEqual([{ flexShrink: 11 }]);
})
test('flex-shrink-12 namespace', () => {
- expect(apply("flex-shrink-12")).toEqual({ flexShrink: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-shrink-12")).toEqual([{ flexShrink: 12 }]);
})
diff --git a/__tests__/src/flex-wrap.test.js b/__tests__/src/flex-wrap.test.js
index 9374f91..9096aa2 100644
--- a/__tests__/src/flex-wrap.test.js
+++ b/__tests__/src/flex-wrap.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 }) => (
+ {children}
+)
test('wrap namespace', () => {
- expect(apply("wrap")).toEqual({ flexWrap: "wrap" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("wrap")).toEqual([{ flexWrap: "wrap" }]);
})
test('no-wrap namespace', () => {
- expect(apply("no-wrap")).toEqual({ flexWrap: "nowrap" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("no-wrap")).toEqual([{ flexWrap: "nowrap" }]);
})
diff --git a/__tests__/src/flex.test.js b/__tests__/src/flex.test.js
index b0221ba..d3d65ba 100644
--- a/__tests__/src/flex.test.js
+++ b/__tests__/src/flex.test.js
@@ -1,57 +1,90 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('full namespace', () => {
- expect(apply("full")).toEqual({ width: '100%' })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("full")).toEqual([{ width: '100%' }]);
})
test('flex namespace', () => {
- expect(apply("flex")).toEqual({ flex: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex")).toEqual([{ flex: 1 }]);
})
test('flex-0 namespace', () => {
- expect(apply("flex-0")).toEqual({ flex: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-0")).toEqual([{ flex: 0 }]);
})
test('flex-2 namespace', () => {
- expect(apply("flex-2")).toEqual({ flex: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-2")).toEqual([{ flex: 2 }]);
})
test('flex-3 namespace', () => {
- expect(apply("flex-3")).toEqual({ flex: 3 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-3")).toEqual([{ flex: 3 }]);
})
test('flex-4 namespace', () => {
- expect(apply("flex-4")).toEqual({ flex: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-4")).toEqual([{ flex: 4 }]);
})
test('flex-5 namespace', () => {
- expect(apply("flex-5")).toEqual({ flex: 5 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-5")).toEqual([{ flex: 5 }]);
})
test('flex-6 namespace', () => {
- expect(apply("flex-6")).toEqual({ flex: 6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-6")).toEqual([{ flex: 6 }]);
})
test('flex-7 namespace', () => {
- expect(apply("flex-7")).toEqual({ flex: 7 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-7")).toEqual([{ flex: 7 }]);
})
test('flex-8 namespace', () => {
- expect(apply("flex-8")).toEqual({ flex: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-8")).toEqual([{ flex: 8 }]);
})
test('flex-9 namespace', () => {
- expect(apply("flex-9")).toEqual({ flex: 9 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-9")).toEqual([{ flex: 9 }]);
})
test('flex-10 namespace', () => {
- expect(apply("flex-10")).toEqual({ flex: 10 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-10")).toEqual([{ flex: 10 }]);
})
test('flex-11 namespace', () => {
- expect(apply("flex-11")).toEqual({ flex: 11 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-11")).toEqual([{ flex: 11 }]);
})
test('flex-12 namespace', () => {
- expect(apply("flex-12")).toEqual({ flex: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("flex-12")).toEqual([{ flex: 12 }]);
})
diff --git a/__tests__/src/gap.test.js b/__tests__/src/gap.test.js
new file mode 100644
index 0000000..1891143
--- /dev/null
+++ b/__tests__/src/gap.test.js
@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
+
+test('gap-0 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-0")).toEqual([{ "gap": 0 }]);
+})
+
+test('gap-x-0 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-x-0")).toEqual([{ "columnGap": 0 }]);
+})
+
+test('gap-y-0 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-y-0")).toEqual([{ "rowGap": 0 }]);
+})
+
+test('gap-1 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-1")).toEqual([{ "gap": 4 }]);
+})
+
+test('gap-x-1 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-x-1")).toEqual([{ "columnGap": 4 }]);
+})
+
+test('gap-y-1 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-y-1")).toEqual([{ "rowGap": 4 }]);
+})
+
+test('gap-4 gap-x-1 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-4 gap-x-1")).toEqual([{ "gap": 16, "columnGap": 4 }]);
+})
+
+test('gap-4 gap-y-1 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("gap-4 gap-y-1")).toEqual([{ "gap": 16, "rowGap": 4 }]);
+})
\ No newline at end of file
diff --git a/__tests__/src/height.test.js b/__tests__/src/height.test.js
index 892a4cf..f6bd0cc 100644
--- a/__tests__/src/height.test.js
+++ b/__tests__/src/height.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 }) => (
+ {children}
+)
test("fixed 100 height namespace", () => {
- expect(apply("h-100")).toEqual({ height: 100 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h-100")).toEqual([{ height: 100 }]);
});
test("fixed 75 height namespace", () => {
- expect(apply("h-75")).toEqual({ height: 75 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h-75")).toEqual([{ height: 75 }]);
});
test("fixed 50 height namespace", () => {
- expect(apply("h-50")).toEqual({ height: 50 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h-50")).toEqual([{ height: 50 }]);
});
test("100% height namespace", () => {
- expect(apply("h%100")).toEqual({ height: "100%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h%100")).toEqual([{ height: "100%" }]);
});
test("75% height namespace", () => {
- expect(apply("h%75")).toEqual({ height: "75%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h%75")).toEqual([{ height: "75%" }]);
});
test("50% height namespace", () => {
- expect(apply("h%50")).toEqual({ height: "50%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h%50")).toEqual([{ height: "50%" }]);
});
\ No newline at end of file
diff --git a/__tests__/src/justify-content.test.js b/__tests__/src/justify-content.test.js
index bc65bf0..d52ae07 100644
--- a/__tests__/src/justify-content.test.js
+++ b/__tests__/src/justify-content.test.js
@@ -1,26 +1,43 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('justify-end namespace', () => {
- expect(apply("justify-end")).toEqual({ justifyContent: "flex-end" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-end")).toEqual([{ justifyContent: "flex-end" }]);
})
test('justify-center namespace', () => {
- expect(apply("justify-center")).toEqual({ justifyContent: "center" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-center")).toEqual([{ justifyContent: "center" }]);
})
test('justify-between namespace', () => {
- expect(apply("justify-between")).toEqual({ justifyContent: "space-between" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-between")).toEqual([{ justifyContent: "space-between" }]);
})
test('justify-start namespace', () => {
- expect(apply("justify-start")).toEqual({ justifyContent: "flex-start" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-start")).toEqual([{ justifyContent: "flex-start" }]);
})
test('justify-evenly namespace', () => {
- expect(apply("justify-evenly")).toEqual({ justifyContent: "space-evenly" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-evenly")).toEqual([{ justifyContent: "space-evenly" }]);
})
test('justify-around namespace', () => {
- expect(apply("justify-around")).toEqual({ justifyContent: "space-around" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("justify-around")).toEqual([{ justifyContent: "space-around" }]);
})
diff --git a/__tests__/src/letter-spacing.test.js b/__tests__/src/letter-spacing.test.js
index a4e85d6..920d954 100644
--- a/__tests__/src/letter-spacing.test.js
+++ b/__tests__/src/letter-spacing.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 }) => (
+ {children}
+)
test('traacking-tighter namespace', () => {
- expect(apply("tracking-tighter")).toEqual({ letterSpacing: -0.8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-tighter")).toEqual([{ letterSpacing: -0.8 }]);
})
test('tracking-widest namespace', () => {
- expect(apply("tracking-widest")).toEqual({ letterSpacing: 1.6 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-widest")).toEqual([{ letterSpacing: 1.6 }]);
})
test('tracking-normal namespace', () => {
- expect(apply("tracking-normal")).toEqual({ letterSpacing: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-normal")).toEqual([{ letterSpacing: 0 }]);
})
test('tracking-wider namespace', () => {
- expect(apply("tracking-wider")).toEqual({ letterSpacing: 0.8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-wider")).toEqual([{ letterSpacing: 0.8 }]);
})
test('tracking-tight namespace', () => {
- expect(apply("tracking-tight")).toEqual({ letterSpacing: -0.4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-tight")).toEqual([{ letterSpacing: -0.4 }]);
})
test('tracking-wide', () => {
- expect(apply("tracking-wide")).toEqual({ letterSpacing: 0.4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("tracking-wide")).toEqual([{ letterSpacing: 0.4 }]);
})
diff --git a/__tests__/src/line-height.test.js b/__tests__/src/line-height.test.js
index 28d90ac..0a063db 100644
--- a/__tests__/src/line-height.test.js
+++ b/__tests__/src/line-height.test.js
@@ -1,57 +1,90 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('leading-normal namespace', () => {
- expect(apply("leading-normal")).toEqual({ lineHeight: 1.5 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-normal")).toEqual([{ lineHeight: 1.5 }]);
})
test('leading-relaxed namespace', () => {
- expect(apply("leading-relaxed")).toEqual({ lineHeight: 1.625 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-relaxed")).toEqual([{ lineHeight: 1.625 }]);
})
test('leading-tight namespace', () => {
- expect(apply("leading-tight")).toEqual({ lineHeight: 1.25 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-tight")).toEqual([{ lineHeight: 1.25 }]);
})
test('leading-loose namespace', () => {
- expect(apply("leading-loose")).toEqual({ lineHeight: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-loose")).toEqual([{ lineHeight: 2 }]);
})
test('leading-none namespace', () => {
- expect(apply("leading-none")).toEqual({ lineHeight: 1 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-none")).toEqual([{ lineHeight: 1 }]);
})
test('leading-snug namespace', () => {
- expect(apply("leading-snug")).toEqual({ lineHeight: 1.375 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-snug")).toEqual([{ lineHeight: 1.375 }]);
})
test('leading-10 namespace', () => {
- expect(apply("leading-10")).toEqual({ lineHeight: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-10")).toEqual([{ lineHeight: 40 }]);
})
test('leading-3 namespace', () => {
- expect(apply("leading-3")).toEqual({ lineHeight: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-3")).toEqual([{ lineHeight: 12 }]);
})
test('leading-4 namespace', () => {
- expect(apply("leading-4")).toEqual({ lineHeight: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-4")).toEqual([{ lineHeight: 16 }]);
})
test('leading-5 namespace', () => {
- expect(apply("leading-5")).toEqual({ lineHeight: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-5")).toEqual([{ lineHeight: 20 }]);
})
test('leading-6 namespace', () => {
- expect(apply("leading-6")).toEqual({ lineHeight: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-6")).toEqual([{ lineHeight: 24 }]);
})
test('leading-7 namespace', () => {
- expect(apply("leading-7")).toEqual({ lineHeight: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-7")).toEqual([{ lineHeight: 28 }]);
})
test('leading-8 namespace', () => {
- expect(apply("leading-8")).toEqual({ lineHeight: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-8")).toEqual([{ lineHeight: 32 }]);
})
test('leading-9 namespace', () => {
- expect(apply("leading-9")).toEqual({ lineHeight: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("leading-9")).toEqual([{ lineHeight: 36 }]);
})
diff --git a/__tests__/src/margin.test.js b/__tests__/src/margin.test.js
index a640a6f..168b676 100644
--- a/__tests__/src/margin.test.js
+++ b/__tests__/src/margin.test.js
@@ -1,1178 +1,1771 @@
-import apply from '../../dist/core/apply';
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test('m-0 namespace', () => {
- expect(apply("m-0")).toEqual({ margin: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-0")).toEqual([{ margin: 0 }]);
})
test('m-1 namespace', () => {
- expect(apply("m-1")).toEqual({ margin: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-1")).toEqual([{ margin: 4 }]);
})
test('m-2 namespace', () => {
- expect(apply("m-2")).toEqual({ margin: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-2")).toEqual([{ margin: 8 }]);
})
test('m-3 namespace', () => {
- expect(apply("m-3")).toEqual({ margin: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-3")).toEqual([{ margin: 12 }]);
})
test('m-4 namespace', () => {
- expect(apply("m-4")).toEqual({ margin: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-4")).toEqual([{ margin: 16 }]);
})
test('m-5 namespace', () => {
- expect(apply("m-5")).toEqual({ margin: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-5")).toEqual([{ margin: 20 }]);
})
test('m-6 namespace', () => {
- expect(apply("m-6")).toEqual({ margin: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-6")).toEqual([{ margin: 24 }]);
})
test('m-7 namespace', () => {
- expect(apply("m-7")).toEqual({ margin: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-7")).toEqual([{ margin: 28 }]);
})
test('m-8 namespace', () => {
- expect(apply("m-8")).toEqual({ margin: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-8")).toEqual([{ margin: 32 }]);
})
test('m-9 namespace', () => {
- expect(apply("m-9")).toEqual({ margin: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-9")).toEqual([{ margin: 36 }]);
})
test('m-10 namespace', () => {
- expect(apply("m-10")).toEqual({ margin: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-10")).toEqual([{ margin: 40 }]);
})
test('m-12 namespace', () => {
- expect(apply("m-12")).toEqual({ margin: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-12")).toEqual([{ margin: 48 }]);
})
test('m-16 namespace', () => {
- expect(apply("m-16")).toEqual({ margin: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-16")).toEqual([{ margin: 64 }]);
})
test('m-20 namespace', () => {
- expect(apply("m-20")).toEqual({ margin: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-20")).toEqual([{ margin: 80 }]);
})
test('m-24 namespace', () => {
- expect(apply("m-24")).toEqual({ margin: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-24")).toEqual([{ margin: 96 }]);
})
test('m-32 namespace', () => {
- expect(apply("m-32")).toEqual({ margin: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-32")).toEqual([{ margin: 128 }]);
})
test('m-40 namespace', () => {
- expect(apply("m-40")).toEqual({ margin: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-40")).toEqual([{ margin: 160 }]);
})
test('m-48 namespace', () => {
- expect(apply("m-48")).toEqual({ margin: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-48")).toEqual([{ margin: 192 }]);
})
test('m-56 namespace', () => {
- expect(apply("m-56")).toEqual({ margin: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-56")).toEqual([{ margin: 224 }]);
})
test('m-64 namespace', () => {
- expect(apply("m-64")).toEqual({ margin: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-64")).toEqual([{ margin: 256 }]);
})
test('m-px namespace', () => {
- expect(apply("m-px")).toEqual({ margin: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-px")).toEqual([{ margin: 2 }]);
})
test('my-0 namespace', () => {
- expect(apply("my-0")).toEqual({ marginTop: 0, marginBottom: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-0")).toEqual([{ marginTop: 0, marginBottom: 0 }]);
})
test('my-1 namespace', () => {
- expect(apply("my-1")).toEqual({ marginTop: 4 , marginBottom: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-1")).toEqual([{ marginTop: 4 , marginBottom: 4 }]);
})
test('my-3 namespace', () => {
- expect(apply("my-2")).toEqual({ marginTop: 8 , marginBottom: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-2")).toEqual([{ marginTop: 8 , marginBottom: 8 }]);
})
test('m- namespace', () => {
- expect(apply("my-3")).toEqual({ marginTop: 12, marginBottom: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-3")).toEqual([{ marginTop: 12, marginBottom: 12 }]);
})
test('my-4 namespace', () => {
- expect(apply("my-4")).toEqual({ marginTop: 16, marginBottom: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-4")).toEqual([{ marginTop: 16, marginBottom: 16 }]);
})
test('my-5 namespace', () => {
- expect(apply("my-5")).toEqual({ marginTop: 20, marginBottom: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-5")).toEqual([{ marginTop: 20, marginBottom: 20 }]);
})
test('my-6 namespace', () => {
- expect(apply("my-6")).toEqual({ marginTop: 24, marginBottom: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-6")).toEqual([{ marginTop: 24, marginBottom: 24 }]);
})
test('my-7 namespace', () => {
- expect(apply("my-7")).toEqual({ marginTop: 28, marginBottom: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-7")).toEqual([{ marginTop: 28, marginBottom: 28 }]);
})
test('my-8 namespace', () => {
- expect(apply("my-8")).toEqual({ marginTop: 32, marginBottom: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-8")).toEqual([{ marginTop: 32, marginBottom: 32 }]);
})
test('my-9 namespace', () => {
- expect(apply("my-9")).toEqual({ marginTop: 36, marginBottom: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-9")).toEqual([{ marginTop: 36, marginBottom: 36 }]);
})
test('my-10 namespace', () => {
- expect(apply("my-10")).toEqual({ marginTop: 40, marginBottom: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-10")).toEqual([{ marginTop: 40, marginBottom: 40 }]);
})
test('my-12 namespace', () => {
- expect(apply("my-12")).toEqual({ marginTop: 48, marginBottom: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-12")).toEqual([{ marginTop: 48, marginBottom: 48 }]);
})
test('my-16 namespace', () => {
- expect(apply("my-16")).toEqual({ marginTop: 64, marginBottom: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-16")).toEqual([{ marginTop: 64, marginBottom: 64 }]);
})
test('my-20 namespace', () => {
- expect(apply("my-20")).toEqual({ marginTop: 80, marginBottom: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-20")).toEqual([{ marginTop: 80, marginBottom: 80 }]);
})
test('my-24 namespace', () => {
- expect(apply("my-24")).toEqual({ marginTop: 96, marginBottom: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-24")).toEqual([{ marginTop: 96, marginBottom: 96 }]);
})
test('my-32 namespace', () => {
- expect(apply("my-32")).toEqual({ marginTop: 128, marginBottom: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-32")).toEqual([{ marginTop: 128, marginBottom: 128 }]);
})
test('my-40 namespace', () => {
- expect(apply("my-40")).toEqual({ marginTop: 160, marginBottom: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-40")).toEqual([{ marginTop: 160, marginBottom: 160 }]);
})
test('my-48 namespace', () => {
- expect(apply("my-48")).toEqual({ marginTop: 192, marginBottom: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-48")).toEqual([{ marginTop: 192, marginBottom: 192 }]);
})
test('my-56 namespace', () => {
- expect(apply("my-56")).toEqual({ marginTop: 224, marginBottom: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-56")).toEqual([{ marginTop: 224, marginBottom: 224 }]);
})
test('my-64 namespace', () => {
- expect(apply("my-64")).toEqual({ marginTop: 256, marginBottom: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-64")).toEqual([{ marginTop: 256, marginBottom: 256 }]);
})
test('my-px namespace', () => {
- expect(apply("my-px")).toEqual({ marginTop: 2, marginBottom: 2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-px")).toEqual([{ marginTop: 2, marginBottom: 2}]);
})
test('mx-0 namespace', () => {
- expect(apply("mx-0")).toEqual({ marginRight: 0, marginLeft: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-0")).toEqual([{ marginRight: 0, marginLeft: 0 }]);
})
test('mx-1 namespace', () => {
- expect(apply("mx-1")).toEqual({ marginRight: 4 , marginLeft: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-1")).toEqual([{ marginRight: 4 , marginLeft: 4 }]);
})
test('mx-2 namespace', () => {
- expect(apply("mx-2")).toEqual({ marginRight: 8 , marginLeft: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-2")).toEqual([{ marginRight: 8 , marginLeft: 8 }]);
})
test('mx-3 namespace', () => {
- expect(apply("mx-3")).toEqual({ marginRight: 12, marginLeft: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-3")).toEqual([{ marginRight: 12, marginLeft: 12 }]);
})
test('mx-4 namespace', () => {
- expect(apply("mx-4")).toEqual({ marginRight: 16, marginLeft: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-4")).toEqual([{ marginRight: 16, marginLeft: 16 }]);
})
test('mx-5 namespace', () => {
- expect(apply("mx-5")).toEqual({ marginRight: 20, marginLeft: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-5")).toEqual([{ marginRight: 20, marginLeft: 20 }]);
})
test('mx-6 namespace', () => {
- expect(apply("mx-6")).toEqual({ marginRight: 24, marginLeft: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-6")).toEqual([{ marginRight: 24, marginLeft: 24 }]);
})
test('mx-7 namespace', () => {
- expect(apply("mx-7")).toEqual({ marginRight: 28, marginLeft: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-7")).toEqual([{ marginRight: 28, marginLeft: 28 }]);
})
test('mx-8 namespace', () => {
- expect(apply("mx-8")).toEqual({ marginRight: 32, marginLeft: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-8")).toEqual([{ marginRight: 32, marginLeft: 32 }]);
})
test('mx-9 namespace', () => {
- expect(apply("mx-9")).toEqual({ marginRight: 36, marginLeft: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-9")).toEqual([{ marginRight: 36, marginLeft: 36 }]);
})
test('mx-10 namespace', () => {
- expect(apply("mx-10")).toEqual({ marginRight: 40, marginLeft: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-10")).toEqual([{ marginRight: 40, marginLeft: 40 }]);
})
test('mx-12 namespace', () => {
- expect(apply("mx-12")).toEqual({ marginRight: 48, marginLeft: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-12")).toEqual([{ marginRight: 48, marginLeft: 48 }]);
})
test('mx-16 namespace', () => {
- expect(apply("mx-16")).toEqual({ marginRight: 64, marginLeft: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-16")).toEqual([{ marginRight: 64, marginLeft: 64 }]);
})
test('mx-20 namespace', () => {
- expect(apply("mx-20")).toEqual({ marginRight: 80, marginLeft: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-20")).toEqual([{ marginRight: 80, marginLeft: 80 }]);
})
test('mx-24 namespace', () => {
- expect(apply("mx-24")).toEqual({ marginRight: 96, marginLeft: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-24")).toEqual([{ marginRight: 96, marginLeft: 96 }]);
})
test('mx-32 namespace', () => {
- expect(apply("mx-32")).toEqual({ marginRight: 128, marginLeft: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-32")).toEqual([{ marginRight: 128, marginLeft: 128 }]);
})
test('mx-40 namespace', () => {
- expect(apply("mx-40")).toEqual({ marginRight: 160, marginLeft: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-40")).toEqual([{ marginRight: 160, marginLeft: 160 }]);
})
test('mx-48 namespace', () => {
- expect(apply("mx-48")).toEqual({ marginRight: 192, marginLeft: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-48")).toEqual([{ marginRight: 192, marginLeft: 192 }]);
})
test('mx-56 namespace', () => {
- expect(apply("mx-56")).toEqual({ marginRight: 224, marginLeft: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-56")).toEqual([{ marginRight: 224, marginLeft: 224 }]);
})
test('mx-64 namespace', () => {
- expect(apply("mx-64")).toEqual({ marginRight: 256, marginLeft: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-64")).toEqual([{ marginRight: 256, marginLeft: 256 }]);
})
test('mx-px namespace', () => {
- expect(apply("mx-px")).toEqual({ marginRight: 2, marginLeft: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-px")).toEqual([{ marginRight: 2, marginLeft: 2 }]);
})
test('mt-0 namespace', () => {
- expect(apply("mt-0")).toEqual({ marginTop: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-0")).toEqual([{ marginTop: 0 }]);
})
test('mt-1 namespace', () => {
- expect(apply("mt-1")).toEqual({ marginTop: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-1")).toEqual([{ marginTop: 4 }]);
})
test('mt-2 namespace', () => {
- expect(apply("mt-2")).toEqual({ marginTop: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-2")).toEqual([{ marginTop: 8 }]);
})
test('mt-3 namespace', () => {
- expect(apply("mt-3")).toEqual({ marginTop: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-3")).toEqual([{ marginTop: 12 }]);
})
test('mt-4 namespace', () => {
- expect(apply("mt-4")).toEqual({ marginTop: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-4")).toEqual([{ marginTop: 16 }]);
})
test('mt-5 namespace', () => {
- expect(apply("mt-5")).toEqual({ marginTop: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-5")).toEqual([{ marginTop: 20 }]);
})
test('mt-6 namespace', () => {
- expect(apply("mt-6")).toEqual({ marginTop: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-6")).toEqual([{ marginTop: 24 }]);
})
test('mt-7 namespace', () => {
- expect(apply("mt-7")).toEqual({ marginTop: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-7")).toEqual([{ marginTop: 28 }]);
})
test('mt-8 namespace', () => {
- expect(apply("mt-8")).toEqual({ marginTop: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-8")).toEqual([{ marginTop: 32 }]);
})
test('mt-9 namespace', () => {
- expect(apply("mt-9")).toEqual({ marginTop: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-9")).toEqual([{ marginTop: 36 }]);
})
test('mt-10 namespace', () => {
- expect(apply("mt-10")).toEqual({ marginTop: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-10")).toEqual([{ marginTop: 40 }]);
})
test('mt-12 namespace', () => {
- expect(apply("mt-12")).toEqual({ marginTop: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-12")).toEqual([{ marginTop: 48 }]);
})
test('mt-16 namespace', () => {
- expect(apply("mt-16")).toEqual({ marginTop: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-16")).toEqual([{ marginTop: 64 }]);
})
test('mt-20 namespace', () => {
- expect(apply("mt-20")).toEqual({ marginTop: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-20")).toEqual([{ marginTop: 80 }]);
})
test('mt-24 namespace', () => {
- expect(apply("mt-24")).toEqual({ marginTop: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-24")).toEqual([{ marginTop: 96 }]);
})
test('mt-32 namespace', () => {
- expect(apply("mt-32")).toEqual({ marginTop: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-32")).toEqual([{ marginTop: 128 }]);
})
test('mt-40 namespace', () => {
- expect(apply("mt-40")).toEqual({ marginTop: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-40")).toEqual([{ marginTop: 160 }]);
})
test('mt-48 namespace', () => {
- expect(apply("mt-48")).toEqual({ marginTop: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-48")).toEqual([{ marginTop: 192 }]);
})
test('mt-56 namespace', () => {
- expect(apply("mt-56")).toEqual({ marginTop: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-56")).toEqual([{ marginTop: 224 }]);
})
test('mt-64 namespace', () => {
- expect(apply("mt-64")).toEqual({ marginTop: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-64")).toEqual([{ marginTop: 256 }]);
})
test('mt-px namespace', () => {
- expect(apply("mt-px")).toEqual({ marginTop: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-px")).toEqual([{ marginTop: 2 }]);
})
test('mr-0 namespace', () => {
- expect(apply("mr-0")).toEqual({ marginRight: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-0")).toEqual([{ marginRight: 0 }]);
})
test('mr-1 namespace', () => {
- expect(apply("mr-1")).toEqual({ marginRight: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-1")).toEqual([{ marginRight: 4 }]);
})
test('mr-2 namespace', () => {
- expect(apply("mr-2")).toEqual({ marginRight: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-2")).toEqual([{ marginRight: 8 }]);
})
test('mr-3 namespace', () => {
- expect(apply("mr-3")).toEqual({ marginRight: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-3")).toEqual([{ marginRight: 12 }]);
})
test('mr-4 namespace', () => {
- expect(apply("mr-4")).toEqual({ marginRight: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-4")).toEqual([{ marginRight: 16 }]);
})
test('mr-5 namespace', () => {
- expect(apply("mr-5")).toEqual({ marginRight: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-5")).toEqual([{ marginRight: 20 }]);
})
test('mr-6 namespace', () => {
- expect(apply("mr-6")).toEqual({ marginRight: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-6")).toEqual([{ marginRight: 24 }]);
})
test('mr-7 namespace', () => {
- expect(apply("mr-7")).toEqual({ marginRight: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-7")).toEqual([{ marginRight: 28 }]);
})
test('mr-8 namespace', () => {
- expect(apply("mr-8")).toEqual({ marginRight: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-8")).toEqual([{ marginRight: 32 }]);
})
test('mr-9 namespace', () => {
- expect(apply("mr-9")).toEqual({ marginRight: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-9")).toEqual([{ marginRight: 36 }]);
})
test('mr-10 namespace', () => {
- expect(apply("mr-10")).toEqual({ marginRight: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-10")).toEqual([{ marginRight: 40 }]);
})
test('mr-12 namespace', () => {
- expect(apply("mr-12")).toEqual({ marginRight: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-12")).toEqual([{ marginRight: 48 }]);
})
test('mr-16 namespace', () => {
- expect(apply("mr-16")).toEqual({ marginRight: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-16")).toEqual([{ marginRight: 64 }]);
})
test('mr-20 namespace', () => {
- expect(apply("mr-20")).toEqual({ marginRight: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-20")).toEqual([{ marginRight: 80 }]);
})
test('mr-24 namespace', () => {
- expect(apply("mr-24")).toEqual({ marginRight: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-24")).toEqual([{ marginRight: 96 }]);
})
test('mr-32 namespace', () => {
- expect(apply("mr-32")).toEqual({ marginRight: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-32")).toEqual([{ marginRight: 128 }]);
})
test('mr-40 namespace', () => {
- expect(apply("mr-40")).toEqual({ marginRight: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-40")).toEqual([{ marginRight: 160 }]);
})
test('mr-48 namespace', () => {
- expect(apply("mr-48")).toEqual({ marginRight: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-48")).toEqual([{ marginRight: 192 }]);
})
test('mr-56 namespace', () => {
- expect(apply("mr-56")).toEqual({ marginRight: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-56")).toEqual([{ marginRight: 224 }]);
})
test('mr-64 namespace', () => {
- expect(apply("mr-64")).toEqual({ marginRight: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-64")).toEqual([{ marginRight: 256 }]);
})
test('mr-px namespace', () => {
- expect(apply("mr-px")).toEqual({ marginRight: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-px")).toEqual([{ marginRight: 2 }]);
})
test('mb-0 namespace', () => {
- expect(apply("mb-0")).toEqual({ marginBottom: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-0")).toEqual([{ marginBottom: 0 }]);
})
test('mb-1 namespace', () => {
- expect(apply("mb-1")).toEqual({ marginBottom: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-1")).toEqual([{ marginBottom: 4 }]);
})
test('mb-2 namespace', () => {
- expect(apply("mb-2")).toEqual({ marginBottom: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-2")).toEqual([{ marginBottom: 8 }]);
})
test('mb-3 namespace', () => {
- expect(apply("mb-3")).toEqual({ marginBottom: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-3")).toEqual([{ marginBottom: 12 }]);
})
test('mb-4 namespace', () => {
- expect(apply("mb-4")).toEqual({ marginBottom: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-4")).toEqual([{ marginBottom: 16 }]);
})
test('mb-5 namespace', () => {
- expect(apply("mb-5")).toEqual({ marginBottom: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-5")).toEqual([{ marginBottom: 20 }]);
})
test('mb-6 namespace', () => {
- expect(apply("mb-6")).toEqual({ marginBottom: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-6")).toEqual([{ marginBottom: 24 }]);
})
test('mb-7 namespace', () => {
- expect(apply("mb-7")).toEqual({ marginBottom: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-7")).toEqual([{ marginBottom: 28 }]);
})
test('mb-8 namespace', () => {
- expect(apply("mb-8")).toEqual({ marginBottom: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-8")).toEqual([{ marginBottom: 32 }]);
})
test('mb-9 namespace', () => {
- expect(apply("mb-9")).toEqual({ marginBottom: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-9")).toEqual([{ marginBottom: 36 }]);
})
test('mb-10 namespace', () => {
- expect(apply("mb-10")).toEqual({ marginBottom: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-10")).toEqual([{ marginBottom: 40 }]);
})
test('mb-12 namespace', () => {
- expect(apply("mb-12")).toEqual({ marginBottom: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-12")).toEqual([{ marginBottom: 48 }]);
})
test('mb-16 namespace', () => {
- expect(apply("mb-16")).toEqual({ marginBottom: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-16")).toEqual([{ marginBottom: 64 }]);
})
test('mb-20 namespace', () => {
- expect(apply("mb-20")).toEqual({ marginBottom: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-20")).toEqual([{ marginBottom: 80 }]);
})
test('mb-24 namespace', () => {
- expect(apply("mb-24")).toEqual({ marginBottom: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-24")).toEqual([{ marginBottom: 96 }]);
})
test('mb-32 namespace', () => {
- expect(apply("mb-32")).toEqual({ marginBottom: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-32")).toEqual([{ marginBottom: 128 }]);
})
test('mb-40 namespace', () => {
- expect(apply("mb-40")).toEqual({ marginBottom: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-40")).toEqual([{ marginBottom: 160 }]);
})
test('mb-48 namespace', () => {
- expect(apply("mb-48")).toEqual({ marginBottom: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-48")).toEqual([{ marginBottom: 192 }]);
})
test('mb-56 namespace', () => {
- expect(apply("mb-56")).toEqual({ marginBottom: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-56")).toEqual([{ marginBottom: 224 }]);
})
test('mb-64 namespace', () => {
- expect(apply("mb-64")).toEqual({ marginBottom: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-64")).toEqual([{ marginBottom: 256 }]);
})
test('mb-px namespace', () => {
- expect(apply("mb-px")).toEqual({ marginBottom: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-px")).toEqual([{ marginBottom: 2 }]);
})
test('ml-0 namespace', () => {
- expect(apply("ml-0")).toEqual({ marginLeft: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-0")).toEqual([{ marginLeft: 0 }]);
})
test('ml-1 namespace', () => {
- expect(apply("ml-1")).toEqual({ marginLeft: 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-1")).toEqual([{ marginLeft: 4 }]);
})
test('ml-2 namespace', () => {
- expect(apply("ml-2")).toEqual({ marginLeft: 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-2")).toEqual([{ marginLeft: 8 }]);
})
test('ml-3 namespace', () => {
- expect(apply("ml-3")).toEqual({ marginLeft: 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-3")).toEqual([{ marginLeft: 12 }]);
})
test('ml-4 namespace', () => {
- expect(apply("ml-4")).toEqual({ marginLeft: 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-4")).toEqual([{ marginLeft: 16 }]);
})
test('ml-5 namespace', () => {
- expect(apply("ml-5")).toEqual({ marginLeft: 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-5")).toEqual([{ marginLeft: 20 }]);
})
test('ml-6 namespace', () => {
- expect(apply("ml-6")).toEqual({ marginLeft: 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-6")).toEqual([{ marginLeft: 24 }]);
})
test('ml-7 namespace', () => {
- expect(apply("ml-7")).toEqual({ marginLeft: 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-7")).toEqual([{ marginLeft: 28 }]);
})
test('ml-8 namespace', () => {
- expect(apply("ml-8")).toEqual({ marginLeft: 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-8")).toEqual([{ marginLeft: 32 }]);
})
test('ml-9 namespace', () => {
- expect(apply("ml-9")).toEqual({ marginLeft: 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-9")).toEqual([{ marginLeft: 36 }]);
})
test('ml-10 namespace', () => {
- expect(apply("ml-10")).toEqual({ marginLeft: 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-10")).toEqual([{ marginLeft: 40 }]);
})
test('ml-12 namespace', () => {
- expect(apply("ml-12")).toEqual({ marginLeft: 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-12")).toEqual([{ marginLeft: 48 }]);
})
test('ml-16 namespace', () => {
- expect(apply("ml-16")).toEqual({ marginLeft: 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-16")).toEqual([{ marginLeft: 64 }]);
})
test('ml-20 namespace', () => {
- expect(apply("ml-20")).toEqual({ marginLeft: 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-20")).toEqual([{ marginLeft: 80 }]);
})
test('ml-24 namespace', () => {
- expect(apply("ml-24")).toEqual({ marginLeft: 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-24")).toEqual([{ marginLeft: 96 }]);
})
test('ml-32 namespace', () => {
- expect(apply("ml-32")).toEqual({ marginLeft: 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-32")).toEqual([{ marginLeft: 128 }]);
})
test('ml-40 namespace', () => {
- expect(apply("ml-40")).toEqual({ marginLeft: 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-40")).toEqual([{ marginLeft: 160 }]);
})
test('ml-48 namespace', () => {
- expect(apply("ml-48")).toEqual({ marginLeft: 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-48")).toEqual([{ marginLeft: 192 }]);
})
test('ml-56 namespace', () => {
- expect(apply("ml-56")).toEqual({ marginLeft: 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-56")).toEqual([{ marginLeft: 224 }]);
})
test('ml-64 namespace', () => {
- expect(apply("ml-64")).toEqual({ marginLeft: 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-64")).toEqual([{ marginLeft: 256 }]);
})
test('ml-px namespace', () => {
- expect(apply("ml-px")).toEqual({ marginLeft: 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-px")).toEqual([{ marginLeft: 2 }]);
})
test('m-auto namespace', () => {
- expect(apply("m-auto")).toEqual({ margin: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("m-auto")).toEqual([{ margin: "auto" }]);
})
test('my-auto namespace', () => {
- expect(apply("my-auto")).toEqual({ marginTop: "auto", marginBottom: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("my-auto")).toEqual([{ marginTop: "auto", marginBottom: "auto" }]);
})
test('mx-auto namespace', () => {
- expect(apply("mx-auto")).toEqual({ marginTop: "auto", marginBottom: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mx-auto")).toEqual([{ marginTop: "auto", marginBottom: "auto" }]);
})
test('mt-auto namespace', () => {
- expect(apply("mt-auto")).toEqual({ marginTop: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mt-auto")).toEqual([{ marginTop: "auto" }]);
})
test('mr-auto namespace', () => {
- expect(apply("mr-auto")).toEqual({ marginRight: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mr-auto")).toEqual([{ marginRight: "auto" }]);
})
test('mb-auto namespace', () => {
- expect(apply("mb-auto")).toEqual({ marginBottom: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("mb-auto")).toEqual([{ marginBottom: "auto" }]);
})
test('ml-auto namespace', () => {
- expect(apply("ml-auto")).toEqual({ marginLeft: "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("ml-auto")).toEqual([{ marginLeft: "auto" }]);
})
test('-m-1 namespace', () => {
- expect(apply("-m-1")).toEqual({ margin: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-1")).toEqual([{ margin: -4 }]);
})
test('-m-2 namespace', () => {
- expect(apply("-m-2")).toEqual({ margin: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-2")).toEqual([{ margin: -8 }]);
})
test('-m-3 namespace', () => {
- expect(apply("-m-3")).toEqual({ margin: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-3")).toEqual([{ margin: -12 }]);
})
test('-m-4 namespace', () => {
- expect(apply("-m-4")).toEqual({ margin: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-4")).toEqual([{ margin: -16 }]);
})
test('-m-5 namespace', () => {
- expect(apply("-m-5")).toEqual({ margin: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-5")).toEqual([{ margin: -20 }]);
})
test('-m-6 namespace', () => {
- expect(apply("-m-6")).toEqual({ margin: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-6")).toEqual([{ margin: -24 }]);
})
test('-m-7 namespace', () => {
- expect(apply("-m-7")).toEqual({ margin: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-7")).toEqual([{ margin: -28 }]);
})
test('-m-8 namespace', () => {
- expect(apply("-m-8")).toEqual({ margin: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-8")).toEqual([{ margin: -32 }]);
})
test('-m-9 namespace', () => {
- expect(apply("-m-9")).toEqual({ margin: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-9")).toEqual([{ margin: -36 }]);
})
test('-m-10 namespace', () => {
- expect(apply("-m-10")).toEqual({ margin: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-10")).toEqual([{ margin: -40 }]);
})
test('-m-12 namespace', () => {
- expect(apply("-m-12")).toEqual({ margin: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-12")).toEqual([{ margin: -48 }]);
})
test('-m-16 namespace', () => {
- expect(apply("-m-16")).toEqual({ margin: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-16")).toEqual([{ margin: -64 }]);
})
test('-m-20 namespace', () => {
- expect(apply("-m-20")).toEqual({ margin: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-20")).toEqual([{ margin: -80 }]);
})
test('-m-24 namespace', () => {
- expect(apply("-m-24")).toEqual({ margin: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-24")).toEqual([{ margin: -96 }]);
})
test('-m-32 namespace', () => {
- expect(apply("-m-32")).toEqual({ margin: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-32")).toEqual([{ margin: -128 }]);
})
test('-m-40 namespace', () => {
- expect(apply("-m-40")).toEqual({ margin: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-40")).toEqual([{ margin: -160 }]);
})
test('-m-48 namespace', () => {
- expect(apply("-m-48")).toEqual({ margin: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-48")).toEqual([{ margin: -192 }]);
})
test('-m-56 namespace', () => {
- expect(apply("-m-56")).toEqual({ margin: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-56")).toEqual([{ margin: -224 }]);
})
test('-m-64 namespace', () => {
- expect(apply("-m-64")).toEqual({ margin: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-64")).toEqual([{ margin: -256 }]);
})
test('-m-px namespace', () => {
- expect(apply("-m-px")).toEqual({ margin: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-m-px")).toEqual([{ margin: -2 }]);
})
test('-my-1 namespace', () => {
- expect(apply("-my-1")).toEqual({ marginTop: -4 , marginBottom: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-1")).toEqual([{ marginTop: -4 , marginBottom: -4 }]);
})
test('-my-2 namespace', () => {
- expect(apply("-my-2")).toEqual({ marginTop: -8 , marginBottom: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-2")).toEqual([{ marginTop: -8 , marginBottom: -8 }]);
})
test('-my-3 namespace', () => {
- expect(apply("-my-3")).toEqual({ marginTop: -12, marginBottom: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-3")).toEqual([{ marginTop: -12, marginBottom: -12 }]);
})
test('-my-4 namespace', () => {
- expect(apply("-my-4")).toEqual({ marginTop: -16, marginBottom: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-4")).toEqual([{ marginTop: -16, marginBottom: -16 }]);
})
test('-my-5 namespace', () => {
- expect(apply("-my-5")).toEqual({ marginTop: -20, marginBottom: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-5")).toEqual([{ marginTop: -20, marginBottom: -20 }]);
})
test('-my-6 namespace', () => {
- expect(apply("-my-6")).toEqual({ marginTop: -24, marginBottom: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-6")).toEqual([{ marginTop: -24, marginBottom: -24 }]);
})
test('-my-7 namespace', () => {
- expect(apply("-my-7")).toEqual({ marginTop: -28, marginBottom: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-7")).toEqual([{ marginTop: -28, marginBottom: -28 }]);
})
test('-my-8 namespace', () => {
- expect(apply("-my-8")).toEqual({ marginTop: -32, marginBottom: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-8")).toEqual([{ marginTop: -32, marginBottom: -32 }]);
})
test('-my-9 namespace', () => {
- expect(apply("-my-9")).toEqual({ marginTop: -36, marginBottom: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-9")).toEqual([{ marginTop: -36, marginBottom: -36 }]);
})
test('-my-10 namespace', () => {
- expect(apply("-my-10")).toEqual({ marginTop: -40, marginBottom: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-10")).toEqual([{ marginTop: -40, marginBottom: -40 }]);
})
test('-my-12 namespace', () => {
- expect(apply("-my-12")).toEqual({ marginTop: -48, marginBottom: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-12")).toEqual([{ marginTop: -48, marginBottom: -48 }]);
})
test('-my-16 namespace', () => {
- expect(apply("-my-16")).toEqual({ marginTop: -64, marginBottom: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-16")).toEqual([{ marginTop: -64, marginBottom: -64 }]);
})
test('-my-20 namespace', () => {
- expect(apply("-my-20")).toEqual({ marginTop: -80, marginBottom: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-20")).toEqual([{ marginTop: -80, marginBottom: -80 }]);
})
test('-my-24 namespace', () => {
- expect(apply("-my-24")).toEqual({ marginTop: -96, marginBottom: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-24")).toEqual([{ marginTop: -96, marginBottom: -96 }]);
})
test('-my-32 namespace', () => {
- expect(apply("-my-32")).toEqual({ marginTop: -128, marginBottom: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-32")).toEqual([{ marginTop: -128, marginBottom: -128 }]);
})
test('-my-40 namespace', () => {
- expect(apply("-my-40")).toEqual({ marginTop: -160, marginBottom: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-40")).toEqual([{ marginTop: -160, marginBottom: -160 }]);
})
test('-my-48 namespace', () => {
- expect(apply("-my-48")).toEqual({ marginTop: -192, marginBottom: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-48")).toEqual([{ marginTop: -192, marginBottom: -192 }]);
})
test('-my-56 namespace', () => {
- expect(apply("-my-56")).toEqual({ marginTop: -224, marginBottom: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-56")).toEqual([{ marginTop: -224, marginBottom: -224 }]);
})
test('-my-64 namespace', () => {
- expect(apply("-my-64")).toEqual({ marginTop: -256, marginBottom: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-64")).toEqual([{ marginTop: -256, marginBottom: -256 }]);
})
test('-my-px namespace', () => {
- expect(apply("-my-px")).toEqual({ marginTop: -2, marginBottom: -2})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-my-px")).toEqual([{ marginTop: -2, marginBottom: -2}]);
})
test('-mx-1 namespace', () => {
- expect(apply("-mx-1")).toEqual({ marginRight: -4 , marginLeft: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-1")).toEqual([{ marginRight: -4 , marginLeft: -4 }]);
})
test('-mx-2 namespace', () => {
- expect(apply("-mx-2")).toEqual({ marginRight: -8 , marginLeft: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-2")).toEqual([{ marginRight: -8 , marginLeft: -8 }]);
})
test('-mx-3 namespace', () => {
- expect(apply("-mx-3")).toEqual({ marginRight: -12, marginLeft: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-3")).toEqual([{ marginRight: -12, marginLeft: -12 }]);
})
test('-mx-4 namespace', () => {
- expect(apply("-mx-4")).toEqual({ marginRight: -16, marginLeft: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-4")).toEqual([{ marginRight: -16, marginLeft: -16 }]);
})
test('-mx-5 namespace', () => {
- expect(apply("-mx-5")).toEqual({ marginRight: -20, marginLeft: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-5")).toEqual([{ marginRight: -20, marginLeft: -20 }]);
})
test('-mx-6 namespace', () => {
- expect(apply("-mx-6")).toEqual({ marginRight: -24, marginLeft: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-6")).toEqual([{ marginRight: -24, marginLeft: -24 }]);
})
test('-mx-7 namespace', () => {
- expect(apply("-mx-7")).toEqual({ marginRight: -28, marginLeft: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-7")).toEqual([{ marginRight: -28, marginLeft: -28 }]);
})
test('-mx-8 namespace', () => {
- expect(apply("-mx-8")).toEqual({ marginRight: -32, marginLeft: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-8")).toEqual([{ marginRight: -32, marginLeft: -32 }]);
})
test('-mx-9 namespace', () => {
- expect(apply("-mx-9")).toEqual({ marginRight: -36, marginLeft: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-9")).toEqual([{ marginRight: -36, marginLeft: -36 }]);
})
test('-mx-10 namespace', () => {
- expect(apply("-mx-10")).toEqual({ marginRight: -40, marginLeft: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-10")).toEqual([{ marginRight: -40, marginLeft: -40 }]);
})
test('-mx-12 namespace', () => {
- expect(apply("-mx-12")).toEqual({ marginRight: -48, marginLeft: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-12")).toEqual([{ marginRight: -48, marginLeft: -48 }]);
})
test('-mx-16 namespace', () => {
- expect(apply("-mx-16")).toEqual({ marginRight: -64, marginLeft: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-16")).toEqual([{ marginRight: -64, marginLeft: -64 }]);
})
test('-mx-20 namespace', () => {
- expect(apply("-mx-20")).toEqual({ marginRight: -80, marginLeft: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-20")).toEqual([{ marginRight: -80, marginLeft: -80 }]);
})
test('-mx-24 namespace', () => {
- expect(apply("-mx-24")).toEqual({ marginRight: -96, marginLeft: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-24")).toEqual([{ marginRight: -96, marginLeft: -96 }]);
})
test('-mx-32 namespace', () => {
- expect(apply("-mx-32")).toEqual({ marginRight: -128, marginLeft: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-32")).toEqual([{ marginRight: -128, marginLeft: -128 }]);
})
test('-mx-40 namespace', () => {
- expect(apply("-mx-40")).toEqual({ marginRight: -160, marginLeft: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-40")).toEqual([{ marginRight: -160, marginLeft: -160 }]);
})
test('-mx-48 namespace', () => {
- expect(apply("-mx-48")).toEqual({ marginRight: -192, marginLeft: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-48")).toEqual([{ marginRight: -192, marginLeft: -192 }]);
})
test('-mx-56 namespace', () => {
- expect(apply("-mx-56")).toEqual({ marginRight: -224, marginLeft: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-56")).toEqual([{ marginRight: -224, marginLeft: -224 }]);
})
test('-mx-64 namespace', () => {
- expect(apply("-mx-64")).toEqual({ marginRight: -256, marginLeft: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-64")).toEqual([{ marginRight: -256, marginLeft: -256 }]);
})
test('-mx-px namespace', () => {
- expect(apply("-mx-px")).toEqual({ marginRight: -2, marginLeft: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mx-px")).toEqual([{ marginRight: -2, marginLeft: -2 }]);
})
test('-mt-1 namespace', () => {
- expect(apply("-mt-1")).toEqual({ marginTop: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-1")).toEqual([{ marginTop: -4 }]);
})
test('-mt-2 namespace', () => {
- expect(apply("-mt-2")).toEqual({ marginTop: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-2")).toEqual([{ marginTop: -8 }]);
})
test('-mt-3 namespace', () => {
- expect(apply("-mt-3")).toEqual({ marginTop: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-3")).toEqual([{ marginTop: -12 }]);
})
test('-mt-4 namespace', () => {
- expect(apply("-mt-4")).toEqual({ marginTop: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-4")).toEqual([{ marginTop: -16 }]);
})
test('-mt-5 namespace', () => {
- expect(apply("-mt-5")).toEqual({ marginTop: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-5")).toEqual([{ marginTop: -20 }]);
})
test('-mt-6 namespace', () => {
- expect(apply("-mt-6")).toEqual({ marginTop: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-6")).toEqual([{ marginTop: -24 }]);
})
test('-mt-7 namespace', () => {
- expect(apply("-mt-7")).toEqual({ marginTop: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-7")).toEqual([{ marginTop: -28 }]);
})
test('-mt-8 namespace', () => {
- expect(apply("-mt-8")).toEqual({ marginTop: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-8")).toEqual([{ marginTop: -32 }]);
})
test('-mt-9 namespace', () => {
- expect(apply("-mt-9")).toEqual({ marginTop: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-9")).toEqual([{ marginTop: -36 }]);
})
test('-mt-10 namespace', () => {
- expect(apply("-mt-10")).toEqual({ marginTop: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-10")).toEqual([{ marginTop: -40 }]);
})
test('-mt-12 namespace', () => {
- expect(apply("-mt-12")).toEqual({ marginTop: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-12")).toEqual([{ marginTop: -48 }]);
})
test('-mt-16 namespace', () => {
- expect(apply("-mt-16")).toEqual({ marginTop: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-16")).toEqual([{ marginTop: -64 }]);
})
test('-mt-20 namespace', () => {
- expect(apply("-mt-20")).toEqual({ marginTop: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-20")).toEqual([{ marginTop: -80 }]);
})
test('-mt-24 namespace', () => {
- expect(apply("-mt-24")).toEqual({ marginTop: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-24")).toEqual([{ marginTop: -96 }]);
})
test('-mt-32 namespace', () => {
- expect(apply("-mt-32")).toEqual({ marginTop: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-32")).toEqual([{ marginTop: -128 }]);
})
test('-mt-40 namespace', () => {
- expect(apply("-mt-40")).toEqual({ marginTop: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-40")).toEqual([{ marginTop: -160 }]);
})
test('-mt-48 namespace', () => {
- expect(apply("-mt-48")).toEqual({ marginTop: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-48")).toEqual([{ marginTop: -192 }]);
})
test('-mt-56 namespace', () => {
- expect(apply("-mt-56")).toEqual({ marginTop: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-56")).toEqual([{ marginTop: -224 }]);
})
test('-mt-64 namespace', () => {
- expect(apply("-mt-64")).toEqual({ marginTop: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-64")).toEqual([{ marginTop: -256 }]);
})
test('-mt-px namespace', () => {
- expect(apply("-mt-px")).toEqual({ marginTop: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mt-px")).toEqual([{ marginTop: -2 }]);
})
test('-mr-1 namespace', () => {
- expect(apply("-mr-1")).toEqual({ marginRight: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-1")).toEqual([{ marginRight: -4 }]);
})
test('-mr-2 namespace', () => {
- expect(apply("-mr-2")).toEqual({ marginRight: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-2")).toEqual([{ marginRight: -8 }]);
})
test('-mr-3 namespace', () => {
- expect(apply("-mr-3")).toEqual({ marginRight: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-3")).toEqual([{ marginRight: -12 }]);
})
test('-mr-4 namespace', () => {
- expect(apply("-mr-4")).toEqual({ marginRight: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-4")).toEqual([{ marginRight: -16 }]);
})
test('-mr-5 namespace', () => {
- expect(apply("-mr-5")).toEqual({ marginRight: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-5")).toEqual([{ marginRight: -20 }]);
})
test('-mr-6 namespace', () => {
- expect(apply("-mr-6")).toEqual({ marginRight: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-6")).toEqual([{ marginRight: -24 }]);
})
test('-mr-7 namespace', () => {
- expect(apply("-mr-7")).toEqual({ marginRight: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-7")).toEqual([{ marginRight: -28 }]);
})
test('-mr-8 namespace', () => {
- expect(apply("-mr-8")).toEqual({ marginRight: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-8")).toEqual([{ marginRight: -32 }]);
})
test('-mr-9 namespace', () => {
- expect(apply("-mr-9")).toEqual({ marginRight: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-9")).toEqual([{ marginRight: -36 }]);
})
test('-mr-10 namespace', () => {
- expect(apply("-mr-10")).toEqual({ marginRight: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-10")).toEqual([{ marginRight: -40 }]);
})
test('-mr-12 namespace', () => {
- expect(apply("-mr-12")).toEqual({ marginRight: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-12")).toEqual([{ marginRight: -48 }]);
})
test('-mr-16 namespace', () => {
- expect(apply("-mr-16")).toEqual({ marginRight: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-16")).toEqual([{ marginRight: -64 }]);
})
test('-mr-20 namespace', () => {
- expect(apply("-mr-20")).toEqual({ marginRight: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-20")).toEqual([{ marginRight: -80 }]);
})
test('-mr-24 namespace', () => {
- expect(apply("-mr-24")).toEqual({ marginRight: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-24")).toEqual([{ marginRight: -96 }]);
})
test('-mr-32 namespace', () => {
- expect(apply("-mr-32")).toEqual({ marginRight: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-32")).toEqual([{ marginRight: -128 }]);
})
test('-mr-40 namespace', () => {
- expect(apply("-mr-40")).toEqual({ marginRight: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-40")).toEqual([{ marginRight: -160 }]);
})
test('-mr-48 namespace', () => {
- expect(apply("-mr-48")).toEqual({ marginRight: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-48")).toEqual([{ marginRight: -192 }]);
})
test('-mr-56 namespace', () => {
- expect(apply("-mr-56")).toEqual({ marginRight: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-56")).toEqual([{ marginRight: -224 }]);
})
test('-mr-64 namespace', () => {
- expect(apply("-mr-64")).toEqual({ marginRight: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-64")).toEqual([{ marginRight: -256 }]);
})
test('-mr-px namespace', () => {
- expect(apply("-mr-px")).toEqual({ marginRight: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mr-px")).toEqual([{ marginRight: -2 }]);
})
test('-mb-1 namespace', () => {
- expect(apply("-mb-1")).toEqual({ marginBottom: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-1")).toEqual([{ marginBottom: -4 }]);
})
test('-mb-2 namespace', () => {
- expect(apply("-mb-2")).toEqual({ marginBottom: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-2")).toEqual([{ marginBottom: -8 }]);
})
test('-mb-3 namespace', () => {
- expect(apply("-mb-3")).toEqual({ marginBottom: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-3")).toEqual([{ marginBottom: -12 }]);
})
test('-mb-4 namespace', () => {
- expect(apply("-mb-4")).toEqual({ marginBottom: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-4")).toEqual([{ marginBottom: -16 }]);
})
test('-mb-5 namespace', () => {
- expect(apply("-mb-5")).toEqual({ marginBottom: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-5")).toEqual([{ marginBottom: -20 }]);
})
test('-mb-6 namespace', () => {
- expect(apply("-mb-6")).toEqual({ marginBottom: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-6")).toEqual([{ marginBottom: -24 }]);
})
test('-mb-7 namespace', () => {
- expect(apply("-mb-7")).toEqual({ marginBottom: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-7")).toEqual([{ marginBottom: -28 }]);
})
test('-mb-8 namespace', () => {
- expect(apply("-mb-8")).toEqual({ marginBottom: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-8")).toEqual([{ marginBottom: -32 }]);
})
test('-mb-9 namespace', () => {
- expect(apply("-mb-9")).toEqual({ marginBottom: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-9")).toEqual([{ marginBottom: -36 }]);
})
test('-mb-10 namespace', () => {
- expect(apply("-mb-10")).toEqual({ marginBottom: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-10")).toEqual([{ marginBottom: -40 }]);
})
test('-mb-12 namespace', () => {
- expect(apply("-mb-12")).toEqual({ marginBottom: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-12")).toEqual([{ marginBottom: -48 }]);
})
test('-mb-16 namespace', () => {
- expect(apply("-mb-16")).toEqual({ marginBottom: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-16")).toEqual([{ marginBottom: -64 }]);
})
test('-mb-20 namespace', () => {
- expect(apply("-mb-20")).toEqual({ marginBottom: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-20")).toEqual([{ marginBottom: -80 }]);
})
test('-mb-24 namespace', () => {
- expect(apply("-mb-24")).toEqual({ marginBottom: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-24")).toEqual([{ marginBottom: -96 }]);
})
test('-mb-32 namespace', () => {
- expect(apply("-mb-32")).toEqual({ marginBottom: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-32")).toEqual([{ marginBottom: -128 }]);
})
test('-mb-40 namespace', () => {
- expect(apply("-mb-40")).toEqual({ marginBottom: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-40")).toEqual([{ marginBottom: -160 }]);
})
test('-mb-48 namespace', () => {
- expect(apply("-mb-48")).toEqual({ marginBottom: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-48")).toEqual([{ marginBottom: -192 }]);
})
test('-mb-56 namespace', () => {
- expect(apply("-mb-56")).toEqual({ marginBottom: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-56")).toEqual([{ marginBottom: -224 }]);
})
test('-mb-64 namespace', () => {
- expect(apply("-mb-64")).toEqual({ marginBottom: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-64")).toEqual([{ marginBottom: -256 }]);
})
test('-mb-px namespace', () => {
- expect(apply("-mb-px")).toEqual({ marginBottom: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-mb-px")).toEqual([{ marginBottom: -2 }]);
})
test('-ml-1 namespace', () => {
- expect(apply("-ml-1")).toEqual({ marginLeft: -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-1")).toEqual([{ marginLeft: -4 }]);
})
test('-ml-2 namespace', () => {
- expect(apply("-ml-2")).toEqual({ marginLeft: -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-2")).toEqual([{ marginLeft: -8 }]);
})
test('-ml-3 namespace', () => {
- expect(apply("-ml-3")).toEqual({ marginLeft: -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-3")).toEqual([{ marginLeft: -12 }]);
})
test('-ml-4 namespace', () => {
- expect(apply("-ml-4")).toEqual({ marginLeft: -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-4")).toEqual([{ marginLeft: -16 }]);
})
test('-ml-5 namespace', () => {
- expect(apply("-ml-5")).toEqual({ marginLeft: -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-5")).toEqual([{ marginLeft: -20 }]);
})
test('-ml-6 namespace', () => {
- expect(apply("-ml-6")).toEqual({ marginLeft: -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-6")).toEqual([{ marginLeft: -24 }]);
})
test('-ml-7 namespace', () => {
- expect(apply("-ml-7")).toEqual({ marginLeft: -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-7")).toEqual([{ marginLeft: -28 }]);
})
test('-ml-8 namespace', () => {
- expect(apply("-ml-8")).toEqual({ marginLeft: -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-8")).toEqual([{ marginLeft: -32 }]);
})
test('-ml-9 namespace', () => {
- expect(apply("-ml-9")).toEqual({ marginLeft: -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-9")).toEqual([{ marginLeft: -36 }]);
})
test('-ml-10 namespace', () => {
- expect(apply("-ml-10")).toEqual({ marginLeft: -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-10")).toEqual([{ marginLeft: -40 }]);
})
test('-ml-12 namespace', () => {
- expect(apply("-ml-12")).toEqual({ marginLeft: -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-12")).toEqual([{ marginLeft: -48 }]);
})
test('-ml-16 namespace', () => {
- expect(apply("-ml-16")).toEqual({ marginLeft: -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-16")).toEqual([{ marginLeft: -64 }]);
})
test('-ml-20 namespace', () => {
- expect(apply("-ml-20")).toEqual({ marginLeft: -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-20")).toEqual([{ marginLeft: -80 }]);
})
test('-ml-24 namespace', () => {
- expect(apply("-ml-24")).toEqual({ marginLeft: -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-24")).toEqual([{ marginLeft: -96 }]);
})
test('-ml-32 namespace', () => {
- expect(apply("-ml-32")).toEqual({ marginLeft: -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-32")).toEqual([{ marginLeft: -128 }]);
})
test('-ml-40 namespace', () => {
- expect(apply("-ml-40")).toEqual({ marginLeft: -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-40")).toEqual([{ marginLeft: -160 }]);
})
test('-ml-48 namespace', () => {
- expect(apply("-ml-48")).toEqual({ marginLeft: -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-48")).toEqual([{ marginLeft: -192 }]);
})
test('-ml-56 namespace', () => {
- expect(apply("-ml-56")).toEqual({ marginLeft: -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-56")).toEqual([{ marginLeft: -224 }]);
})
test('-ml-64 namespace', () => {
- expect(apply("-ml-64")).toEqual({ marginLeft: -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-64")).toEqual([{ marginLeft: -256 }]);
})
test('-ml-px namespace', () => {
- expect(apply("-ml-px")).toEqual({ marginLeft: -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-ml-px")).toEqual([{ marginLeft: -2 }]);
})
diff --git a/__tests__/src/max-size.test.js b/__tests__/src/max-size.test.js
index 8dccb1c..851f3b8 100644
--- a/__tests__/src/max-size.test.js
+++ b/__tests__/src/max-size.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 }) => (
+ {children}
+)
test('max-w-50 namespace', () => {
- expect(apply('max-w-50')).toEqual({ maxWidth: 50 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-w-50')).toEqual([{ maxWidth: 50 }]);
})
test('max-w-75 namespace', () => {
- expect(apply('max-w-75')).toEqual({ maxWidth: 75 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-w-75')).toEqual([{ maxWidth: 75 }]);
})
test('max-w-100 namespace', () => {
- expect(apply('max-w-100')).toEqual({ maxWidth: 100 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-w-100')).toEqual([{ maxWidth: 100 }]);
})
test('max-h-50 namespace', () => {
- expect(apply('max-h-50')).toEqual({ maxHeight: 50 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-h-50')).toEqual([{ maxHeight: 50 }]);
})
test('max-h-75 namespace', () => {
- expect(apply('max-h-75')).toEqual({ maxHeight: 75 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-h-75')).toEqual([{ maxHeight: 75 }]);
})
test('max-h-100 namespace', () => {
- expect(apply('max-h-100')).toEqual({ maxHeight: 100 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('max-h-100')).toEqual([{ maxHeight: 100 }]);
})
\ No newline at end of file
diff --git a/__tests__/src/min-size.test.js b/__tests__/src/min-size.test.js
new file mode 100644
index 0000000..22263ca
--- /dev/null
+++ b/__tests__/src/min-size.test.js
@@ -0,0 +1,42 @@
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
+
+test('min-w-50 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-w-50')).toEqual([{ minWidth: 50 }]);
+})
+
+test('min-w-75 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-w-75')).toEqual([{ minWidth: 75 }]);
+})
+
+test('min-w-100 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-w-100')).toEqual([{ minWidth: 100 }]);
+})
+
+test('min-h-50 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-h-50')).toEqual([{ minHeight: 50 }]);
+})
+
+test('min-h-75 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-h-75')).toEqual([{ minHeight: 75 }]);
+})
+
+test('min-h-100 namespace', () => {
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply('min-h-100')).toEqual([{ minHeight: 100 }]);
+})
\ No newline at end of file
diff --git a/__tests__/src/opacity.test.js b/__tests__/src/opacity.test.js
index d5845cf..a6a081f 100644
--- a/__tests__/src/opacity.test.js
+++ b/__tests__/src/opacity.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 }) => (
+ {children}
+)
test("opacity-0 namespace", () => {
- expect(apply("opacity-0")).toEqual({ opacity: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("opacity-0")).toEqual([{ opacity: 0 }]);
});
test("opacity-25 namespace", () => {
- expect(apply("opacity-25")).toEqual({ opacity: 0.25 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("opacity-25")).toEqual([{ opacity: 0.25 }]);
});
test("opacity-50 namespace", () => {
- expect(apply("opacity-50")).toEqual({ opacity: 0.5 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("opacity-50")).toEqual([{ opacity: 0.5 }]);
});
test("opacity-75 namespace", () => {
- expect(apply("opacity-75")).toEqual({ opacity: 0.75 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("opacity-75")).toEqual([{ opacity: 0.75 }]);
});
test("opacity-100 namespace", () => {
- expect(apply("opacity-100")).toEqual({ opacity: 1 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("opacity-100")).toEqual([{ opacity: 1 }]);
});
diff --git a/__tests__/src/overflow.test.js b/__tests__/src/overflow.test.js
index d67b21a..9b8cbef 100644
--- a/__tests__/src/overflow.test.js
+++ b/__tests__/src/overflow.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 }) => (
+ {children}
+)
test("overflow-visible namespace", () => {
- expect(apply("overflow-visible")).toEqual({ overflow: "visible" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("overflow-visible")).toEqual([{ overflow: "visible" }]);
});
test("overflow-hidden namespace", () => {
- expect(apply("overflow-hidden")).toEqual({ overflow: "hidden" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("overflow-hidden")).toEqual([{ overflow: "hidden" }]);
});
diff --git a/__tests__/src/padding.test.js b/__tests__/src/padding.test.js
index c0ce244..2089c6c 100644
--- a/__tests__/src/padding.test.js
+++ b/__tests__/src/padding.test.js
@@ -1,576 +1,875 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("p-0 namespace", () => {
- expect(apply("p-0")).toEqual({ padding: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-0")).toEqual([{ padding: 0 }]);
});
test("p-1 namespace", () => {
- expect(apply("p-1")).toEqual({ padding: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-1")).toEqual([{ padding: 4 }]);
});
test("p-2 namespace", () => {
- expect(apply("p-2")).toEqual({ padding: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-2")).toEqual([{ padding: 8 }]);
});
test("p-3 namespace", () => {
- expect(apply("p-3")).toEqual({ padding: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-3")).toEqual([{ padding: 12 }]);
});
test("p-4 namespace", () => {
- expect(apply("p-4")).toEqual({ padding: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-4")).toEqual([{ padding: 16 }]);
});
test("p-5 namespace", () => {
- expect(apply("p-5")).toEqual({ padding: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-5")).toEqual([{ padding: 20 }]);
});
test("p-6 namespace", () => {
- expect(apply("p-6")).toEqual({ padding: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-6")).toEqual([{ padding: 24 }]);
});
test("p-7 namespace", () => {
- expect(apply("p-7")).toEqual({ padding: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-7")).toEqual([{ padding: 28 }]);
});
test("p-8 namespace", () => {
- expect(apply("p-8")).toEqual({ padding: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-8")).toEqual([{ padding: 32 }]);
});
test("p-9 namespace", () => {
- expect(apply("p-9")).toEqual({ padding: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-9")).toEqual([{ padding: 36 }]);
});
test("p-10 namespace", () => {
- expect(apply("p-10")).toEqual({ padding: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-10")).toEqual([{ padding: 40 }]);
});
test("p-12 namespace", () => {
- expect(apply("p-12")).toEqual({ padding: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-12")).toEqual([{ padding: 48 }]);
});
test("p-16 namespace", () => {
- expect(apply("p-16")).toEqual({ padding: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-16")).toEqual([{ padding: 64 }]);
});
test("p-20 namespace", () => {
- expect(apply("p-20")).toEqual({ padding: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-20")).toEqual([{ padding: 80 }]);
});
test("p-24 namespace", () => {
- expect(apply("p-24")).toEqual({ padding: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-24")).toEqual([{ padding: 96 }]);
});
test("p-32 namespace", () => {
- expect(apply("p-32")).toEqual({ padding: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-32")).toEqual([{ padding: 128 }]);
});
test("p-40 namespace", () => {
- expect(apply("p-40")).toEqual({ padding: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-40")).toEqual([{ padding: 160 }]);
});
test("p-48 namespace", () => {
- expect(apply("p-48")).toEqual({ padding: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-48")).toEqual([{ padding: 192 }]);
});
test("p-56 namespace", () => {
- expect(apply("p-56")).toEqual({ padding: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-56")).toEqual([{ padding: 224 }]);
});
test("p-64 namespace", () => {
- expect(apply("p-64")).toEqual({ padding: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-64")).toEqual([{ padding: 256 }]);
});
test("p-px namespace", () => {
- expect(apply("p-px")).toEqual({ padding: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("p-px")).toEqual([{ padding: 2 }]);
});
test("py-0 namespace", () => {
- expect(apply("py-0")).toEqual({ paddingTop: 0, paddingBottom: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-0")).toEqual([{ paddingTop: 0, paddingBottom: 0 }]);
});
test("py-1 namespace", () => {
- expect(apply("py-1")).toEqual({ paddingTop: 4, paddingBottom: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-1")).toEqual([{ paddingTop: 4, paddingBottom: 4 }]);
});
test("py-2 namespace", () => {
- expect(apply("py-2")).toEqual({ paddingTop: 8, paddingBottom: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-2")).toEqual([{ paddingTop: 8, paddingBottom: 8 }]);
});
test("py-3 namespace", () => {
- expect(apply("py-3")).toEqual({ paddingTop: 12, paddingBottom: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-3")).toEqual([{ paddingTop: 12, paddingBottom: 12 }]);
});
test("py-4 namespace", () => {
- expect(apply("py-4")).toEqual({ paddingTop: 16, paddingBottom: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-4")).toEqual([{ paddingTop: 16, paddingBottom: 16 }]);
});
test("py-5 namespace", () => {
- expect(apply("py-5")).toEqual({ paddingTop: 20, paddingBottom: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-5")).toEqual([{ paddingTop: 20, paddingBottom: 20 }]);
});
test("py-6 namespace", () => {
- expect(apply("py-6")).toEqual({ paddingTop: 24, paddingBottom: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-6")).toEqual([{ paddingTop: 24, paddingBottom: 24 }]);
});
test("py-7 namespace", () => {
- expect(apply("py-7")).toEqual({ paddingTop: 28, paddingBottom: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-7")).toEqual([{ paddingTop: 28, paddingBottom: 28 }]);
});
test("py-8 namespace", () => {
- expect(apply("py-8")).toEqual({ paddingTop: 32, paddingBottom: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-8")).toEqual([{ paddingTop: 32, paddingBottom: 32 }]);
});
test("py-9 namespace", () => {
- expect(apply("py-9")).toEqual({ paddingTop: 36, paddingBottom: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-9")).toEqual([{ paddingTop: 36, paddingBottom: 36 }]);
});
test("py-10 namespace", () => {
- expect(apply("py-10")).toEqual({ paddingTop: 40, paddingBottom: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-10")).toEqual([{ paddingTop: 40, paddingBottom: 40 }]);
});
test("py-12 namespace", () => {
- expect(apply("py-12")).toEqual({ paddingTop: 48, paddingBottom: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-12")).toEqual([{ paddingTop: 48, paddingBottom: 48 }]);
});
test("py-16 namespace", () => {
- expect(apply("py-16")).toEqual({ paddingTop: 64, paddingBottom: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-16")).toEqual([{ paddingTop: 64, paddingBottom: 64 }]);
});
test("py-20 namespace", () => {
- expect(apply("py-20")).toEqual({ paddingTop: 80, paddingBottom: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-20")).toEqual([{ paddingTop: 80, paddingBottom: 80 }]);
});
test("py-24 namespace", () => {
- expect(apply("py-24")).toEqual({ paddingTop: 96, paddingBottom: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-24")).toEqual([{ paddingTop: 96, paddingBottom: 96 }]);
});
test("py-32 namespace", () => {
- expect(apply("py-32")).toEqual({ paddingTop: 128, paddingBottom: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-32")).toEqual([{ paddingTop: 128, paddingBottom: 128 }]);
});
test("py-40 namespace", () => {
- expect(apply("py-40")).toEqual({ paddingTop: 160, paddingBottom: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-40")).toEqual([{ paddingTop: 160, paddingBottom: 160 }]);
});
test("py-48 namespace", () => {
- expect(apply("py-48")).toEqual({ paddingTop: 192, paddingBottom: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-48")).toEqual([{ paddingTop: 192, paddingBottom: 192 }]);
});
test("py-56 namespace", () => {
- expect(apply("py-56")).toEqual({ paddingTop: 224, paddingBottom: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-56")).toEqual([{ paddingTop: 224, paddingBottom: 224 }]);
});
test("py-64 namespace", () => {
- expect(apply("py-64")).toEqual({ paddingTop: 256, paddingBottom: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-64")).toEqual([{ paddingTop: 256, paddingBottom: 256 }]);
});
test("py-px namespace", () => {
- expect(apply("py-px")).toEqual({ paddingTop: 2, paddingBottom: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("py-px")).toEqual([{ paddingTop: 2, paddingBottom: 2 }]);
});
test("px-0 namespace", () => {
- expect(apply("px-0")).toEqual({ paddingRight: 0, paddingLeft: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-0")).toEqual([{ paddingRight: 0, paddingLeft: 0 }]);
});
test("px-1 namespace", () => {
- expect(apply("px-1")).toEqual({ paddingRight: 4, paddingLeft: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-1")).toEqual([{ paddingRight: 4, paddingLeft: 4 }]);
});
test("px-2 namespace", () => {
- expect(apply("px-2")).toEqual({ paddingRight: 8, paddingLeft: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-2")).toEqual([{ paddingRight: 8, paddingLeft: 8 }]);
});
test("px-3 namespace", () => {
- expect(apply("px-3")).toEqual({ paddingRight: 12, paddingLeft: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-3")).toEqual([{ paddingRight: 12, paddingLeft: 12 }]);
});
test("px-4 namespace", () => {
- expect(apply("px-4")).toEqual({ paddingRight: 16, paddingLeft: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-4")).toEqual([{ paddingRight: 16, paddingLeft: 16 }]);
});
test("px-5 namespace", () => {
- expect(apply("px-5")).toEqual({ paddingRight: 20, paddingLeft: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-5")).toEqual([{ paddingRight: 20, paddingLeft: 20 }]);
});
test("px-6 namespace", () => {
- expect(apply("px-6")).toEqual({ paddingRight: 24, paddingLeft: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-6")).toEqual([{ paddingRight: 24, paddingLeft: 24 }]);
});
test("px-7 namespace", () => {
- expect(apply("px-7")).toEqual({ paddingRight: 28, paddingLeft: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-7")).toEqual([{ paddingRight: 28, paddingLeft: 28 }]);
});
test("px-8 namespace", () => {
- expect(apply("px-8")).toEqual({ paddingRight: 32, paddingLeft: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-8")).toEqual([{ paddingRight: 32, paddingLeft: 32 }]);
});
test("px-9 namespace", () => {
- expect(apply("px-9")).toEqual({ paddingRight: 36, paddingLeft: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-9")).toEqual([{ paddingRight: 36, paddingLeft: 36 }]);
});
test("px-10 namespace", () => {
- expect(apply("px-10")).toEqual({ paddingRight: 40, paddingLeft: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-10")).toEqual([{ paddingRight: 40, paddingLeft: 40 }]);
});
test("px-12 namespace", () => {
- expect(apply("px-12")).toEqual({ paddingRight: 48, paddingLeft: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-12")).toEqual([{ paddingRight: 48, paddingLeft: 48 }]);
});
test("px-16 namespace", () => {
- expect(apply("px-16")).toEqual({ paddingRight: 64, paddingLeft: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-16")).toEqual([{ paddingRight: 64, paddingLeft: 64 }]);
});
test("px-20 namespace", () => {
- expect(apply("px-20")).toEqual({ paddingRight: 80, paddingLeft: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-20")).toEqual([{ paddingRight: 80, paddingLeft: 80 }]);
});
test("px-24 namespace", () => {
- expect(apply("px-24")).toEqual({ paddingRight: 96, paddingLeft: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-24")).toEqual([{ paddingRight: 96, paddingLeft: 96 }]);
});
test("px-32 namespace", () => {
- expect(apply("px-32")).toEqual({ paddingRight: 128, paddingLeft: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-32")).toEqual([{ paddingRight: 128, paddingLeft: 128 }]);
});
test("px-40 namespace", () => {
- expect(apply("px-40")).toEqual({ paddingRight: 160, paddingLeft: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-40")).toEqual([{ paddingRight: 160, paddingLeft: 160 }]);
});
test("px-48 namespace", () => {
- expect(apply("px-48")).toEqual({ paddingRight: 192, paddingLeft: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-48")).toEqual([{ paddingRight: 192, paddingLeft: 192 }]);
});
test("px-56 namespace", () => {
- expect(apply("px-56")).toEqual({ paddingRight: 224, paddingLeft: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-56")).toEqual([{ paddingRight: 224, paddingLeft: 224 }]);
});
test("px-64 namespace", () => {
- expect(apply("px-64")).toEqual({ paddingRight: 256, paddingLeft: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-64")).toEqual([{ paddingRight: 256, paddingLeft: 256 }]);
});
test("px-px namespace", () => {
- expect(apply("px-px")).toEqual({ paddingRight: 2, paddingLeft: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("px-px")).toEqual([{ paddingRight: 2, paddingLeft: 2 }]);
});
test("pt-0 namespace", () => {
- expect(apply("pt-0")).toEqual({ paddingTop: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-0")).toEqual([{ paddingTop: 0 }]);
});
test("pt-1 namespace", () => {
- expect(apply("pt-1")).toEqual({ paddingTop: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-1")).toEqual([{ paddingTop: 4 }]);
});
test("pt-2 namespace", () => {
- expect(apply("pt-2")).toEqual({ paddingTop: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-2")).toEqual([{ paddingTop: 8 }]);
});
test("pt-3 namespace", () => {
- expect(apply("pt-3")).toEqual({ paddingTop: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-3")).toEqual([{ paddingTop: 12 }]);
});
test("pt-4 namespace", () => {
- expect(apply("pt-4")).toEqual({ paddingTop: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-4")).toEqual([{ paddingTop: 16 }]);
});
test("pt-5 namespace", () => {
- expect(apply("pt-5")).toEqual({ paddingTop: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-5")).toEqual([{ paddingTop: 20 }]);
});
test("pt-6 namespace", () => {
- expect(apply("pt-6")).toEqual({ paddingTop: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-6")).toEqual([{ paddingTop: 24 }]);
});
test("pt-7 namespace", () => {
- expect(apply("pt-7")).toEqual({ paddingTop: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-7")).toEqual([{ paddingTop: 28 }]);
});
test("pt-8 namespace", () => {
- expect(apply("pt-8")).toEqual({ paddingTop: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-8")).toEqual([{ paddingTop: 32 }]);
});
test("pt-9 namespace", () => {
- expect(apply("pt-9")).toEqual({ paddingTop: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-9")).toEqual([{ paddingTop: 36 }]);
});
test("pt-10 namespace", () => {
- expect(apply("pt-10")).toEqual({ paddingTop: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-10")).toEqual([{ paddingTop: 40 }]);
});
test("pt-12 namespace", () => {
- expect(apply("pt-12")).toEqual({ paddingTop: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-12")).toEqual([{ paddingTop: 48 }]);
});
test("pt-16 namespace", () => {
- expect(apply("pt-16")).toEqual({ paddingTop: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-16")).toEqual([{ paddingTop: 64 }]);
});
test("pt-20 namespace", () => {
- expect(apply("pt-20")).toEqual({ paddingTop: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-20")).toEqual([{ paddingTop: 80 }]);
});
test("pt-24 namespace", () => {
- expect(apply("pt-24")).toEqual({ paddingTop: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-24")).toEqual([{ paddingTop: 96 }]);
});
test("pt-32 namespace", () => {
- expect(apply("pt-32")).toEqual({ paddingTop: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-32")).toEqual([{ paddingTop: 128 }]);
});
test("pt-40 namespace", () => {
- expect(apply("pt-40")).toEqual({ paddingTop: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-40")).toEqual([{ paddingTop: 160 }]);
});
test("pt-48 namespace", () => {
- expect(apply("pt-48")).toEqual({ paddingTop: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-48")).toEqual([{ paddingTop: 192 }]);
});
test("pt-56 namespace", () => {
- expect(apply("pt-56")).toEqual({ paddingTop: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-56")).toEqual([{ paddingTop: 224 }]);
});
test("pt-64 namespace", () => {
- expect(apply("pt-64")).toEqual({ paddingTop: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-64")).toEqual([{ paddingTop: 256 }]);
});
test("pt-px namespace", () => {
- expect(apply("pt-px")).toEqual({ paddingTop: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pt-px")).toEqual([{ paddingTop: 2 }]);
});
test("pr-0 namespace", () => {
- expect(apply("pr-0")).toEqual({ paddingRight: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-0")).toEqual([{ paddingRight: 0 }]);
});
test("pr-1 namespace", () => {
- expect(apply("pr-1")).toEqual({ paddingRight: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-1")).toEqual([{ paddingRight: 4 }]);
});
test("pr-2 namespace", () => {
- expect(apply("pr-2")).toEqual({ paddingRight: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-2")).toEqual([{ paddingRight: 8 }]);
});
test("pr-3 namespace", () => {
- expect(apply("pr-3")).toEqual({ paddingRight: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-3")).toEqual([{ paddingRight: 12 }]);
});
test("pr-4 namespace", () => {
- expect(apply("pr-4")).toEqual({ paddingRight: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-4")).toEqual([{ paddingRight: 16 }]);
});
test("pr-5 namespace", () => {
- expect(apply("pr-5")).toEqual({ paddingRight: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-5")).toEqual([{ paddingRight: 20 }]);
});
test("pr-6 namespace", () => {
- expect(apply("pr-6")).toEqual({ paddingRight: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-6")).toEqual([{ paddingRight: 24 }]);
});
test("pr-7 namespace", () => {
- expect(apply("pr-7")).toEqual({ paddingRight: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-7")).toEqual([{ paddingRight: 28 }]);
});
test("pr-8 namespace", () => {
- expect(apply("pr-8")).toEqual({ paddingRight: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-8")).toEqual([{ paddingRight: 32 }]);
});
test("pr-9 namespace", () => {
- expect(apply("pr-9")).toEqual({ paddingRight: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-9")).toEqual([{ paddingRight: 36 }]);
});
test("pr-10 namespace", () => {
- expect(apply("pr-10")).toEqual({ paddingRight: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-10")).toEqual([{ paddingRight: 40 }]);
});
test("pr-12 namespace", () => {
- expect(apply("pr-12")).toEqual({ paddingRight: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-12")).toEqual([{ paddingRight: 48 }]);
});
test("pr-16 namespace", () => {
- expect(apply("pr-16")).toEqual({ paddingRight: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-16")).toEqual([{ paddingRight: 64 }]);
});
test("pr-20 namespace", () => {
- expect(apply("pr-20")).toEqual({ paddingRight: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-20")).toEqual([{ paddingRight: 80 }]);
});
test("pr-24 namespace", () => {
- expect(apply("pr-24")).toEqual({ paddingRight: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-24")).toEqual([{ paddingRight: 96 }]);
});
test("pr-32 namespace", () => {
- expect(apply("pr-32")).toEqual({ paddingRight: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-32")).toEqual([{ paddingRight: 128 }]);
});
test("pr-40 namespace", () => {
- expect(apply("pr-40")).toEqual({ paddingRight: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-40")).toEqual([{ paddingRight: 160 }]);
});
test("pr-48 namespace", () => {
- expect(apply("pr-48")).toEqual({ paddingRight: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-48")).toEqual([{ paddingRight: 192 }]);
});
test("pr-56 namespace", () => {
- expect(apply("pr-56")).toEqual({ paddingRight: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-56")).toEqual([{ paddingRight: 224 }]);
});
test("pr-64 namespace", () => {
- expect(apply("pr-64")).toEqual({ paddingRight: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-64")).toEqual([{ paddingRight: 256 }]);
});
test("pr-px namespace", () => {
- expect(apply("pr-px")).toEqual({ paddingRight: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pr-px")).toEqual([{ paddingRight: 2 }]);
});
test("pb-0 namespace", () => {
- expect(apply("pb-0")).toEqual({ paddingBottom: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-0")).toEqual([{ paddingBottom: 0 }]);
});
test("pb-1 namespace", () => {
- expect(apply("pb-1")).toEqual({ paddingBottom: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-1")).toEqual([{ paddingBottom: 4 }]);
});
test("pb-2 namespace", () => {
- expect(apply("pb-2")).toEqual({ paddingBottom: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-2")).toEqual([{ paddingBottom: 8 }]);
});
test("pb-3 namespace", () => {
- expect(apply("pb-3")).toEqual({ paddingBottom: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-3")).toEqual([{ paddingBottom: 12 }]);
});
test("pb-4 namespace", () => {
- expect(apply("pb-4")).toEqual({ paddingBottom: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-4")).toEqual([{ paddingBottom: 16 }]);
});
test("pb-5 namespace", () => {
- expect(apply("pb-5")).toEqual({ paddingBottom: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-5")).toEqual([{ paddingBottom: 20 }]);
});
test("pb-6 namespace", () => {
- expect(apply("pb-6")).toEqual({ paddingBottom: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-6")).toEqual([{ paddingBottom: 24 }]);
});
test("pb-7 namespace", () => {
- expect(apply("pb-7")).toEqual({ paddingBottom: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-7")).toEqual([{ paddingBottom: 28 }]);
});
test("pb-8 namespace", () => {
- expect(apply("pb-8")).toEqual({ paddingBottom: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-8")).toEqual([{ paddingBottom: 32 }]);
});
test("pb-9 namespace", () => {
- expect(apply("pb-9")).toEqual({ paddingBottom: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-9")).toEqual([{ paddingBottom: 36 }]);
});
test("pb-10 namespace", () => {
- expect(apply("pb-10")).toEqual({ paddingBottom: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-10")).toEqual([{ paddingBottom: 40 }]);
});
test("pb-12 namespace", () => {
- expect(apply("pb-12")).toEqual({ paddingBottom: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-12")).toEqual([{ paddingBottom: 48 }]);
});
test("pb-16 namespace", () => {
- expect(apply("pb-16")).toEqual({ paddingBottom: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-16")).toEqual([{ paddingBottom: 64 }]);
});
test("pb-20 namespace", () => {
- expect(apply("pb-20")).toEqual({ paddingBottom: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-20")).toEqual([{ paddingBottom: 80 }]);
});
test("pb-24 namespace", () => {
- expect(apply("pb-24")).toEqual({ paddingBottom: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-24")).toEqual([{ paddingBottom: 96 }]);
});
test("pb-32 namespace", () => {
- expect(apply("pb-32")).toEqual({ paddingBottom: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-32")).toEqual([{ paddingBottom: 128 }]);
});
test("pb-40 namespace", () => {
- expect(apply("pb-40")).toEqual({ paddingBottom: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-40")).toEqual([{ paddingBottom: 160 }]);
});
test("pb-48 namespace", () => {
- expect(apply("pb-48")).toEqual({ paddingBottom: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-48")).toEqual([{ paddingBottom: 192 }]);
});
test("pb-56 namespace", () => {
- expect(apply("pb-56")).toEqual({ paddingBottom: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-56")).toEqual([{ paddingBottom: 224 }]);
});
test("pb-64 namespace", () => {
- expect(apply("pb-64")).toEqual({ paddingBottom: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-64")).toEqual([{ paddingBottom: 256 }]);
});
test("pb-px namespace", () => {
- expect(apply("pb-px")).toEqual({ paddingBottom: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pb-px")).toEqual([{ paddingBottom: 2 }]);
});
test("pl-0 namespace", () => {
- expect(apply("pl-0")).toEqual({ paddingLeft: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-0")).toEqual([{ paddingLeft: 0 }]);
});
test("pl-1 namespace", () => {
- expect(apply("pl-1")).toEqual({ paddingLeft: 4 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-1")).toEqual([{ paddingLeft: 4 }]);
});
test("pl-2 namespace", () => {
- expect(apply("pl-2")).toEqual({ paddingLeft: 8 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-2")).toEqual([{ paddingLeft: 8 }]);
});
test("pl-3 namespace", () => {
- expect(apply("pl-3")).toEqual({ paddingLeft: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-3")).toEqual([{ paddingLeft: 12 }]);
});
test("pl-4 namespace", () => {
- expect(apply("pl-4")).toEqual({ paddingLeft: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-4")).toEqual([{ paddingLeft: 16 }]);
});
test("pl-5 namespace", () => {
- expect(apply("pl-5")).toEqual({ paddingLeft: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-5")).toEqual([{ paddingLeft: 20 }]);
});
test("pl-6 namespace", () => {
- expect(apply("pl-6")).toEqual({ paddingLeft: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-6")).toEqual([{ paddingLeft: 24 }]);
});
test("pl-7 namespace", () => {
- expect(apply("pl-7")).toEqual({ paddingLeft: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-7")).toEqual([{ paddingLeft: 28 }]);
});
test("pl-8 namespace", () => {
- expect(apply("pl-8")).toEqual({ paddingLeft: 32 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-8")).toEqual([{ paddingLeft: 32 }]);
});
test("pl-9 namespace", () => {
- expect(apply("pl-9")).toEqual({ paddingLeft: 36 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-9")).toEqual([{ paddingLeft: 36 }]);
});
test("pl-10 namespace", () => {
- expect(apply("pl-10")).toEqual({ paddingLeft: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-10")).toEqual([{ paddingLeft: 40 }]);
});
test("pl-12 namespace", () => {
- expect(apply("pl-12")).toEqual({ paddingLeft: 48 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-12")).toEqual([{ paddingLeft: 48 }]);
});
test("pl-16 namespace", () => {
- expect(apply("pl-16")).toEqual({ paddingLeft: 64 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-16")).toEqual([{ paddingLeft: 64 }]);
});
test("pl-20 namespace", () => {
- expect(apply("pl-20")).toEqual({ paddingLeft: 80 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-20")).toEqual([{ paddingLeft: 80 }]);
});
test("pl-24 namespace", () => {
- expect(apply("pl-24")).toEqual({ paddingLeft: 96 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-24")).toEqual([{ paddingLeft: 96 }]);
});
test("pl-32 namespace", () => {
- expect(apply("pl-32")).toEqual({ paddingLeft: 128 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-32")).toEqual([{ paddingLeft: 128 }]);
});
test("pl-40 namespace", () => {
- expect(apply("pl-40")).toEqual({ paddingLeft: 160 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-40")).toEqual([{ paddingLeft: 160 }]);
});
test("pl-48 namespace", () => {
- expect(apply("pl-48")).toEqual({ paddingLeft: 192 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-48")).toEqual([{ paddingLeft: 192 }]);
});
test("pl-56 namespace", () => {
- expect(apply("pl-56")).toEqual({ paddingLeft: 224 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-56")).toEqual([{ paddingLeft: 224 }]);
});
test("pl-64 namespace", () => {
- expect(apply("pl-64")).toEqual({ paddingLeft: 256 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-64")).toEqual([{ paddingLeft: 256 }]);
});
test("pl-px namespace", () => {
- expect(apply("pl-px")).toEqual({ paddingLeft: 2 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("pl-px")).toEqual([{ paddingLeft: 2 }]);
});
diff --git a/__tests__/src/percent-size.test.js b/__tests__/src/percent-size.test.js
index 24cd2c1..2983049 100644
--- a/__tests__/src/percent-size.test.js
+++ b/__tests__/src/percent-size.test.js
@@ -1,29 +1,48 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("min-w namespace", () => {
- expect(apply("min-w%50")).toEqual({ minWidth: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("min-w%50")).toEqual([{ minWidth: "50%"}]);
})
test("w namespace", () => {
- expect(apply("w%50")).toEqual({ width: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w%50")).toEqual([{ width: "50%"}]);
})
test("max-w namespace", () => {
- expect(apply("max-w%50")).toEqual({ maxWidth: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("max-w%50")).toEqual([{ maxWidth: "50%"}]);
})
test("min-h namespace", () => {
- expect(apply("min-h%50")).toEqual({ minHeight: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("min-h%50")).toEqual([{ minHeight: "50%"}]);
})
test("h namespace", () => {
- expect(apply("h%50")).toEqual({ height: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("h%50")).toEqual([{ height: "50%"}]);
})
test("max-h namespace", () => {
- expect(apply("max-h%50")).toEqual({ maxHeight: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("max-h%50")).toEqual([{ maxHeight: "50%"}]);
})
test("text namespace", () => {
- expect(apply("text%50")).toEqual({ fontSize: "50%"})
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text%50")).toEqual([{ fontSize: "50%"}]);
})
diff --git a/__tests__/src/position.test.js b/__tests__/src/position.test.js
index e7e0647..37f9a24 100644
--- a/__tests__/src/position.test.js
+++ b/__tests__/src/position.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 }) => (
+ {children}
+)
test("absolute namespace", () => {
- expect(apply("absolute")).toEqual({ position: "absolute" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("absolute")).toEqual([{ position: "absolute" }]);
});
test("relative namespace", () => {
- expect(apply("relative")).toEqual({ position: "relative" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("relative")).toEqual([{ position: "relative" }]);
});
diff --git a/__tests__/src/resize-mode.test.js b/__tests__/src/resize-mode.test.js
index 97b6c85..e03aa0c 100644
--- a/__tests__/src/resize-mode.test.js
+++ b/__tests__/src/resize-mode.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 }) => (
+ {children}
+)
test("resize-cover namespace", () => {
- expect(apply("resize-cover")).toEqual({ resizeMode: "cover" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("resize-cover")).toEqual([{ resizeMode: "cover" }]);
});
test("resize-contain namespace", () => {
- expect(apply("resize-contain")).toEqual({ resizeMode: "contain" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("resize-contain")).toEqual([{ resizeMode: "contain" }]);
});
test("resize-stretch namespace", () => {
- expect(apply("resize-stretch")).toEqual({ resizeMode: "stretch" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("resize-stretch")).toEqual([{ resizeMode: "stretch" }]);
});
test("resize-center namespace", () => {
- expect(apply("resize-center")).toEqual({ resizeMode: "center" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("resize-center")).toEqual([{ resizeMode: "center" }]);
});
test("resize-repeat namespace", () => {
- expect(apply("resize-repeat")).toEqual({ resizeMode: "repeat" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("resize-repeat")).toEqual([{ resizeMode: "repeat" }]);
});
diff --git a/__tests__/src/rotate.test.js b/__tests__/src/rotate.test.js
index 29a4ee6..d90a2a6 100644
--- a/__tests__/src/rotate.test.js
+++ b/__tests__/src/rotate.test.js
@@ -1,29 +1,48 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("rotate-0 namespace", () => {
- expect(apply("rotate-0")).toEqual({ transform: [{ rotate: "0" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-0")).toEqual([{ transform: [{ rotate: "0" }] }]);
});
test("rotate-45 namespace", () => {
- expect(apply("rotate-45")).toEqual({ transform: [{ rotate: "45deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-45")).toEqual([{ transform: [{ rotate: "45deg" }] }]);
});
test("rotate-90 namespace", () => {
- expect(apply("rotate-90")).toEqual({ transform: [{ rotate: "90deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-90")).toEqual([{ transform: [{ rotate: "90deg" }] }]);
});
test("rotate-180 namespace", () => {
- expect(apply("rotate-180")).toEqual({ transform: [{ rotate: "180deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-180")).toEqual([{ transform: [{ rotate: "180deg" }] }]);
});
test("-rotate-45 namespace", () => {
- expect(apply("-rotate-45")).toEqual({ transform: [{ rotate: "-45deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-45")).toEqual([{ transform: [{ rotate: "-45deg" }] }]);
});
test("-rotate-90 namespace", () => {
- expect(apply("-rotate-90")).toEqual({ transform: [{ rotate: "-90deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-90")).toEqual([{ transform: [{ rotate: "-90deg" }] }]);
});
test("-rotate-180 namespace", () => {
- expect(apply("-rotate-180")).toEqual({ transform: [{ rotate: "-180deg" }] });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-180")).toEqual([{ transform: [{ rotate: "-180deg" }] }]);
});
diff --git a/__tests__/src/shadow.test.js b/__tests__/src/shadow.test.js
index 5539c28..39cc73b 100644
--- a/__tests__/src/shadow.test.js
+++ b/__tests__/src/shadow.test.js
@@ -1,12 +1,21 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("shadow-none namespace", () => {
- expect(apply("shadow-none")).toEqual({ elevation: 0, shadowOpacity: 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-none")).toEqual([{ elevation: 0, shadowOpacity: 0 }]);
})
test("shadow-xs namespace", () => {
- expect(apply("shadow-xs")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-xs")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -15,11 +24,13 @@ test("shadow-xs namespace", () => {
shadowOpacity: 0.18,
shadowRadius: 1.00,
elevation: 1,
- });
+ }]);
})
test("shadow-sm namespace", () => {
- expect(apply("shadow-sm")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-sm")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -28,11 +39,13 @@ test("shadow-sm namespace", () => {
shadowOpacity: 0.20,
shadowRadius: 1.41,
elevation: 2,
- });
+ }]);
})
test("shadow namespace", () => {
- expect(apply("shadow")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -41,11 +54,13 @@ test("shadow namespace", () => {
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
- });
+ }]);
})
test("shadow-md namespace", () => {
- expect(apply("shadow-md")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-md")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -54,11 +69,13 @@ test("shadow-md namespace", () => {
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
- })
+ }])
})
test("shadow-lg namespace", () => {
- expect(apply("shadow-lg")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-lg")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -67,11 +84,13 @@ test("shadow-lg namespace", () => {
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
- })
+ }])
})
test("shadow-xl namespace", () => {
- expect(apply("shadow-xl")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-xl")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -80,11 +99,13 @@ test("shadow-xl namespace", () => {
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
- })
+ }])
})
test("shadow-2xl namespace", () => {
- expect(apply("shadow-2xl")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("shadow-2xl")).toEqual([{
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -93,5 +114,5 @@ test("shadow-2xl namespace", () => {
shadowOpacity: 0.30,
shadowRadius: 4.65,
elevation: 8,
- })
+ }])
})
diff --git a/__tests__/src/text-align.test.js b/__tests__/src/text-align.test.js
index 27fbf1b..d46dd95 100644
--- a/__tests__/src/text-align.test.js
+++ b/__tests__/src/text-align.test.js
@@ -1,17 +1,30 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("text-left namespace", () => {
- expect(apply("text-left")).toEqual({ textAlign: "left" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-left")).toEqual([{ textAlign: "left" }]);
});
test("text-center namespace", () => {
- expect(apply("text-center")).toEqual({ textAlign: "center" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-center")).toEqual([{ textAlign: "center" }]);
});
test("text-right namespace", () => {
- expect(apply("text-right")).toEqual({ textAlign: "right" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-right")).toEqual([{ textAlign: "right" }]);
});
test("text-justify namespace", () => {
- expect(apply("text-justify")).toEqual({ textAlign: "justify" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-justify")).toEqual([{ textAlign: "justify" }]);
});
diff --git a/__tests__/src/text-color.test.js b/__tests__/src/text-color.test.js
index 9cdc04a..2762308 100644
--- a/__tests__/src/text-color.test.js
+++ b/__tests__/src/text-color.test.js
@@ -1,11 +1,20 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("text-black with default opacity", () => {
- expect(apply("text-black")).toEqual({ color: "rgba(0, 0, 0, 1)" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-black")).toEqual([{ color: "rgba(0, 0, 0, 1)" }]);
});
test("text-black with opacity 25", () => {
- expect(apply("text-black text-opacity-25")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-black text-opacity-25")).toEqual([{
color: "rgba(0, 0, 0, 0.25)",
- });
+ }]);
});
diff --git a/__tests__/src/text-size.test.js b/__tests__/src/text-size.test.js
index c6870ef..269f31c 100644
--- a/__tests__/src/text-size.test.js
+++ b/__tests__/src/text-size.test.js
@@ -1,41 +1,66 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("text-base namespace", () => {
- expect(apply("text-base")).toEqual({ fontSize: 16 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-base")).toEqual([{ fontSize: 16 }]);
});
test("text-xs namespace", () => {
- expect(apply("text-xs")).toEqual({ fontSize: 12 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-xs")).toEqual([{ fontSize: 12 }]);
});
test("text-sm namespace", () => {
- expect(apply("text-sm")).toEqual({ fontSize: 14 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-sm")).toEqual([{ fontSize: 14 }]);
});
test("text-lg namespace", () => {
- expect(apply("text-lg")).toEqual({ fontSize: 18 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-lg")).toEqual([{ fontSize: 18 }]);
});
test("text-xl namespace", () => {
- expect(apply("text-xl")).toEqual({ fontSize: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-xl")).toEqual([{ fontSize: 20 }]);
});
test("text-2xl namespace", () => {
- expect(apply("text-2xl")).toEqual({ fontSize: 22 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-2xl")).toEqual([{ fontSize: 22 }]);
});
test("text-3xl namespace", () => {
- expect(apply("text-3xl")).toEqual({ fontSize: 24 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-3xl")).toEqual([{ fontSize: 24 }]);
});
test("text-4xl namespace", () => {
- expect(apply("text-4xl")).toEqual({ fontSize: 26 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-4xl")).toEqual([{ fontSize: 26 }]);
});
test("text-5xl namespace", () => {
- expect(apply("text-5xl")).toEqual({ fontSize: 28 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-5xl")).toEqual([{ fontSize: 28 }]);
});
test("text-6xl namespace", () => {
- expect(apply("text-6xl")).toEqual({ fontSize: 30 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("text-6xl")).toEqual([{ fontSize: 30 }]);
});
diff --git a/__tests__/src/text-style.test.js b/__tests__/src/text-style.test.js
index 00b23d0..b46a588 100644
--- a/__tests__/src/text-style.test.js
+++ b/__tests__/src/text-style.test.js
@@ -1,55 +1,86 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("italic namespace", () => {
- expect(apply("italic")).toEqual({ fontStyle: "italic" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("italic")).toEqual([{ fontStyle: "italic" }]);
});
test("underline namespace", () => {
- expect(apply("underline")).toEqual({ textDecorationLine: "underline" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("underline")).toEqual([{ textDecorationLine: "underline" }]);
});
test("font-light namespace", () => {
- expect(apply("font-light")).toEqual({ fontWeight: "300" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-light")).toEqual([{ fontWeight: "300" }]);
});
test("font-black namespace", () => {
- expect(apply("font-black")).toEqual({ fontWeight: "900" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-black")).toEqual([{ fontWeight: "900" }]);
});
test("font-normal namespace", () => {
- expect(apply("font-normal")).toEqual({ fontWeight: "400" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-normal")).toEqual([{ fontWeight: "400" }]);
});
test("font-medium namespace", () => {
- expect(apply("font-medium")).toEqual({ fontWeight: "500" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-medium")).toEqual([{ fontWeight: "500" }]);
});
test("font-bold namespace", () => {
- expect(apply("font-bold")).toEqual({ fontWeight: "700" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-bold")).toEqual([{ fontWeight: "700" }]);
});
test("font-thin namespace", () => {
- expect(apply("font-thin")).toEqual({ fontWeight: "200" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-thin")).toEqual([{ fontWeight: "200" }]);
});
test("line-through namespace", () => {
- expect(apply("line-through")).toEqual({
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("line-through")).toEqual([{
textDecorationLine: "line-through",
- });
+ }]);
});
test("no-underline namespace", () => {
- expect(apply("no-underline")).toEqual({ textDecorationLine: "none" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("no-underline")).toEqual([{ textDecorationLine: "none" }]);
});
test("font-hairline namespace", () => {
- expect(apply("font-hairline")).toEqual({ fontWeight: "100" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-hairline")).toEqual([{ fontWeight: "100" }]);
});
test("font-semibold namespace", () => {
- expect(apply("font-semibold")).toEqual({ fontWeight: "600" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-semibold")).toEqual([{ fontWeight: "600" }]);
});
test("font-extrabold namespace", () => {
- expect(apply("font-extrabold")).toEqual({ fontWeight: "800" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("font-extrabold")).toEqual([{ fontWeight: "800" }]);
});
diff --git a/__tests__/src/text-transform.test.js b/__tests__/src/text-transform.test.js
index 4a3da36..c7f8988 100644
--- a/__tests__/src/text-transform.test.js
+++ b/__tests__/src/text-transform.test.js
@@ -1,17 +1,30 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("uppercase namespace", () => {
- expect(apply("uppercase")).toEqual({ textTransform: "uppercase" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("uppercase")).toEqual([{ textTransform: "uppercase" }]);
});
test("lowercase namespace", () => {
- expect(apply("lowercase")).toEqual({ textTransform: "lowercase" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("lowercase")).toEqual([{ textTransform: "lowercase" }]);
});
test("capitalize namespace", () => {
- expect(apply("capitalize")).toEqual({ textTransform: "capitalize" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("capitalize")).toEqual([{ textTransform: "capitalize" }]);
});
test("normal-case namespace", () => {
- expect(apply("normal-case")).toEqual({ textTransform: "normal-case" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("normal-case")).toEqual([{ textTransform: "normal-case" }]);
});
diff --git a/__tests__/src/transform-rotate.test.js b/__tests__/src/transform-rotate.test.js
index b0a0fca..b432c77 100644
--- a/__tests__/src/transform-rotate.test.js
+++ b/__tests__/src/transform-rotate.test.js
@@ -1,97 +1,150 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("rotate-50 namespace", () => {
- expect(apply("rotate-50")).toEqual({ transform: [{ rotate: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-50")).toEqual([{ transform: [{ rotate: "50deg" }] }]);
});
test("rotate-75 namespace", () => {
- expect(apply("rotate-75")).toEqual({ transform: [{ rotate: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-75")).toEqual([{ transform: [{ rotate: "75deg" }] }]);
});
test("rotate-100 namespace", () => {
- expect(apply("rotate-100")).toEqual({ transform: [{ rotate: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-100")).toEqual([{ transform: [{ rotate: "100deg" }] }]);
});
test("rotate-x-50 namespace", () => {
- expect(apply("rotate-x-50")).toEqual({ transform: [{ rotateX: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-x-50")).toEqual([{ transform: [{ rotateX: "50deg" }] }]);
});
test("rotate-x-75 namespace", () => {
- expect(apply("rotate-x-75")).toEqual({ transform: [{ rotateX: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-x-75")).toEqual([{ transform: [{ rotateX: "75deg" }] }]);
});
test("rotate-x-100 namespace", () => {
- expect(apply("rotate-x-100")).toEqual({ transform: [{ rotateX: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-x-100")).toEqual([{ transform: [{ rotateX: "100deg" }] }]);
});
test("rotate-z-50 namespace", () => {
- expect(apply("rotate-z-50")).toEqual({ transform: [{ rotateZ: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-z-50")).toEqual([{ transform: [{ rotateZ: "50deg" }] }]);
});
test("rotate-z-75 namespace", () => {
- expect(apply("rotate-z-75")).toEqual({ transform: [{ rotateZ: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-z-75")).toEqual([{ transform: [{ rotateZ: "75deg" }] }]);
});
test("rotate-z-100 namespace", () => {
- expect(apply("rotate-z-100")).toEqual({ transform: [{ rotateZ: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-z-100")).toEqual([{ transform: [{ rotateZ: "100deg" }] }]);
});
test("rotate-y-50 namespace", () => {
- expect(apply("rotate-y-50")).toEqual({ transform: [{ rotateY: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-y-50")).toEqual([{ transform: [{ rotateY: "50deg" }] }]);
});
test("rotate-y-75 namespace", () => {
- expect(apply("rotate-y-75")).toEqual({ transform: [{ rotateY: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-y-75")).toEqual([{ transform: [{ rotateY: "75deg" }] }]);
});
test("rotate-y-100 namespace", () => {
- expect(apply("rotate-y-100")).toEqual({ transform: [{ rotateY: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("rotate-y-100")).toEqual([{ transform: [{ rotateY: "100deg" }] }]);
});
test("-rotate-50 namespace", () => {
- expect(apply("-rotate-50")).toEqual({ transform: [{ rotate: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-50")).toEqual([{ transform: [{ rotate: "-50deg" }] }]);
});
test("-rotate-75 namespace", () => {
- expect(apply("-rotate-75")).toEqual({ transform: [{ rotate: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-75")).toEqual([{ transform: [{ rotate: "-75deg" }] }]);
});
test("-rotate-100 namespace", () => {
- expect(apply("-rotate-100")).toEqual({ transform: [{ rotate: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-100")).toEqual([{ transform: [{ rotate: "-100deg" }] }]);
});
test("-rotate-x-50 namespace", () => {
- expect(apply("-rotate-x-50")).toEqual({ transform: [{ rotateX: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-x-50")).toEqual([{ transform: [{ rotateX: "-50deg" }] }]);
});
test("-rotate-x-75 namespace", () => {
- expect(apply("-rotate-x-75")).toEqual({ transform: [{ rotateX: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-x-75")).toEqual([{ transform: [{ rotateX: "-75deg" }] }]);
});
test("-rotate-x-100 namespace", () => {
- expect(apply("-rotate-x-100")).toEqual({ transform: [{ rotateX: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-x-100")).toEqual([{ transform: [{ rotateX: "-100deg" }] }]);
});
test("-rotate-y-50 namespace", () => {
- expect(apply("-rotate-y-50")).toEqual({ transform: [{ rotateY: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-y-50")).toEqual([{ transform: [{ rotateY: "-50deg" }] }]);
});
test("-rotate-y-75 namespace", () => {
- expect(apply("-rotate-y-75")).toEqual({ transform: [{ rotateY: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-y-75")).toEqual([{ transform: [{ rotateY: "-75deg" }] }]);
});
test("-rotate-y-100 namespace", () => {
- expect(apply("-rotate-y-100")).toEqual({ transform: [{ rotateY: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-y-100")).toEqual([{ transform: [{ rotateY: "-100deg" }] }]);
});
test("-rotate-z-50 namespace", () => {
- expect(apply("-rotate-z-50")).toEqual({ transform: [{ rotateZ: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-z-50")).toEqual([{ transform: [{ rotateZ: "-50deg" }] }]);
});
test("-rotate-z-75 namespace", () => {
- expect(apply("-rotate-z-75")).toEqual({ transform: [{ rotateZ: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-z-75")).toEqual([{ transform: [{ rotateZ: "-75deg" }] }]);
});
test("-rotate-z-100 namespace", () => {
- expect(apply("-rotate-z-100")).toEqual({ transform: [{ rotateZ: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-rotate-z-100")).toEqual([{ transform: [{ rotateZ: "-100deg" }] }]);
});
\ No newline at end of file
diff --git a/__tests__/src/transform-scale.test.js b/__tests__/src/transform-scale.test.js
index 3b0e426..10c6ca6 100644
--- a/__tests__/src/transform-scale.test.js
+++ b/__tests__/src/transform-scale.test.js
@@ -1,73 +1,114 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("scale-50 namespace", () => {
- expect(apply("scale-50")).toEqual({ transform: [{ scale: 50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-50")).toEqual([{ transform: [{ scale: 50 }] }]);
});
test("scale-75 namespace", () => {
- expect(apply("scale-75")).toEqual({ transform: [{ scale: 75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-75")).toEqual([{ transform: [{ scale: 75 }] }]);
});
test("scale-100 namespace", () => {
- expect(apply("scale-100")).toEqual({ transform: [{ scale: 100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-100")).toEqual([{ transform: [{ scale: 100 }] }]);
});
test("scale-x-50 namespace", () => {
- expect(apply("scale-x-50")).toEqual({ transform: [{ scaleX: 50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-x-50")).toEqual([{ transform: [{ scaleX: 50 }] }]);
});
test("scale-x-75 namespace", () => {
- expect(apply("scale-x-75")).toEqual({ transform: [{ scaleX: 75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-x-75")).toEqual([{ transform: [{ scaleX: 75 }] }]);
});
test("scale-x-100 namespace", () => {
- expect(apply("scale-x-100")).toEqual({ transform: [{ scaleX: 100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-x-100")).toEqual([{ transform: [{ scaleX: 100 }] }]);
});
test("scale-y-50 namespace", () => {
- expect(apply("scale-y-50")).toEqual({ transform: [{ scaleY: 50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-y-50")).toEqual([{ transform: [{ scaleY: 50 }] }]);
});
test("scale-y-75 namespace", () => {
- expect(apply("scale-y-75")).toEqual({ transform: [{ scaleY: 75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-y-75")).toEqual([{ transform: [{ scaleY: 75 }] }]);
});
test("scale-y-100 namespace", () => {
- expect(apply("scale-y-100")).toEqual({ transform: [{ scaleY: 100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("scale-y-100")).toEqual([{ transform: [{ scaleY: 100 }] }]);
});
test("-scale-50 namespace", () => {
- expect(apply("-scale-50")).toEqual({ transform: [{ scale: -50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-50")).toEqual([{ transform: [{ scale: -50 }] }]);
});
test("-scale-75 namespace", () => {
- expect(apply("-scale-75")).toEqual({ transform: [{ scale: -75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-75")).toEqual([{ transform: [{ scale: -75 }] }]);
});
test("-scale-100 namespace", () => {
- expect(apply("-scale-100")).toEqual({ transform: [{ scale: -100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-100")).toEqual([{ transform: [{ scale: -100 }] }]);
});
test("-scale-x-50 namespace", () => {
- expect(apply("-scale-x-50")).toEqual({ transform: [{ scaleX: -50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-x-50")).toEqual([{ transform: [{ scaleX: -50 }] }]);
});
test("-scale-x-75 namespace", () => {
- expect(apply("-scale-x-75")).toEqual({ transform: [{ scaleX: -75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-x-75")).toEqual([{ transform: [{ scaleX: -75 }] }]);
});
test("-scale-x-100 namespace", () => {
- expect(apply("-scale-x-100")).toEqual({ transform: [{ scaleX: -100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-x-100")).toEqual([{ transform: [{ scaleX: -100 }] }]);
});
test("-scale-y-50 namespace", () => {
- expect(apply("-scale-y-50")).toEqual({ transform: [{ scaleY: -50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-y-50")).toEqual([{ transform: [{ scaleY: -50 }] }]);
});
test("-scale-y-75 namespace", () => {
- expect(apply("-scale-y-75")).toEqual({ transform: [{ scaleY: -75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-y-75")).toEqual([{ transform: [{ scaleY: -75 }] }]);
});
test("-scale-y-100 namespace", () => {
- expect(apply("-scale-y-100")).toEqual({ transform: [{ scaleY: -100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-scale-y-100")).toEqual([{ transform: [{ scaleY: -100 }] }]);
});
\ No newline at end of file
diff --git a/__tests__/src/transform-skew.test.js b/__tests__/src/transform-skew.test.js
index e4a06c2..f13fb9b 100644
--- a/__tests__/src/transform-skew.test.js
+++ b/__tests__/src/transform-skew.test.js
@@ -1,49 +1,78 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("skew-x-50 namespace", () => {
- expect(apply("skew-x-50")).toEqual({ transform: [{ skewX: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-x-50")).toEqual([{ transform: [{ skewX: "50deg" }] }]);
});
test("skew-x-75 namespace", () => {
- expect(apply("skew-x-75")).toEqual({ transform: [{ skewX: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-x-75")).toEqual([{ transform: [{ skewX: "75deg" }] }]);
});
test("skew-x-100 namespace", () => {
- expect(apply("skew-x-100")).toEqual({ transform: [{ skewX: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-x-100")).toEqual([{ transform: [{ skewX: "100deg" }] }]);
});
test("skew-y-50 namespace", () => {
- expect(apply("skew-y-50")).toEqual({ transform: [{ skewY: "50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-y-50")).toEqual([{ transform: [{ skewY: "50deg" }] }]);
});
test("skew-y-75 namespace", () => {
- expect(apply("skew-y-75")).toEqual({ transform: [{ skewY: "75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-y-75")).toEqual([{ transform: [{ skewY: "75deg" }] }]);
});
test("skew-y-100 namespace", () => {
- expect(apply("skew-y-100")).toEqual({ transform: [{ skewY: "100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("skew-y-100")).toEqual([{ transform: [{ skewY: "100deg" }] }]);
});
test("-skew-x-50 namespace", () => {
- expect(apply("-skew-x-50")).toEqual({ transform: [{ skewX: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-x-50")).toEqual([{ transform: [{ skewX: "-50deg" }] }]);
});
test("-skew-x-75 namespace", () => {
- expect(apply("-skew-x-75")).toEqual({ transform: [{ skewX: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-x-75")).toEqual([{ transform: [{ skewX: "-75deg" }] }]);
});
test("-skew-x-100 namespace", () => {
- expect(apply("-skew-x-100")).toEqual({ transform: [{ skewX: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-x-100")).toEqual([{ transform: [{ skewX: "-100deg" }] }]);
});
test("-skew-y-50 namespace", () => {
- expect(apply("-skew-y-50")).toEqual({ transform: [{ skewY: "-50deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-y-50")).toEqual([{ transform: [{ skewY: "-50deg" }] }]);
});
test("-skew-y-75 namespace", () => {
- expect(apply("-skew-y-75")).toEqual({ transform: [{ skewY: "-75deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-y-75")).toEqual([{ transform: [{ skewY: "-75deg" }] }]);
});
test("-skew-y-100 namespace", () => {
- expect(apply("-skew-y-100")).toEqual({ transform: [{ skewY: "-100deg" }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-skew-y-100")).toEqual([{ transform: [{ skewY: "-100deg" }] }]);
});
\ No newline at end of file
diff --git a/__tests__/src/transform-translate.test.js b/__tests__/src/transform-translate.test.js
index e433e54..128aa37 100644
--- a/__tests__/src/transform-translate.test.js
+++ b/__tests__/src/transform-translate.test.js
@@ -1,49 +1,78 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("translate-x-50 namespace", () => {
- expect(apply("translate-x-50")).toEqual({ transform: [{ translateX: 50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-x-50")).toEqual([{ transform: [{ translateX: 50 }] }]);
});
test("translate-x-75 namespace", () => {
- expect(apply("translate-x-75")).toEqual({ transform: [{ translateX: 75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-x-75")).toEqual([{ transform: [{ translateX: 75 }] }]);
});
test("translate-x-100 namespace", () => {
- expect(apply("translate-x-100")).toEqual({ transform: [{ translateX: 100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-x-100")).toEqual([{ transform: [{ translateX: 100 }] }]);
});
test("translate-y-50 namespace", () => {
- expect(apply("translate-y-50")).toEqual({ transform: [{ translateY: 50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-y-50")).toEqual([{ transform: [{ translateY: 50 }] }]);
});
test("translate-y-75 namespace", () => {
- expect(apply("translate-y-75")).toEqual({ transform: [{ translateY: 75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-y-75")).toEqual([{ transform: [{ translateY: 75 }] }]);
});
test("translate-y-100 namespace", () => {
- expect(apply("translate-y-100")).toEqual({ transform: [{ translateY: 100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("translate-y-100")).toEqual([{ transform: [{ translateY: 100 }] }]);
});
test("-translate-x-50 namespace", () => {
- expect(apply("-translate-x-50")).toEqual({ transform: [{ translateX: -50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-x-50")).toEqual([{ transform: [{ translateX: -50 }] }]);
});
test("-translate-x-75 namespace", () => {
- expect(apply("-translate-x-75")).toEqual({ transform: [{ translateX: -75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-x-75")).toEqual([{ transform: [{ translateX: -75 }] }]);
});
test("-translate-x-100 namespace", () => {
- expect(apply("-translate-x-100")).toEqual({ transform: [{ translateX: -100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-x-100")).toEqual([{ transform: [{ translateX: -100 }] }]);
});
test("-translate-y-50 namespace", () => {
- expect(apply("-translate-y-50")).toEqual({ transform: [{ translateY: -50 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-y-50")).toEqual([{ transform: [{ translateY: -50 }] }]);
});
test("-translate-y-75 namespace", () => {
- expect(apply("-translate-y-75")).toEqual({ transform: [{ translateY: -75 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-y-75")).toEqual([{ transform: [{ translateY: -75 }] }]);
});
test("-translate-y-100 namespace", () => {
- expect(apply("-translate-y-100")).toEqual({ transform: [{ translateY: -100 }] })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-translate-y-100")).toEqual([{ transform: [{ translateY: -100 }] }]);
});
\ No newline at end of file
diff --git a/__tests__/src/trbl.test.js b/__tests__/src/trbl.test.js
index 28355b8..0eb1134 100644
--- a/__tests__/src/trbl.test.js
+++ b/__tests__/src/trbl.test.js
@@ -1,1177 +1,1770 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("inset-0 namespace", () => {
- expect(apply("inset-0")).toEqual({ "top": 0, "right": 0, "bottom": 0, "left": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-0")).toEqual([{ "top": 0, "right": 0, "bottom": 0, "left": 0 }]);
});
test("inset-y-0 namespace", () => {
- expect(apply("inset-y-0")).toEqual({ "top": 0, "bottom": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-0")).toEqual([{ "top": 0, "bottom": 0 }]);
});
test("inset-x-0 namespace", () => {
- expect(apply("inset-x-0")).toEqual({ "right": 0, "left": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-0")).toEqual([{ "right": 0, "left": 0 }]);
});
test("top-0 namespace", () => {
- expect(apply("top-0")).toEqual({ "top": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-0")).toEqual([{ "top": 0 }]);
});
test("right-0 namespace", () => {
- expect(apply("right-0")).toEqual({ "right": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-0")).toEqual([{ "right": 0 }]);
});
test("bottom-0 namespace", () => {
- expect(apply("bottom-0")).toEqual({ "bottom": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-0")).toEqual([{ "bottom": 0 }]);
});
test("left-0 namespace", () => {
- expect(apply("left-0")).toEqual({ "left": 0 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-0")).toEqual([{ "left": 0 }]);
});
test("inset-auto namespace", () => {
- expect(apply("inset-auto")).toEqual({ "top": "auto", "right": "auto", "bottom": "auto", "left": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-auto")).toEqual([{ "top": "auto", "right": "auto", "bottom": "auto", "left": "auto" }]);
});
test("inset-y-auto namespace", () => {
- expect(apply("inset-y-auto")).toEqual({ "top": "auto", "bottom": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-auto")).toEqual([{ "top": "auto", "bottom": "auto" }]);
});
test("inset-x-auto namespace", () => {
- expect(apply("inset-x-auto")).toEqual({ "right": "auto", "left": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-auto")).toEqual([{ "right": "auto", "left": "auto" }]);
});
test("top-auto namespace", () => {
- expect(apply("top-auto")).toEqual({ "top": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-auto")).toEqual([{ "top": "auto" }]);
});
test("right-auto namespace", () => {
- expect(apply("right-auto")).toEqual({ "right": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-auto")).toEqual([{ "right": "auto" }]);
});
test("bottom-auto namespace", () => {
- expect(apply("bottom-auto")).toEqual({ "bottom": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-auto")).toEqual([{ "bottom": "auto" }]);
});
test("left-auto namespace", () => {
- expect(apply("left-auto")).toEqual({ "left": "auto" })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-auto")).toEqual([{ "left": "auto" }]);
});
test("inset-1 namespace", () => {
- expect(apply("inset-1")).toEqual({ "top": 4, "right": 4, "bottom": 4, "left": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-1")).toEqual([{ "top": 4, "right": 4, "bottom": 4, "left": 4 }]);
});
test("inset-2 namespace", () => {
- expect(apply("inset-2")).toEqual({ "top": 8, "right": 8, "bottom": 8, "left": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-2")).toEqual([{ "top": 8, "right": 8, "bottom": 8, "left": 8 }]);
});
test("inset-3 namespace", () => {
- expect(apply("inset-3")).toEqual({ "top": 12, "right": 12, "bottom": 12, "left": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-3")).toEqual([{ "top": 12, "right": 12, "bottom": 12, "left": 12 }]);
});
test("inset-4 namespace", () => {
- expect(apply("inset-4")).toEqual({ "top": 16, "right": 16, "bottom": 16, "left": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-4")).toEqual([{ "top": 16, "right": 16, "bottom": 16, "left": 16 }]);
});
test("inset-5 namespace", () => {
- expect(apply("inset-5")).toEqual({ "top": 20, "right": 20, "bottom": 20, "left": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-5")).toEqual([{ "top": 20, "right": 20, "bottom": 20, "left": 20 }]);
});
test("inset-6 namespace", () => {
- expect(apply("inset-6")).toEqual({ "top": 24, "right": 24, "bottom": 24, "left": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-6")).toEqual([{ "top": 24, "right": 24, "bottom": 24, "left": 24 }]);
});
test("inset-7 namespace", () => {
- expect(apply("inset-7")).toEqual({ "top": 28, "right": 28, "bottom": 28, "left": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-7")).toEqual([{ "top": 28, "right": 28, "bottom": 28, "left": 28 }]);
});
test("inset-8 namespace", () => {
- expect(apply("inset-8")).toEqual({ "top": 32, "right": 32, "bottom": 32, "left": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-8")).toEqual([{ "top": 32, "right": 32, "bottom": 32, "left": 32 }]);
});
test("inset-9 namespace", () => {
- expect(apply("inset-9")).toEqual({ "top": 36, "right": 36, "bottom": 36, "left": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-9")).toEqual([{ "top": 36, "right": 36, "bottom": 36, "left": 36 }]);
});
test("inset-10 namespace", () => {
- expect(apply("inset-10")).toEqual({ "top": 40, "right": 40, "bottom": 40, "left": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-10")).toEqual([{ "top": 40, "right": 40, "bottom": 40, "left": 40 }]);
});
test("inset-12 namespace", () => {
- expect(apply("inset-12")).toEqual({ "top": 48, "right": 48, "bottom": 48, "left": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-12")).toEqual([{ "top": 48, "right": 48, "bottom": 48, "left": 48 }]);
});
test("inset-16 namespace", () => {
- expect(apply("inset-16")).toEqual({ "top": 64, "right": 64, "bottom": 64, "left": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-16")).toEqual([{ "top": 64, "right": 64, "bottom": 64, "left": 64 }]);
});
test("inset-20 namespace", () => {
- expect(apply("inset-20")).toEqual({ "top": 80, "right": 80, "bottom": 80, "left": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-20")).toEqual([{ "top": 80, "right": 80, "bottom": 80, "left": 80 }]);
});
test("inset-24 namespace", () => {
- expect(apply("inset-24")).toEqual({ "top": 96, "right": 96, "bottom": 96, "left": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-24")).toEqual([{ "top": 96, "right": 96, "bottom": 96, "left": 96 }]);
});
test("inset-32 namespace", () => {
- expect(apply("inset-32")).toEqual({ "top": 128, "right": 128, "bottom": 128, "left": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-32")).toEqual([{ "top": 128, "right": 128, "bottom": 128, "left": 128 }]);
});
test("inset-40 namespace", () => {
- expect(apply("inset-40")).toEqual({ "top": 160, "right": 160, "bottom": 160, "left": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-40")).toEqual([{ "top": 160, "right": 160, "bottom": 160, "left": 160 }]);
});
test("inset-48 namespace", () => {
- expect(apply("inset-48")).toEqual({ "top": 192, "right": 192, "bottom": 192, "left": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-48")).toEqual([{ "top": 192, "right": 192, "bottom": 192, "left": 192 }]);
});
test("inset-56 namespace", () => {
- expect(apply("inset-56")).toEqual({ "top": 224, "right": 224, "bottom": 224, "left": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-56")).toEqual([{ "top": 224, "right": 224, "bottom": 224, "left": 224 }]);
});
test("inset-64 namespace", () => {
- expect(apply("inset-64")).toEqual({ "top": 256, "right": 256, "bottom": 256, "left": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-64")).toEqual([{ "top": 256, "right": 256, "bottom": 256, "left": 256 }]);
});
test("inset-px namespace", () => {
- expect(apply("inset-px")).toEqual({ "top": 2, "right": 2, "bottom": 2, "left": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-px")).toEqual([{ "top": 2, "right": 2, "bottom": 2, "left": 2 }]);
});
test("inset-y-1 namespace", () => {
- expect(apply("inset-y-1")).toEqual({ "top": 4, "bottom": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-1")).toEqual([{ "top": 4, "bottom": 4 }]);
});
test("inset-y-2 namespace", () => {
- expect(apply("inset-y-2")).toEqual({ "top": 8, "bottom": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-2")).toEqual([{ "top": 8, "bottom": 8 }]);
});
test("inset-y-3 namespace", () => {
- expect(apply("inset-y-3")).toEqual({ "top": 12, "bottom": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-3")).toEqual([{ "top": 12, "bottom": 12 }]);
});
test("inset-y-4 namespace", () => {
- expect(apply("inset-y-4")).toEqual({ "top": 16, "bottom": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-4")).toEqual([{ "top": 16, "bottom": 16 }]);
});
test("inset-y-5 namespace", () => {
- expect(apply("inset-y-5")).toEqual({ "top": 20, "bottom": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-5")).toEqual([{ "top": 20, "bottom": 20 }]);
});
test("inset-y-6 namespace", () => {
- expect(apply("inset-y-6")).toEqual({ "top": 24, "bottom": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-6")).toEqual([{ "top": 24, "bottom": 24 }]);
});
test("inset-y-7 namespace", () => {
- expect(apply("inset-y-7")).toEqual({ "top": 28, "bottom": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-7")).toEqual([{ "top": 28, "bottom": 28 }]);
});
test("inset-y-8 namespace", () => {
- expect(apply("inset-y-8")).toEqual({ "top": 32, "bottom": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-8")).toEqual([{ "top": 32, "bottom": 32 }]);
});
test("inset-y-9 namespace", () => {
- expect(apply("inset-y-9")).toEqual({ "top": 36, "bottom": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-9")).toEqual([{ "top": 36, "bottom": 36 }]);
});
test("inset-y-10 namespace", () => {
- expect(apply("inset-y-10")).toEqual({ "top": 40, "bottom": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-10")).toEqual([{ "top": 40, "bottom": 40 }]);
});
test("inset-y-12 namespace", () => {
- expect(apply("inset-y-12")).toEqual({ "top": 48, "bottom": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-12")).toEqual([{ "top": 48, "bottom": 48 }]);
});
test("inset-y-16 namespace", () => {
- expect(apply("inset-y-16")).toEqual({ "top": 64, "bottom": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-16")).toEqual([{ "top": 64, "bottom": 64 }]);
});
test("inset-y-20 namespace", () => {
- expect(apply("inset-y-20")).toEqual({ "top": 80, "bottom": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-20")).toEqual([{ "top": 80, "bottom": 80 }]);
});
test("inset-y-24 namespace", () => {
- expect(apply("inset-y-24")).toEqual({ "top": 96, "bottom": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-24")).toEqual([{ "top": 96, "bottom": 96 }]);
});
test("inset-y-32 namespace", () => {
- expect(apply("inset-y-32")).toEqual({ "top": 128, "bottom": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-32")).toEqual([{ "top": 128, "bottom": 128 }]);
});
test("inset-y-40 namespace", () => {
- expect(apply("inset-y-40")).toEqual({ "top": 160, "bottom": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-40")).toEqual([{ "top": 160, "bottom": 160 }]);
});
test("inset-y-48 namespace", () => {
- expect(apply("inset-y-48")).toEqual({ "top": 192, "bottom": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-48")).toEqual([{ "top": 192, "bottom": 192 }]);
});
test("inset-y-56 namespace", () => {
- expect(apply("inset-y-56")).toEqual({ "top": 224, "bottom": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-56")).toEqual([{ "top": 224, "bottom": 224 }]);
});
test("inset-y-64 namespace", () => {
- expect(apply("inset-y-64")).toEqual({ "top": 256, "bottom": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-64")).toEqual([{ "top": 256, "bottom": 256 }]);
});
test("inset-y-px namespace", () => {
- expect(apply("inset-y-px")).toEqual({ "top": 2, "bottom": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-y-px")).toEqual([{ "top": 2, "bottom": 2 }]);
});
test("inset-x-1 namespace", () => {
- expect(apply("inset-x-1")).toEqual({ "right": 4, "left": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-1")).toEqual([{ "right": 4, "left": 4 }]);
});
test("inset-x-2 namespace", () => {
- expect(apply("inset-x-2")).toEqual({ "right": 8, "left": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-2")).toEqual([{ "right": 8, "left": 8 }]);
});
test("inset-x-3 namespace", () => {
- expect(apply("inset-x-3")).toEqual({ "right": 12, "left": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-3")).toEqual([{ "right": 12, "left": 12 }]);
});
test("inset-x-4 namespace", () => {
- expect(apply("inset-x-4")).toEqual({ "right": 16, "left": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-4")).toEqual([{ "right": 16, "left": 16 }]);
});
test("inset-x-5 namespace", () => {
- expect(apply("inset-x-5")).toEqual({ "right": 20, "left": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-5")).toEqual([{ "right": 20, "left": 20 }]);
});
test("inset-x-6 namespace", () => {
- expect(apply("inset-x-6")).toEqual({ "right": 24, "left": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-6")).toEqual([{ "right": 24, "left": 24 }]);
});
test("inset-x-7 namespace", () => {
- expect(apply("inset-x-7")).toEqual({ "right": 28, "left": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-7")).toEqual([{ "right": 28, "left": 28 }]);
});
test("inset-x-8 namespace", () => {
- expect(apply("inset-x-8")).toEqual({ "right": 32, "left": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-8")).toEqual([{ "right": 32, "left": 32 }]);
});
test("inset-x-9 namespace", () => {
- expect(apply("inset-x-9")).toEqual({ "right": 36, "left": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-9")).toEqual([{ "right": 36, "left": 36 }]);
});
test("inset-x-10 namespace", () => {
- expect(apply("inset-x-10")).toEqual({ "right": 40, "left": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-10")).toEqual([{ "right": 40, "left": 40 }]);
});
test("inset-x-12 namespace", () => {
- expect(apply("inset-x-12")).toEqual({ "right": 48, "left": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-12")).toEqual([{ "right": 48, "left": 48 }]);
});
test("inset-x-16 namespace", () => {
- expect(apply("inset-x-16")).toEqual({ "right": 64, "left": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-16")).toEqual([{ "right": 64, "left": 64 }]);
});
test("inset-x-20 namespace", () => {
- expect(apply("inset-x-20")).toEqual({ "right": 80, "left": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-20")).toEqual([{ "right": 80, "left": 80 }]);
});
test("inset-x-24 namespace", () => {
- expect(apply("inset-x-24")).toEqual({ "right": 96, "left": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-24")).toEqual([{ "right": 96, "left": 96 }]);
});
test("inset-x-32 namespace", () => {
- expect(apply("inset-x-32")).toEqual({ "right": 128, "left": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-32")).toEqual([{ "right": 128, "left": 128 }]);
});
test("inset-x-40 namespace", () => {
- expect(apply("inset-x-40")).toEqual({ "right": 160, "left": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-40")).toEqual([{ "right": 160, "left": 160 }]);
});
test("inset-x-48 namespace", () => {
- expect(apply("inset-x-48")).toEqual({ "right": 192, "left": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-48")).toEqual([{ "right": 192, "left": 192 }]);
});
test("inset-x-56 namespace", () => {
- expect(apply("inset-x-56")).toEqual({ "right": 224, "left": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-56")).toEqual([{ "right": 224, "left": 224 }]);
});
test("inset-x-64 namespace", () => {
- expect(apply("inset-x-64")).toEqual({ "right": 256, "left": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-64")).toEqual([{ "right": 256, "left": 256 }]);
});
test("inset-x-px namespace", () => {
- expect(apply("inset-x-px")).toEqual({ "right": 2, "left": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("inset-x-px")).toEqual([{ "right": 2, "left": 2 }]);
});
test("top-1 namespace", () => {
- expect(apply("top-1")).toEqual({ "top": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-1")).toEqual([{ "top": 4 }]);
});
test("top-2 namespace", () => {
- expect(apply("top-2")).toEqual({ "top": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-2")).toEqual([{ "top": 8 }]);
});
test("top-3 namespace", () => {
- expect(apply("top-3")).toEqual({ "top": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-3")).toEqual([{ "top": 12 }]);
});
test("top-4 namespace", () => {
- expect(apply("top-4")).toEqual({ "top": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-4")).toEqual([{ "top": 16 }]);
});
test("top-5 namespace", () => {
- expect(apply("top-5")).toEqual({ "top": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-5")).toEqual([{ "top": 20 }]);
});
test("top-6 namespace", () => {
- expect(apply("top-6")).toEqual({ "top": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-6")).toEqual([{ "top": 24 }]);
});
test("top-7 namespace", () => {
- expect(apply("top-7")).toEqual({ "top": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-7")).toEqual([{ "top": 28 }]);
});
test("top-8 namespace", () => {
- expect(apply("top-8")).toEqual({ "top": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-8")).toEqual([{ "top": 32 }]);
});
test("top-9 namespace", () => {
- expect(apply("top-9")).toEqual({ "top": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-9")).toEqual([{ "top": 36 }]);
});
test("top-10 namespace", () => {
- expect(apply("top-10")).toEqual({ "top": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-10")).toEqual([{ "top": 40 }]);
});
test("top-12 namespace", () => {
- expect(apply("top-12")).toEqual({ "top": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-12")).toEqual([{ "top": 48 }]);
});
test("top-16 namespace", () => {
- expect(apply("top-16")).toEqual({ "top": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-16")).toEqual([{ "top": 64 }]);
});
test("top-20 namespace", () => {
- expect(apply("top-20")).toEqual({ "top": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-20")).toEqual([{ "top": 80 }]);
});
test("top-24 namespace", () => {
- expect(apply("top-24")).toEqual({ "top": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-24")).toEqual([{ "top": 96 }]);
});
test("top-32 namespace", () => {
- expect(apply("top-32")).toEqual({ "top": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-32")).toEqual([{ "top": 128 }]);
});
test("top-40 namespace", () => {
- expect(apply("top-40")).toEqual({ "top": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-40")).toEqual([{ "top": 160 }]);
});
test("top-48 namespace", () => {
- expect(apply("top-48")).toEqual({ "top": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-48")).toEqual([{ "top": 192 }]);
});
test("top-56 namespace", () => {
- expect(apply("top-56")).toEqual({ "top": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-56")).toEqual([{ "top": 224 }]);
});
test("top-64 namespace", () => {
- expect(apply("top-64")).toEqual({ "top": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-64")).toEqual([{ "top": 256 }]);
});
test("top-px namespace", () => {
- expect(apply("top-px")).toEqual({ "top": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("top-px")).toEqual([{ "top": 2 }]);
});
test("right-1 namespace", () => {
- expect(apply("right-1")).toEqual({ "right": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-1")).toEqual([{ "right": 4 }]);
});
test("right-2 namespace", () => {
- expect(apply("right-2")).toEqual({ "right": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-2")).toEqual([{ "right": 8 }]);
});
test("right-3 namespace", () => {
- expect(apply("right-3")).toEqual({ "right": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-3")).toEqual([{ "right": 12 }]);
});
test("right-4 namespace", () => {
- expect(apply("right-4")).toEqual({ "right": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-4")).toEqual([{ "right": 16 }]);
});
test("right-5 namespace", () => {
- expect(apply("right-5")).toEqual({ "right": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-5")).toEqual([{ "right": 20 }]);
});
test("right-6 namespace", () => {
- expect(apply("right-6")).toEqual({ "right": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-6")).toEqual([{ "right": 24 }]);
});
test("right-7 namespace", () => {
- expect(apply("right-7")).toEqual({ "right": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-7")).toEqual([{ "right": 28 }]);
});
test("right-8 namespace", () => {
- expect(apply("right-8")).toEqual({ "right": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-8")).toEqual([{ "right": 32 }]);
});
test("right-9 namespace", () => {
- expect(apply("right-9")).toEqual({ "right": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-9")).toEqual([{ "right": 36 }]);
});
test("right-10 namespace", () => {
- expect(apply("right-10")).toEqual({ "right": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-10")).toEqual([{ "right": 40 }]);
});
test("right-12 namespace", () => {
- expect(apply("right-12")).toEqual({ "right": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-12")).toEqual([{ "right": 48 }]);
});
test("right-16 namespace", () => {
- expect(apply("right-16")).toEqual({ "right": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-16")).toEqual([{ "right": 64 }]);
});
test("right-20 namespace", () => {
- expect(apply("right-20")).toEqual({ "right": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-20")).toEqual([{ "right": 80 }]);
});
test("right-24 namespace", () => {
- expect(apply("right-24")).toEqual({ "right": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-24")).toEqual([{ "right": 96 }]);
});
test("right-32 namespace", () => {
- expect(apply("right-32")).toEqual({ "right": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-32")).toEqual([{ "right": 128 }]);
});
test("right-40 namespace", () => {
- expect(apply("right-40")).toEqual({ "right": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-40")).toEqual([{ "right": 160 }]);
});
test("right-48 namespace", () => {
- expect(apply("right-48")).toEqual({ "right": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-48")).toEqual([{ "right": 192 }]);
});
test("right-56 namespace", () => {
- expect(apply("right-56")).toEqual({ "right": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-56")).toEqual([{ "right": 224 }]);
});
test("right-64 namespace", () => {
- expect(apply("right-64")).toEqual({ "right": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-64")).toEqual([{ "right": 256 }]);
});
test("right-px namespace", () => {
- expect(apply("right-px")).toEqual({ "right": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("right-px")).toEqual([{ "right": 2 }]);
});
test("bottom-1 namespace", () => {
- expect(apply("bottom-1")).toEqual({ "bottom": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-1")).toEqual([{ "bottom": 4 }]);
});
test("bottom-2 namespace", () => {
- expect(apply("bottom-2")).toEqual({ "bottom": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-2")).toEqual([{ "bottom": 8 }]);
});
test("bottom-3 namespace", () => {
- expect(apply("bottom-3")).toEqual({ "bottom": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-3")).toEqual([{ "bottom": 12 }]);
});
test("bottom-4 namespace", () => {
- expect(apply("bottom-4")).toEqual({ "bottom": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-4")).toEqual([{ "bottom": 16 }]);
});
test("bottom-5 namespace", () => {
- expect(apply("bottom-5")).toEqual({ "bottom": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-5")).toEqual([{ "bottom": 20 }]);
});
test("bottom-6 namespace", () => {
- expect(apply("bottom-6")).toEqual({ "bottom": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-6")).toEqual([{ "bottom": 24 }]);
});
test("bottom-7 namespace", () => {
- expect(apply("bottom-7")).toEqual({ "bottom": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-7")).toEqual([{ "bottom": 28 }]);
});
test("bottom-8 namespace", () => {
- expect(apply("bottom-8")).toEqual({ "bottom": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-8")).toEqual([{ "bottom": 32 }]);
});
test("bottom-9 namespace", () => {
- expect(apply("bottom-9")).toEqual({ "bottom": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-9")).toEqual([{ "bottom": 36 }]);
});
test("bottom-10 namespace", () => {
- expect(apply("bottom-10")).toEqual({ "bottom": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-10")).toEqual([{ "bottom": 40 }]);
});
test("bottom-12 namespace", () => {
- expect(apply("bottom-12")).toEqual({ "bottom": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-12")).toEqual([{ "bottom": 48 }]);
});
test("bottom-16 namespace", () => {
- expect(apply("bottom-16")).toEqual({ "bottom": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-16")).toEqual([{ "bottom": 64 }]);
});
test("bottom-20 namespace", () => {
- expect(apply("bottom-20")).toEqual({ "bottom": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-20")).toEqual([{ "bottom": 80 }]);
});
test("bottom-24 namespace", () => {
- expect(apply("bottom-24")).toEqual({ "bottom": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-24")).toEqual([{ "bottom": 96 }]);
});
test("bottom-32 namespace", () => {
- expect(apply("bottom-32")).toEqual({ "bottom": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-32")).toEqual([{ "bottom": 128 }]);
});
test("bottom-40 namespace", () => {
- expect(apply("bottom-40")).toEqual({ "bottom": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-40")).toEqual([{ "bottom": 160 }]);
});
test("bottom-48 namespace", () => {
- expect(apply("bottom-48")).toEqual({ "bottom": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-48")).toEqual([{ "bottom": 192 }]);
});
test("bottom-56 namespace", () => {
- expect(apply("bottom-56")).toEqual({ "bottom": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-56")).toEqual([{ "bottom": 224 }]);
});
test("bottom-64 namespace", () => {
- expect(apply("bottom-64")).toEqual({ "bottom": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-64")).toEqual([{ "bottom": 256 }]);
});
test("bottom-px namespace", () => {
- expect(apply("bottom-px")).toEqual({ "bottom": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("bottom-px")).toEqual([{ "bottom": 2 }]);
});
test("left-1 namespace", () => {
- expect(apply("left-1")).toEqual({ "left": 4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-1")).toEqual([{ "left": 4 }]);
});
test("left-2 namespace", () => {
- expect(apply("left-2")).toEqual({ "left": 8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-2")).toEqual([{ "left": 8 }]);
});
test("left-3 namespace", () => {
- expect(apply("left-3")).toEqual({ "left": 12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-3")).toEqual([{ "left": 12 }]);
});
test("left-4 namespace", () => {
- expect(apply("left-4")).toEqual({ "left": 16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-4")).toEqual([{ "left": 16 }]);
});
test("left-5 namespace", () => {
- expect(apply("left-5")).toEqual({ "left": 20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-5")).toEqual([{ "left": 20 }]);
});
test("left-6 namespace", () => {
- expect(apply("left-6")).toEqual({ "left": 24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-6")).toEqual([{ "left": 24 }]);
});
test("left-7 namespace", () => {
- expect(apply("left-7")).toEqual({ "left": 28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-7")).toEqual([{ "left": 28 }]);
});
test("left-8 namespace", () => {
- expect(apply("left-8")).toEqual({ "left": 32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-8")).toEqual([{ "left": 32 }]);
});
test("left-9 namespace", () => {
- expect(apply("left-9")).toEqual({ "left": 36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-9")).toEqual([{ "left": 36 }]);
});
test("left-10 namespace", () => {
- expect(apply("left-10")).toEqual({ "left": 40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-10")).toEqual([{ "left": 40 }]);
});
test("left-12 namespace", () => {
- expect(apply("left-12")).toEqual({ "left": 48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-12")).toEqual([{ "left": 48 }]);
});
test("left-16 namespace", () => {
- expect(apply("left-16")).toEqual({ "left": 64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-16")).toEqual([{ "left": 64 }]);
});
test("left-20 namespace", () => {
- expect(apply("left-20")).toEqual({ "left": 80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-20")).toEqual([{ "left": 80 }]);
});
test("left-24 namespace", () => {
- expect(apply("left-24")).toEqual({ "left": 96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-24")).toEqual([{ "left": 96 }]);
});
test("left-32 namespace", () => {
- expect(apply("left-32")).toEqual({ "left": 128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-32")).toEqual([{ "left": 128 }]);
});
test("left-40 namespace", () => {
- expect(apply("left-40")).toEqual({ "left": 160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-40")).toEqual([{ "left": 160 }]);
});
test("left-48 namespace", () => {
- expect(apply("left-48")).toEqual({ "left": 192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-48")).toEqual([{ "left": 192 }]);
});
test("left-56 namespace", () => {
- expect(apply("left-56")).toEqual({ "left": 224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-56")).toEqual([{ "left": 224 }]);
});
test("left-64 namespace", () => {
- expect(apply("left-64")).toEqual({ "left": 256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-64")).toEqual([{ "left": 256 }]);
});
test("left-px namespace", () => {
- expect(apply("left-px")).toEqual({ "left": 2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("left-px")).toEqual([{ "left": 2 }]);
});
test("-inset-1 namespace", () => {
- expect(apply("-inset-1")).toEqual({ "top": -4, "right": -4, "bottom": -4, "left": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-1")).toEqual([{ "top": -4, "right": -4, "bottom": -4, "left": -4 }]);
});
test("-inset-2 namespace", () => {
- expect(apply("-inset-2")).toEqual({ "top": -8, "right": -8, "bottom": -8, "left": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-2")).toEqual([{ "top": -8, "right": -8, "bottom": -8, "left": -8 }]);
});
test("-inset-3 namespace", () => {
- expect(apply("-inset-3")).toEqual({ "top": -12, "right": -12, "bottom": -12, "left": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-3")).toEqual([{ "top": -12, "right": -12, "bottom": -12, "left": -12 }]);
});
test("-inset-4 namespace", () => {
- expect(apply("-inset-4")).toEqual({ "top": -16, "right": -16, "bottom": -16, "left": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-4")).toEqual([{ "top": -16, "right": -16, "bottom": -16, "left": -16 }]);
});
test("-inset-5 namespace", () => {
- expect(apply("-inset-5")).toEqual({ "top": -20, "right": -20, "bottom": -20, "left": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-5")).toEqual([{ "top": -20, "right": -20, "bottom": -20, "left": -20 }]);
});
test("-inset-6 namespace", () => {
- expect(apply("-inset-6")).toEqual({ "top": -24, "right": -24, "bottom": -24, "left": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-6")).toEqual([{ "top": -24, "right": -24, "bottom": -24, "left": -24 }]);
});
test("-inset-7 namespace", () => {
- expect(apply("-inset-7")).toEqual({ "top": -28, "right": -28, "bottom": -28, "left": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-7")).toEqual([{ "top": -28, "right": -28, "bottom": -28, "left": -28 }]);
});
test("-inset-8 namespace", () => {
- expect(apply("-inset-8")).toEqual({ "top": -32, "right": -32, "bottom": -32, "left": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-8")).toEqual([{ "top": -32, "right": -32, "bottom": -32, "left": -32 }]);
});
test("-inset-9 namespace", () => {
- expect(apply("-inset-9")).toEqual({ "top": -36, "right": -36, "bottom": -36, "left": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-9")).toEqual([{ "top": -36, "right": -36, "bottom": -36, "left": -36 }]);
});
test("-inset-10 namespace", () => {
- expect(apply("-inset-10")).toEqual({ "top": -40, "right": -40, "bottom": -40, "left": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-10")).toEqual([{ "top": -40, "right": -40, "bottom": -40, "left": -40 }]);
});
test("-inset-12 namespace", () => {
- expect(apply("-inset-12")).toEqual({ "top": -48, "right": -48, "bottom": -48, "left": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-12")).toEqual([{ "top": -48, "right": -48, "bottom": -48, "left": -48 }]);
});
test("-inset-16 namespace", () => {
- expect(apply("-inset-16")).toEqual({ "top": -64, "right": -64, "bottom": -64, "left": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-16")).toEqual([{ "top": -64, "right": -64, "bottom": -64, "left": -64 }]);
});
test("-inset-20 namespace", () => {
- expect(apply("-inset-20")).toEqual({ "top": -80, "right": -80, "bottom": -80, "left": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-20")).toEqual([{ "top": -80, "right": -80, "bottom": -80, "left": -80 }]);
});
test("-inset-24 namespace", () => {
- expect(apply("-inset-24")).toEqual({ "top": -96, "right": -96, "bottom": -96, "left": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-24")).toEqual([{ "top": -96, "right": -96, "bottom": -96, "left": -96 }]);
});
test("-inset-32 namespace", () => {
- expect(apply("-inset-32")).toEqual({ "top": -128, "right": -128, "bottom": -128, "left": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-32")).toEqual([{ "top": -128, "right": -128, "bottom": -128, "left": -128 }]);
});
test("-inset-40 namespace", () => {
- expect(apply("-inset-40")).toEqual({ "top": -160, "right": -160, "bottom": -160, "left": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-40")).toEqual([{ "top": -160, "right": -160, "bottom": -160, "left": -160 }]);
});
test("-inset-48 namespace", () => {
- expect(apply("-inset-48")).toEqual({ "top": -192, "right": -192, "bottom": -192, "left": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-48")).toEqual([{ "top": -192, "right": -192, "bottom": -192, "left": -192 }]);
});
test("-inset-56 namespace", () => {
- expect(apply("-inset-56")).toEqual({ "top": -224, "right": -224, "bottom": -224, "left": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-56")).toEqual([{ "top": -224, "right": -224, "bottom": -224, "left": -224 }]);
});
test("-inset-64 namespace", () => {
- expect(apply("-inset-64")).toEqual({ "top": -256, "right": -256, "bottom": -256, "left": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-64")).toEqual([{ "top": -256, "right": -256, "bottom": -256, "left": -256 }]);
});
test("-inset-px namespace", () => {
- expect(apply("-inset-px")).toEqual({ "top": -2, "right": -2, "bottom": -2, "left": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-px")).toEqual([{ "top": -2, "right": -2, "bottom": -2, "left": -2 }]);
});
test("-inset-y-1 namespace", () => {
- expect(apply("-inset-y-1")).toEqual({ "top": -4, "bottom": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-1")).toEqual([{ "top": -4, "bottom": -4 }]);
});
test("-inset-y-2 namespace", () => {
- expect(apply("-inset-y-2")).toEqual({ "top": -8, "bottom": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-2")).toEqual([{ "top": -8, "bottom": -8 }]);
});
test("-inset-y-3 namespace", () => {
- expect(apply("-inset-y-3")).toEqual({ "top": -12, "bottom": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-3")).toEqual([{ "top": -12, "bottom": -12 }]);
});
test("-inset-y-4 namespace", () => {
- expect(apply("-inset-y-4")).toEqual({ "top": -16, "bottom": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-4")).toEqual([{ "top": -16, "bottom": -16 }]);
});
test("-inset-y-5 namespace", () => {
- expect(apply("-inset-y-5")).toEqual({ "top": -20, "bottom": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-5")).toEqual([{ "top": -20, "bottom": -20 }]);
});
test("-inset-y-6 namespace", () => {
- expect(apply("-inset-y-6")).toEqual({ "top": -24, "bottom": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-6")).toEqual([{ "top": -24, "bottom": -24 }]);
});
test("-inset-y-7 namespace", () => {
- expect(apply("-inset-y-7")).toEqual({ "top": -28, "bottom": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-7")).toEqual([{ "top": -28, "bottom": -28 }]);
});
test("-inset-y-8 namespace", () => {
- expect(apply("-inset-y-8")).toEqual({ "top": -32, "bottom": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-8")).toEqual([{ "top": -32, "bottom": -32 }]);
});
test("-inset-y-9 namespace", () => {
- expect(apply("-inset-y-9")).toEqual({ "top": -36, "bottom": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-9")).toEqual([{ "top": -36, "bottom": -36 }]);
});
test("-inset-y-10 namespace", () => {
- expect(apply("-inset-y-10")).toEqual({ "top": -40, "bottom": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-10")).toEqual([{ "top": -40, "bottom": -40 }]);
});
test("-inset-y-12 namespace", () => {
- expect(apply("-inset-y-12")).toEqual({ "top": -48, "bottom": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-12")).toEqual([{ "top": -48, "bottom": -48 }]);
});
test("-inset-y-16 namespace", () => {
- expect(apply("-inset-y-16")).toEqual({ "top": -64, "bottom": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-16")).toEqual([{ "top": -64, "bottom": -64 }]);
});
test("-inset-y-20 namespace", () => {
- expect(apply("-inset-y-20")).toEqual({ "top": -80, "bottom": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-20")).toEqual([{ "top": -80, "bottom": -80 }]);
});
test("-inset-y-24 namespace", () => {
- expect(apply("-inset-y-24")).toEqual({ "top": -96, "bottom": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-24")).toEqual([{ "top": -96, "bottom": -96 }]);
});
test("-inset-y-32 namespace", () => {
- expect(apply("-inset-y-32")).toEqual({ "top": -128, "bottom": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-32")).toEqual([{ "top": -128, "bottom": -128 }]);
});
test("-inset-y-40 namespace", () => {
- expect(apply("-inset-y-40")).toEqual({ "top": -160, "bottom": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-40")).toEqual([{ "top": -160, "bottom": -160 }]);
});
test("-inset-y-48 namespace", () => {
- expect(apply("-inset-y-48")).toEqual({ "top": -192, "bottom": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-48")).toEqual([{ "top": -192, "bottom": -192 }]);
});
test("-inset-y-56 namespace", () => {
- expect(apply("-inset-y-56")).toEqual({ "top": -224, "bottom": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-56")).toEqual([{ "top": -224, "bottom": -224 }]);
});
test("-inset-y-64 namespace", () => {
- expect(apply("-inset-y-64")).toEqual({ "top": -256, "bottom": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-64")).toEqual([{ "top": -256, "bottom": -256 }]);
});
test("-inset-y-px namespace", () => {
- expect(apply("-inset-y-px")).toEqual({ "top": -2, "bottom": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-y-px")).toEqual([{ "top": -2, "bottom": -2 }]);
});
test("-inset-x-1 namespace", () => {
- expect(apply("-inset-x-1")).toEqual({ "right": -4, "left": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-1")).toEqual([{ "right": -4, "left": -4 }]);
});
test("-inset-x-2 namespace", () => {
- expect(apply("-inset-x-2")).toEqual({ "right": -8, "left": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-2")).toEqual([{ "right": -8, "left": -8 }]);
});
test("-inset-x-3 namespace", () => {
- expect(apply("-inset-x-3")).toEqual({ "right": -12, "left": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-3")).toEqual([{ "right": -12, "left": -12 }]);
});
test("-inset-x-4 namespace", () => {
- expect(apply("-inset-x-4")).toEqual({ "right": -16, "left": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-4")).toEqual([{ "right": -16, "left": -16 }]);
});
test("-inset-x-5 namespace", () => {
- expect(apply("-inset-x-5")).toEqual({ "right": -20, "left": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-5")).toEqual([{ "right": -20, "left": -20 }]);
});
test("-inset-x-6 namespace", () => {
- expect(apply("-inset-x-6")).toEqual({ "right": -24, "left": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-6")).toEqual([{ "right": -24, "left": -24 }]);
});
test("-inset-x-7 namespace", () => {
- expect(apply("-inset-x-7")).toEqual({ "right": -28, "left": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-7")).toEqual([{ "right": -28, "left": -28 }]);
});
test("-inset-x-8 namespace", () => {
- expect(apply("-inset-x-8")).toEqual({ "right": -32, "left": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-8")).toEqual([{ "right": -32, "left": -32 }]);
});
test("-inset-x-9 namespace", () => {
- expect(apply("-inset-x-9")).toEqual({ "right": -36, "left": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-9")).toEqual([{ "right": -36, "left": -36 }]);
});
test("-inset-x-10 namespace", () => {
- expect(apply("-inset-x-10")).toEqual({ "right": -40, "left": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-10")).toEqual([{ "right": -40, "left": -40 }]);
});
test("-inset-x-12 namespace", () => {
- expect(apply("-inset-x-12")).toEqual({ "right": -48, "left": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-12")).toEqual([{ "right": -48, "left": -48 }]);
});
test("-inset-x-16 namespace", () => {
- expect(apply("-inset-x-16")).toEqual({ "right": -64, "left": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-16")).toEqual([{ "right": -64, "left": -64 }]);
});
test("-inset-x-20 namespace", () => {
- expect(apply("-inset-x-20")).toEqual({ "right": -80, "left": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-20")).toEqual([{ "right": -80, "left": -80 }]);
});
test("-inset-x-24 namespace", () => {
- expect(apply("-inset-x-24")).toEqual({ "right": -96, "left": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-24")).toEqual([{ "right": -96, "left": -96 }]);
});
test("-inset-x-32 namespace", () => {
- expect(apply("-inset-x-32")).toEqual({ "right": -128, "left": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-32")).toEqual([{ "right": -128, "left": -128 }]);
});
test("-inset-x-40 namespace", () => {
- expect(apply("-inset-x-40")).toEqual({ "right": -160, "left": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-40")).toEqual([{ "right": -160, "left": -160 }]);
});
test("-inset-x-48 namespace", () => {
- expect(apply("-inset-x-48")).toEqual({ "right": -192, "left": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-48")).toEqual([{ "right": -192, "left": -192 }]);
});
test("-inset-x-56 namespace", () => {
- expect(apply("-inset-x-56")).toEqual({ "right": -224, "left": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-56")).toEqual([{ "right": -224, "left": -224 }]);
});
test("-inset-x-64 namespace", () => {
- expect(apply("-inset-x-64")).toEqual({ "right": -256, "left": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-64")).toEqual([{ "right": -256, "left": -256 }]);
});
test("-inset-x-px namespace", () => {
- expect(apply("-inset-x-px")).toEqual({ "right": -2, "left": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-inset-x-px")).toEqual([{ "right": -2, "left": -2 }]);
});
test("-top-1 namespace", () => {
- expect(apply("-top-1")).toEqual({ "top": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-1")).toEqual([{ "top": -4 }]);
});
test("-top-2 namespace", () => {
- expect(apply("-top-2")).toEqual({ "top": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-2")).toEqual([{ "top": -8 }]);
});
test("-top-3 namespace", () => {
- expect(apply("-top-3")).toEqual({ "top": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-3")).toEqual([{ "top": -12 }]);
});
test("-top-4 namespace", () => {
- expect(apply("-top-4")).toEqual({ "top": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-4")).toEqual([{ "top": -16 }]);
});
test("-top-5 namespace", () => {
- expect(apply("-top-5")).toEqual({ "top": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-5")).toEqual([{ "top": -20 }]);
});
test("-top-6 namespace", () => {
- expect(apply("-top-6")).toEqual({ "top": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-6")).toEqual([{ "top": -24 }]);
});
test("-top-7 namespace", () => {
- expect(apply("-top-7")).toEqual({ "top": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-7")).toEqual([{ "top": -28 }]);
});
test("-top-8 namespace", () => {
- expect(apply("-top-8")).toEqual({ "top": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-8")).toEqual([{ "top": -32 }]);
});
test("-top-9 namespace", () => {
- expect(apply("-top-9")).toEqual({ "top": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-9")).toEqual([{ "top": -36 }]);
});
test("-top-10 namespace", () => {
- expect(apply("-top-10")).toEqual({ "top": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-10")).toEqual([{ "top": -40 }]);
});
test("-top-12 namespace", () => {
- expect(apply("-top-12")).toEqual({ "top": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-12")).toEqual([{ "top": -48 }]);
});
test("-top-16 namespace", () => {
- expect(apply("-top-16")).toEqual({ "top": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-16")).toEqual([{ "top": -64 }]);
});
test("-top-20 namespace", () => {
- expect(apply("-top-20")).toEqual({ "top": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-20")).toEqual([{ "top": -80 }]);
});
test("-top-24 namespace", () => {
- expect(apply("-top-24")).toEqual({ "top": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-24")).toEqual([{ "top": -96 }]);
});
test("-top-32 namespace", () => {
- expect(apply("-top-32")).toEqual({ "top": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-32")).toEqual([{ "top": -128 }]);
});
test("-top-40 namespace", () => {
- expect(apply("-top-40")).toEqual({ "top": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-40")).toEqual([{ "top": -160 }]);
});
test("-top-48 namespace", () => {
- expect(apply("-top-48")).toEqual({ "top": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-48")).toEqual([{ "top": -192 }]);
});
test("-top-56 namespace", () => {
- expect(apply("-top-56")).toEqual({ "top": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-56")).toEqual([{ "top": -224 }]);
});
test("-top-64 namespace", () => {
- expect(apply("-top-64")).toEqual({ "top": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-64")).toEqual([{ "top": -256 }]);
});
test("-top-px namespace", () => {
- expect(apply("-top-px")).toEqual({ "top": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-top-px")).toEqual([{ "top": -2 }]);
});
test("-right-1 namespace", () => {
- expect(apply("-right-1")).toEqual({ "right": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-1")).toEqual([{ "right": -4 }]);
});
test("-right-2 namespace", () => {
- expect(apply("-right-2")).toEqual({ "right": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-2")).toEqual([{ "right": -8 }]);
});
test("-right-3 namespace", () => {
- expect(apply("-right-3")).toEqual({ "right": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-3")).toEqual([{ "right": -12 }]);
});
test("-right-4 namespace", () => {
- expect(apply("-right-4")).toEqual({ "right": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-4")).toEqual([{ "right": -16 }]);
});
test("-right-5 namespace", () => {
- expect(apply("-right-5")).toEqual({ "right": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-5")).toEqual([{ "right": -20 }]);
});
test("-right-6 namespace", () => {
- expect(apply("-right-6")).toEqual({ "right": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-6")).toEqual([{ "right": -24 }]);
});
test("-right-7 namespace", () => {
- expect(apply("-right-7")).toEqual({ "right": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-7")).toEqual([{ "right": -28 }]);
});
test("-right-8 namespace", () => {
- expect(apply("-right-8")).toEqual({ "right": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-8")).toEqual([{ "right": -32 }]);
});
test("-right-9 namespace", () => {
- expect(apply("-right-9")).toEqual({ "right": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-9")).toEqual([{ "right": -36 }]);
});
test("-right-10 namespace", () => {
- expect(apply("-right-10")).toEqual({ "right": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-10")).toEqual([{ "right": -40 }]);
});
test("-right-12 namespace", () => {
- expect(apply("-right-12")).toEqual({ "right": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-12")).toEqual([{ "right": -48 }]);
});
test("-right-16 namespace", () => {
- expect(apply("-right-16")).toEqual({ "right": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-16")).toEqual([{ "right": -64 }]);
});
test("-right-20 namespace", () => {
- expect(apply("-right-20")).toEqual({ "right": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-20")).toEqual([{ "right": -80 }]);
});
test("-right-24 namespace", () => {
- expect(apply("-right-24")).toEqual({ "right": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-24")).toEqual([{ "right": -96 }]);
});
test("-right-32 namespace", () => {
- expect(apply("-right-32")).toEqual({ "right": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-32")).toEqual([{ "right": -128 }]);
});
test("-right-40 namespace", () => {
- expect(apply("-right-40")).toEqual({ "right": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-40")).toEqual([{ "right": -160 }]);
});
test("-right-48 namespace", () => {
- expect(apply("-right-48")).toEqual({ "right": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-48")).toEqual([{ "right": -192 }]);
});
test("-right-56 namespace", () => {
- expect(apply("-right-56")).toEqual({ "right": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-56")).toEqual([{ "right": -224 }]);
});
test("-right-64 namespace", () => {
- expect(apply("-right-64")).toEqual({ "right": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-64")).toEqual([{ "right": -256 }]);
});
test("-right-px namespace", () => {
- expect(apply("-right-px")).toEqual({ "right": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-right-px")).toEqual([{ "right": -2 }]);
});
test("-bottom-1 namespace", () => {
- expect(apply("-bottom-1")).toEqual({ "bottom": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-1")).toEqual([{ "bottom": -4 }]);
});
test("-bottom-2 namespace", () => {
- expect(apply("-bottom-2")).toEqual({ "bottom": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-2")).toEqual([{ "bottom": -8 }]);
});
test("-bottom-3 namespace", () => {
- expect(apply("-bottom-3")).toEqual({ "bottom": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-3")).toEqual([{ "bottom": -12 }]);
});
test("-bottom-4 namespace", () => {
- expect(apply("-bottom-4")).toEqual({ "bottom": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-4")).toEqual([{ "bottom": -16 }]);
});
test("-bottom-5 namespace", () => {
- expect(apply("-bottom-5")).toEqual({ "bottom": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-5")).toEqual([{ "bottom": -20 }]);
});
test("-bottom-6 namespace", () => {
- expect(apply("-bottom-6")).toEqual({ "bottom": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-6")).toEqual([{ "bottom": -24 }]);
});
test("-bottom-7 namespace", () => {
- expect(apply("-bottom-7")).toEqual({ "bottom": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-7")).toEqual([{ "bottom": -28 }]);
});
test("-bottom-8 namespace", () => {
- expect(apply("-bottom-8")).toEqual({ "bottom": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-8")).toEqual([{ "bottom": -32 }]);
});
test("-bottom-9 namespace", () => {
- expect(apply("-bottom-9")).toEqual({ "bottom": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-9")).toEqual([{ "bottom": -36 }]);
});
test("-bottom-10 namespace", () => {
- expect(apply("-bottom-10")).toEqual({ "bottom": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-10")).toEqual([{ "bottom": -40 }]);
});
test("-bottom-12 namespace", () => {
- expect(apply("-bottom-12")).toEqual({ "bottom": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-12")).toEqual([{ "bottom": -48 }]);
});
test("-bottom-16 namespace", () => {
- expect(apply("-bottom-16")).toEqual({ "bottom": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-16")).toEqual([{ "bottom": -64 }]);
});
test("-bottom-20 namespace", () => {
- expect(apply("-bottom-20")).toEqual({ "bottom": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-20")).toEqual([{ "bottom": -80 }]);
});
test("-bottom-24 namespace", () => {
- expect(apply("-bottom-24")).toEqual({ "bottom": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-24")).toEqual([{ "bottom": -96 }]);
});
test("-bottom-32 namespace", () => {
- expect(apply("-bottom-32")).toEqual({ "bottom": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-32")).toEqual([{ "bottom": -128 }]);
});
test("-bottom-40 namespace", () => {
- expect(apply("-bottom-40")).toEqual({ "bottom": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-40")).toEqual([{ "bottom": -160 }]);
});
test("-bottom-48 namespace", () => {
- expect(apply("-bottom-48")).toEqual({ "bottom": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-48")).toEqual([{ "bottom": -192 }]);
});
test("-bottom-56 namespace", () => {
- expect(apply("-bottom-56")).toEqual({ "bottom": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-56")).toEqual([{ "bottom": -224 }]);
});
test("-bottom-64 namespace", () => {
- expect(apply("-bottom-64")).toEqual({ "bottom": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-64")).toEqual([{ "bottom": -256 }]);
});
test("-bottom-px namespace", () => {
- expect(apply("-bottom-px")).toEqual({ "bottom": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-bottom-px")).toEqual([{ "bottom": -2 }]);
});
test("-left-1 namespace", () => {
- expect(apply("-left-1")).toEqual({ "left": -4 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-1")).toEqual([{ "left": -4 }]);
});
test("-left-2 namespace", () => {
- expect(apply("-left-2")).toEqual({ "left": -8 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-2")).toEqual([{ "left": -8 }]);
});
test("-left-3 namespace", () => {
- expect(apply("-left-3")).toEqual({ "left": -12 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-3")).toEqual([{ "left": -12 }]);
});
test("-left-4 namespace", () => {
- expect(apply("-left-4")).toEqual({ "left": -16 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-4")).toEqual([{ "left": -16 }]);
});
test("-left-5 namespace", () => {
- expect(apply("-left-5")).toEqual({ "left": -20 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-5")).toEqual([{ "left": -20 }]);
});
test("-left-6 namespace", () => {
- expect(apply("-left-6")).toEqual({ "left": -24 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-6")).toEqual([{ "left": -24 }]);
});
test("-left-7 namespace", () => {
- expect(apply("-left-7")).toEqual({ "left": -28 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-7")).toEqual([{ "left": -28 }]);
});
test("-left-8 namespace", () => {
- expect(apply("-left-8")).toEqual({ "left": -32 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-8")).toEqual([{ "left": -32 }]);
});
test("-left-9 namespace", () => {
- expect(apply("-left-9")).toEqual({ "left": -36 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-9")).toEqual([{ "left": -36 }]);
});
test("-left-10 namespace", () => {
- expect(apply("-left-10")).toEqual({ "left": -40 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-10")).toEqual([{ "left": -40 }]);
});
test("-left-12 namespace", () => {
- expect(apply("-left-12")).toEqual({ "left": -48 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-12")).toEqual([{ "left": -48 }]);
});
test("-left-16 namespace", () => {
- expect(apply("-left-16")).toEqual({ "left": -64 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-16")).toEqual([{ "left": -64 }]);
});
test("-left-20 namespace", () => {
- expect(apply("-left-20")).toEqual({ "left": -80 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-20")).toEqual([{ "left": -80 }]);
});
test("-left-24 namespace", () => {
- expect(apply("-left-24")).toEqual({ "left": -96 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-24")).toEqual([{ "left": -96 }]);
});
test("-left-32 namespace", () => {
- expect(apply("-left-32")).toEqual({ "left": -128 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-32")).toEqual([{ "left": -128 }]);
});
test("-left-40 namespace", () => {
- expect(apply("-left-40")).toEqual({ "left": -160 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-40")).toEqual([{ "left": -160 }]);
});
test("-left-48 namespace", () => {
- expect(apply("-left-48")).toEqual({ "left": -192 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-48")).toEqual([{ "left": -192 }]);
});
test("-left-56 namespace", () => {
- expect(apply("-left-56")).toEqual({ "left": -224 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-56")).toEqual([{ "left": -224 }]);
});
test("-left-64 namespace", () => {
- expect(apply("-left-64")).toEqual({ "left": -256 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-64")).toEqual([{ "left": -256 }]);
});
test("-left-px namespace", () => {
- expect(apply("-left-px")).toEqual({ "left": -2 })
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("-left-px")).toEqual([{ "left": -2 }]);
});
diff --git a/__tests__/src/vertical-align.test.js b/__tests__/src/vertical-align.test.js
index 70fba77..8f812c4 100644
--- a/__tests__/src/vertical-align.test.js
+++ b/__tests__/src/vertical-align.test.js
@@ -1,17 +1,30 @@
-import apply from "../../dist/core/apply";
+import { renderHook } from '@testing-library/react-hooks'
+import { OsmiProvider, useStyles } from '../../dist'
+
+const wrapper = ({ children }) => (
+ {children}
+)
test("align-auto namespace", () => {
- expect(apply("align-auto")).toEqual({ textAlignVertical: "auto" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("align-auto")).toEqual([{ textAlignVertical: "auto" }]);
});
test("align-top namespace", () => {
- expect(apply("align-top")).toEqual({ textAlignVertical: "top" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("align-top")).toEqual([{ textAlignVertical: "top" }]);
});
test("align-bottom namespace", () => {
- expect(apply("align-bottom")).toEqual({ textAlignVertical: "bottom" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("align-bottom")).toEqual([{ textAlignVertical: "bottom" }]);
});
test("align-center namespace", () => {
- expect(apply("align-center")).toEqual({ textAlignVertical: "center" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("align-center")).toEqual([{ textAlignVertical: "center" }]);
});
diff --git a/__tests__/src/width.test.js b/__tests__/src/width.test.js
index ac1c36e..6c50d6b 100644
--- a/__tests__/src/width.test.js
+++ b/__tests__/src/width.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 }) => (
+ {children}
+)
test("fixed 100 width namespace", () => {
- expect(apply("w-100")).toEqual({ width: 100 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w-100")).toEqual([{ width: 100 }]);
});
test("fixed 75 width namespace", () => {
- expect(apply("w-75")).toEqual({ width: 75 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w-75")).toEqual([{ width: 75 }]);
});
test("fixed 50 width namespace", () => {
- expect(apply("w-50")).toEqual({ width: 50 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w-50")).toEqual([{ width: 50 }]);
});
test("100% width namespace", () => {
- expect(apply("w%100")).toEqual({ width: "100%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w%100")).toEqual([{ width: "100%" }]);
});
test("75% width namespace", () => {
- expect(apply("w%75")).toEqual({ width: "75%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w%75")).toEqual([{ width: "75%" }]);
});
test("50% width namespace", () => {
- expect(apply("w%50")).toEqual({ width: "50%" });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("w%50")).toEqual([{ width: "50%" }]);
});
\ No newline at end of file
diff --git a/__tests__/src/z-index.test.js b/__tests__/src/z-index.test.js
index 6f575d8..dd61ab0 100644
--- a/__tests__/src/z-index.test.js
+++ b/__tests__/src/z-index.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 }) => (
+ {children}
+)
test("z-0 namespace", () => {
- expect(apply("z-0")).toEqual({ zIndex: 0 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-0")).toEqual([{ zIndex: 0 }]);
});
test("z-10 namespace", () => {
- expect(apply("z-10")).toEqual({ zIndex: 10 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-10")).toEqual([{ zIndex: 10 }]);
});
test("z-20 namespace", () => {
- expect(apply("z-20")).toEqual({ zIndex: 20 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-20")).toEqual([{ zIndex: 20 }]);
});
test("z-30 namespace", () => {
- expect(apply("z-30")).toEqual({ zIndex: 30 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-30")).toEqual([{ zIndex: 30 }]);
});
test("z-40 namespace", () => {
- expect(apply("z-40")).toEqual({ zIndex: 40 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-40")).toEqual([{ zIndex: 40 }]);
});
test("z-50 namespace", () => {
- expect(apply("z-50")).toEqual({ zIndex: 50 });
+ const { result } = renderHook(() => useStyles(), { wrapper })
+
+ expect(result.current.apply("z-50")).toEqual([{ zIndex: 50 }]);
});
diff --git a/babel.config.cjs b/babel.config.cjs
new file mode 100644
index 0000000..b0054ee
--- /dev/null
+++ b/babel.config.cjs
@@ -0,0 +1,8 @@
+module.exports = {
+ presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
+ plugins: [
+ ["@babel/plugin-transform-class-properties", { "loose": true }],
+ ["@babel/plugin-transform-private-methods", { "loose": true }],
+ ["@babel/plugin-transform-private-property-in-object", { "loose": true }]
+ ]
+};
diff --git a/jest.config.cjs b/jest.config.cjs
new file mode 100644
index 0000000..21740a6
--- /dev/null
+++ b/jest.config.cjs
@@ -0,0 +1,21 @@
+// jest.config.js
+module.exports = {
+ preset: 'react-native',
+ setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+ transformIgnorePatterns: [
+ "node_modules/(?!(jest-)?react-native|@?react-navigation|@react-native/polyfills)"
+ ],
+ moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+ transform: {
+ '^.+\\.(js|jsx)$': 'babel-jest',
+ '^.+\\.(ts|tsx)$': 'ts-jest',
+ },
+ globals: {
+ 'ts-jest': {
+ tsconfig: 'tsconfig.json',
+ diagnostics: false,
+ },
+ },
+ testEnvironment: 'node',
+ testEnvironmentOptions: {},
+};
diff --git a/package.json b/package.json
index c2af591..cb22e91 100644
--- a/package.json
+++ b/package.json
@@ -24,23 +24,35 @@
"test": "jest --coverage"
},
"devDependencies": {
- "@babel/core": "^7.0.0",
- "@babel/node": "^7.0.0",
- "@babel/preset-env": "^7.0.0",
+ "@babel/core": "^7.24.0",
+ "@babel/node": "^7.23.9",
+ "@babel/preset-env": "^7.24.0",
+ "@babel/preset-react": "^7.23.3",
+ "@babel/preset-typescript": "^7.23.3",
+ "@testing-library/jest-native": "^5.4.3",
+ "@testing-library/react-hooks": "^8.0.1",
+ "@testing-library/react-native": "^12.4.3",
+ "@types/jest": "^29.5.12",
"@types/node": "^14.14.14",
- "@types/react": "^18.0.0",
- "@types/react-native": "^0.68.2",
- "jest": "^25.4.0",
+ "@types/react": "^18.2.0",
+ "@types/react-native": "^0.71.2",
+ "babel-jest": "^29.7.0",
+ "jest": "^29.7.0",
+ "jest-config": "^29.7.0",
+ "jest-environment-node": "^29.7.0",
+ "metro-react-native-babel-preset": "^0.77.0",
"prettier": "^2.2.1",
- "react": "^18.0.0",
- "react-native": "^0.68.2",
+ "react": "^18.2.0",
+ "react-native": "^0.71.2",
+ "react-test-renderer": "^18.2.0",
+ "ts-jest": "^29.1.2",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "^4.1.3"
},
"resolutions": {
"@types/react": "^18.x.x",
- "@types/react-native": "^0.68.x"
+ "@types/react-native": "^0.71.x"
},
"babel": {
"presets": [
@@ -55,18 +67,11 @@
]
]
},
- "jest": {
- "preset": "react-native",
- "transform": {
- "^.+\\.js$": "/node_modules/react-native/jest/preprocessor.js"
- },
- "testEnvironment": "node"
- },
"engines": {
"node": ">=8.9.0"
},
"peerDependencies": {
- "@types/react": ">=18.0.0",
- "@types/react-native": ">=0.68.0"
+ "@types/react": ">=18.2.0",
+ "@types/react-native": ">=0.71.2"
}
}
diff --git a/src/core/instance.tsx b/src/core/instance.tsx
index 1d27363..2f94789 100644
--- a/src/core/instance.tsx
+++ b/src/core/instance.tsx
@@ -67,7 +67,7 @@ export class Instance {
}
percentSize(data: string) {
- if (data.endsWith("%")) {
+ if (data.includes("%")) {
const splittedSyntax = data.split("%");
const percentageData = convertPercentage([
splittedSyntax[0] as StyleType,
@@ -80,32 +80,52 @@ export class Instance {
}
fixedSize(data: string) {
- const fixedSizeRegex = /^(max|min)?(w|h)-(\d+)$/;
+ // Match the input against the fixed size pattern
+ const fixedSizeRegex = /^((max|min)-)?(w|h)-(\d+)$/;
const match = data.match(fixedSizeRegex);
- if (match) {
- const [, minMax, type, value] = match;
- const sizeValue = Number(value);
- const key = `${minMax ? minMax + "-" : ""}${
- type === "w" ? "width" : "height"
- }`;
- this.updateObject({ [key]: sizeValue });
- }
+ if (!match) return; // Exit early if the input doesn't match the pattern
+
+ // Extract the matched groups for easier manipulation
+ const [, , minMax, dimension, value] = match;
+ const numericValue = parseInt(value, 10);
+
+ // Construct the property name ensuring correct camelCasing
+ const dimensionName = dimension === 'w' ? 'width' : 'height';
+ // Ensure that only the dimension name's first letter is capitalized when necessary
+ const propName = minMax ? `${minMax}${dimensionName.charAt(0).toUpperCase()}${dimensionName.slice(1)}` : dimensionName;
+
+ // Update the object with the constructed property name and its value
+ this.updateObject({ [propName]: numericValue });
}
transform(syntax: string) {
- const transformRegex = /^(translate|scale|rotate|skew)-(x|y|z)?-(-?\d+)$/;
+ const transformRegex = /^(-)?(translate|scale|rotate|skew)(-(x|y|z))?(-?\d+)$/;
const match = syntax.match(transformRegex);
- if (match) {
- const [, transformType, axis, value] = match;
- const transformValue = axis
- ? {
- [`${transformType}${axis.toUpperCase()}`]: `${value}${
- transformType === "rotate" ? "deg" : ""
- }`,
- }
- : { [transformType]: value };
- this.updateObject({ transform: [transformValue] });
+ if (!match) return;
+
+ const [, isNegativeMatch, transformType, , axis, value] = match;
+ const isNegative = isNegativeMatch === '-';
+ const transformedValue = isNegative ? -Math.abs(Number(value)) : Number(value);
+
+ let transformValue;
+ switch (transformType) {
+ case 'rotate':
+ case 'skew':
+ transformValue = axis
+ ? { [`${transformType}${axis.toUpperCase()}`]: `${isNegative ? '-' : ''}${Math.abs(transformedValue)}deg` }
+ : { [transformType]: `${isNegative ? '-' : ''}${Math.abs(transformedValue)}deg` };
+ break;
+ case 'scale':
+ case 'translate':
+ transformValue = axis
+ ? { [`${transformType}${axis.toUpperCase()}`]: isNegative ? -Math.abs(Number(value)) : Math.abs(Number(value)) }
+ : { [transformType]: isNegative ? -Math.abs(Number(value)) : Math.abs(Number(value)) };
+ break;
+ default:
+ break;
}
+
+ this.updateObject({ transform: [transformValue] });
}
colorOpacity(syntax: string) {
diff --git a/src/lib/iphoneXHelper.ts b/src/lib/iphoneXHelper.ts
index 6128833..b36596a 100644
--- a/src/lib/iphoneXHelper.ts
+++ b/src/lib/iphoneXHelper.ts
@@ -10,7 +10,7 @@ export const isIphoneX = (): boolean => {
return (
Platform.OS === "ios" &&
!Platform.isPad &&
- !Platform.isTVOS &&
+ !Platform.isTV &&
((height >= 780 && height <= 926) || width === 428)
);
-};
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index a5a4ff8..29d76b1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,19 @@
{
"compilerOptions": {
- "target": "es6",
- "module": "commonjs",
- "esModuleInterop": true,
- "declaration": true,
- "strict": true,
- "downlevelIteration": true,
- "resolveJsonModule": true,
- "noImplicitAny": true,
- "noImplicitReturns": true,
- "skipLibCheck": true,
- "sourceMap": true,
- "jsx": "react-native"
+ "target": "es6", // Compile to ECMAScript 6
+ "module": "commonjs", // Use commonjs module system
+ "esModuleInterop": true, // Enables interoperability for default imports from modules with no default export
+ "declaration": true, // Generates corresponding '.d.ts' file for each output file
+ "strict": true, // Enable all strict type-checking options
+ "downlevelIteration": true, // Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'
+ "resolveJsonModule": true, // Include modules imported with '.json' extension
+ "noImplicitAny": true, // Raise error on expressions and declarations with an implied 'any' type
+ "noImplicitReturns": true, // Report error when not all code paths in function return a value
+ "skipLibCheck": true, // Skip type checking of declaration files
+ "sourceMap": true, // Generates corresponding '.map' file
+ "jsx": "react-native", // Process JSX syntax specific to React Native
+ "outDir": "dist" // Direct output to 'dist' folder
},
- "include": ["src"],
- "exclude": ["node_modules", "**/__tests__/*"]
-}
+ "include": ["src"], // Include all files in the 'src' directory
+ "exclude": ["node_modules", "**/__tests__/*"] // Exclude 'node_modules' directory and test files
+}
\ No newline at end of file