test(appearanceHelper): added test

Author: bang9

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+};

package.json

@@ -22,7 +22,7 @@
     "w:build": "lerna run prepare",
     "w:test": "lerna run test",
     "lerna:remove": "sh -c 'lerna exec \"yarn remove ${0}\" ${1}'",
-    "test": "jest .",
+    "test": "jest",
     "reset": "find . -type dir -name node_modules | xargs rm -rf",
     "lint": "yarn lint:eslint && yarn lint:prettier",
     "fix": "yarn fix:eslint && yarn fix:prettier",
@@ -32,31 +32,45 @@
     "fix:prettier": "prettier --write sample/src/**.{ts,tsx} packages/**/src/**/*.{ts,tsx}"
   },
   "devDependencies": {
+    "@testing-library/react-native": "^9.0.0",
     "@trivago/prettier-plugin-sort-imports": "^3.1.1",
     "@types/jest": "^27.4.0",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
+    "babel-jest": "^27.4.6",
     "del-cli": "^4.0.1",
     "esbuild": "^0.14.11",
     "eslint": "^8.6.0",
     "eslint-config-prettier": "^8.3.0",
     "jest": "^27.4.7",
     "lerna": "^4.0.0",
     "metro-minify-esbuild": "^0.1.0",
+    "metro-react-native-babel-preset": "^0.66.2",
     "prettier": "^2.5.1",
+    "react": "16.x",
+    "react-native": "0.63.x",
     "react-native-builder-bob": "^0.18.2",
     "react-native-monorepo-tools": "^1.1.4",
+    "react-test-renderer": "^17.0.2",
     "typescript": "^4.5.4"
   },
   "dependencies": {},
   "jest": {
     "testEnvironment": "node",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json"
+    ],
     "testPathIgnorePatterns": [
       "/node_modules/"
     ],
     "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|tsx?)$",
     "moduleNameMapper": {
       "@sendbird/([^/]+)": "<rootDir>/packages/$1/src"
-    }
+    },
+    "preset": "react-native"
   }
 }

packages/uikit-react-native/src/__tests__/index.test.tsx

@@ -1 +1,30 @@
-it.todo('write a test');
+import appearanceHelperFactory from '../utils/appearanceHelper';
+
+describe('utils', function () {
+  it('appearanceHelperFactory', function () {
+    const helper = appearanceHelperFactory('light');
+    expect(typeof helper['select']).toBe('function');
+
+    const selected1 = helper.select({ light: 'light-value', dark: 'dark-value', default: 'default-value' });
+    const selected2 = helper.select({ light: undefined, dark: 'dark-value' });
+    const selected3 = helper.select({ light: undefined, dark: undefined, default: 'default-value' });
+
+    expect(selected1).toBe('light-value');
+    expect(selected1).not.toBe('dark-value');
+    expect(selected1).not.toBe('default-value');
+
+    expect(selected2).toBe('dark-value');
+    expect(selected2).not.toBeUndefined();
+    expect(selected2).not.toBe('light-value');
+
+    expect(selected3).toBe('default-value');
+    expect(selected3).not.toBeUndefined();
+    expect(selected3).not.toBe('light-value');
+
+    try {
+      helper.select({});
+    } catch (err) {
+      expect(err).not.toBeUndefined();
+    }
+  });
+});

packages/uikit-react-native/src/types.ts

@@ -60,5 +60,5 @@ export type UIKitColors = {
 };
 
 export interface AppearanceHelper {
-  select<T>(options: { light: T; dark: T; default?: T }): T;
+  select<T>(options: { light?: T; dark?: T; default?: T }): T;
 }

packages/uikit-react-native/src/utils/appearanceHelper.ts

@@ -8,7 +8,7 @@ import type { AppearanceHelper, UIKitAppearance } from '../types';
  * */
 const appearanceHelperFactory = (appearance: UIKitAppearance): AppearanceHelper => ({
   select(options) {
-    const value = options[appearance ?? 'default'] ?? options['light'] ?? options['dark'];
+    const value = options[appearance ?? 'default'] ?? options['light'] ?? options['dark'] ?? options['default'];
     if (!value) throw Error('Not provided any selectable appearance values');
     return value;
   },

sample/__tests__/App-test.tsx

@@ -15,7 +15,7 @@ const HomeScreen: React.FC = () => {
   const navigation = useNavigation<{ navigate: (route: string) => void }>();
   return (
     <SafeAreaView>
-      <ScrollView>
+      <ScrollView style={{ paddingVertical: 12 }}>
         {screenMap.map(([name]) => {
           return (
             <TouchableOpacity key={name} style={styles.btn} onPress={() => navigation.navigate(name)}>
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 12,
-    marginVertical: 12,
+    marginBottom: 12,
   },
   btnTitle: {
     color: 'white',

sample/src/App.tsx

@@ -2911,6 +2911,13 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@testing-library/react-native@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-9.0.0.tgz#e9c63411e93d2e8e70d744b12aeb78c58025c5fc"
+  integrity sha512-UE3FWOsDUr+2l3Pg6JTpn2rV5uzYsxIus6ZyN1uMOTmn30bIuBBDDlWQtdWGJx92YcY4xgJA4vViCEKv7wVzJA==
+  dependencies:
+    pretty-format "^27.0.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -10390,7 +10397,7 @@ react-native-screens@^3.10.2:
     react-freeze "^1.0.0"
     warn-once "^0.1.0"
 
-[email protected]:
+[email protected], [email protected]:
   version "0.63.4"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.63.4.tgz#2210fdd404c94a5fa6b423c6de86f8e48810ec36"
   integrity sha512-I4kM8kYO2mWEYUFITMcpRulcy4/jd+j9T6PbIzR0FuMcz/xwd+JwHoLPa1HmCesvR1RDOw9o4D+OFLwuXXfmGw==
@@ -10473,7 +10480,7 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
-[email protected]:
+[email protected], react-test-renderer@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
   integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
@@ -10492,6 +10499,15 @@ [email protected]:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+[email protected]:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 [email protected]:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"