[Tests] Update tests and comments

VictorCazanave · Apr 13, 2019 · 3ff1c35 · 3ff1c35
1 parent b3457fa
commit 3ff1c35
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 47 deletions.
diff --git a/__tests__/__snapshots__/svg-map.test.js.snap b/__tests__/__snapshots__/svg-map.test.js.snap
@@ -2248,7 +2248,52 @@ exports[`SVGMap component Maps displays map of Utah 1`] = `
 </svg>
 `;
 
-exports[`SVGMap component Properties displays heat map with custom location css 1`] = `
+exports[`SVGMap component Properties displays map with custom function location props 1`] = `
+<svg
+  aria-label="label"
+  className="svg-map"
+  role="none"
+  viewBox="viewBox"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    aria-checked={undefined}
+    aria-label="name0"
+    className="locationClassName-0"
+    d="path0"
+    id="id0"
+    name="name0"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="locationTabIndex-0"
+  />
+  <path
+    aria-checked={undefined}
+    aria-label="name1"
+    className="locationClassName-1"
+    d="path1"
+    id="id1"
+    name="name1"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="locationTabIndex-1"
+  />
+</svg>
+`;
+
+exports[`SVGMap component Properties displays map with custom props 1`] = `
 <svg
   aria-label="label"
   className="className"
@@ -2258,11 +2303,11 @@ exports[`SVGMap component Properties displays heat map with custom location css
 >
   <path
     aria-checked="isLocationSelected"
-    aria-label="name"
-    className="svg-map__location heat0"
-    d="path"
-    id="id"
-    name="name"
+    aria-label="name0"
+    className="locationClassName"
+    d="path0"
+    id="id0"
+    name="name0"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -2273,24 +2318,13 @@ exports[`SVGMap component Properties displays heat map with custom location css
     role="locationRole"
     tabIndex="locationTabIndex"
   />
-</svg>
-`;
-
-exports[`SVGMap component Properties displays map with custom props 1`] = `
-<svg
-  aria-label="label"
-  className="className"
-  role="role"
-  viewBox="viewBox"
-  xmlns="http://www.w3.org/2000/svg"
->
   <path
     aria-checked="isLocationSelected"
-    aria-label="name"
+    aria-label="name1"
     className="locationClassName"
-    d="path"
-    id="id"
-    name="name"
+    d="path1"
+    id="id1"
+    name="name1"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
@@ -2314,11 +2348,28 @@ exports[`SVGMap component Properties displays map with default props 1`] = `
 >
   <path
     aria-checked={undefined}
-    aria-label="name"
+    aria-label="name0"
     className="svg-map__location"
-    d="path"
-    id="id"
-    name="name"
+    d="path0"
+    id="id0"
+    name="name0"
+    onBlur={undefined}
+    onClick={undefined}
+    onFocus={undefined}
+    onKeyDown={undefined}
+    onMouseMove={undefined}
+    onMouseOut={undefined}
+    onMouseOver={undefined}
+    role="none"
+    tabIndex="0"
+  />
+  <path
+    aria-checked={undefined}
+    aria-label="name1"
+    className="svg-map__location"
+    d="path1"
+    id="id1"
+    name="name1"
     onBlur={undefined}
     onClick={undefined}
     onFocus={undefined}

diff --git a/__tests__/checkbox-svg-map.test.js b/__tests__/checkbox-svg-map.test.js
@@ -11,6 +11,7 @@ describe('CheckboxSVGMap component', () => {
 	let location = null;
 
 	beforeEach(() => {
+		// TODO: Use fake map to simplify tests?
 		wrapper = mount(<CheckboxSVGMap map={Australia} onChange={handleOnChange} />);
 		location = wrapper.find(locationSelector);
 	});

diff --git a/__tests__/radio-svg-map.test.js b/__tests__/radio-svg-map.test.js
@@ -21,6 +21,7 @@ describe('RadioSVGMap component', () => {
 	let nextLocation = null;
 
 	beforeEach(() => {
+		// TODO: Use fake map to simplify tests?
 		wrapper = mount(<RadioSVGMap map={Australia} onChange={handleOnChange} />);
 		location = wrapper.find(locationSelector);
 		previousLocation = wrapper.find(previousLocationSelector);
@@ -84,7 +85,6 @@ describe('RadioSVGMap component', () => {
 		});
 	});
 
-	// TODO: Add tests for first/last location and right/left arrow
 	describe('Keyboard navigation', () => {
 		test('selects focused unselected location when hitting spacebar', () => {
 			expect(location.props()['aria-checked']).toBeFalsy();

diff --git a/__tests__/svg-map.test.js b/__tests__/svg-map.test.js
@@ -8,9 +8,14 @@ describe('SVGMap component', () => {
 			label: 'label',
 			viewBox: 'viewBox',
 			locations: [{
-				name: 'name',
-				id: 'id',
-				path: 'path'
+				name: 'name0',
+				id: 'id0',
+				path: 'path0'
+			},
+			{
+				name: 'name1',
+				id: 'id1',
+				path: 'path1'
 			}]
 		};
 
@@ -46,25 +51,13 @@ describe('SVGMap component', () => {
 			expect(tree).toMatchSnapshot();
 		});
 
-		test('displays heat map with custom location css', () => {
-			const eventHandler = () => 'eventHandler';
-			const isLocationSelected = () => 'isLocationSelected';
-			const generateHeat = () => 'svg-map__location heat0';
+		test('displays map with custom function location props', () => {
+			const locationClassName = (location, index) => `locationClassName-${index}`;
+			const locationTabIndex = (location, index) => `locationTabIndex-${index}`;
 			const component = renderer.create(
 				<SVGMap map={map}
-					className="className"
-					role="role"
-					locationTabIndex="locationTabIndex"
-					locationRole="locationRole"
-					onLocationMouseOver={eventHandler}
-					onLocationMouseOut={eventHandler}
-					onLocationMouseMove={eventHandler}
-					onLocationClick={eventHandler}
-					onLocationKeyDown={eventHandler}
-					onLocationFocus={eventHandler}
-					onLocationBlur={eventHandler}
-					isLocationSelected={isLocationSelected}
-					locationClassName={generateHeat}
+					locationClassName={locationClassName}
+					locationTabIndex={locationTabIndex}
 				/>
 			);
 			const tree = component.toJSON();
@@ -73,7 +66,6 @@ describe('SVGMap component', () => {
 		});
 	});
 
-
 	describe('Maps', () => {
 		test('displays map of Australia', () => {
 			const component = renderer.create(<SVGMap map={Australia} />);