refactored screens, test improvements

.eslintrc.js

@@ -5,5 +5,5 @@ module.exports = {
     semi: 'off',
     '@typescript-eslint/semi': ['error', 'never'],
   },
-  ignorePatterns: ['coverage/*'],
+  ignorePatterns: ['coverage/*', 'jest/*'],
 }

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
       '<rootDir>/jest/fileMock.js',
   },
   collectCoverageFrom: ['src/**/*.ts*', 'src/**/*.js*'],
+  coveragePathIgnorePatterns: ['styles.ts'],
   fakeTimers: {
     enableGlobally: true,
   },

jest/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "DiabetorRnGui",
+  "name": "diabetor-gui",
   "version": "0.0.1",
   "private": true,
   "scripts": {

src/__tests__/App.test.tsx

@@ -11,14 +11,14 @@ import {it, expect} from '@jest/globals'
 
 // Note: test renderer must be required after react-native.
 //import renderer from 'react-test-renderer';
-import {fireEvent, render} from '@testing-library/react-native'
+import {fireEvent, render, screen} from '@testing-library/react-native'
 
 it('renders correctly', () => {
   const SampleApp = () => <App />
 
-  let root = render(<SampleApp />)
-  let punctualElement = root.getByTestId('punctual')
-  let basalElement = root.getByTestId('basal')
+  render(<SampleApp />)
+  let punctualElement = screen.getByTestId('punctual')
+  let basalElement = screen.getByTestId('basal')
 
   expect(punctualElement).toBeDefined()
   expect(basalElement).toBeDefined()
@@ -27,9 +27,17 @@ it('renders correctly', () => {
 it('navigates well to punctual adaptation screen', () => {
   const SampleApp = () => <App />
 
-  let root = render(<SampleApp />)
-  let punctualElement = root.getByTestId('punctual')
+  render(<SampleApp />)
+  let punctualElement = screen.getByTestId('punctual')
   fireEvent(punctualElement, 'onPress')
 
-  expect(root.getByTestId('glycemiaInput')).toBeDefined()
+  expect(screen.getByTestId('glycemiaInput')).toBeDefined()
+})
+
+it('navigates well to basal screen', () => {
+  const SampleApp = () => <App />
+
+  render(<SampleApp />)
+  let basalElement = screen.getByTestId('basal')
+  fireEvent(basalElement, 'onPress')
 })

src/components/__tests__/DbButtonComponent.test.tsx

@@ -9,14 +9,13 @@ import {DbButton} from '../DbButtonComponent'
 import {it, expect} from '@jest/globals'
 
 // Note: test renderer must be required after react-native.
-import {fireEvent, render} from '@testing-library/react-native'
+import {fireEvent, render, screen} from '@testing-library/react-native'
 
 it('renders correctly', async () => {
   const Sample = () => <DbButton title="coucou" testID="coucou" />
 
-  let root = render(<Sample />)
-  let punctualButton = root.getByTestId('coucou')
+  render(<Sample />)
+  let punctualButton = screen.getByTestId('coucou')
   expect(punctualButton).toBeDefined()
   fireEvent(punctualButton, 'onPress')
-  //await sleep(10)
 })

src/screens/BasalAdaptationScreen.tsx

@@ -1,64 +1,82 @@
-import React, {useState} from 'react'
-import {Text, View} from 'react-native'
+import React from 'react'
+import {SafeAreaView, Text, View} from 'react-native'
 import {DbNumericTextInput} from '../components/DbNumericTextInputComponent'
+import {screenStyles} from './styles'
+//import {ScreenComponentType} from '@react-navigation/core/src/types'
 
-// interface NightGlycemiaInterval {
-//   glycemiaBefore: number
-//   glycemiaAfter: number
-// }
-
-export function BasalAdaptationScreen() {
-  const [glycemiasBefore, setGlycemiaBefore] = useState<number[]>([])
-
-  const [glycemiasAfter, setGlycemiaAfter] = useState<number[]>([])
+interface BasalState {
+  glycemiasBefore: number[]
+  glycemiasAfter: number[]
+}
 
-  const manageGlycemiaBefore = (i: number, glycemiaStr: string) => {
-    setGlycemiaBefore((existing: number[]) => {
-      existing[i] = parseFloat(glycemiaStr)
-      return existing
-    })
+export class BasalAdaptationScreen extends React.Component<{}, BasalState> {
+  constructor(props: {}) {
+    super(props)
+    this.state = {
+      glycemiasBefore: [],
+      glycemiasAfter: [],
+    }
   }
 
-  const manageGlycemiaAfter = (i: number, glycemiaStr: string) => {
-    setGlycemiaAfter((existing: number[]) => {
-      existing[i] = parseFloat(glycemiaStr)
-      return existing
-    })
-  }
+  render() {
+    const manageGlycemiaBefore = (i: number, glycemiaStr: string) => {
+      let newBefore = Array.from(this.state.glycemiasBefore)
+      newBefore[i] = parseFloat(glycemiaStr)
 
-  const glycemiaIntervalInputs = []
-  for (let i = 0; i < 3; i++) {
-    glycemiaIntervalInputs.push(
-      <View key={i} style={{flexDirection: 'row'}}>
-        <Text style={{color: 'black', verticalAlign: 'middle'}}>
-          Interval {i + 1}:{' '}
-        </Text>
-        <DbNumericTextInput
-          placeholder={'glycemia before ' + (i + 1)}
-          onChangeText={newtText => {
-            manageGlycemiaBefore(i, newtText)
-          }}
-        />
-        <DbNumericTextInput
-          placeholder={'glycemia after ' + (i + 1)}
-          onChangeText={newtText => {
-            manageGlycemiaAfter(i, newtText)
-          }}
-        />
-      </View>,
-    )
-  }
+      this.setState({
+        glycemiasBefore: newBefore,
+      })
+    }
+
+    const manageGlycemiaAfter = (i: number, glycemiaStr: string) => {
+      let newAfter = Array.from(this.state.glycemiasAfter)
+      newAfter[i] = parseFloat(glycemiaStr)
 
-  return (
-    <View>
-      <Text style={{color: 'black'}}>Basal adaptation</Text>
+      this.setState({
+        glycemiasAfter: newAfter,
+      })
+    }
 
-      {glycemiaIntervalInputs}
+    const glycemiaIntervalInputs = []
+    for (let i = 0; i < 3; i++) {
+      glycemiaIntervalInputs.push(
+        <View key={i} style={screenStyles.intervalContainer}>
+          <Text style={screenStyles.intervalLabel}>Interval {i + 1}: </Text>
+          <DbNumericTextInput
+            placeholder={'glycemia before ' + (i + 1)}
+            onChangeText={newtText => {
+              manageGlycemiaBefore(i, newtText)
+            }}
+          />
+          <DbNumericTextInput
+            placeholder={'glycemia after ' + (i + 1)}
+            onChangeText={newtText => {
+              manageGlycemiaAfter(i, newtText)
+            }}
+          />
+        </View>,
+      )
+    }
 
-      <View>
-        <Text style={{color: 'black'}}>{glycemiasBefore.join(', ')}</Text>
-        <Text style={{color: 'black'}}>{glycemiasAfter.join(', ')}</Text>
-      </View>
-    </View>
-  )
+    return (
+      <SafeAreaView style={screenStyles.screenBackground}>
+        <View>
+          {glycemiaIntervalInputs}
+          <View>
+            <Text style={screenStyles.intervalSummary}>
+              {this.state.glycemiasBefore.join(', ')}
+            </Text>
+            <Text style={screenStyles.intervalSummary}>
+              {this.state.glycemiasAfter.join(', ')}
+            </Text>
+          </View>
+        </View>
+      </SafeAreaView>
+    )
+  }
 }
+
+// interface NightGlycemiaInterval {
+//   glycemiaBefore: number
+//   glycemiaAfter: number
+// }

src/screens/HomeScreen.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import {SafeAreaView, ScrollView, View} from 'react-native'
 import {DbButton} from '../components/DbButtonComponent'
+import {screenStyles} from './styles'
 
-export function HomeScreen({navigation}: any) {
+export function HomeScreen({navigation}: any): JSX.Element {
   return (
-    <SafeAreaView style={{backgroundColor: 'black'}}>
+    <SafeAreaView style={screenStyles.screenBackground}>
       <ScrollView>
-        <View style={{margin: 8, width: '80%', alignItems: 'center'}}>
+        <View style={screenStyles.buttonListContainer}>
           <DbButton
             title="Punctual quick adaptation"
             testID="punctual"