Frontend Web Development with Angular · Angular testing utilities ng g component my-test-component...

CC BY-NC-ND Carrot & Company GmbH

Frontend Web Development with Angular


Agenda● Questions● Some infos● Testing of Frontend Applications● Todos


Questions?


● Use constants and put them in a separate file if they might be used elsewhere.

● Consistent coding style (see Angular Style Guide for naming conventions)● Use Angular modules and structure your code

Some Infos


Testingof Frontend Applications


Today's Topics● Motivation & Reasons● Types of Tests● Frameworks● Jest

○ Matcher○ Mocks & Spies○ Snapshot testing○ Test asynchronous code○ Coverage Reports

● Angular Testing Utilities○ Query DOM elements & trigger events○ Shallow Component Tests


Today's Topics● Cypress

○ Querying Elements ○ Interacting With Elements○ Assertions○ Core Concepts○ Best Practices

● Configuration for Jest and Cypress● Live Coding

○ Commands for starting the tests○ Utility Functions○ Write Unit & Integration Tests with Jest○ Write E2E Tests with Cypress


Motivation● You are implementing a new feature, feature 1.● When it is implemented, it works, so you do not need any tests, right?!● You deploy your application to production.● You want to proceed, implement more features and deploy them.● Suddenly feature 1 breaks, because you refactored a service that is used by

feature 1.● At this point you regret that you (or even better, your teammate) did not write

any tests.


Reasons to write tests● It saves time

○ Code refactoring is a “no go” because you can not see what parts of your application will fail○ Had no time for writing tests? Your crappy implementation stays.○ Developing becomes more fun as you are not being blocked by hard to find bugs.


Reasons to write tests● Self-updating documentation

○ Some people like to read the comments○ Some read the implementation itself○ But some read the tests

● It is fun○ People that write good tests, are also the best programmers○ Your test is also a program○ If you like programming, you should like writing tests


Reasons to write tests● Preventing regression bug

○ When you find a bug■ First write a (failing) test that reproduces the bug■ Then fix the bug■ This will never happen again

● Improve the implementation via new insights○ Write tests and have trouble with it → maybe an indication that your implementation can be

improved○ Your tests let you think about input and output, corner cases and dependencies


Reasons to write tests● 100% coverage feels good and makes you happy :)


Type of Tests● Unit Tests● Integration Tests● End-2-End Tests (E2E)

There are more than 100 different tests, but these three are the major types of frontend testing.

More types of tests: https://www.softwaretestinghelp.com/types-of-software-testing/

https://www.softwaretestinghelp.com/types-of-software-testing/


Unit Tests● Test units in encapsulation● Should have a very narrow and well defined scope● Perfect for code that has no I/O or UI dependencies● Keep modules independent of one another● If there is a dependency, either mock the dependency or do integration tests● Reasons to use functional programming and pure functions as much as

possible○ The purer your application is, the easier you can test it○ https://blog.mgechev.com/2017/11/12/faster-angular-applications-pure-pipes-memoization-pure-functions-part-2/

https://blog.mgechev.com/2017/11/12/faster-angular-applications-pure-pipes-memoization-pure-functions-part-2/


Integration Tests● Tests that check the integration of two or more units

○ components, modules, classes, I/O, etc.

● Just check that the glue binding of some units works● If the real I/O is difficult, slow, or flaky then in the integration tests test using a

fake/mock○ Using a real DOM (using the browser) make the tests slow and flaky

■ → virtual DOM (VDOM)


● Test the whole application together, and test it as a user would● Check that the glue binding of all units works● Tests if all units are working together● E2E tests tend to be flaky

○ Flaky tests are tests that usually pass, but sometimes fail○ Reasons:

■ Different Timing■ I/O (real browser, network, etc)

● Testing the main flows of your application not every detail

End-2-End Tests


Testing Pyramid

Unit Tests

Integration Tests

E2E Tests

Number of Tests

Flakiness Efficiency


Frameworks● Karma

○ Test runner○ Unit & integration tests○ https://karma-runner.github.io/latest/index.html

● Jasmine○ Framework to write tests (matcher, etc.)○ Unit, integration & E2E tests○ https://jasmine.github.io/

● Protractor○ Framework to run and write E2E tests for angular applications○ https://www.protractortest.org

Are part and pre-configured within a new Angular project (ng new <project-name>)

https://karma-runner.github.io/latest/index.html

https://jasmine.github.io/

https://www.protractortest.org


Frameworks● Jest

○ Framework to write and run tests○ Unit & Integration tests○ https://jestjs.io/

● Cypress○ Framework to write and run E2E tests for any web application ○ https://www.cypress.io/

Our testing stack (already configured in your applications)

https://jestjs.io/

https://www.cypress.io/


Why we do not use the default testing stack?● Jest

○ Pro:■ It’s fast■ Uses jsdom (VDOM) (not slow, flaky browser)■ Executes tests in parallel■ Sits on top of Jasmine, so the API is nearly identical■ Provides code coverage out of the box■ Provides a smart, immersive watch mode

● Runs only tests affected by git file changes ● Also runs failed tests first ● Is able to stop on first error so the feedback loop is ~10x faster than with Karma

(depending on test suite size)■ Provides snapshot testing

○ Con:■ Uses jsdom (VDOM) (no real browser) https://blog.nrwl.io/nrwl-nx-6-3-faster-testi

ng-with-jest-20a8ddb5064

https://blog.nrwl.io/nrwl-nx-6-3-faster-testing-with-jest-20a8ddb5064

https://blog.nrwl.io/nrwl-nx-6-3-faster-testing-with-jest-20a8ddb5064


Why we do not use the default testing stack?● Cypress

○ Pros:■ No dependencies■ Auto-reload■ UI for debugging■ Automatic waits

● No manual sleeps or waits● Waiting for element to appear in the DOM

■ Clear and easy syntax○ Cons:

■ Small Community■ Lack of Features■ Variety of browsers

https://blog.nrwl.io/nrwl-nx-7-0-better-e2e-testing-with-cypress-1b88336bef5e




Test SuiteJest

Test

Matcher

Setup & Teardown

Matcher: https://jestjs.io/docs/en/using-matchers, https://jestjs.io/docs/en/expect Setup & Teardown: https://jestjs.io/docs/en/setup-teardown

https://jestjs.io/docs/en/using-matchers

https://jestjs.io/docs/en/expect

https://jestjs.io/docs/en/setup-teardown


Jest● Mocks

○ Used in unit testing○ Object under test may have dependencies on other objects. To isolate the behavior of the

dependencies you can replace these dependencies by mocks. These mocks will simulate the behavior of the real objects.

○ Mocking is creating objects that simulate the behavior of real objects○ const a = new A(new MockB(), new MockC())○ Mock functions in Jest with jest.fn(implementation) :

https://jestjs.io/docs/en/mock-functions

https://jestjs.io/docs/en/mock-functions


Jest● Spies

○ Keep track of the usage of a method of a class○ jest.spyOn(object, methodName)○ Creates a mock function similar to jest.fn but also tracks calls○ By default, jest.spyOn also calls the spied method

https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname

https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname


Jest● Snapshot testing

○ Very useful tool whenever you want to make sure your UI or an object does not change unexpectedly

○ expect(object).toMatchSnapshot();

Angular Component:

https://jestjs.io/docs/en/snapshot-testing

my-test-component/__snapshots__/my-test-component.component.spec.ts.snap

Important: Do not make snapshots of large component or object because the snapshots could be hard to maintain!

https://jestjs.io/docs/en/snapshot-testing


Jest● Testing Asynchronous Code

○ When you have asynchronous code, Jest needs to know when the code it is testing has completed, before it can move on to another test.

○ Use ■ Callback■ Marble tests


Jest

Callback:

Jest tests complete once they reach the end of their execution. That means this test will not work as intended!

https://jestjs.io/docs/en/asynchronous

https://jestjs.io/docs/en/asynchronous


Jest

rxjs-marbles: https://github.com/cartant/rxjs-marbles https://github.com/cartant/rxjs-marbles/tree/master/examples/jest

hot vs cold observable:https://medium.com/@luukgruijs/understanding-hot-vs-cold-observables-62d04cf92e03

Marble Test:

https://github.com/cartant/rxjs-marbles

https://github.com/cartant/rxjs-marbles/tree/master/examples/jest

https://medium.com/@luukgruijs/understanding-hot-vs-cold-observables-62d04cf92e03


JestCoverage Reports

● Jest will automatically generate a coverage report● Just open the report in your browser:

○ Frontend/Web/reports/coverage/jest/lcov-report/index.html

● Coverage Threshold○ If thresholds aren't met, Jest will fail (before commit git hook)○ https://jestjs.io/docs/en/configuration.html#coveragethreshold-object

See: Frontend/Web/jest.config.js

https://jestjs.io/docs/en/configuration.html#coveragethreshold-object


The ComponentFixture properties and methods provide access to the component and its DOM representation.

Angular testing utilitiesng g component my-test-component

TestBed:Easy way to create components, handle injection and interact with our application. It acts as a dummy Angular Module.

Compile the testing module

Create a component

Get the class of that component with all its properties and methods

Trigger change detectionhttps://angular.io/guide/testing#testing-utility-apis

https://angular.io/guide/testing#testing-utility-apis


Angular testing utilitiesHelper functions

https://github.com/brandonroberts/ng-atl-2018/blob/master/src/app/test-helpers.tshttps://github.com/brandonroberts/ng-atl-2018/blob/master/src/app/test-providers.ts

https://github.com/brandonroberts/ng-atl-2018/blob/master/src/app/test-helpers.ts

https://github.com/brandonroberts/ng-atl-2018/blob/master/src/app/test-providers.ts


Angular testing utilitiesHelper functions

● Files:○ Frontend/Web/src/app/testing-utils/create-component-test-fixture.ts○ Frontend/Web/src/app/testing-utils/provide-mock.ts○ Frontend/Web/src/app/testing-utils/trigger-event-helper.ts


Angular testing utilitiesShallow Component Tests

● Tells the Angular compiler to ignore unrecognized elements and attributes● It simply renders them as empty tags● No longer need the stub components● Useful if you want to write a unit test for a component

https://angular.io/guide/testing#no_errors_schema



Angular testing utilitiesShallow Component Tests




Angular testing utilitiesQuery DOM elements & trigger events

● DebugElement provides insights into the component's DOM representation

https://angular.io/guide/testing#debugelement-1

https://angular.io/guide/testing#debugelement-1


Cypress

https://docs.cypress.io/guides/getting-started/writing-your-first-test.html

https://docs.cypress.io/guides/getting-started/writing-your-first-test.html


CypressQuerying Elements

● Querying for elements like in jQuery● cy.get('.my-selector'), cy.get('#main-content')● Querying by Text Content (what the user would see on the page)

○ cy.contains('New Post')○ cy.get('.main').contains('New Post')

● Cypress will automatically wait for the element if not present○ Gives your app a window of time to finish whatever it may be doing○ timeout

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Querying-Elements

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Querying-Elements


CypressInteracting With Elements

● cy.get('textarea.post-body') .type('This is an excellent post.')

● cy.get('button') .click()

● cy.get(‘.my-checkbox’) .check()

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Interacting-With-Elements

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Interacting-With-Elements


CypressAssertions

● Cypress will automatically wait until your elements reach this state, or fail the test if the assertions don’t pass

● cy.get(':checkbox').should('be.disabled')● cy.get('form').should('have.class', 'form-horizontal')● cy.get('input').should('not.have.value', 'US')

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Asserting-About-Elements https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Assertions https://docs.cypress.io/guides/references/assertions.html

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Asserting-About-Elements

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Assertions

https://docs.cypress.io/guides/references/assertions.html


CypressCore Concepts

● Commands are asynchronous and relies on timeouts to know when to stop waiting on an app to get into the expected state

● Commands get queued for execution at a later time● During execution, subjects are yielded from one command to the next, and a

lot of helpful Cypress code runs between each command to ensure everything is in order

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Cypress-Is-Simple

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Cypress-Is-Simple



● Each Cypress command (and chain of commands) returns immediately, having only been appended to a queue of commands to be executed at a later time

● You cannot do anything useful with the return value from a command● Commands are enqueued and managed entirely behind the scenes



The commands are only getting queued, nothing will be executed!

After the test function has finished execution, Cypress will begin running the commands in order.


CypressBest Practices

● Controlling State○ X Using the UI to set your application into a given state○ OK Programmatically set your application into a given state (REST calls, set localstorage, etc)

https://docs.cypress.io/guides/references/best-practices.html

https://docs.cypress.io/guides/references/best-practices.html



● Selecting Elements○ X Using highly brittle selectors that are subject to change○ OK Use data-* attributes to provide context to your selectors and insulate them from CSS or

JS changes



● X Having tests rely on the state of previous tests


Configuration for Jest and CypressJest

● Files:○ Frontend/Web/jest.config.js○ Frontend/Web/src/jest-setup.ts○ Frontend/Web/src/jest-global-mocks.ts

● https://jestjs.io/docs/en/configuration ● https://www.xfive.co/blog/testing-angular-faster-jest/● https://izifortune.com/unit-testing-angular-applications-with-jest/

https://jestjs.io/docs/en/configuration

https://www.xfive.co/blog/testing-angular-faster-jest/

https://izifortune.com/unit-testing-angular-applications-with-jest/


Configuration for Jest and CypressCypress

● Files:○ Frontend/Web/cypress.json○ Frontend/Web/cypress/plugins/index.js○ Frontend/Web/cypress/plugins/cy-ts-preprocessor.js

● https://docs.cypress.io/guides/references/configuration.html ● https://github.com/bahmutov/add-typescript-to-cypress

https://docs.cypress.io/guides/references/configuration.html

https://github.com/bahmutov/add-typescript-to-cypress


Live CodingSample Application

https://gitlab.fwda.cnc.io/fwda/ng-modules

https://gitlab.fwda.cnc.io/fwda/ng-modules


Live CodingCommands for starting the tests

● Run Jest tests○ With host machine

■ Make sure you have the node_modules installed● ./cli/install_dev_frontend_web.sh

■ Execute the tests● source ./conf/load_env.sh● cd Frontend/Web● npm run test● Or● ./cli/run_tests_frontend_web_unit.sh



● Run Jest tests○ With docker

■ source ./conf/load_env.sh■ docker-compose -f ./conf/docker-compose/docker-compose.base.yml

-f ./conf/docker-compose/docker-compose.dev.yml run --rm frontend-web /bin/bash

■ npm run test



● Run Cypress tests○ Does only work on your host machine, because the docker is not configured to run Cypress○ Make sure you have the node_modules installed

■ ./cli/install_dev_frontend_web.sh○ Your application must be running

■ ./cli/start_dev_docker.sh○ Execute the tests

■ source ./conf/load_env.sh■ cd Frontend/Web■ npm run e2e.dev■ npm run e2e (headless mode)■ Or■ ./cli/run_tests_frontend_web_e2e.sh [--headless]


It doesn’t really matter how you do your tests, as long as you

write enough tests that make you feel confident that you can

deploy your version to production.


Thank you for your attention!

Questions?


Sourceshttps://xebia.com/blog/5-reasons-why-you-should-test-your-code/

https://angular.io/guide/testing

https://hackernoon.com/testing-your-frontend-code-part-i-introduction-7e307eac4446

https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3


https://codeburst.io/jest-the-next-generation-testing-8a6ee7c14656

https://xebia.com/blog/5-reasons-why-you-should-test-your-code/

https://angular.io/guide/testing

https://hackernoon.com/testing-your-frontend-code-part-i-introduction-7e307eac4446

https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3


https://codeburst.io/jest-the-next-generation-testing-8a6ee7c14656

Todos● Complete 4th Sprint

Frontend Web Development with Angular · Angular testing utilities ng g component my-test-component...

Documents

Transcript of Frontend Web Development with Angular · Angular testing utilities ng g component my-test-component...