Passing the Tech Test

@oliverturner

Director of Education @ConstructorLabs

What is a tech test?

1. Communication
2. Focus
3. Ability

Empathy
Comprehension
Communication
Execution

summary

CASE STUDY 1

import Model from "./model.mjs";
import View from "./view.mjs";

class App {
  constructor(options) {
    this.model = new Model(options.model);
    this.view = new View(
      Object.assign({}, options.view, {
        handlers: { onSearch: this.onSearch.bind(this) }
      })
    );

    this.initialise();
  }

  async initialise() {
    const { ok, records, err } = await this.model.loadData();

    ok ? this.view.display(records) : this.view.displayError(err);
  }

  onSearch(event) {
    event.preventDefault();
    const term = event.target.searchterm.value;
    const results = this.model.filter(term);
    this.view.display(results);
  }
}

export default App;

class Model {
  ...

  parseHTML(html) {
    const div = document.createElement("div");
    div.innerHTML = html.trim();
    return div;
  }

  /**
   * Grab the HTML of the target document via AJAX
   * Return a queryable DOM node from the returned string
   */
  fetchData() {
    const { url, parser } = this.options;
    return fetch(`https://cors-anywhere.herokuapp.com/${url}`, {
      headers: { "X-Requested-With": "Panache" }
    })
      .then(res => (res.ok ? res.text() : Promise.reject(res.err)))
      .then(str => parser(this.parseHTML(str)))
      .catch(err => err);
  }

  filter(term) {
    term = term.toLowerCase();
    return this.state.records.filter(record =>
      record.label.toLowerCase().includes(term)
    );
  }
}

export default Model;

// type Record = {href: string, label: string}

export default {
  url: "whatsonnetflix.com/netflix-hacks/the-netflix-id-bible-every-category-on-netflix/",
  parser: function(el) {
    const nodeList = el.querySelectorAll(".articleBody p");

    // Extract genre objects into an array, then use a dict to dedupe by id
    // => {[id: string]: Record}
    const records = Array.from(nodeList)
      .filter(node => '/^\d{1,6} = [\w &;]+/'.test(node.textContent))
      .reduce((acc, node) => {
        const [id, label] = node.textContent.split(" = ");
        const href = `http://www.netflix.com/browse/genre/${id}`;

        return Object.assign({}, acc, { [id]: { href, label } });
      }, {});

    // Return an array of records alphabetically sorted by label
    // => Record[]
    return Object.values(records).sort((a, b) => b.label < a.label);
  }
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Unfathomable</title>
  <link rel="stylesheet" href="./styles.css">
</head>

<body>
  <div class="app is-loading" id="app">
    <form action="{URL}" class="search">
      <div class="search__content">
        <label for="searchterm" class="search__label">Search:</label>
        <input id="searchterm" name="searchterm" class="search__term" autofocus="">
      </div>
    </form>
    
    <div class="content"></div>
  </div>

  <script type="module">
    import App from "./modules/index.js"
    import model from "./modules/parsers/netflix.js"

    const app = new App({ model, view: { root: document.querySelector("#app") } })
  </script>
  <script src="./no-module.js" defer nomodule></script>
</body>

</html>

points to note

Supported in all evergreen browsers
Must specify extension in Node >= 10
.mjs files need valid content-type set
Link rel=preload cannot be used :(
Automatically deferred & non-blocking: ES6 modules are loaded and executed asynchronously after the browser finished parsing the HTML.
ES6 modules run in strict mode by default (no need for 'use strict' anymore).
Top-level value of `this` is `undefined`.
Top-level variables are local to the module.

CASE STUDY 2

Now what?

What is a tech test?

Conclusion

An exercise in empathy
Messy, human communication
Not the end of the world
Potentially fun!
Don't forget: we want you to succeed!