This test is for a frontend developer position with Wiser. This will test your knowlege of the Angular framework, API usage, programming practices, written skills, and TDD and code coverage. Fork this test to provide solutions. When complete, create a merge request into master and email [email protected] to let us know!

Please commit your code regularly. There is no time limit, though we will be looking at the commit metrics. We will be looking for DRY code and good coding practices with high code coverage. Update the README to explain the code-base.

The following table describes what we will be looking for in the test (Table 1). You should feel familiar with each of the following.

Table 1

Outcome Goals - Goals we wish to see you demonstrate throughout the course of your test.

You will be makeing an authenticated application. The application will require at least three pages (Table 2). There will be some restrictions below on the functionallity of the authentication pieces, however, you are free to make your own design choices regarding these pages, and you are free to add any content you wish in the secure page(s).

Table 2

Required pages to be implemented.

The authentication pages and the secure page(s) will live in two distinct application modules. These two modules will be required to be loaded using lazy loading. They should not require any code from any of the other modules - that is, the authentication module should not require code from the secure module or the AppModule, and the secure module should not require any code from the authentication module or the AppModule. Only a select number of files in the AppModule should be edited in order to complete this task, and no logic should change within these select files - no other files should be edited outside from the modules you will be defining (List 1).

• navbar.component.ts
• navbar.component.spec.ts
• environment.ts
• environment.prod.ts
• app.component.spec.ts
• app.module.ts
• README.md

List 1

Existing files may be modified.

Please note that we will require that a notification animation play on a failed login attempt - this must be choreographed with Angular animations framework. Finally, the secure route must be guarded against access using an authentication guard; the guard must be used to determine the validity of the access token each time a secure page is accessed HINT: Access tokens expire, so always verify them against the API.

You have been provided with an API to which you will make requests against (Table 3). This API provides single user authentication functionallity, using basic authentication. You are provided with the credentials necessary to authenticate (Table 4). You can test these authentication credentials using bash (Figure 1).

Table 3

Available API for authentication.

Table 4

Authentication credentials.

curl -X GET https://dev-test-service.madebywiser.com/login -u wiserdev:password

Figure 1

Testing credentials against the API using cURL.

Finally, note that we will be running automated testing against the code base (List 2). Please ensure that your code passes all these tests.

• npm run lint
• npm run test -- --browser=PhantomJS --watch=false
• npm run coverage
• npm run build -- --prod --aot

List 2

Quality assurance scripts that will be run by continuous integration.

Below is a list of ideas that can earn you bonus points - feel free to be creative, as this is not a comprehensive list (List 3).

• Inactivity timeout with redirect to /auth/logout
• Multiple well thought out child pages to /secure.
• PWA feature support
• Additional animations or creative design

List 3

Bonus point ideas.

Please note that the core requirements are far more important than any possible bonus points. Please spend your time ensuring you've met the outcome goals before embarking on any additiona features.

A completed demo of the project can be seen here. You can use the credentials outline above to authenticate (Table 4).

Firstly, please ensure you have a well structured README.md file that explains your project. Please ensure that you have followed all the instructions, and that all the quality assurance tests pass (List 2).

Once you are ready to submit your code, open a merge request from your forked repository back into the source repo on the master branch. You can see the automated CI testing here. Finally, send us an email at [email protected] to let us know about the awesome thing you built!

Have fun!