Fakultas Ilmu Komputer UI

Commit 96decd10 authored by Doan Andreas Nathanael's avatar Doan Andreas Nathanael
Browse files

Merge branch 'PBI-1-Quiz_Result' into 'staging'

Dietela Quiz Result UI

See merge request !9
parents 694f5590 5db7e9d4
Pipeline #67429 failed with stages
in 30 minutes and 38 seconds
export { default as Section } from './Section';
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`examples of some things 1`] = `
<View>
<TextInput
allowFontScaling={true}
onChangeText={[Function]}
rejectResponderTermination={true}
testID="input"
underlineColorAndroid="transparent"
value="Ada Lovelace"
/>
<View
accessibilityRole="button"
accessibilityState={Object {}}
accessible={true}
focusable={true}
onClick={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"opacity": 1,
}
}
>
<View
style={
Array [
Object {},
]
}
>
<Text
style={
Array [
Object {
"color": "#007AFF",
"fontSize": 18,
"margin": 8,
"textAlign": "center",
},
]
}
>
Print Username
</Text>
</View>
</View>
<Text
testID="printed-username"
>
Ada Lovelace
</Text>
</View>
`;
import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react-native';
import Example from '.';
test('examples of some things', async () => {
const { getByTestId, getByText, queryByTestId, toJSON } = render(<Example />);
const famousProgrammerInHistory = 'Ada Lovelace';
const input = getByTestId('input');
fireEvent.changeText(input, famousProgrammerInHistory);
const button = getByText('Print Username');
fireEvent.press(button);
await waitFor(() => expect(queryByTestId('printed-username')).toBeTruthy());
expect(getByTestId('printed-username').props.children).toBe(
famousProgrammerInHistory,
);
expect(toJSON()).toMatchSnapshot();
});
import React from 'react';
import { Button, Text, TextInput, View } from 'react-native';
export default function Example() {
const [name, setUser] = React.useState('');
const [show, setShow] = React.useState(false);
return (
<View>
<TextInput value={name} onChangeText={setUser} testID="input" />
<Button
title="Print Username"
onPress={() => {
// let's pretend this is making a server request, so it's async
// (you'd want to mock this imaginary request in your unit tests)...
setTimeout(() => {
setShow(!show);
}, Math.floor(Math.random() * 200));
}}
/>
{show && <Text testID="printed-username">{name}</Text>}
</View>
);
}
import * as ROUTES from 'constants/routes';
import { AllAccessQuestionnaire, InitialPage } from 'scenes';
import { AllAccessQuestionnaire, DietelaQuizResult, InitialPage } from 'scenes';
import { FC } from 'react';
export interface NavRoute {
......@@ -18,4 +18,9 @@ export const navigation: NavRoute[] = [
component: AllAccessQuestionnaire,
header: 'Dietela Quiz',
},
{
name: ROUTES.dietelaQuizResult,
component: DietelaQuizResult,
header: 'Dietela Quiz Result',
},
];
......@@ -2,3 +2,4 @@ export const initial = 'initial-page';
const questionnaire = 'questionnaire';
export const allAccessQuestionnaire = `${questionnaire}/all-access`;
export const dietelaQuizResult = `${questionnaire}/dietela-quiz-result`;
import React from 'react';
import { fireEvent, render } from '@testing-library/react-native';
import * as ROUTES from 'constants/routes';
import InitialPage from '.';
const createTestProps = (props: Object) => ({
navigation: {
navigate: jest.fn(),
},
...props,
});
describe('InitialPage', () => {
it('renders correctly', () => {
render(<InitialPage />);
......@@ -20,12 +28,16 @@ describe('InitialPage', () => {
expect(queryByTestId('logo')).toBeTruthy();
});
test('has call-to-action button', () => {
const { queryByTestId } = render(<InitialPage />);
const button = queryByTestId('cta-button');
test('has call-to-action button that navigates to Dietela Quiz', () => {
let props = createTestProps({});
const { queryByTestId } = render(<InitialPage {...props} />);
const button = queryByTestId('cta-button')!;
fireEvent.press(button);
expect(button).toBeTruthy();
expect(props.navigation.navigate).toHaveBeenCalledWith(
ROUTES.allAccessQuestionnaire,
);
});
});
......@@ -4,9 +4,10 @@ import { layoutStyles, typographyStyles } from '../../../styles';
import { styles } from './styles';
import { banner_girl_eating, logo_white_small } from '../../../assets/images';
import * as ROUTES from 'constants/routes';
import BigButton from 'components/core/Button';
const InitialPage: FC = () => (
const InitialPage: FC = ({ navigation }) => (
<ImageBackground
source={banner_girl_eating}
style={styles.bgImage}
......@@ -28,7 +29,7 @@ const InitialPage: FC = () => (
<View style={styles.ctaContainer}>
<BigButton
title="konsultasi sekarang"
onPress={() => console.log('keren')}
onPress={() => navigation.navigate(ROUTES.allAccessQuestionnaire)}
testID="cta-button"
/>
</View>
......
export { default as AllAccessQuestionnaire } from './questionnaire/AllAccessQuestionnaire';
export { default as DietelaQuizResult } from './questionnaire/DietelaQuizResult';
export { default as InitialPage } from './common/InitialPage';
import React from 'react';
import { render } from '@testing-library/react-native';
import DietelaQuizResult from '.';
describe('DietelaQuizResult', () => {
it('renders correctly', () => {
render(<DietelaQuizResult />);
});
});
import React, { FC, useState } from 'react';
import { View, Dimensions } from 'react-native';
import Carousel from 'react-native-snap-carousel';
import { CarouselPagination } from 'components/core';
import {
AktivitasFisik,
AsupanGGL,
DetailEnergiSehari,
KebutuhanEnergiZatGizi,
KecukupanSayurBuah,
MakanBesar,
MakanCemilan,
MakanPagi,
StatusBeratBadan,
} from './pages';
import { styles } from './styles';
const DietelaQuizResult: FC = () => {
const [activeSlide, setActiveSlide] = useState(0);
return (
<View style={styles.view}>
<Carousel
data={[
<StatusBeratBadan />,
<KebutuhanEnergiZatGizi />,
<KecukupanSayurBuah />,
<AsupanGGL />,
<MakanBesar />,
<MakanCemilan />,
<MakanPagi />,
<AktivitasFisik />,
<DetailEnergiSehari />,
]}
renderItem={({ item }) => item}
sliderWidth={Dimensions.get('window').width}
itemWidth={Dimensions.get('window').width}
onSnapToItem={(index) => setActiveSlide(index)}
/>
<CarouselPagination index={activeSlide} length={9} />
</View>
);
};
export default DietelaQuizResult;
import React from 'react';
import { render } from '@testing-library/react-native';
import AktivitasFisik from '.';
describe('AktivitasFisik', () => {
it('renders correctly', () => {
render(<AktivitasFisik />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'status aktivitas fisik',
content: 'Perbanyak olahraga',
},
];
const AktivitasFisik: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>Porsi Makan Pagi</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="warning" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Hayooo kok duduk-duduk aja? Yuk ah mulai lakukan aktivitas fisik, dimulai dari aktivitas yang ringan seperti jalan kaki, jogging, senam, atau naik turun tangga 15 menit per hari. Tingkatkan perlahan hingga mencapai 30 menit per hari. Konsultasikan kebutuhan gizi harianmu kepada Dietela agar asupan makan kamu seimbang dengan energi yang kamu keluarkan setiap harinya'
}
/>
</Section>
<Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Berdasarkan jawaban kuis kamu:
</Text>
<InfoCard content="3 porsi sayur per hari" />
</Section>
</Section>
</ScrollView>
</View>
);
export default AktivitasFisik;
import React from 'react';
import { render } from '@testing-library/react-native';
import AsupanGGL from '.';
describe('AsupanGGL', () => {
it('renders correctly', () => {
render(<AsupanGGL />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'status asupan ggl',
content: 'Kelebihan makan gula, garam, dan lemak',
},
];
const AsupanGGL: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>
Asupan Gula, Garam, dan Lemak (GGL)
</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="warning" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Duh, asupan gula, garam, dan lemak kamu kebanyakan nih. Asupan gula, garam, dan lemak juga ada batasannya lho. Kamu harus hati-hati dalam memilih jenis makanan. Kalau konsumsi kamu berlebih berisiko menimbulkan masalah kesehatan juga Lho. '
}
/>
</Section>
<Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Berdasarkan jawaban kuis kamu:
</Text>
<InfoCard content="3 porsi sayur per hari" />
</Section>
</Section>
</ScrollView>
</View>
);
export default AsupanGGL;
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import DetailEnergiSehari from '.';
describe('DetailEnergiSehari', () => {
it('renders correctly', () => {
render(<DetailEnergiSehari />);
});
test('has call-to-action button', () => {
const { queryByTestId } = render(<DetailEnergiSehari />);
const button = queryByTestId('cta-button');
fireEvent.press(button);
expect(button).toBeTruthy();
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import {
AutoImage,
BigButton,
InfoCard,
ResultCard,
Statistic,
} from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'energi makan pagi',
content: '🔒 Terkunci',
},
{
title: 'energi snack pagi',
content: '🔒 Terkunci',
},
{
title: 'energi makan siang',
content: '🔒 Terkunci',
},
{
title: 'energi snack siang',
content: '🔒 Terkunci',
},
{
title: 'energi makan malam',
content: '🔒 Terkunci',
},
];
const DetailEnergiSehari: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>Detail Kebutuhan Energi</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Ini rekomendasi yang Dietela berikan untukmu:
</Text>
<InfoCard
content={
'Dengan Program Dietela, tidak hanya kamu bisa mengetahui kebutuhan energi serta gizimu secara detail, kamu akan mendapatkan diet yang dipersonalisasi sesuai gayamu, lho! Klik tombol dibawah untuk detail lebih lanjut.'
}
/>
<BigButton
title="mulai program"
onPress={() => console.log('less goo -dababy')}
testID="cta-button"
/>
</Section>
</ScrollView>
</View>
);
export default DetailEnergiSehari;
import React from 'react';
import { render } from '@testing-library/react-native';
import KebutuhanEnergiZatGizi from '.';
describe('KebutuhanEnergiZatGizi', () => {
it('renders correctly', () => {
render(<KebutuhanEnergiZatGizi />);
});
});
import React, { FC } from 'react';
import { View, Text } from 'react-native';
import { AutoImage, InfoCard, ResultCard, Statistic } from 'components/core';
import { Section } from 'components/layout';
import { layoutStyles, typographyStyles } from 'styles';
import { styles } from '../styles';
import { status_berat_badan } from '../../../../../assets/images';
import { ScrollView } from 'react-native-gesture-handler';
const info = [
{
title: 'energi per hari',
content: '1543 kkal',
},
{
title: 'protein per hari',
content: '23 g',
},
{
title: 'karbohidrat per hari',
content: '132 g',
},
{
title: 'lemak per hari',
content: '31 g',
},
{
title: 'serat per hari',
content: '12 g',
},
];
const KebutuhanEnergiZatGizi: FC = () => (
<View style={layoutStyles}>
<ScrollView>
<Text style={typographyStyles.headingLarge}>
Kebutuhan Energi dan Zat Gizi dalam Sehari
</Text>
<Section>
<AutoImage source={status_berat_badan} ratio={0.5} />
</Section>
<Section>
<ResultCard status="healthy" infos={info} />
</Section>
<Section>
<Text style={[typographyStyles.bodySmall, styles.sectionHeader]}>
Dihitung berdasarkan data:
</Text>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Statistic title="jenis kelamin" emote="🧑" content="Perempuan" />
</View>
<View style={{ flex: 1 }}>
<Statistic title="Usia" emote="🎂" content="32 tahun" />
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 12 }}>
<View style={{ flex: 1 }}>
<Statistic title="berat badan" emote="⚖️" content="77 kg" />
</View>
<View style={{ flex: 1 }}>
<Statistic title="tinggi badan" emote="📐" content="156 cm" />
</View>
</View>