Frontend Tests: what nobody said

to you​ 

Wilson Mendes

@willmendesneto

GDE Angular

1. Access https://goo.gl/PibUcQ

2. Decrease the price until the minimum

3. Enjoy

Nodebots book free!

So, let's start?

Test pyramid

Ice-cream cone

x

Chaos scenario

...

it('should do something', () => {
  expect(true).toBeTruthy();
  expect(false).toBeTruthy;
});
...

++ production bugs

++ technical debt

-- control

Before

8%

How to improve that?

Find your pain points

Create scenarios

Avoid hard setup

Chicago x London

Modularizing everything

Example: Affiliate links

...
.config(affiliateLinksProvider => {
  ...
  return affiliateLinksProvider.register({
    href: '/casino',
    alt: 'SunCasino',
    image: '/images/suncasino-logo.svg',
    current: isCasino
  });
});


...
.provider('affiliateLinks', () => {
  const links = [];
  ...
  return {
    register: (attributes) => {
      return links.push(attributes);
    },
    $get: () => {
      return {
        hasAny: links.length > 0,
        all: links
      };
    }
  };
});
    <div class="affiliate-links">
      <div class="nav-items-group">
        <a
          class="nav-item"
          target="_self"
          ng-repeat="link in links track by link.href"
          ng-class="{ 'active': link.current }"
          ng-click="setActive(link)"
          ng-href="{{ ::link.href }}">
          <img
            ng-src="{{ ::link.image }}"
            alt="{{ ::link.alt }}">
        </a>
      </div>
    </div>

NOT BAD

Why ?

Stateless components (tables, render data, etc)

Upgrade to Angular2

Performance issues

Why track loop is important in your angular apps


# Makefile

...
VALIDATE_REPEATS_WITHOUT_TRACK_BY_QUANTITY = ` \
git --no-pager grep -nE "ng-repeat=\"(.*)\"" -- *.html | grep -v "track by" -c
`
NUMBER_OF_TEMPLATES_WITHOUT_TRACK_BY = 10
TEMPLATE_TRACK_BY_ERROR_MESSAGE = " \
You are adding more 'ngRepeat' without track by in your template. \
The maximum is \"$(NUMBER_OF_TEMPLATES_WITHOUT_TRACK_BY)\" "
...

#--------------------------------------

.PHONY: template-track-by-quantity-validation
template-track-by-quantity-validation:
@if [[ $(VALIDATE_REPEATS_WITHOUT_TRACK_BY_QUANTITY) -gt $(NUMBER_OF_TEMPLATES_WITHOUT_TRACK_BY) ]]; then 
  echo "$(TEMPLATE_TRACK_BY_ERROR_MESSAGE)" && exit 1; 
fi;

What this component does?

"Test are like jokes: they're not good if you have to explain them"

Wilson Mendes

standard

standard

standard

render/TO render 

Testing Pub/Sub

Test setup by behaviour

Easy to validate

Decrease "healthy tests"

Encourage refactor across teams

Expose what's happening

After

72%

Async code

is...


# Makefile

...
PATH      := $(PATH):node_modules/.bin
SHELL     := bash -eu -o pipefail -c
CPUS      ?= $(shell node -p "require('os').cpus().length" 2> /dev/null || echo 1)
MAKEFLAGS += --warn-undefined-variables --no-builtin-rules --output-sync
MAKEFLAGS += --jobs $(CPUS)
...

Build time on Travis-CI

Moving to Buildkite

Test environment by branch

Easy to test

Easy to deploy

What's the best way to create unit tests?

"It depends..."

#thanksMate

#gracias

#obrigado

Wilson Mendes

@willmendesneto

Frontend Tests: what nobody said to you

By willmendesneto

Frontend Tests: what nobody said to you

Do you have an application with good code coverage, but with lots of bugs or with no good code coverage at all? How to start and validate if you are adding to a good test? What about performance in tests? In this talk Will shares my experience and decisions about improvements in our test pyramid case, talking about how we changed the codebase with coupled tests, hard to setup / maintain / evolve and how some standards, validations and more that makes our team deliver more valuable features.

  • 199
Loading comments...

More from willmendesneto