Fakultas Ilmu Komputer UI

Commit 96a95348 authored by Irwanto's avatar Irwanto
Browse files

Merge branch 'pbi-monitoring-case' into 'staging'

Pbi monitoring case

See merge request ppl-fasilkom-ui/2020/ppl-c/ppti-mobile-apps-monitoring-wabah-tuberkolosis/neza-mobile!24
parents 131bf7ae 087689d5
......@@ -1413,6 +1413,14 @@
"resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.4.0.tgz",
"integrity": "sha512-H1XsjQ6imMZKK+IsehDnhVhxP0FyUKX6UMWMeUkSk6Ox5M7HZ2q8kvlxVqdgZM9ry8yb6RJtCIjgBT7w8eiSug=="
},
"@react-native-community/datetimepicker": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-2.3.2.tgz",
"integrity": "sha512-BbDmWVIaSYoYK2x5tRRuy/UWUVS6WtZ+3D210zYZgyD47yEVcTbaLFL9zFw7VxNMb8c/6BFcEpC6k18WTYplwA==",
"requires": {
"invariant": "^2.2.4"
}
},
"@react-native-community/eslint-config": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@react-native-community/eslint-config/-/eslint-config-0.0.5.tgz",
......
......@@ -14,7 +14,13 @@ import {
ContactInvestigationFormStep2,
ContactInvestigationFormStep3,
ContactInvestigationFormStep4,
Splash
MonitoringSelection,
MonitoringMedicalReference,
MonitoringFormFinishPage,
Splash,
MonitoringMedicalIntake,
MonitoringMedicalCheck,
MonitoringMedicalResume
} from 'scenes';
import {Dimensions} from 'react-native';
import initialCacheState, {
......@@ -194,6 +200,30 @@ const App = () => {
name="officer-signup-finish"
component={OfficerSignupFormFinishPage}
/>
<Stack.Screen
name="monitoring-select"
component={MonitoringSelection}
/>
<Stack.Screen
name="monitoring-medical-reference"
component={MonitoringMedicalReference}
/>
<Stack.Screen
name="monitoring-medical-check"
component={MonitoringMedicalCheck}
/>
<Stack.Screen
name="monitoring-medical-intake"
component={MonitoringMedicalIntake}
/>
<Stack.Screen
name="monitoring-medical-resume"
component={MonitoringMedicalResume}
/>
<Stack.Screen
name="monitoring-finish"
component={MonitoringFormFinishPage}
/>
<Stack.Screen name="log" component={Log} />
</Stack.Navigator>
</NavigationContainer>
......
import 'react-native';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import BaseMonitoringForm from '.';
import renderer from 'react-test-renderer';
const Stack = createStackNavigator();
it('renders correctly', () => {
let defaultPage = renderer
.create(
<NavigationContainer>
<Stack.Navigator
screenOptions={{
header: () => <></>,
}}>
<Stack.Screen
name="baseform"
component={() =>
<BaseMonitoringForm
header="This is header"
name='Sri Tanjung'
age='19'
is_male={true}
address='Pondok Cina, Beji'
status='Belum Diperiksa'
/>
}
/>
</Stack.Navigator>
</NavigationContainer>
)
.toJSON();
expect(defaultPage).toMatchSnapshot();
defaultPage = renderer
.create(
<NavigationContainer>
<Stack.Navigator
screenOptions={{
header: () => <></>,
}}>
<Stack.Screen
name="baseform"
component={() =>
<BaseMonitoringForm
header="This is header"
name='Sri Tanjung'
age='19'
is_male={false}
address='Pondok Cina, Beji'
status='Belum Diperiksa'
/>
}
/>
</Stack.Navigator>
</NavigationContainer>
)
.toJSON();
expect(defaultPage).toMatchSnapshot();
});
\ No newline at end of file
import React from 'react';
import styled from 'styled-components/native';
import Header from 'components/Header';
import MonitoringStatus from 'components/MonitoringStatus';
interface BaseMonitoringFormProps {
header: string,
name: string,
age: string,
is_male: boolean,
address: string,
status: string,
children?: Element
}
const ScrollView = styled.ScrollView`
background: #ffffff;
`;
const Body = styled.View`
background: #ffffff;
padding: 12px;
padding-top: 0;
`;
const BaseMonitoringForm = (props: BaseMonitoringFormProps) => {
return (
<ScrollView>
<Header
isHome={false}
headerText={props.header}
/>
<Body>
<MonitoringStatus
name={props.name}
age={props.age}
gender={props.is_male ? 'Laki-laki' : 'Perempuan'}
address={props.address}
status={props.status}
/>
{props.children}
</Body>
</ScrollView>
);
}
export default BaseMonitoringForm;
\ No newline at end of file
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DatePicker tests renders correctly 1`] = `
<View
axis={2}
style={
Array [
Object {
"alignItems": "flex-start",
"backgroundColor": "transparent",
"borderBottomColor": "black",
"borderBottomWidth": 0,
"borderLeftColor": "black",
"borderLeftWidth": 0,
"borderRadius": 0,
"borderRightColor": "black",
"borderRightWidth": 0,
"borderTopColor": "black",
"borderTopWidth": 0,
"flexDirection": "column",
"flexGrow": 0,
"flexShrink": 0,
"flexWrap": "nowrap",
"height": "auto",
"justifyContent": "flex-start",
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "auto",
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "flex-start",
"backgroundColor": "transparent",
"borderBottomColor": "black",
"borderBottomWidth": 0,
"borderLeftColor": "black",
"borderLeftWidth": 0,
"borderRadius": 0,
"borderRightColor": "black",
"borderRightWidth": 0,
"borderTopColor": "black",
"borderTopWidth": 0,
"flexDirection": "row",
"flexGrow": 0,
"flexShrink": 0,
"flexWrap": "nowrap",
"height": "auto",
"justifyContent": "flex-start",
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "auto",
},
]
}
>
<Text
fontSize="16px"
fontWeight="Bold"
style={
Array [
Object {
"color": "black",
"fontFamily": "Dosis-Bold",
"fontSize": 16,
"textAlign": "left",
"width": "auto",
},
]
}
>
Tanggal Hari Ini
</Text>
</View>
<RNGestureHandlerButton
collapsable={false}
onGestureEvent={[Function]}
onGestureHandlerEvent={[Function]}
onGestureHandlerStateChange={[Function]}
onHandlerStateChange={[Function]}
rippleColor={0}
style={
Array [
Object {
"overflow": "hidden",
},
undefined,
]
}
>
<View
accessible={true}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {
"borderBottomWidth": 0.75,
"height": 40,
"paddingLeft": 5,
"paddingTop": 6,
"width": 728,
},
]
}
>
<View
style={
Array [
Object {
"alignItems": "flex-start",
"backgroundColor": "transparent",
"borderBottomColor": "black",
"borderBottomWidth": 0,
"borderLeftColor": "black",
"borderLeftWidth": 0,
"borderRadius": 0,
"borderRightColor": "black",
"borderRightWidth": 0,
"borderTopColor": "black",
"borderTopWidth": 0,
"flexDirection": "row",
"flexGrow": 0,
"flexShrink": 0,
"flexWrap": "nowrap",
"height": "auto",
"justifyContent": "flex-start",
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "100%",
},
]
}
width="100%"
>
<Text
fontSize="16px"
fontWeight="Regular"
style={
Array [
Object {
"color": "black",
"fontFamily": "Dosis-Regular",
"fontSize": 16,
"textAlign": "left",
"width": "auto",
},
]
}
>
4/21/2020
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "flex-start",
"backgroundColor": "transparent",
"borderBottomColor": "black",
"borderBottomWidth": 0,
"borderLeftColor": "black",
"borderLeftWidth": 0,
"borderRadius": 0,
"borderRightColor": "black",
"borderRightWidth": 0,
"borderTopColor": "black",
"borderTopWidth": 0,
"flexDirection": "row",
"flexGrow": 0,
"flexShrink": 0,
"flexWrap": "nowrap",
"height": "auto",
"justifyContent": "flex-start",
"paddingBottom": 0,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 0,
"width": "auto",
},
]
}
/>
</View>
</View>
</RNGestureHandlerButton>
</View>
`;
import 'react-native';
import React from 'react';
import DatePicker from '.';
import renderer, {act} from 'react-test-renderer';
import DateTimePicker from '@react-native-community/datetimepicker';
import { TouchableOpacity } from 'react-native-gesture-handler';
describe("DatePicker tests", () => {
it('renders correctly', () => {
const inst = renderer.create(
<DatePicker
name="Tanggal Hari Ini"
/>,
);
expect(inst.toJSON()).toMatchSnapshot();
});
it('can change date correctly', () => {
let date: Date = new Date();
const setDate = (val: Date) => {
date = val;
};
const inst = renderer.create(
<DatePicker
name="Tanggal Hari Ini"
onChange={setDate}
/>,
);
const dateField = inst.root.findByType(TouchableOpacity);
act(() => {
dateField.props.onPress();
})
const picker = inst.root.findByType(DateTimePicker);
const newDate = new Date(1598051730000);
let e: any;
act(() => {
picker.props.onChange(e, newDate);
});
expect(date).toBe(newDate);
});
});
import React, { useState, useEffect } from 'react';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Text, Box, Gap } from 'components';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { Dimensions } from 'react-native';
import styled from 'styled-components/native';
interface CategoryButtonProps {
name: string,
value?: Date,
onChange?: (newDate: Date) => void,
}
const DatePicker = ({
name,
value = new Date(),
onChange = () => {}
}: CategoryButtonProps) => {
const [date, setDate] = useState(value);
const [show, setShow] = useState(false);
useEffect(() => {
onChange(date);
}, [date]);
return (
<Box
axis={Box.Axis.Vertical}
>
<Box>
<Text isBold={true}>
{name}
</Text>
</Box>
<TouchableOpacity
onPress={() => {
setShow(true);
}}
>
<Container>
<Box width="100%">
<Text>
{date.toLocaleDateString('id-ID')}
</Text>
</Box>
<Box></Box>
</Container>
</TouchableOpacity>
{show && (
<DateTimePicker
testID="dateTimePicker"
timeZoneOffsetInMinutes={0}
value={date}
mode="date"
display="default"
onChange={(e, selectedDate) => {
setShow(false);
const currentDate = selectedDate || date;
setDate(currentDate);
}}
/>
)}
</Box>
);
};
export default DatePicker;
var width = Dimensions.get('window').width;
const Container = styled.View`
width: ${width-22};
border-bottom-width: 0.75px;
padding-top: 6px;
padding-left: 5px;
height: 40px;
`;
\ No newline at end of file
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<View
style={
Array [
Object {
"backgroundColor": "#fafafa",
"borderBottomRightRadius": 60,
"borderTopLeftRadius": 20,
"marginBottom": 20,
"paddingBottom": 12,
"paddingLeft": 12,
"paddingRight": 12,
"paddingTop": 18,
},
]
}
>
<Text
fontSize="16px"
fontWeight="Regular"
style={
Array [
Object {
"color": "black",
"fontFamily": "Dosis-Regular",
"fontSize": 16,
"textAlign": "left",
"width": "auto",
},
]
}
>
Sri Tanjung
|
19
Tahun,
Male
</Text>
<Text
fontSize="16px"
fontWeight="Regular"
style={
Array [
Object {
"color": "black",
"fontFamily": "Dosis-Regular",
"fontSize": 16,
"textAlign": "left",
"width": "auto",
},
]
}
>
Pondok Cina, Beji
</Text>
<View
paddingBottom={5}
paddingLeft={0}
paddingRight={0}
paddingTop={5}
style={
Array [
Object {
"flexBasis": "auto",
"flexGrow": 0,
"flexShrink": 0,
"paddingBottom": 5,
"paddingLeft": 0,
"paddingRight": 0,
"paddingTop": 5,
},
]
}
/>
<View
style={
Array [
Object {
"backgroundColor": "#f5f5f5",
"borderRadius": 40,
"width": "60%",
},
]
}