7guis - Flight Booker (ReactJS + Mocha)

Flight Booker exercise

from the 7guis wiki

Challenges: working with constraints

The task is to build a frame containing a combobox C with the two options “one-way flight” and “return flight”, two textfields T₁ and T₂ representing the start and return date, respectively, and a button B for “submitting” the selected flight. T₂ is enabled iff C's value is “return flight”. When C has the value “return flight” and T₂'s date is strictly before T₁'s then B is disabled. When a non-disabled textfield T has an ill-formatted date then T is colored red and B is disabled. When clicking B a message is displayed informing the user of his selection (e.g. “You have booked a one-way flight on 04.04.2014.”). Initially, C has the value “one-way flight” and T₁ as well as T₂ have the same (arbitrary) date (it is implied that T₂ is disabled).

The focus of Flight Booker lies on modelling constraints between widgets on the one hand and modelling constraints within a widget on the other hand. Such constraints are very common in everyday interactions with GUI applications. A good solution for Flight Booker will make the constraints clear, succinct and explicit in the source code and not hidden behind a lot of scaffolding.

Flight Booker is directly inspired by the Flight Booking Java example in Sodium with the simplification of having textfields for date input instead of specialized date picking widgets as the focus of Flight Booker is not on specialized/custom widgets.

Install

Make sure you have node and npm installed, then run:

npm install

to install all dependencies.

Run

You can build the project:

npm run build

which will generate the dist/bundle.js file, or run the development server:

npm run serve

which will create a server listening on localhost port 8080

Tests

You can run tests once:

npm test

or watch for all js, jsx file changes:

npm test:watch