Front end testing involves validating software from start to finish and ensuring it meets requirements. There are different types of tests like unit tests, integration tests, and end-to-end (E2E) tests. Unit tests validate individual components, integration tests validate how components work together, and E2E tests validate entire software features and integration with external interfaces from the user perspective. Frameworks like Jasmine, Mocha, and libraries like Chai can be used for testing in Angular applications. E2E tests can be done with Protractor or Cypress and involve simulating user interactions and asserting expected outcomes.

1. FRONT END TESTING

2. Muhammad Afif Alfiano H
Front end Developer
(Tim BPM Army - BSI UII)
@afifalfiano
afifalfiano

3. Front end Testing

4. Software Testing is a method to
check whether the actual
software product matches
expected requirements and to
ensure that software product is
Defect free
What is Testing?

5. What is Testing?
2. Expected Result
3. Test
1. Code
Failure
Success
4. Modify
& Fix End
Automate
Test &
Simply

6. Benefit
Save time
Get an error if your
break code
Think about possible
issues and bugs
Integrate into build
workflow
Break up complex
dependencies
Improve your code

7. E2E Test
Is a software testing method
that validates entire software
from starting to the end along
with its integration with
external interfaces
Integration Test
Unit Test
is a type of software
testing where individual
units or components of a
software are tested
01
is defined as a type of
testing where software
modules are integrated
logically and tested as a
group
02
Type of test
03

8. Headless Browser
Headless browsers provide
automated control of a web
page in an environment similar
to popular web browsers, but
they are executed via a cli
using network communication
Assertion
Library
Task Runner
is the library or tool that picks
up a source code that contains
unit tests, and a bunch of
settings, and then executes
them and writes the test
results to the console or log
files.
01
Assertion libraries are
tools to verify that
things are correct.
02
Setup Test
03

9. Library of Test

10. What about Angular?

11. Test Runner Assertion Library E2E Test
Unit Test + Integration Test
Angular

12. Unit Test (AAA Pattern)
3A
1. Arrange
This is the first step of a unit test application. Here we will
arrange the test, in other words we will do the necessary setup of
the test
2. Act
This is the middle step of a unit step application. In this step we
will execute the test. In other words we will do the actual unit
testing and the result will be obtained from the test application.
3. Assertion
This is the last step of a unit test application. In this step we will
check and verify the returned result with expected results.

13. Simple App

14. Unit Test

15. I
n
t
e
g
r
a
t
io
n
T
e
s
t

16. E2E Test (Protractor)

17. E2E Test (Cypress)

18. Result (Unit Test & Integration Test)

19. Result (E2E Test - Protractor)

20. Result (E2E Test - Cypress)

21. Extensions Browser

22. Extension (E2E Test)

23. Extension (E2E Test)

24. Extension (E2E Test)

25. Extension (E2E Test)

26. Extension (E2E Test)

27. Extension (E2E Test)

28. DEMO
��
https://github.com/afifalfiano/angular-testing

29. Quote

30. References
● https://www.youtube.com/watch?v=r9HdJ8P6GQI Testing javascript by maximilian
● https://www.guru99.com/
● https://angular.io/guide/testing
● https://slidesgo.com/
● https://images.google.com/imghp?hl=en&gl=ar&gws_rd=ssl
● https://dev.to/mustapha/angular-unit-testing-101-with-examples-6mc
● https://www.c-sharpcorner.com/UploadFile/dacca2/fundamental-of-unit-testing-under
stand-aaa-in-unit-testing/
● https://docs.cypress.io/guides/overview/why-cypress.html

31. CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik
THANKS
Do you have any questions?
afifalfiano2@gmail.com
Please keep this slide for attribution