Cross-platform Picker component with real i18n in tests (#44)

* Install @react-native-community/picker, run expo update

Also add @react-native-community/picker to modules Jest must transpile

* Split cross-platform picker and language-selector

* Use cross-platform picker in ListView

* Update tests to use real i18n and web picker

* Explicitly include i18n in app

Previously it seemed to be included indirectly through subcomponents, which risks timing issues

* Update e2e test, using same test ID as unit tests

* Add readme note on using i18n in tests

* Write test name as "It {does thing}" sentence

* Also write other test name as "It {does thing}"

README.md

@@ -50,6 +50,8 @@ const HomeScreen = () => {
 
 In the example above, you can see how the library also provides support for date formatting and internationalisation using [date-fns](https://date-fns.org/) package. You can define date's format in the JSON file and pass the date object to the `t` function.
 
+`useTranslation` is available in all components, including Jest tests where it behaves as normal but defaults to the "`cimode`" language code. In Jest, `t` simply returns the (relatively stable) key and language-specific JSON translations are not loaded.
+
 ## Routing
 
 Polaris uses [React Navigation](https://reactnavigation.org/) in Native (Android and iOS), and [React Router DOM](https://reactrouter.com/web/guides/quick-start) in Web. This allows all platforms to be given fully-featured, robust platform-appropriate routing without comprimises.

cypress/integration/i18n.spec.js

@@ -10,7 +10,7 @@ describe('Internationalisation support', () => {
     cy.contains(translationEN.home.settingsButton).click();
 
     // Find the language drop-down and select the Italian language
-    cy.get('#languageSelector').select('it');
+    cy.get('[testID=language-selector]').select('it');
 
     // Check if the Italian title for the Settings page is displayed
     cy.contains(translationIT.settings.title);

jest.config.js

@@ -9,7 +9,7 @@ module.exports = {
     '\\.json': '<rootDir>/jest.jsonTransform.js'
   },
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|expo-camera|react-native-adapter|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-native-vector-icons|react-native-vector-icons/.*|react-navigation|react-navigation-redux-helpers|@react-navigation/.*|unimodules-permissions-interface|@expo/vector-icons/.*|@unimodules|@unimodules/.*|jest-expo/.*|sentry-expo|native-base))'
+    'node_modules/(?!((jest-)?react-native|expo-camera|react-native-adapter|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-native-vector-icons|react-native-vector-icons/.*|react-navigation|react-navigation-redux-helpers|@react-navigation/.*|unimodules-permissions-interface|@expo/vector-icons/.*|@unimodules|@unimodules/.*|jest-expo/.*|sentry-expo|native-base|@react-native-community/picker/js/.+\\.jsx?))'
   ],
   testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/cypress/'],
   setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js', './jest.setup.js'],

jest.setup.js

@@ -1,8 +1,20 @@
+// Stop jest using .ios in web tests until https://github.com/nearform/polaris/issues/42 is done
+jest.mock('components/atoms/picker-sheet', () => jest.requireActual('components/atoms/picker-sheet/index.jsx'));
+
 jest.mock('services/i18n/common', () => ({
   i18nextConfiguration: {},
-  supportedLocales: {}
+  supportedLocales: {
+    en: {
+      name: 'English'
+    },
+    it: {
+      name: 'Italiano'
+    }
+  }
 }));
 
+require('services/i18n/for-tests'); // activates react-i18n with test config
+
 jest.mock('expo-localization', () => ({
   locale: 'en-US'
 }));

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@expo/vector-icons": "^10.0.0",
     "@react-native-community/masked-view": "0.1.10",
+    "@react-native-community/picker": "1.6.0",
     "@react-navigation/drawer": "^5.8.4",
     "@react-navigation/native": "^5.6.1",
     "@react-navigation/stack": "^5.6.2",

src/App.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { YellowBox } from 'react-native';
 import Route from 'components/templates/route';
 import { UIProvider } from 'store/ui/context';
+import 'services/i18n'; // Attaches appropriate i18n object to react-i18n
 
 // Mute multiple known warnings to display on device. Those warning messages coming from React Native components and need to be fixed by RN team
 YellowBox.ignoreWarnings(['Animated', 'Warning: componentWill', 'Possible Unhandled Promise']);