Time tracking app on React, try demo.

The app is inspired by toggl.com.

Web application based on React (clientside) and Firebase (serverside)

• Clientside UI libraries: material ui, flexboxgrid layout, formsy form validation, chartjs chart
• State management: redux, redux thunk, reselect
• Unit test: jest + enzyme

Authentication

• Signup using email/password

Time entry

• Can add time entry
• Can track time spent on time entry and stop a time entry tracking
• Can list time entries
• Delete time entry
• Report

Tag

• Add tag to time entry
• CRUD tag

Try demo at https://vivid-trace.firebaseapp.com/ and storybook

Simulate onClick event in shallow (github)

const componentWrapper = shallow(<Component />)
componentWrapper.simulate('click', { preventDefault() {} })

Simulate change event in material-ui's TextField (github)

const input = wrapper.find('input[name="text"]')
input.node.value = "newvalue"
input.simulate('change', input)

Enable guide

Click on button in a Table's Row without select that row (github)

Doesn't support responsive (github)

Use storyshots to enable unit test. Need install story book addon packages and babel preset

Add .babelrc to project's root directory

{
  "presets": ["babel-preset-es2015", "react-app"]
}

Install packages

npm install storyshots @kadira/storybook-addons @kadira/storybook-channel --save-dev
npm install babel-core babel-preset-es2015 babel-preset-react-app --save-dev

Add src/__tests__/Storyshots.test.js:

import initStoryshots from 'storyshots'
initStoryshots()

Explicitly add material ui component id so Jest snapshot test doesn't get failed because of auto generated id

Run npm test