Merge pull request #86 from flextremedev/app-form-styling

App form styling

Author: flextremedev

.circleci/config.yml

@@ -19,7 +19,8 @@ jobs:
       - checkout
       - run: yarn install
       - run: yarn web-test-coverage
-      - run: yarn core-test-coverage
+      - run: yarn mobile-test-ci
+      - run: yarn core-test-ci
       - codecov/upload:
         file: packages/web/coverage/*.json
 workflows:

package.json

@@ -7,8 +7,10 @@
   ],
   "scripts": {
     "core-test": "yarn workspace @interval-timer/core run test",
-    "core-test-coverage": "yarn workspace @interval-timer/core run test --runInBand --coverage",
+    "core-test-ci": "yarn workspace @interval-timer/core run test --runInBand --coverage",
     "mobile": "yarn workspace @interval-timer/mobile start",
+    "mobile-test": "yarn workspace @interval-timer/mobile run test",
+    "mobile-test-ci": "yarn workspace @interval-timer/mobile run test --runInBand --coverage",
     "web": "yarn workspace @interval-timer/web run start",
     "web-build": "yarn workspace @interval-timer/web run build",
     "web-lint": "yarn workspace @interval-timer/web run lint:fix",

packages/core/src/machine/timerMachine.ts

@@ -45,7 +45,7 @@ export const timerMachine = createMachine<TimerContext, TimerEvent, TimerState>(
     context: {
       prepareTime: new Date(5000),
       timeLeft: new Date(5000),
-      rounds: 2,
+      rounds: 1,
       roundsLeft: 0,
       workInterval: new Date(0),
       breakInterval: new Date(0),

packages/mobile/App.tsx

@@ -1,86 +1,7 @@
-import { useTimerMachine } from '@interval-timer/core';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { Button } from './src/components/Button/Button';
-import { DurationInput } from './src/components/DurationInput/DurationInput';
-import { Input } from './src/components/Input/Input';
+import * as React from 'react';
 
+import { App as AppFromSrc } from './src/App';
 // eslint-disable-next-line import/no-default-export
 export default function App(): JSX.Element {
-  const {
-    service,
-    setBreakInterval,
-    setRounds,
-    setWorkInterval,
-    state,
-    toggleTimer,
-  } = useTimerMachine();
-
-  React.useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
-    const subscription = service.subscribe((newState) => {
-      if (newState.event.type === 'START') {
-        interval = setInterval(() => {
-          service.send({ type: 'TICK' });
-        }, 50);
-      } else if (newState.event.type === 'STOP') {
-        if (interval) {
-          clearInterval(interval);
-        }
-      }
-    });
-    return (): void => {
-      subscription.unsubscribe();
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [service]);
-
-  const {
-    breakInterval,
-    rounds,
-    roundsLeft,
-    timeLeft,
-    workInterval,
-  } = state.context;
-  return (
-    <View style={styles.container}>
-      <Input
-        label="Rounds"
-        value={String(rounds)}
-        onBlur={setRounds}
-        type="number"
-      />
-      <Input
-        label="Round"
-        value={`${rounds - roundsLeft}/${rounds}`}
-        readOnly
-      />
-      <DurationInput
-        value={workInterval}
-        onChange={setWorkInterval}
-        label="Work Interval"
-      />
-      <DurationInput
-        value={breakInterval}
-        onChange={setBreakInterval}
-        label="Break Interval"
-      />
-      <DurationInput value={timeLeft} label="Time left" readOnly />
-      <Button onPress={toggleTimer}>
-        <Text>Go</Text>
-      </Button>
-    </View>
-  );
+  return <AppFromSrc />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

packages/mobile/jest.config.js

@@ -1,3 +1,11 @@
 module.exports = {
+  coverageThreshold: {
+    global: {
+      branches: 95.5,
+      functions: 93.5,
+      lines: 96.25,
+      statements: 96.25,
+    },
+  },
   preset: 'jest-expo',
 };

packages/mobile/src/App.test.tsx

@@ -0,0 +1,47 @@
+import { fireEvent, render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { App } from './App';
+
+describe('App', () => {
+  it('should work', () => {
+    const { getByDisplayValue, getByTestId } = render(<App />);
+    const workMinutesValue = '01';
+    const workSecondsValue = '01';
+    const workMinutes = Number(workMinutesValue);
+    const workSeconds = Number(workSecondsValue);
+
+    const breakMinutesValue = '01';
+    const breakSecondsValue = '01';
+    const breakMinutes = Number(breakMinutesValue);
+    const breakSeconds = Number(breakSecondsValue);
+
+    const roundsValue = '2';
+    fireEvent.changeText(getByDisplayValue('1'), roundsValue);
+    fireEvent.changeText(
+      getByTestId('work-interval-duration-input-minutes'),
+      workMinutesValue
+    );
+    fireEvent.changeText(
+      getByTestId('work-interval-duration-input-seconds'),
+      workSecondsValue
+    );
+    fireEvent.changeText(
+      getByTestId('break-interval-duration-input-minutes'),
+      breakMinutesValue
+    );
+    fireEvent.changeText(
+      getByTestId('break-interval-duration-input-seconds'),
+      breakSecondsValue
+    );
+  });
+
+  it('should trigger color mode', () => {
+    const { queryByTestId, getByTestId } = render(<App />);
+    expect(queryByTestId('color-mode-toggle-light')).toBeFalsy();
+
+    fireEvent.press(getByTestId('color-mode-toggle-dark'));
+    expect(queryByTestId('color-mode-toggle-dark')).toBeFalsy();
+    expect(getByTestId('color-mode-toggle-light')).toBeTruthy();
+  });
+});

packages/mobile/src/App.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { ThemeContextProvider } from './context/theme-context';
+import { Home } from './pages/Home';
+
+// eslint-disable-next-line import/no-default-export
+export function App(): JSX.Element {
+  return (
+    <ThemeContextProvider>
+      <Home />
+    </ThemeContextProvider>
+  );
+}

packages/mobile/src/components/Button/Button.tsx

@@ -1,21 +1,30 @@
 import * as React from 'react';
-import { StyleSheet, TouchableHighlight } from 'react-native';
+import { StyleProp, StyleSheet, Pressable, ViewStyle } from 'react-native';
+
+import { theme } from '../../theme';
 
 type ButtonProps = {
   onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
 };
-const Button: React.FC<ButtonProps> = ({ onPress, children }) => {
+const Button: React.FC<ButtonProps> = ({ onPress, children, style }) => {
   return (
-    <TouchableHighlight style={styles.button} onPress={onPress}>
+    <Pressable style={[styles.button, style]} onPress={onPress}>
       {children}
-    </TouchableHighlight>
+    </Pressable>
   );
 };
 
 const styles = StyleSheet.create({
   button: {
-    alignSelf: 'stretch',
+    height: 56,
+    minWidth: 56,
+    borderRadius: 56,
     textAlign: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: theme.spaces.l,
+    paddingRight: theme.spaces.l,
   },
 });
 export { Button };

packages/mobile/src/components/DoubleDigitInput/DoubleDigitInput.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render } from '@testing-library/react-native';
+import * as React from 'react';
+
+import { DoubleDigitInput } from './DoubleDigitInput';
+
+describe('DoubleDigitInput', () => {
+  it('should handle input', () => {
+    let value = '00';
+    const handleChange = (text: string): void => {
+      value = text;
+    };
+    const { getByDisplayValue, rerender } = render(
+      <DoubleDigitInput onChangeText={handleChange} value={value} />
+    );
+
+    expect(getByDisplayValue('00')).toBeTruthy();
+
+    fireEvent.changeText(getByDisplayValue('00'), '1');
+    rerender(<DoubleDigitInput onChangeText={handleChange} value={value} />);
+    fireEvent.changeText(getByDisplayValue('1'), '12');
+    rerender(<DoubleDigitInput onChangeText={handleChange} value={value} />);
+
+    expect(getByDisplayValue('12')).toBeTruthy();
+  });
+
+  it('should be readonly', () => {
+    const handleChange = jest.fn();
+    const { getByDisplayValue } = render(
+      <DoubleDigitInput
+        onChangeText={handleChange}
+        value="00"
+        editable={false}
+      />
+    );
+    fireEvent.changeText(getByDisplayValue('00'), '1');
+    expect(handleChange).toHaveBeenCalledTimes(0);
+  });
+
+  it('should handle invalid input', () => {
+    let value = '00';
+    const handleChange = (text: string): void => {
+      value = text;
+    };
+    const { getByDisplayValue, queryByDisplayValue } = render(
+      <DoubleDigitInput onChangeText={handleChange} value={value} />
+    );
+
+    expect(getByDisplayValue('00')).toBeTruthy();
+
+    fireEvent.changeText(getByDisplayValue('00'), 'e');
+
+    expect(queryByDisplayValue('e')).toBeFalsy();
+  });
+});

packages/mobile/src/components/DoubleDigitInput/DoubleDigitInput.tsx

@@ -64,10 +64,14 @@ const DoubleDigitInput = ({
     }
   };
 
+  /* could't find a way to test focus */
+  /* istanbul ignore next */
   const handleFocus = (): void => {
     setInputStatus('initial');
   };
 
+  /* could't find a way to test blur */
+  /* istanbul ignore next */
   const handleBlur = (): void => {
     setInputStatus('done');
   };