refactor code for testing

Author: javadoug

package.json

@@ -16,7 +16,8 @@
     "prettier": "prettier --write {src,public}/**/*.{js,css}"
   },
   "devDependencies": {
-    "prettier": "^1.14.2"
+    "prettier": "^1.14.2",
+    "react-test-renderer": "^16.4.2"
   },
   "prettier": {
     "semi": false,

src/App.js

@@ -1,23 +1,21 @@
-import React, { Component } from 'react'
+import React from 'react'
 import logo from './logo.svg'
+import {SelectDateRange} from './SelectDateRange'
 import './App.css'
-import DateRangePicker from './DateRangePicker'
 
-class App extends Component {
-	render() {
-		return (
-			<div className="App">
-				<header className="App-header">
-					<img src={logo} className="App-logo" alt="logo" />
-					<h1 className="App-title">Welcome to React</h1>
-				</header>
-				<p className="App-intro">
-					To get started, edit <code>src/App.js</code> and save to reload.
-				</p>
-				<DateRangePicker />
-			</div>
-		)
-	}
+function App({onDateSelected}) {
+	return (
+		<div className="App">
+			<header className="App-header">
+				<img src={logo} className="App-logo" alt="logo"/>
+				<h1 className="App-title">Welcome to React</h1>
+			</header>
+			<p className="App-intro">
+				To get started, edit <code>src/App.js</code> and save to reload.
+			</p>
+			<SelectDateRange onDateSelected={onDateSelected}/>
+		</div>
+	)
 }
 
 export default App

src/App.test.js

@@ -4,7 +4,9 @@ import ReactDOM from 'react-dom'
 import App from './App'
 
 it('renders without crashing', () => {
+	expect.assertions(1)
 	const div = document.createElement('div')
 	ReactDOM.render(<App />, div)
 	ReactDOM.unmountComponentAtNode(div)
+	expect(div).toBeDefined()
 })

src/DateRangePicker.js

@@ -1,12 +1,12 @@
-.DateRangePicker {
+.SelectDateRange {
 	max-width: 350px;
 }
 
-.DateRangePicker .week {
+.SelectDateRange .week {
 	display: flex;
 }
 
-.DateRangePicker .day {
+.SelectDateRange .day {
 	flex: 0 0 auto;
 	min-width: 50px;
 	background-color: aliceblue;
@@ -16,16 +16,16 @@
 	cursor: pointer;
 }
 
-.DateRangePicker .--out-of-start-month {
+.SelectDateRange .--is-not-in-start-month {
 	background-color: #f5f5f5;
 	color: #aaaaaa;
 }
 
-.DateRangePicker .--is-today {
+.SelectDateRange .--is-today {
 	background-color: #cad8d6;
 	color: #940d16;
 }
 
-.DateRangePicker .--is-selected-date {
+.SelectDateRange .--is-selected-date {
 	border: 1px solid darkred;
 }