bkbooth/blake-js-test

A tech test built using angular-cli

Blake JS Test

This repository is a tech test, it was built using angular-cli. I've included some thoughts & notes, and the original instructions are included below.

Dependencies

This should run anywhere that can run Node.js. You'll need Node >= 4 and npm >= 3. I've used Yarn and recommend that you install and use it instead of npm.

$ npm install -g yarn

Installation & Usage

Clone this repository and then install all of the required dependencies.

$ git clone https://[email protected]/bkbooth/blake-js-test.git
$ cd blake-js-test
$ yarn

Build the app and start a HTTP server with yarn start, then open localhost:4200 in your browser.

Alternatively, you can run yarn build to build a static copy of the app into the dist/ directory, then use an HTTP server (eg. http-server) to serve the contents of the dist/ directory.

Testing Instructions

Run all of the tests with yarn test. This will build the app for testing and start the test runner.

You can run tests with coverage via --code-coverage. The coverage report will be in the coverage/ directory.

Thoughts & Notes

Angular wouldn't necessarily be my first choice for building a web app, but it's what I'm using every day at work at the moment so I'm most familiar with it. I'm not particularly fond of TypeScript, but I prefer to embrace the established coding styles and best practices of the language or framework that I'm using.

Despite using Angular regularly, I had very limited knowledge and experience with testing it. I decided to take this opportunity to learn and gain some experience, this ended up being more time consuming than I'd hoped but overall I've found it to be very worthwhile. The testing here isn't comprehensive, but I've tried to setup a number of different tests as examples of how I'd test different aspects of an app.

There are branches for step1, step2, step3 and step4 that show my progress working through solving the problem as defined in the original instructions. Unfortunately these branches have no tests setup (other than those generated by angular-cli, but they will almost certainly be failing) and only a basic layout with no styling.

This is a rough list of things I'd hoped to do, but don't think would have been worth while spending too much more time on:

• More thorough testing. I'm happy with the tests I've provided because I think there's enough examples of different tests, but I'd ideally like to setup a full suite of proper tests.
• Improve the styling. What I have implemented is functional and I don't think it looks terrible, but it's not quite what I'd imagined either. In particular I'd like to style the actual forms with the radio buttons in a much nicer way.
• Basic login/auth mechanism. I'd imagined implementing a basic login where you'd enter a name and email address, and all of your progress would be stored with your email address in localStorage so that you could logout and log back in with the same email address and resume your progress.
• Browser testing. If this was a real product I would do a thorough browser test and make any required changes to get the app working in as many browsers as possible.

Original Instructions

Problem

Company X is developing a new app for student education. Students complete quizzes and their progress is recorded.

Each quiz has 2-4 questions. There are 5 quizzes in total.

Part 1

Write a web app that displays the quizzes provided (questions.json, quizzes.json).

It should have a page to view an individual quiz.

Part 2

Allow a student to answer questions in the quizzes and submit an entire quiz once all questions have been answered.

Part 3

Students start from Quiz 1 and progress through to Quiz 5. They should only be allowed to access the next quiz (e.g. quiz 2) when they have finished the prior quiz (e.g. quiz 1).

Part 4 (Optional)

Add a page to show the student's progress through all the quizzes and their scores for each quiz they have completed.