add basic passing acceptance test for US-1 #31

__tests__/__snapshots__/campus-toggle.test.js.snap

@@ -26,6 +26,7 @@ exports[`CampusToggle component should match snapshot 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={null}
+    testID="SGWButton"
   >
     <View
       style={
@@ -68,6 +69,7 @@ exports[`CampusToggle component should match snapshot 1`] = `
     onResponderTerminationRequest={[Function]}
     onStartShouldSetResponder={[Function]}
     style={null}
+    testID="loyolaButton"
   >
     <View
       style={

e2e/campus-toggle.spec.js

@@ -0,0 +1,26 @@
+const { reloadApp } = require("detox-expo-helpers");
+import { BuildingId } from "../src/types/main";
+import { Buildings } from "../src/constants/buildings.data";
+
+beforeAll(async () => {
+  await reloadApp();
+});
+
+describe("CampusToggle: Toggling between campuses", () => {
+  it("should show the campus toggles", async () => {
+    await expect(element(by.id("SGWButton"))).toBeVisible();
+    await expect(element(by.id("loyolaButton"))).toBeVisible();
+  });
+
+  it("should show the Loyola campus on Loyola toggle press", async () => {
+    await element(by.id("loyolaButton")).tap();
+    await expect(element(by.id("polygon" + BuildingId[BuildingId.VL]))).toExist(); 
+    await expect(element(by.id("marker" + BuildingId[BuildingId.VL]))).toExist();
+  });
+
+  it("should show the SGW campus on SGW toggle press", async () => {
+    await element(by.id("SGWButton")).tap();
+    await expect(element(by.id("polygon" + BuildingId[BuildingId.H]))).toExist(); 
+    await expect(element(by.id("marker" + BuildingId[BuildingId.H]))).toExist();
+  });
+});

e2e/init.js

@@ -13,7 +13,10 @@ jasmine.getEnv().addReporter(adapter);
 jasmine.getEnv().addReporter(specReporter);
 
 beforeAll(async () => {
-  await detox.init(config);
+  await detox.init(config, {launchApp: false});
+  await device.launchApp({permissions: {
+    location: "always"
+  }});
 }, 300000);
 
 beforeEach(async () => {

package.json

@@ -6,7 +6,8 @@
     "eject": "expo eject",
     "ios": "expo start --ios",
     "start": "expo start",
-    "test": "jest --verbose --coverage",
+    "test": "jest __tests__ --verbose --coverage",
+    "e2e": "detox test",
     "web": "expo start --web",
     "lint": "tsc --noEmit && eslint --ext .ts,.tsx ./",
     "lint-fix": "tsc --noEmit && eslint --fix --ext .ts,.tsx ./",
@@ -84,7 +85,7 @@
       "ios.sim": {
         "binaryPath": "bin/Exponent.app",
         "type": "ios.simulator",
-        "name": "iPhone 8"
+        "name": "iPhone 11 Pro Max"
       }
     }
   }

src/components/building-highlights/building-highlights.component.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from "react";
+import { Polygon, Marker } from "react-native-maps";
+import { Buildings } from "../../constants/buildings.data";
+import { BuildingId } from "../../types/main";
+import { View, Text, StyleSheet } from "react-native";
+import { CONCORDIA_RED, BUILDING_UNTAPPED } from "../../constants/style";
+
+interface IProps {
+  onBuildingTap: (id: BuildingId) => void;
+  tappedBuilding: BuildingId;
+}
+
+/**
+ * Wrapper Component for Polygons and Markers which overlay campus buildings.
+ */
+const BuildingHighlights = ({ onBuildingTap, tappedBuilding }: IProps) => {
+  /**
+   * Fill color for the Polygons
+   */
+  const [fillColor, setFillColor] = useState<string>(null);
+  const [tappedColor, setTappedColor] = useState<string>(null);
+  useEffect(() => {
+    setFillColor(BUILDING_UNTAPPED);
+    setTappedColor(CONCORDIA_RED);
+  }, []);
+
+  return (
+    <View>
+      {Buildings.map(building => (
+        <View key={building.id}>
+          {building.boundingBox.length > 0 ? (
+            <Polygon
+              testID={"polygon" + BuildingId[building.id]}
+              coordinates={building.boundingBox}
+              tappable={true}
+              fillColor={
+                tappedBuilding != null && tappedBuilding === building.id
+                  ? tappedColor
+                  : fillColor
+              }
+              onPress={() => {
+                onBuildingTap(building.id);
+              }}
+            />
+          ) : null}
+
+          <Marker
+            testID={"marker" + BuildingId[building.id]}
+            coordinate={building.location}
+            onPress={() => {
+              onBuildingTap(building.id);
+            }}
+            tracksViewChanges={false}
+            tracksInfoWindowChanges={false}
+          >
+            <Text style={styles.marker}>{BuildingId[building.id]}</Text>
+          </Marker>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  marker: {
+    backgroundColor: "#252525",
+    color: "#f0f0f0",
+    padding: 1,
+    borderRadius: 5
+  }
+});
+
+export default BuildingHighlights;

src/components/campus-toggle/campus-toggle.component.tsx

@@ -44,7 +44,11 @@ const CampusToggle = ({ onCampusToggle }: IProps) => {
 
   return (
     <View style={styles.container}>
-      <TouchableHighlight onPress={onSGWPressButton} underlayColor="white">
+      <TouchableHighlight
+        testID="SGWButton"
+        onPress={onSGWPressButton}
+        underlayColor="white"
+      >
         <View
           style={[isSGW ? styles.buttonSelected : styles.buttonNotSelected]}
         >
@@ -57,7 +61,11 @@ const CampusToggle = ({ onCampusToggle }: IProps) => {
           </Text>
         </View>
       </TouchableHighlight>
-      <TouchableHighlight onPress={onLoyolaPressButton} underlayColor="white">
+      <TouchableHighlight
+        testID="loyolaButton"
+        onPress={onLoyolaPressButton}
+        underlayColor="white"
+      >
         <View
           style={[isSGW ? styles.buttonNotSelected : styles.buttonSelected]}
         >