✏️ Planet Names

cypress/integration/Planets-spec.js

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-import { setMockState } from '../fixtures/default'
+import { setMockState, mockState } from '../fixtures/default'
 
 describe('Planets', () => {
   beforeEach(() => {
@@ -10,8 +10,20 @@ describe('Planets', () => {
   })
 
   it('Should display planets.', () => {
-    cy.get('body').contains('Planet 1')
-    cy.get('body').contains('Planet 2')
-    cy.get('body').contains('Planet 3')
+    cy.get('body').contains(mockState.world.planets[0].name)
+    cy.get('body').contains(mockState.world.planets[1].name)
+    cy.get('body').contains(mockState.world.planets[2].name)
+  })
+
+  // * Update this in the future
+  it('Should display an alert when clicking a planet.', () => {
+    const stub = cy.stub()
+    cy.on('window:alert', stub)
+    cy.get('body')
+      .contains(mockState.world.planets[0].name)
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith('Clicked!')
+      })
   })
 })

src/components/Map.js

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react'
+import PropTypes from 'prop-types'
 import { Paper } from '@material-ui/core'
 import * as d3 from 'd3'
+import { connect } from 'react-redux'
 
 const radius = 23
 const fill = '#1976d2'
@@ -75,17 +77,17 @@ const addEventsToNodes = svg => {
   })
 }
 
-const Map = () => {
+const Map = ({ planets }) => {
   const drawChart = () => {
     const height = d3.select('#map-root').property('clientHeight')
     const width = d3.select('#map-root').property('clientWidth')
 
     const svg = createSvg('#map-root', height, width)
 
     const nodes_data = [
-      { name: 'Planet 1' },
-      { name: 'Planet 2' },
-      { name: 'Planet 3' }
+      { name: planets[0].name },
+      { name: planets[1].name },
+      { name: planets[2].name }
     ]
 
     const simulation = createSimulation(nodes_data)
@@ -118,8 +120,8 @@ const Map = () => {
 
     //Create links data
     const links_data = [
-      { source: 'Planet 1', target: 'Planet 2', distance: 5 },
-      { source: 'Planet 2', target: 'Planet 3', distance: 10 }
+      { source: planets[0].name, target: planets[1].name, distance: 5 },
+      { source: planets[1].name, target: planets[2].name, distance: 10 }
     ]
 
     //Create the link force
@@ -151,9 +153,16 @@ const Map = () => {
 
   useEffect(() => {
     drawChart()
+    // eslint-disable-next-line
   }, [])
 
   return <Paper id="map-root" style={{ height: 'calc(100vh - 50px)' }} />
 }
 
-export default Map
+Map.propTypes = {
+  planets: PropTypes.array.isRequired
+}
+
+const mapStateToProps = ({ world }) => ({ planets: world.planets })
+
+export default connect(mapStateToProps)(Map)