Added WelcomePage

tomazy · Aug 27, 2018 · e1245ae · e1245ae
1 parent 136c546
commit e1245ae
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 6 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,14 @@ export class App extends React.Component {
   public render() {
     debug('render', this.state)
     return (
-      <WelcomePage numQuestions={10} />
+      <WelcomePage
+        numQuestions={10}
+        onBegin={this.handleOnBegin}
+      />
     )
   }
+
+  private handleOnBegin = () => {
+    debug('handleOnBegin')
+  }
 }
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
@@ -3,10 +3,11 @@ import 'jest-enzyme'
 import * as React from 'react'
 
 import { App } from '../App'
+import { WelcomePage } from '../pages/WelcomePage'
 
 describe('<App />', () => {
   it('has the happy path', () => {
     const app = shallow(<App />)
-    expect(app).toIncludeText('Welcome to the Trivia Challenge!')
+    expect(app.find(WelcomePage)).toExist()
   })
 })
diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,8 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Trivia Game</title>
 </head>
-<body class="near-black bg-pink sans-serif">
-  <div id="app"></div>
+<body class="near-black sans-serif">
+  <div id="app" class="mw6 center tc">
+  </div>
 </body>
 </html>
diff --git a/src/pages/WelcomePage.tsx b/src/pages/WelcomePage.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+export type OnBegin = () => void
+
+interface Props {
+  numQuestions: number
+  onBegin: OnBegin
+}
+
+export const WelcomePage = ({ numQuestions, onBegin }: Props) => (
+  <div>
+    <h1>Welcome to the Trivia Challenge!</h1>
+
+    <p>
+      You will be presented with {numQuestions} <strong>True</strong> or <strong>False</strong> questions.
+    </p>
+
+    <p>
+      Can you score 100%?
+    </p>
+
+    <div>
+      <button onClick={() => onBegin()}>Begin</button>
+    </div>
+  </div>
+)
diff --git a/src/pages/__tests__/WelcomePage.test.tsx b/src/pages/__tests__/WelcomePage.test.tsx
@@ -0,0 +1,35 @@
+import { mount, shallow } from 'enzyme'
+import 'jest-enzyme'
+import * as React from 'react'
+
+import { OnBegin, WelcomePage } from '../../pages/WelcomePage'
+
+describe('<WelcomePage />', () => {
+  let onBeginMock: OnBegin
+
+  beforeEach(() => {
+    onBeginMock = jest.fn()
+  })
+
+  it('renders the number of questions', () => {
+    const numQuestions = 1234567
+    const page = shallow(
+      <WelcomePage
+        numQuestions={numQuestions}
+        onBegin={onBeginMock}
+      />
+    )
+    expect(page).toIncludeText(String(numQuestions))
+  })
+
+  it('handles the button click', () => {
+    const page = mount(
+      <WelcomePage
+        numQuestions={5}
+        onBegin={onBeginMock}
+      />
+    )
+    page.find('button').simulate('click')
+    expect(onBeginMock).toHaveBeenCalled()
+  })
+})
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,7 +9,7 @@
     "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    "sourceMap": true,                        /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
@@ -55,5 +55,11 @@
     /* Experimental Options */
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-  }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+  ],
+  "exclude": [
+  ]
 }