Change Test Suite

Author: pedrozadotdev

index.ts

@@ -9,7 +9,6 @@ import {
 } from 'react'
 import { ImageStyle, StyleSheet, TextStyle, ViewStyle } from 'react-native'
 import { Appearance, AppearanceProvider } from 'react-native-appearance'
-
 type Themes<T, C> = {
   light: T
   dark: T
@@ -50,7 +49,7 @@ const createTheme: CreateTheme = (ts, initialMode = 'auto') => {
         : systemColorScheme !== 'no-preference'
         ? systemColorScheme
         : 'light'
-    return { ...themes[currentMode], ...common } as Theme & Common
+    return { ...common, ...themes[currentMode] } as Theme & Common
   }
   const ThemeContext = createContext<ThemeContext<Theme, Common>>({
     theme: generateTheme(initialMode, ts),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themed-stylesheet",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "React Native StyleSheets with Theming Support",
   "author": "Andre Pedroza",
   "license": "MIT",
@@ -24,8 +24,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
-    "@testing-library/jest-native": "^3.4.3",
-    "@testing-library/react-native": "^7.1.0",
+    "@testing-library/react-hooks": "^5.0.3",
     "@types/jest": "^26.0.20",
     "@types/react": "^17.0.1",
     "@types/react-native": "^0.63.48",
@@ -61,9 +60,8 @@
       "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
       "^.+\\.tsx?$": "ts-jest"
     },
-    "testMatch": ["<rootDir>/tests/tests.tsx"],
+    "testMatch": ["<rootDir>/tests/tests.ts"],
     "collectCoverageFrom": ["<rootDir>/index.ts"],
-    "moduleFileExtensions": ["js", "ts", "tsx"],
-    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"]
+    "moduleFileExtensions": ["js", "ts", "tsx"]
   }
 }

tests/fixture.tsx tests/fixture.tstests/fixture.tsx renamed to tests/fixture.ts

@@ -6,7 +6,8 @@ export const themes1 = {
     textColor: '#fff'
   },
   common: {
-    fontSize: 12
+    fontSize: 12,
+    textColor: '#000'
   }
 }
 
@@ -20,7 +21,7 @@ export const themes2 = {
 }
 
 export const style1 = (
-  theme: typeof themes1.light & typeof themes1.common
+  theme: typeof themes1.common & typeof themes1.light
 ) => ({
   text: {
     color: theme.textColor,

tests/tests.ts

@@ -0,0 +1,127 @@
+import { renderHook, act } from '@testing-library/react-hooks/native'
+import { Appearance } from '../__mocks__/react-native-appearance'
+import { createTheme } from '..'
+import { style1, style2, themes1, themes2 } from './fixture'
+import { TextStyle } from 'react-native'
+
+beforeEach(() => {
+  Appearance.preference = 'no-preference'
+})
+
+describe('With Common Prop and Auto Mode', () => {
+  const { ThemeProvider, useStyle, useTheme } = createTheme(themes1)
+  test('Create style with useStyle()', () => {
+    const { result } = renderHook(() => useStyle(style1), {
+      wrapper: ThemeProvider
+    })
+    expect((result.current.text as TextStyle).color).toEqual('#ff0000')
+    expect((result.current.text as TextStyle).fontSize).toEqual(12)
+  })
+  test('Create style with useTheme()', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    expect(result.current.theme.textColor).toEqual('#ff0000')
+    expect(result.current.theme.fontSize).toEqual(12)
+  })
+})
+
+describe('With Common Prop and Dark Mode', () => {
+  const { ThemeProvider, useStyle, useTheme } = createTheme(themes1, 'dark')
+  test('Create style with useStyle()', () => {
+    const { result } = renderHook(() => useStyle(style1), {
+      wrapper: ThemeProvider
+    })
+    expect((result.current.text as TextStyle).color).toEqual('#fff')
+    expect((result.current.text as TextStyle).fontSize).toEqual(12)
+  })
+  test('Create style with useTheme()', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    expect(result.current.theme.textColor).toEqual('#fff')
+    expect(result.current.theme.fontSize).toEqual(12)
+  })
+})
+
+describe('Without Common Prop and Auto Mode', () => {
+  const { ThemeProvider, useStyle, useTheme } = createTheme(themes2)
+  test('Create style with useStyle()', () => {
+    const { result } = renderHook(() => useStyle(style2), {
+      wrapper: ThemeProvider
+    })
+    expect((result.current.text as TextStyle).color).toEqual('#ffff00')
+  })
+  test('Create style with useTheme()', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    expect(result.current.theme.textColor).toEqual('#ffff00')
+  })
+})
+describe('Without Common Prop and Dark Mode', () => {
+  const { ThemeProvider, useStyle, useTheme } = createTheme(themes2, 'dark')
+  test('Create style with useStyle()', () => {
+    const { result } = renderHook(() => useStyle(style2), {
+      wrapper: ThemeProvider
+    })
+    expect((result.current.text as TextStyle).color).toEqual('#fff')
+  })
+  test('Create style with useTheme()', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    expect(result.current.theme.textColor).toEqual('#fff')
+  })
+})
+
+describe('Change System Preference', () => {
+  const { ThemeProvider, useTheme } = createTheme(themes2)
+  test('To "no-preference" to Get Light Mode', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    act(() => {
+      Appearance.preference = 'no-preference'
+    })
+    expect(result.current.theme.textColor).toEqual('#ffff00')
+  })
+  test('To Dark Mode', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    act(() => {
+      Appearance.preference = 'dark'
+    })
+    expect(result.current.theme.textColor).toEqual('#fff')
+  })
+  test('To Light Mode and then Change Manually to Dark Mode', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    act(() => {
+      Appearance.preference = 'light'
+      result.current.setMode('dark')
+    })
+    expect(result.current.theme.textColor).toEqual('#fff')
+  })
+})
+
+describe('Change ThemeContext', () => {
+  const { ThemeProvider, useTheme } = createTheme(themes2)
+  test('Change Themes', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    act(() => {
+      result.current.setThemes(themes1)
+    })
+    expect(result.current.theme.textColor).toEqual('#ff0000')
+    expect(
+      (result.current.theme as { textColor: string; fontSize: number }).fontSize
+    ).toEqual(12)
+  })
+  test('Change Mode to Dark', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    act(() => {
+      result.current.setMode('dark')
+    })
+    expect(result.current.theme.textColor).toEqual('#fff')
+  })
+})
+
+describe('No Changes Triggered', () => {
+  const { ThemeProvider, useTheme } = createTheme(themes2)
+  test('Change Mode to Current Mode', () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: ThemeProvider })
+    expect(result.current.theme.textColor).toEqual('#ffff00')
+    act(() => {
+      result.current.setMode('auto')
+    })
+    expect(result.current.theme.textColor).toEqual('#ffff00')
+  })
+})