diff --git a/assets/images/amenityIconFirstAidActive.png b/assets/images/amenityIconFirstAidActive.png new file mode 100644 index 00000000..c1c7ecff Binary files /dev/null and b/assets/images/amenityIconFirstAidActive.png differ diff --git a/assets/images/amenityIconFirstAidActive@2x.png b/assets/images/amenityIconFirstAidActive@2x.png new file mode 100644 index 00000000..b5d12e05 Binary files /dev/null and b/assets/images/amenityIconFirstAidActive@2x.png differ diff --git a/assets/images/amenityIconFirstAidActive@3x.png b/assets/images/amenityIconFirstAidActive@3x.png new file mode 100644 index 00000000..129b67c7 Binary files /dev/null and b/assets/images/amenityIconFirstAidActive@3x.png differ diff --git a/assets/images/amenityIconToiletActive.png b/assets/images/amenityIconToiletActive.png new file mode 100644 index 00000000..bffb799c Binary files /dev/null and b/assets/images/amenityIconToiletActive.png differ diff --git a/assets/images/amenityIconToiletActive@2x.png b/assets/images/amenityIconToiletActive@2x.png new file mode 100644 index 00000000..0f8ff67b Binary files /dev/null and b/assets/images/amenityIconToiletActive@2x.png differ diff --git a/assets/images/amenityIconToiletActive@3x.png b/assets/images/amenityIconToiletActive@3x.png new file mode 100644 index 00000000..a67e3905 Binary files /dev/null and b/assets/images/amenityIconToiletActive@3x.png differ diff --git a/assets/images/location-active.ios.png b/assets/images/location-active.png similarity index 100% rename from assets/images/location-active.ios.png rename to assets/images/location-active.png diff --git a/assets/images/location-active@2x.ios.png b/assets/images/location-active@2x.png similarity index 100% rename from assets/images/location-active@2x.ios.png rename to assets/images/location-active@2x.png diff --git a/assets/images/location-active@3x.ios.png b/assets/images/location-active@3x.png similarity index 100% rename from assets/images/location-active@3x.ios.png rename to assets/images/location-active@3x.png diff --git a/assets/images/location-inactive.ios.png b/assets/images/location-inactive.png similarity index 100% rename from assets/images/location-inactive.ios.png rename to assets/images/location-inactive.png diff --git a/assets/images/location-inactive@2x.ios.png b/assets/images/location-inactive@2x.png similarity index 100% rename from assets/images/location-inactive@2x.ios.png rename to assets/images/location-inactive@2x.png diff --git a/assets/images/location-inactive@3x.ios.png b/assets/images/location-inactive@3x.png similarity index 100% rename from assets/images/location-inactive@3x.ios.png rename to assets/images/location-inactive@3x.png diff --git a/assets/images/supportUsShopBgBottomnRight.png b/assets/images/supportUsShopBgBottomRight.png similarity index 100% rename from assets/images/supportUsShopBgBottomnRight.png rename to assets/images/supportUsShopBgBottomRight.png diff --git a/package.json b/package.json index fdef3d33..b918e5df 100644 --- a/package.json +++ b/package.json @@ -106,9 +106,6 @@ "transformIgnorePatterns": [ "node_modules/(?!(jest-)?react-native|react-navigation)" ], - "moduleNameMapper": { - "\\.(png|gif|jpeg|jpg)$": "RelativeImageStub" - }, "collectCoverage": true }, "lint-staged": { diff --git a/src/components/__snapshots__/ButtonWithShapes.test.js.snap b/src/components/__snapshots__/ButtonWithShapes.test.js.snap index 81042199..32d97caf 100644 --- a/src/components/__snapshots__/ButtonWithShapes.test.js.snap +++ b/src/components/__snapshots__/ButtonWithShapes.test.js.snap @@ -74,7 +74,11 @@ exports[`picks different icon for external links 1`] = ` Fruit... `; @@ -76,7 +80,11 @@ exports[`renders correctly when checked 1`] = ` Bananas `; diff --git a/src/components/__snapshots__/Header.test.js.snap b/src/components/__snapshots__/Header.test.js.snap index 494568a1..eade4eec 100644 --- a/src/components/__snapshots__/Header.test.js.snap +++ b/src/components/__snapshots__/Header.test.js.snap @@ -310,6 +310,10 @@ exports[`Header.BackButton renders correctly with default props 1`] = ` `; diff --git a/src/screens/CategoriesFilterScreen/__snapshots__/ListItem.test.js.snap b/src/screens/CategoriesFilterScreen/__snapshots__/ListItem.test.js.snap index 79e7bab2..b7072289 100644 --- a/src/screens/CategoriesFilterScreen/__snapshots__/ListItem.test.js.snap +++ b/src/screens/CategoriesFilterScreen/__snapshots__/ListItem.test.js.snap @@ -44,7 +44,11 @@ exports[`ListItem Component renders correctly 1`] = ` /> milo@red-badger.com @@ -23,7 +27,11 @@ exports[`renders correctly 1`] = ` 1-800-555-WOOF @@ -48,7 +56,11 @@ exports[`renders correctly when only email is given 1`] = ` milo@red-badger.com @@ -73,7 +85,11 @@ exports[`renders correctly when only phone is given 1`] = ` 1-800-555-WOOF diff --git a/src/screens/EventDetailsScreen/__snapshots__/EventOverview.test.js.snap b/src/screens/EventDetailsScreen/__snapshots__/EventOverview.test.js.snap index 2eac12c2..c8a871b5 100644 --- a/src/screens/EventDetailsScreen/__snapshots__/EventOverview.test.js.snap +++ b/src/screens/EventDetailsScreen/__snapshots__/EventOverview.test.js.snap @@ -3,7 +3,11 @@ exports[`renders correctly 1`] = ` locationName @@ -72,7 +80,11 @@ exports[`renders correctly 1`] = ` `; diff --git a/src/screens/EventsScreen/__snapshots__/NoEvents.test.js.snap b/src/screens/EventsScreen/__snapshots__/NoEvents.test.js.snap index b3fd34be..304c40ad 100644 --- a/src/screens/EventsScreen/__snapshots__/NoEvents.test.js.snap +++ b/src/screens/EventsScreen/__snapshots__/NoEvents.test.js.snap @@ -12,7 +12,11 @@ exports[`renders correctly 1`] = ` } > @@ -90,7 +94,11 @@ exports[`renders correctly 1`] = ` key="Cabaret Stage" > @@ -117,7 +125,11 @@ exports[`renders correctly 1`] = ` key="Women's / Diva Stage" > @@ -144,7 +156,11 @@ exports[`renders correctly 1`] = ` key="Family Stage" > @@ -171,7 +187,11 @@ exports[`renders correctly 1`] = ` key="Community Village" > diff --git a/src/screens/ParadeMapScreen/AmenityMarkers.js b/src/screens/ParadeMapScreen/AmenityMarkers.js index d363572c..82d882a0 100644 --- a/src/screens/ParadeMapScreen/AmenityMarkers.js +++ b/src/screens/ParadeMapScreen/AmenityMarkers.js @@ -1,14 +1,19 @@ // @flow import React, { Fragment } from "react"; +import { StyleSheet } from "react-native"; import { Marker } from "react-native-maps"; import type { Amenity } from "../../data/amenity"; import type { Coordinates } from "../../constants/parade-coordinates"; import amenityIconFirstAid from "../../../assets/images/amenityIconFirstAid.png"; +import amenityIconFirstAidActive from "../../../assets/images/amenityIconFirstAidActive.png"; import amenityIconToilet from "../../../assets/images/amenityIconToilet.png"; +import amenityIconToiletActive from "../../../assets/images/amenityIconToiletActive.png"; type Props = { amenities: Amenity[], - markerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void + activeMarker: ?string, + onMarkerPress: (amenity: Amenity) => void, + onMarkerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void }; const iconMap = { @@ -16,27 +21,53 @@ const iconMap = { "First Aid": amenityIconFirstAid }; -const AmenityMarkers = ({ amenities, markerSelect }: Props) => { +const activeIconMap = { + Toilet: amenityIconToiletActive, + "First Aid": amenityIconFirstAidActive +}; + +const AmenityMarkers = ({ + amenities, + activeMarker, + onMarkerPress, + onMarkerSelect +}: Props) => { if (amenities.length === 0) { return null; } - return ( {amenities.map(amenity => ( onMarkerPress(amenity)} + onSelect={onMarkerSelect} /> ))} ); }; +const styles = StyleSheet.create({ + inactive: { + zIndex: 1 + }, + active: { + // React Native Maps adds a constant to the currently open callout, but if the stage marker is active we want to move it above this + // https://github.com/react-community/react-native-maps/blob/080678b24f886c3b8104206f2f80452ee723243a/lib/ios/AirMaps/AIRMapMarker.m#L316 + zIndex: 1001 + } +}); + export default AmenityMarkers; diff --git a/src/screens/ParadeMapScreen/AmenityMarkers.test.js b/src/screens/ParadeMapScreen/AmenityMarkers.test.js index 11b4db2f..94e55ae7 100644 --- a/src/screens/ParadeMapScreen/AmenityMarkers.test.js +++ b/src/screens/ParadeMapScreen/AmenityMarkers.test.js @@ -1,23 +1,69 @@ // @flow import React from "react"; import { shallow } from "enzyme"; +import { Marker } from "react-native-maps"; import AmenityMarkers from "./AmenityMarkers"; import { generateAmenity, sampleOne } from "../../data/__test-data"; -const amenity = sampleOne(generateAmenity, { seed: 5728 }); +const amenities = [ + sampleOne(generateAmenity, { seed: 5728 }), + sampleOne(generateAmenity, { seed: 1234 }), + sampleOne(generateAmenity, { seed: 4535 }) +]; describe("AmenityMarkers component", () => { it("renders correctly", () => { const output = shallow( - {}} /> + {}} + onMarkerSelect={() => {}} + activeMarker={undefined} + /> + ); + expect(output).toMatchSnapshot(); + }); + + it("renders active amenity correctly", () => { + const output = shallow( + {}} + onMarkerSelect={() => {}} + activeMarker={amenities[0].id} + /> ); expect(output).toMatchSnapshot(); }); it("renders nothing when no amenities provided", () => { const output = shallow( - {}} /> + {}} + onMarkerSelect={() => {}} + activeMarker={undefined} + /> ); expect(output.children().length).toBe(0); }); + + it("calls onMarkerPress function when pressed", () => { + const mockHandleMarkerPress = jest.fn(); + const output = shallow( + {}} + /> + ); + + output + .find(Marker) + .first() + .simulate("press"); + + expect(mockHandleMarkerPress).toHaveBeenCalled(); + }); }); diff --git a/src/screens/ParadeMapScreen/Map.js b/src/screens/ParadeMapScreen/Map.js index 6b1c1a78..45a04c5c 100644 --- a/src/screens/ParadeMapScreen/Map.js +++ b/src/screens/ParadeMapScreen/Map.js @@ -145,7 +145,11 @@ class Map extends PureComponent { ); }; - handleMarkerPress = (stage: Event) => { + handleAmenityPress = (amenity: Amenity) => { + this.setState({ tileDetails: null, activeMarker: amenity.id }); + }; + + handleStagePress = (stage: Event) => { this.setState({ tileDetails: stage, activeMarker: stage.id }); }; @@ -216,19 +220,20 @@ class Map extends PureComponent { /> - + diff --git a/src/screens/ParadeMapScreen/Map.test.js b/src/screens/ParadeMapScreen/Map.test.js index 1103e110..6b1b2335 100644 --- a/src/screens/ParadeMapScreen/Map.test.js +++ b/src/screens/ParadeMapScreen/Map.test.js @@ -165,27 +165,41 @@ describe("moveToCurrentLocation", () => { }); }); -describe("handleMarkerPress", () => { - it("updates state with stage marker details", () => { +describe("dismissEventTile", () => { + it("updates state clearing stage marker details", () => { + const output = render(regionProps); + const { dismissEventTile } = output.instance(); + dismissEventTile(); + expect(output.state().tileDetails).toEqual(null); + expect(output.state().activeMarker).toEqual(null); + }); +}); + +describe("handleAmenityPress", () => { + it("updates state with amenity marker details", () => { const output = render(regionProps); const animateToCoordinate = jest.fn(); output.instance().mapViewRef.current = { animateToCoordinate }; - const handleMarkerPressSpy = output.instance().handleMarkerPress; - handleMarkerPressSpy(stage); - expect(output.state().tileDetails).toEqual(stage); - expect(output.state().activeMarker).toEqual(stage.id); + const { handleAmenityPress } = output.instance(); + handleAmenityPress(amenity); + expect(output.state().tileDetails).toEqual(null); + expect(output.state().activeMarker).toEqual(amenity.id); jest.clearAllMocks(); }); }); -describe("dismissEventTile", () => { - it("updates state clearing stage marker details", () => { +describe("handleStagePress", () => { + it("updates state with stage marker details", () => { const output = render(regionProps); - const dismissEventTileSpy = output.instance().dismissEventTile; - dismissEventTileSpy(); - expect(output.state().tileDetails).toEqual(null); - expect(output.state().activeMarker).toEqual(null); + const animateToCoordinate = jest.fn(); + + output.instance().mapViewRef.current = { animateToCoordinate }; + const { handleStagePress } = output.instance(); + handleStagePress(stage); + expect(output.state().tileDetails).toEqual(stage); + expect(output.state().activeMarker).toEqual(stage.id); + jest.clearAllMocks(); }); }); @@ -195,8 +209,8 @@ describe("handleIOSMarkerSelect", () => { const animateToCoordinate = jest.fn(); output.instance().mapViewRef.current = { animateToCoordinate }; - const handleIOSMarkerSelectSpy = output.instance().handleIOSMarkerSelect; - handleIOSMarkerSelectSpy({ + const { handleIOSMarkerSelect } = output.instance(); + handleIOSMarkerSelect({ nativeEvent: { coordinate: { latitude: stage.fields.location.lat, diff --git a/src/screens/ParadeMapScreen/StageMarkers.js b/src/screens/ParadeMapScreen/StageMarkers.js index a98e96b4..80da55dd 100644 --- a/src/screens/ParadeMapScreen/StageMarkers.js +++ b/src/screens/ParadeMapScreen/StageMarkers.js @@ -11,14 +11,14 @@ import stageIconInactive from "../../../assets/images/stageIconInactive.png"; type Props = { stages: Event[], activeMarker: ?string, - handleMarkerPress: (stage: Event) => void, - markerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void + onMarkerPress: (stage: Event) => void, + onMarkerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void }; const StageMarkers = ({ stages, - handleMarkerPress, - markerSelect, + onMarkerPress, + onMarkerSelect, activeMarker }: Props) => { if (stages.length === 0) { @@ -36,17 +36,13 @@ const StageMarkers = ({ latitude: stage.fields.location.lat }} key={stage.id} - onPress={() => handleMarkerPress(stage)} stopPropagation image={ activeMarker === stage.id ? stageIconActive : stageIconInactive } - onSelect={markerSelect} - style={ - activeMarker === stage.id - ? styles.stageMarkerActiveStyle - : styles.stageMarkerInactiveStyle - } + onPress={() => onMarkerPress(stage)} + onSelect={onMarkerSelect} + style={activeMarker === stage.id ? styles.active : styles.inactive} /> ))} @@ -54,10 +50,10 @@ const StageMarkers = ({ }; const styles = StyleSheet.create({ - stageMarkerInactiveStyle: { + inactive: { zIndex: 1 }, - stageMarkerActiveStyle: { + active: { // React Native Maps adds a constant to the currently open callout, but if the stage marker is active we want to move it above this // https://github.com/react-community/react-native-maps/blob/080678b24f886c3b8104206f2f80452ee723243a/lib/ios/AirMaps/AIRMapMarker.m#L316 zIndex: 1001 diff --git a/src/screens/ParadeMapScreen/StageMarkers.test.js b/src/screens/ParadeMapScreen/StageMarkers.test.js index e146a31c..86efe669 100644 --- a/src/screens/ParadeMapScreen/StageMarkers.test.js +++ b/src/screens/ParadeMapScreen/StageMarkers.test.js @@ -1,9 +1,10 @@ // @flow import React from "react"; import { shallow } from "enzyme"; +import { Marker } from "react-native-maps"; +import type { Event } from "../../data/event"; import StageMarkers from "./StageMarkers"; import { generateEvent, sampleOne } from "../../data/__test-data"; -import type { Event } from "../../data/event"; const stage = sampleOne(generateEvent, { seed: 5728 }); @@ -13,9 +14,9 @@ describe("AmenityMarkers component", () => { {}} + onMarkerPress={(_: Event) => {}} activeMarker={null} - markerSelect={() => {}} + onMarkerSelect={() => {}} /> ); expect(output).toMatchSnapshot(); @@ -26,9 +27,9 @@ describe("AmenityMarkers component", () => { {}} + onMarkerPress={(_: Event) => {}} activeMarker={stage.id} - markerSelect={() => {}} + onMarkerSelect={() => {}} /> ); expect(output).toMatchSnapshot(); @@ -39,9 +40,9 @@ describe("AmenityMarkers component", () => { {}} + onMarkerPress={(_: Event) => {}} activeMarker={null} - markerSelect={() => {}} + onMarkerSelect={() => {}} /> ); expect(output.children().length).toBe(0); @@ -57,27 +58,27 @@ describe("AmenityMarkers component", () => { {}} + onMarkerPress={(_: Event) => {}} activeMarker={null} - markerSelect={() => {}} + onMarkerSelect={() => {}} /> ); expect(output.find("MapMarker").length).toBe(1); }); - it("calls callback function when pressed", () => { + it("calls onMarkerPress function when pressed", () => { const mockHandleMarkerPress = jest.fn(); const output = shallow( {}} + onMarkerPress={mockHandleMarkerPress} + onMarkerSelect={() => {}} /> ); - output.find("MapMarker").simulate("press"); + output.find(Marker).simulate("press"); expect(mockHandleMarkerPress).toHaveBeenCalled(); }); diff --git a/src/screens/ParadeMapScreen/TerminalMarkers.js b/src/screens/ParadeMapScreen/TerminalMarkers.js index d05cb595..977abac3 100644 --- a/src/screens/ParadeMapScreen/TerminalMarkers.js +++ b/src/screens/ParadeMapScreen/TerminalMarkers.js @@ -11,10 +11,15 @@ import type { type Props = { terminals: Terminals[], - markerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void + onMarkerPress: () => void, + onMarkerSelect: (event: { nativeEvent: { coordinate: Coordinates } }) => void }; -const TerminalMarkers = ({ terminals, markerSelect }: Props) => { +const TerminalMarkers = ({ + terminals, + onMarkerPress, + onMarkerSelect +}: Props) => { if (terminals.length === 0) { return null; } @@ -27,7 +32,8 @@ const TerminalMarkers = ({ terminals, markerSelect }: Props) => { key={terminal.key} centerOffset={{ x: 0, y: -15 }} stopPropagation - onSelect={markerSelect} + onPress={onMarkerPress} + onSelect={onMarkerSelect} > diff --git a/src/screens/ParadeMapScreen/TerminalMarkers.test.js b/src/screens/ParadeMapScreen/TerminalMarkers.test.js index 08dfb9b0..c98baa59 100644 --- a/src/screens/ParadeMapScreen/TerminalMarkers.test.js +++ b/src/screens/ParadeMapScreen/TerminalMarkers.test.js @@ -1,21 +1,48 @@ // @flow import React from "react"; import { shallow } from "enzyme"; +import { Marker } from "react-native-maps"; import TerminalMarkers from "./TerminalMarkers"; import { terminals } from "../../constants/parade-coordinates"; describe("TerminalMarkers component", () => { it("renders correctly", () => { const output = shallow( - {}} /> + {}} + onMarkerSelect={() => {}} + /> ); expect(output).toMatchSnapshot(); }); it("renders nothing when no terminals provided", () => { const output = shallow( - {}} /> + {}} + onMarkerSelect={() => {}} + /> ); expect(output.children().length).toBe(0); }); + + it("calls onMarkerPress function when pressed", () => { + const mockHandleMarkerPress = jest.fn(); + const output = shallow( + {}} + /> + ); + + output + .find(Marker) + .first() + .simulate("press"); + + expect(mockHandleMarkerPress).toHaveBeenCalled(); + }); }); diff --git a/src/screens/ParadeMapScreen/__snapshots__/AmenityMarkers.test.js.snap b/src/screens/ParadeMapScreen/__snapshots__/AmenityMarkers.test.js.snap index bc8ed746..cc5c7ab3 100644 --- a/src/screens/ParadeMapScreen/__snapshots__/AmenityMarkers.test.js.snap +++ b/src/screens/ParadeMapScreen/__snapshots__/AmenityMarkers.test.js.snap @@ -1,5 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`AmenityMarkers component renders active amenity correctly 1`] = ` + + + + + +`; + exports[`AmenityMarkers component renders correctly 1`] = ` + + `; diff --git a/src/screens/ParadeMapScreen/__snapshots__/Map.test.js.snap b/src/screens/ParadeMapScreen/__snapshots__/Map.test.js.snap index b2e4e911..746a2294 100644 --- a/src/screens/ParadeMapScreen/__snapshots__/Map.test.js.snap +++ b/src/screens/ParadeMapScreen/__snapshots__/Map.test.js.snap @@ -545,8 +545,8 @@ exports[`Map component renders correctly 1`] = ` strokeWidth={5} /> - + - + `; diff --git a/src/screens/ParadeMapScreen/__snapshots__/StageMarkers.test.js.snap b/src/screens/ParadeMapScreen/__snapshots__/StageMarkers.test.js.snap index 9e74a3a5..c478f4ce 100644 --- a/src/screens/ParadeMapScreen/__snapshots__/StageMarkers.test.js.snap +++ b/src/screens/ParadeMapScreen/__snapshots__/StageMarkers.test.js.snap @@ -9,7 +9,11 @@ exports[`AmenityMarkers component renders correctly 1`] = ` "longitude": 10, } } - image={1} + image={ + Object { + "testUri": "../../../assets/images/stageIconInactive.png", + } + } key="QF4dTqmpn9z5ItEizAZ" onPress={[Function]} onSelect={[Function]} @@ -32,7 +36,11 @@ exports[`AmenityMarkers component renders correctly when it's the currently sele "longitude": 10, } } - image={1} + image={ + Object { + "testUri": "../../../assets/images/stageIconActive.png", + } + } key="QF4dTqmpn9z5ItEizAZ" onPress={[Function]} onSelect={[Function]} diff --git a/src/screens/ParadeMapScreen/__snapshots__/TerminalMarkers.test.js.snap b/src/screens/ParadeMapScreen/__snapshots__/TerminalMarkers.test.js.snap index 20890e06..7e81f930 100644 --- a/src/screens/ParadeMapScreen/__snapshots__/TerminalMarkers.test.js.snap +++ b/src/screens/ParadeMapScreen/__snapshots__/TerminalMarkers.test.js.snap @@ -16,6 +16,7 @@ exports[`TerminalMarkers component renders correctly 1`] = ` } } key="start" + onPress={[Function]} onSelect={[Function]} stopPropagation={true} > @@ -87,6 +88,7 @@ exports[`TerminalMarkers component renders correctly 1`] = ` } } key="finish" + onPress={[Function]} onSelect={[Function]} stopPropagation={true} > diff --git a/src/screens/SavedEventListScreen/__snapshots__/NoSavedEvents.test.js.snap b/src/screens/SavedEventListScreen/__snapshots__/NoSavedEvents.test.js.snap index 3be565e9..2af23b10 100644 --- a/src/screens/SavedEventListScreen/__snapshots__/NoSavedEvents.test.js.snap +++ b/src/screens/SavedEventListScreen/__snapshots__/NoSavedEvents.test.js.snap @@ -15,7 +15,11 @@ exports[`renders correctly 1`] = ` spacing={12} > @@ -39,8 +43,16 @@ exports[`renders correctly 1`] = ` } > @@ -102,7 +126,11 @@ exports[`renders correctly 1`] = ` } >