Whether to unit-test and/or end-to-end test

This app is based on Getting Started with Angular: Your First App. Few changes are introduced to add element selectors. Getting started instructions found here. If you encounter errors look here or create an issue with this template.

Testing Pyramid

Which testing approach? a, b, or c.

a. pyramid 
b. box
c. cone

Background

Your First App is a small Angular application containing the four pages, shown below. Click here if you would like to see the deployed application.

Products page display list of products. Details page display product details. Cart page display items added to the cart. Shipping page shows shipping options.

The goal is to attempt to get near-full unit- and e2e-test coverage for each of the pages and a service. On doing so suggest which testing model is viable for the app.

Limitations

Only a single front-end framework Angular and a single integration test framework Protractor is used. Testability varies from one framework to another. Using different frameworks may present a different result.¹

What is a unit of software-code is arguable. We use Angular's classification of application modules; such as components and services, to classify the application into seven-units.

Many other testing types between unit-tests and e2e-tests are not covered.

Purposefully, we will attempt to create a one-to-one correspondence between each unit-test and e2e-test assertions for comparison.

The tests are executed using: OS X Catalina 10.15.1, Mac mini (2018), Processor: 3 GHz 6-Core, Intel Core i5, Memory: 8 GB 2667 MHz DDR4, WebStorm: 2019.2.3, and Chrome Browser (incognito) 78.0.3904.

Measurement

The following requirements will help us to find a suitable testing model for each unit and use that to infer a model for the whole application.

1. for each unit test, there is a corresponding e2e test
2. for each e2e test, there a corresponding unit test
3. n/m assertions, can only be tested with unit test, 
4. n/m assertions, can only be tested with e2e test
5. integration and isolation testing threadoffs 
6. test execution time

Units of application

The seven units of the application constitute top-bar, product-list, product-detail, product-alert, cart, shipping, and the cart-service.

1. top-bar

The top-blue-bar (top-bar) has three functionality, displaying title, clicking the title should navigate us back to the home page, and clicking the Checkout button should navigate us to the cart page.

Below is an implementation of these requirements using unit- and e2e-tests.

unit ↩

it('should create', () => {
  expect(component).toBeTruthy();
});

it('should display title', () => {
  const el = compiled.querySelector('#title > h1');
  expect(el.textContent).toEqual('My Store');
});

it(`title should link to '/'`, () => {
  const el = compiled.querySelector('#title');
  expect(el.getAttribute('href')).toEqual('/');
});

it(`checkout button should link to '/cart'`, () => {
  const el = compiled.querySelector('#checkout');
  expect(el.getAttribute('href')).toEqual('/cart');
});

e2e ↩

it('should have top-bar', () => {
  expect(page.hasTopBar()).toBeTruthy();
});

it('should display title', () => {
  expect(page.getTitleText()).toEqual('My Store');
});

it(`checkout button should link to '/cart'`, () => {
  expect(page.getCheckoutLink()).toEqual(baseUrl + 'cart');
  page.clickCheckout();
  expect(browser.getCurrentUrl()).toEqual(baseUrl + 'cart');
});

it(`title should link to '/'`, () => {
  expect(page.getTitleLink()).toEqual(baseUrl);
  page.clickTitle();
  expect(browser.getCurrentUrl()).toEqual(baseUrl);
});

There is a one-to-one correspondence since every feature of the application could be tested using either a unit- or an e2e test. When taken the slowest data, the unit-test runs six times faster than the e2e test. The level of integration and isolation tested in both types are nearly the same.

For each unit test, there is a corresponding e2e test
For each e2e test, there a corresponding unit test
Minimal integration and isolation testing threadoff
Test execution time: unit-test ~ 380ms and e2e-test ~ 1s 996ms 

If speed is not a concern ↩, the box model could be used for testing the top-box.

2. product list

Products are listed on the product list page. A user could share a product by clicking the share button, get notification using the notification button, or click the product name to navigate to the product details page.

---

1 Extended future work might be trying the same application in different frameworks and see if the result found to have some correlations. ↩