feat: ScoreResult component

components/Question.test.js

@@ -5,6 +5,6 @@ import Question from './Question'
 describe('#Question', () => {
   it('should render a question component using ReactMarkdown', () => {
     const wrapper = shallow(<Question question="2 + 2 ?" />)
-    expect(wrapper.find('Markdown').prop('source')).toEqual('2 + 2 ?')
+    expect(wrapper.find('Markdown').prop('source')).toBe('2 + 2 ?')
   })
 })

components/ScoreResult.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ScoreResult = ({ totalScore, userScore }) => (
+  <p>{`Vous avez obtenu ${userScore}/${totalScore} au quiz React.`}</p>
+)
+
+ScoreResult.propTypes = {
+  totalScore: PropTypes.number,
+  userScore: PropTypes.number,
+}
+
+export default ScoreResult

components/ScoreResult.test.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import ScoreResult from './ScoreResult'
+
+describe('ScoreResult', () => {
+  it('should render the ScoreResult component', () => {
+    const wrapper = shallow(<ScoreResult totalScore={20} userScore={12} />)
+    expect(wrapper.text()).toEqual('Vous avez obtenu 12/20 au quiz React.')
+  })
+})

stories/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import ProgressBar from '../components/ProgressBar'
 import Timer from '../components/Timer'
+import ScoreResult from '../components/ScoreResult'
 
 storiesOf('ProgressBar', module)
   .add('0/20', () => <ProgressBar currentQuestion={0} />)
@@ -13,4 +14,8 @@ storiesOf('ProgressBar', module)
   .add('Without ScoreBox', () => <ProgressBar scoreBox={false} />)
   .add('Red', () => <ProgressBar color="#BD4932" />)
 
-storiesOf('Timer', module).add('Basic', () => <Timer countdown={15} />)
+storiesOf('Timer', module).add('Basic Timer', () => <Timer countdown={15} />)
+
+storiesOf('ScoreResult', module).add('12/20 Final Score', () => (
+  <ScoreResult totalScore={20} userScore={12} />
+))