diff --git a/src/App.tsx b/src/App.tsx
index 840f93e..111848e 100644
--- 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 (
-
+
)
}
+
+ private handleOnBegin = () => {
+ debug('handleOnBegin')
+ }
}
diff --git a/src/__tests__/App.test.tsx b/src/__tests__/App.test.tsx
index 13c644d..ffeb70d 100644
--- 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('', () => {
it('has the happy path', () => {
const app = shallow()
- expect(app).toIncludeText('Welcome to the Trivia Challenge!')
+ expect(app.find(WelcomePage)).toExist()
})
})
diff --git a/src/index.html b/src/index.html
index 9b27f1f..dc919a6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,8 @@
Trivia Game
-
-
+
+
+
diff --git a/src/pages/WelcomePage.tsx b/src/pages/WelcomePage.tsx
new file mode 100644
index 0000000..7494b71
--- /dev/null
+++ 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) => (
+
+
Welcome to the Trivia Challenge!
+
+
+ You will be presented with {numQuestions} True or False questions.
+
+
+
+ Can you score 100%?
+
+
+
+
+
+
+)
diff --git a/src/pages/__tests__/WelcomePage.test.tsx b/src/pages/__tests__/WelcomePage.test.tsx
new file mode 100644
index 0000000..7e39507
--- /dev/null
+++ 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('', () => {
+ let onBeginMock: OnBegin
+
+ beforeEach(() => {
+ onBeginMock = jest.fn()
+ })
+
+ it('renders the number of questions', () => {
+ const numQuestions = 1234567
+ const page = shallow(
+
+ )
+ expect(page).toIncludeText(String(numQuestions))
+ })
+
+ it('handles the button click', () => {
+ const page = mount(
+
+ )
+ page.find('button').simulate('click')
+ expect(onBeginMock).toHaveBeenCalled()
+ })
+})
diff --git a/tsconfig.json b/tsconfig.json
index d034f97..21f5d71 100644
--- 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": [
+ ]
}