From ad2801e5635ee19ea0981e654fc396b7a243ac3f Mon Sep 17 00:00:00 2001 From: Pedro Ortiz M Date: Wed, 14 Dec 2022 15:46:49 -0500 Subject: [PATCH 1/3] doc(testing): adding new structure --- .../unit-testing-jest/docs/introduction.md | 44 +++++++++++++- .../unit-testing-jest/docs/test-structure.md | 29 --------- .../unit-testing-jest/docs/unit-test-jest.md | 60 +++++++++---------- 3 files changed, 69 insertions(+), 64 deletions(-) delete mode 100644 testing/unit-testing-jest/docs/test-structure.md diff --git a/testing/unit-testing-jest/docs/introduction.md b/testing/unit-testing-jest/docs/introduction.md index e34a96a..a470dfd 100644 --- a/testing/unit-testing-jest/docs/introduction.md +++ b/testing/unit-testing-jest/docs/introduction.md @@ -1,10 +1,50 @@ -## Whats is testing and why is important? +# Introduction +### General concept and benefits + +Essentially, a unit test is a method that instantiates a small portion of our application and checks its behavior independently of other parts. + Testing is a method to check if the code is working as expected. Testing the code helps to detect bugs on time and prevent the appearance of new bugs in the future. Also, testing gives confidence to our code. We can expect that they don't find problems in QA tests. -## Benefits * Fewer bugs in production * Fewer code regressions * More maintainable code * Faster refactoring and upgrades * Less dead code * You can see more on this [article](https://jestjs.io/docs/using-matchers). + + +### Principles + +**Easy to write:** It should be easy to code all of those test routines without enormous effort. + +**Readable:** The intent of a unit test should be clear. A good unit test tells a story about some behavioral aspect of our application, so it should be easy to understand which scenario is being tested and — if the test fails — easy to detect how to address the problem. + +**Reliable:** Unit tests should fail only if there’s a bug in the system under test. Good unit tests should be reproducible and independent from external factors such as the environment or running order. + +**Fast:** Developers write unit tests so they can repeatedly run them and check that no bugs have been introduced. Slow unit tests may also indicate that either the system under test, or the test itself, interacts with external systems, making it environment-dependent. + +### Unit test structure (AAA pattern) +- Arrange: Initializes the objects and establishes the values of the data that we are going to use in the Test that contains it. +- Act: Makes the call to the method to be tested with the parameters prepared for this purpose. +- Assert: Checks that the executed test method behaves as we expected it to. + +````ts + 🏷️ describe('Class, Module, Service or Component to test', () => { + //test + 🌱️ it('should do ...', () => { + // Arrange + const service = new ServiceToTest(); + // Act + const value = service.fn(); + // Assert + 🔍️️ expect(value)️.🧪toBe('expected value'); + }); + }); +```` +🏷 First use ```describe```to define the scope of the tests, this can contain one o more test, inside, define the name of the class that you wanna test, next put a call back ```,() =>``` + +🌱 Now use ``it`` to define your test, inside describe the specific name of your test, and next put a call back ```,() =>``` + +🔍️️ The soul of your test is the ```assertion ```, which is defined as ```expect()``` followed by the variable that you want to match. + +🧪 Every assertion is paired with a ```matcher```. It allows you to evaluate the result of a variable. You can get all the matcher of Jest on this [link](https://jestjs.io/docs/using-matchers). diff --git a/testing/unit-testing-jest/docs/test-structure.md b/testing/unit-testing-jest/docs/test-structure.md deleted file mode 100644 index e6590cf..0000000 --- a/testing/unit-testing-jest/docs/test-structure.md +++ /dev/null @@ -1,29 +0,0 @@ -# Basic structure of a test - -### Arrange, Act and Assert (AAA) Pattern: -- Arrange: Initializes the objects and establishes the values of the data that we are going to use in the Test that contains it. -- Act: Makes the call to the method to be tested with the parameters prepared for this purpose. -- Assert: Checks that the executed test method behaves as we expected it to. - - - -````ts - 🏷️ describe('Class, Module, Service or Component to test', () => { - //test - 🌱️ it('should do ...', () => { - // Arrange - const service = new ServiceToTest(); - // Act - const value = service.fn(); - // Assert - 🔍️️ expect(value)️.🧪toBe('expected value'); - }); - }); -```` -🏷 First use ```describe```to define the scope of the tests, this can contain one o more test, inside, define the name of the class that you wanna test, next put a call back ```,() =>``` - -🌱 Now use ``it`` to define your test, inside describe the specific name of your test, and next put a call back ```,() =>``` - -🔍️️ The soul of your test is the ```assertion ```, which is defined as ```expect()``` followed by the variable that you want to match. - -🧪 Every assertion is paired with a ```matcher```. It allows you to evaluate the result of a variable. You can get all the matcher of Jest on this [link](https://jestjs.io/docs/using-matchers). diff --git a/testing/unit-testing-jest/docs/unit-test-jest.md b/testing/unit-testing-jest/docs/unit-test-jest.md index 267e6b1..c2a9bbb 100644 --- a/testing/unit-testing-jest/docs/unit-test-jest.md +++ b/testing/unit-testing-jest/docs/unit-test-jest.md @@ -1,33 +1,27 @@ -# Unit test with Jest - -## Topics -- Unit test with Jest - - [Whats is testing? and why is important?](./introduction.md#whats-is-testing-and-why-is-important) - - [Benefits](./introduction.md#benefits) -- [Options to test?](./options-to-test.md) -- [Jest](./jest.md) -- [Basic structure of a test](./test-structure.md) -- [Jest hooks](./jest-hooks.md) - - [Repeating setUp](./jest-hooks.md#repeating-setup) - - [One time setUp](./jest-hooks.md#one-time-setup) -- [Angular default test configuration](./angular-configuration.md) - - [Understanding TestBed :test_tube:](./angular-configuration.md#understanding-testbed-test_tube) - - [Fixture and Component :statue_of_liberty:](./angular-configuration.md#fixture-and-component-statue_of_liberty) - - [Init the fixture](./angular-configuration.md#init-the-fixture) - - [Init the component](./angular-configuration.md#init-the-component) - - [fixture.detectChanges()](./angular-configuration.md#fixturedetectchanges) -- [How to spy functions calls](./spy-local.md) - - [Spy local function](./spy-local.md#spy-local-function) -- [Spy external function](./spy-external.md) - - [Router](./spy-external.md#router) - - [ActivatedRouter](./spy-external.md#activatedrouter) - - [Private functions](./spy-external.md#private-functions) -- [How to get elements from the DOM on testing](./getting-dom-elements.md) - - [Getting element](./getting-dom-elements.md#getting-element) -- [Testing a class](./testing-class.md) -- [HttpClientTestingModule](./http-test.md) -- [Issues](./issues.md) - - [i18n dependency](./issues.md#i18n-dependency) - - [Navigator dependency](./issues.md#navigator-dependency) - - [Error with the navigator](./issues.md#error-with-the-navigator) - - [Error with the ChangeDetectionStrategy](./issues.md#error-with-the-changedetectionstrategy) +# Unit test with Jest +### Introduction + 1. [General concepts and benefits](./introduction.md#general-concept-and-benefits) + 2. [Testing Principles](./introduction.md#principless) + 3. [Unit test structure (AAA pattern)](./introduction.md#unit-test-structure-aaa-pattern) +### Angular Testing + 1. Test structure. + 2. Angular Testing utility APIs (https://angular.io/guide/testing-utility-apis). + 3. RouterTestingModule, HttpClientTestingModule, etc. +### Jest Framework + 1. Jest (Benefits and concepts). + 2. How to migrate or install Jest in an Angular project? (https://jestjs.io/docs/migration-guide) + 3. Jest Hooks. + 4. Mock functions and spies. + 5. Matchers (https://jestjs.io/docs/using-matchers). +### Testing Angular Projects + 1. Class + 2. Basic Component + 3. Service + 4. Interceptors + 5. Pipe + 6. Directive + 7. Routing + 8. Guards +### Others + 1. Testing private functions + 2. Angular Testing Library \ No newline at end of file From 6f4a6951d2a3abf73708ee5be0dbae30487be0c5 Mon Sep 17 00:00:00 2001 From: Pedro Ortiz M Date: Thu, 29 Dec 2022 12:30:51 -0500 Subject: [PATCH 2/3] docs(unit-testing): adding lower case after colon --- testing/unit-testing-jest/docs/introduction.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/testing/unit-testing-jest/docs/introduction.md b/testing/unit-testing-jest/docs/introduction.md index a470dfd..ae0a5b9 100644 --- a/testing/unit-testing-jest/docs/introduction.md +++ b/testing/unit-testing-jest/docs/introduction.md @@ -15,18 +15,20 @@ Testing is a method to check if the code is working as expected. Testing the cod ### Principles -**Easy to write:** It should be easy to code all of those test routines without enormous effort. +**Easy to write:** it should be easy to code all of those test routines without enormous effort. -**Readable:** The intent of a unit test should be clear. A good unit test tells a story about some behavioral aspect of our application, so it should be easy to understand which scenario is being tested and — if the test fails — easy to detect how to address the problem. +**Readable:** the intent of a unit test should be clear. A good unit test tells a story about some behavioral aspect of our application, so it should be easy to understand which scenario is being tested and — if the test fails — easy to detect how to address the problem. -**Reliable:** Unit tests should fail only if there’s a bug in the system under test. Good unit tests should be reproducible and independent from external factors such as the environment or running order. +**Reliable:** unit tests should fail only if there’s a bug in the system under test. Good unit tests should be reproducible and independent from external factors such as the environment or running order. -**Fast:** Developers write unit tests so they can repeatedly run them and check that no bugs have been introduced. Slow unit tests may also indicate that either the system under test, or the test itself, interacts with external systems, making it environment-dependent. +**Fast:** developers write unit tests so they can repeatedly run them and check that no bugs have been introduced. Slow unit tests may also indicate that either the system under test, or the test itself, interacts with external systems, making it environment-dependent. + +> Unit tests do NOT test the interaction with external modules. Everything related to real dependencies is tested in an **integration tests**. ### Unit test structure (AAA pattern) -- Arrange: Initializes the objects and establishes the values of the data that we are going to use in the Test that contains it. -- Act: Makes the call to the method to be tested with the parameters prepared for this purpose. -- Assert: Checks that the executed test method behaves as we expected it to. +- Arrange: initializes the objects and establishes the values of the data that we are going to use in the Test that contains it. +- Act: makes the call to the method to be tested with the parameters prepared for this purpose. +- Assert: checks that the executed test method behaves as we expected it to. ````ts 🏷️ describe('Class, Module, Service or Component to test', () => { From 6308589344fe16bf9ee8b1ddf2b553a841401e9d Mon Sep 17 00:00:00 2001 From: Pedro Ortiz M Date: Thu, 29 Dec 2022 12:32:57 -0500 Subject: [PATCH 3/3] docs(unit-testing): renaming section --- testing/unit-testing-jest/docs/unit-test-jest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/testing/unit-testing-jest/docs/unit-test-jest.md b/testing/unit-testing-jest/docs/unit-test-jest.md index c2a9bbb..2c91b28 100644 --- a/testing/unit-testing-jest/docs/unit-test-jest.md +++ b/testing/unit-testing-jest/docs/unit-test-jest.md @@ -6,7 +6,7 @@ ### Angular Testing 1. Test structure. 2. Angular Testing utility APIs (https://angular.io/guide/testing-utility-apis). - 3. RouterTestingModule, HttpClientTestingModule, etc. + 3. Testing Modules ### Jest Framework 1. Jest (Benefits and concepts). 2. How to migrate or install Jest in an Angular project? (https://jestjs.io/docs/migration-guide)