https://github.com/giltayar/mapping-out-territory

The companion repository to my Mapping Out the Territory: A Frontend Testing Workshop
https://github.com/giltayar/mapping-out-territory

frontend-web testing vanilla-js workshop

Last synced: 3 months ago
JSON representation

The companion repository to my Mapping Out the Territory: A Frontend Testing Workshop

• Host: GitHub
• URL: https://github.com/giltayar/mapping-out-territory
• Owner: giltayar
• License: mit
• Created: 2019-03-28T20:58:36.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-01-18T17:08:29.000Z (about 3 years ago)
• Last Synced: 2024-05-06T12:24:41.154Z (9 months ago)
• Topics: frontend-web, testing, vanilla-js, workshop
• Language: JavaScript
• Homepage:
• Size: 293 KB
• Stars: 7
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Mapping Out the Territory: A Frontend Testing Workshop

Exercises and instructions for the workshop.

You can find the presentation that accompanies this workshop

[here](http://bit.ly/mapping-out-territory).

## Installation Instructions

1. If you don't have Node.JS, Install Node.JS (any version from version 10 is fine).

1. git-clone this repository.

   * `git clone https://github.com/giltayar/mapping-out-territory.git` in your code directory of

     choice.

1. Open your favorite editor in the directory created.

   * If you use Visual Studio Code:

     * You can optionally install the recommended extensions that VS

       Code suggests (when you open the editor) for a nicer editing experience

       (it's just ESLint and Prettier Plugins).

     * You will then see eslint errors in the editor, plus you can use `++F` to

       format the code using Prettier.

     * Don't worry, even if you don't use the extensions, `npm test` will also run eslint and

       prettier.

     * You also get nice command completions for cypress and other libraries, although you may also

       get them in other editors!

     * Debugging the integration and unit tests will be built into the repository. It will Just Work.

   * Nothing in the exercises is stopping you from using whatever editor you want

1. Run `npm ci` in the workshop directory (`npm ci` is like `npm install`, but faster).

1. You're good to go!

## The Structure of the Exercises

There are four parts to the workshop, each corresponding to a different type of test:

* **E2E tests**: write tests that check the whole application (with or without the backend)

  in a browser

* **Visual regression tests**: write tests that ensure that the application's look is still OK

* **Integration tests**: write tests that check a subset of the whole application,

  outside of the browser

* **Unit tests**: write tests that check one component, or some business logic code

For each of these, the corresponding subdirectory under `test` (in the workshop directory)

will contain a _part_ of the tests needed, and you will need to complete the parts that are missing.

The order of the workshop will be:

1. [E2E tests](./instructions/1-e2e-tests-instructions.md)

1. [Visual tests](./instructions/2-visual-regression-tests-instructions.md)

1. [Integration tests](./instructions/3-it-tests-instructions.md)

1. [Unit tests](./instructions/4-unit-tests-instructions.md)

Good luck! And as we said, start from the instructions for the [E2E tests](./instructions/1-e2e-tests-instructions.md).

## Copyright Notices

### TodoMVC Vanilla ES6 Implementation

* Copied and modified from the

  [TodoMVC repository](https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanilla-es6)

* [Original license](https://github.com/tastejs/todomvc/blob/master/license.md)

* Modified to work in the browser without transpiling (using native ES6 Modules).