Adds initial tests

components/header/back-button.js

@@ -13,9 +13,9 @@ export default function BackButtonHeader(props) {
         style={styles.accentCircle}
         left={props.middle - styles.accentCircle.width / 2}
       />
-      <NavigationArrow direction='left' {...props}/>
+      <NavigationArrow testID='backButton' direction='left' {...props}/>
       <View>
-        <Text style={styles.headerText}>
+        <Text style={styles.headerText} testID='pageTitle'>
           {props.title}
         </Text>
       </View>

components/header/cycle-day.js

@@ -14,7 +14,7 @@ export default function CycleDayHeader({ date, ...props }) {
     />
     <NavigationArrow direction='left' {...props}/>
     <View>
-      <Text style={styles.dateHeader}>
+      <Text style={styles.dateHeader} testID='cycleDayTitleDate'>
         {formatDate(date)}
       </Text>
       {props.cycleDayNumber &&

components/header/navigation-arrow.js

@@ -25,6 +25,7 @@ export default function NavigationArrow(props) {
     <TouchableOpacity
       style={[styles.navigationArrow, styles[iconPosition]]}
       onPress={pressHandler}
+      testID={props.testID}
     >
       <Icon
         name={iconName}

components/header/symptom-view.js

@@ -23,10 +23,10 @@ export default function SymptomViewHeader(props) {
         {...props}
       />
       <View>
-        <Text style={styles.dateHeader}>
+        <Text style={styles.dateHeader} testID='symptomViewTitleName'>
           {props.title}
         </Text>
-        <Text style={styles.cycleDayNumber}>
+        <Text style={styles.cycleDayNumber} testID='symptomViewTitleDate'>
           {formatDate(props.date)}
         </Text>
       </View >

components/menu.js

@@ -54,7 +54,10 @@ const MenuItem = ({ icon, labelKey, active, onPress }) => {
       onPress={onPress}
     >
       <Icon name={icon} {...iconStyles.menuIcon} {...styleActive} />
-      <Text style={[styles.menuText, styleActive]}>
+      <Text
+        testID={active ? 'activeMenuItem' : `menuItem${labelKey}`}
+        style={[styles.menuText, styleActive]}
+      >
         {menuTitlesLowerCase[labelKey]}
       </Text>
     </TouchableOpacity>

e2e/firstTest.spec.js

@@ -1,12 +0,0 @@
-describe('Example', () => {
-  beforeEach(async () => {
-    await device.reloadReactNative();
-  });
-  it('should navigate to home on accepting the license agreement', async () => {
-    await expect(element(by.id('licensePage'))).toBeVisible();
-    await element(by.id('licenseOkButton')).tap();
-    await expect(
-      element(by.id('pageTitle').and(by.text('home')))
-    ).toBeVisible();
-  });
-});

e2e/homeNavigation.spec.js

@@ -0,0 +1,62 @@
+const isOnPage = async (page, parentPage) => {
+  await expect(
+    element(by.id('pageTitle').and(by.text(page)))
+  ).toBeVisible();
+  await expect(
+    element(
+      by.id('activeMenuItem').and(by.text(parentPage ? parentPage : page))
+    )
+  ).toBeVisible();
+}
+
+describe('Home Navigation', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  // TODO: clarify how to test that exiting from the app happened
+  // https://stackoverflow.com/questions/57133730/how-to-test-an-exit-app-scenario-using-detox
+  // it('should exit the app when license agreement declined', async () => {
+  //   await expect(element(by.id('licensePage'))).toBeVisible();
+  //   await element(by.id('licenseOkCance')).tap();
+  // });
+
+  it('should navigate to home on accepting the license agreement', async () => {
+    await expect(element(by.id('licensePage'))).toBeVisible();
+    await element(by.id('licenseOkButton')).tap();
+    await isOnPage('home');
+  });
+
+  it('should navigate to today cycle day page', async () => {
+    await element(by.text('add data for today')).tap();
+    await expect(
+      element(by.id('cycleDayTitleDate').and(by.text('today')))
+    ).toBeVisible();
+  });
+
+  it('should navigate to today bleeding symptom', async () => {
+    await element(by.text('track your period')).tap();
+    await expect(
+      element(by.id('symptomViewTitleName').and(by.text('bleeding')))
+    ).toBeVisible();
+    await expect(
+      element(by.id('symptomViewTitleDate').and(by.text('today')))
+    ).toBeVisible();
+  });
+
+  it('should navigate to chart to check your fertility', async () => {
+    await element(by.text('check your fertility')).tap();
+    await isOnPage('chart');
+  });
+
+  it('should navigate to settings, its sub pages and back', async () => {
+    await element(by.id('menuItemSettings')).tap();
+    await isOnPage('settings');
+    await element(by.text('reminders')).tap();
+    await isOnPage('reminders', 'settings');
+    await element(by.id('backButton')).tap();
+    await element(by.text('nfp settings')).tap();
+    await isOnPage('nfp settings', 'settings');
+    await device.pressBack();
+  });
+});