yavende/jobs repository overview

⁠YaVende.com test for frontend developers

This repo hosts the skeleton for a tested HTML5 app, meant to be completed by frontend developers wanting to work with us.

It's built with brunch⁠ and vue.js 2.0⁠ and tested with nightwatch.js⁠. These software choices are meant for you to start quick and go through the test assigments rapidly, but you may use whatever framework or library you see fit.

You may for example dump the app itself but want to keep the tests. In that case you can keep the nightwatch.json file and the test folder, and ensure this npm packages are in your pagackage.json's devDependencies:

"lodash": "^4.17.4",
"mock-http-server": "^0.1.0",
"nightwatch": "^0.9.15",
"threads": "^0.7.3",
"selenium-standalone": "^6.4.1",

More info below.

⁠Assignment

⁠Topic

You will be required to replicate the most basic features of our car listing list and detail pages, available at https://yavende.com/avisos⁠ and https://yavende.com/avisos/⁠ respectively.

For this purpose you will have to make usage of our API hosted at https://api.yavende.com⁠, the same we use for powering https://yavende.com⁠.

Aditionally, to enable automated testing of your page, some arbitrary requirements must be met. These will be marked with bold and italic

⁠Requirements

⁠/avisos

• Should list carlistings

For each car listing in the response from the API endpoint (/v1/car_listings⁠, 8 cars per page), you must show the car listing's id, image, brand, model, year. Each element in the list must have the id property set to "car-listing-${carListing.id}", for example: "car-listing-5792".

• Should allow pagination

The page must have a button named "Next Page", with an id "next-page-button", which loads the next page from the API using the page param. For example, /v1/car_listings?page=2⁠. First page is 1.

• Should allow filtering by brand

There must be a select for car brands with id "car-brand-select". These brands are available at the API endpoint /v1/car_brands⁠. If a brand is selected, listings are updated to show filtered carListings. Use the param car_brand_id to filter the API results. For example, this query returns Chevrolet cars: /v1/car_listings?car_brand_id=45⁠.

• Should allow filtering by brand and model:

There must be a select for car models with id "car-model-select". There models are available at /v1/car_models?car_brand_id=x⁠. Each time a car brand is selected, the select for models should be populated with the proper models. If a model is choosen, update car listings to show them filtered by the selected brand and model. To do this use the /v1/car_listings⁠ API endpoint with params car_brand_id and car_model_id. For example, to get all Chevrolet Agile you can use /v1/car_listings?car_brand_id=45?car_model_id=674⁠.

• Should link to /avisos/:id

Given a car listing card is clicked, you should redirect to the detail page for the given car using the path "/avisos/:id". For testing purposes, each car listing in the list must have the id property set to "car-listing-${carListing.id}, and trigger the redirect on click.

⁠/avisos/:id

• Should be navigatable

If I open the browser directly on /avisos/:id, the detail for the carListing with that id should be shown. You must show the car listing's id, image, brand, model, year.

You also must enforce this points:

1. The page must be a single page application⁠: This means the page may consist of a single file index.html, and clicking on a link must not trigger a page reload. Instead, all needed data must be loaded via AJAX and used to render the page.

2. Tests must pass: If your site fulfills the requirements, automated tests should pass. If you feel like you completed the requirements but tests don't give you the green light, feel free to edit the tests, open an issue, or even email us⁠.

⁠Support and documentation

You can find a full documentation for our API at https://api.yavende.com/docs⁠

⁠Getting started

• Install (if you don't have them):
  • Node.js⁠: brew install node on OS X
  • Brunch⁠: npm install -g brunch
  • Brunch plugins and app dependencies: npm install
• Run:
  • brunch watch --server — watches the project with continuous rebuild. This will also launch HTTP server with pushState⁠.
  • brunch build --production — builds minified project for production
• Learn:
  • public/ dir is fully auto-generated and served by HTTP server. Write your code in app/ dir.
  • Place static files you want to be copied from app/assets/ to public/.
  • Brunch site⁠, Getting started guide⁠

⁠Running tests

Ensure you have installed nightwatch.js⁠.

Before running the tests, replace the API base url on your source files from https://api.yavende.com to http://localhost:1234. This is a mocked service that mimics our API for testing.

⁠Using brunch built in static server

The test suite will try to run the brunch server by default and perform the automated tests against that server that runs on localhost:3333.

$ # run the tests
$ nightwatch

The test runner will run the brunch compile and server command brunch watch --server with the env var API_URL set to http://localhost:1234. The brunch app comes with process-env-brunch⁠ plugin installed, so the env var API_URL be replaced.

⁠Using a custom server

If you decide not to go with brunch, pass DISABLE_APP_SERVER=true and APP_HOST=http://localhost:<your_port> to tell the test suite where to run the tests against. Here is a simple example of running a static assets server using nodejs node-static⁠:

$ static --spa -a 0.0.0.0 ./public
$ DISABLE_APP_SERVER=true APP_HOST=http://localhost:8080 nightwatch

As mentioned before, tests should pass. If your site fulfills the requirements, automated tests should pass. If you feel like you completed the requirements but tests don't give you the green light, feel free to edit the tests, open an issue, or even email us⁠.