From e1245ae5a3fa6d7c284a807f516b4cb2cc760558 Mon Sep 17 00:00:00 2001 From: tomazy Date: Sun, 26 Aug 2018 21:59:09 -0400 Subject: [PATCH] Added WelcomePage --- src/App.tsx | 9 +++++- src/__tests__/App.test.tsx | 3 +- src/index.html | 5 ++-- src/pages/WelcomePage.tsx | 26 ++++++++++++++++++ src/pages/__tests__/WelcomePage.test.tsx | 35 ++++++++++++++++++++++++ tsconfig.json | 10 +++++-- 6 files changed, 82 insertions(+), 6 deletions(-) create mode 100644 src/pages/WelcomePage.tsx create mode 100644 src/pages/__tests__/WelcomePage.test.tsx 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": [ + ] }