rickreyhsig/testing-the-aaa-pattern

Action Item: The AAA Pattern 🔬

In this Action Item, you will:

• ⚙️ write effective tests following the AAA pattern
• 🕵️ learn how to use code coverage to measure your testing progress
• 🚦 get introduced to Test-Driven Development

---

Challenges:

1. 💪[COMPETENT] Write a simple unit test using the AAA pattern
2. 🏋🏽‍♀️[PROFICIENT] Add the missing function, in a TDD style
3. 🔥[PROFICIENT] Write an integration test
4. 🧙‍♀️[EXPERT][BONUS🎁] Get the code coverage to 100% using automocking

---

HINT: Use the AAA pattern to structure your tests

---

📔 Tips for effective test writing:

1. Test the public Interface/APIs of the system rather than the internal functions.
2. Test state, not interactions. Rather than testing how the system got to a certain result, test the result.
3. Test Behaviors, not Functions. Do not try to match the structure of the test to the one of the code.
4. It is ok to repeat yourself(forget DRY) and be DAMP(Descriptive and Meaningfully Phrases)
5. Write Clear Error Messages: Given -> When -> Then

---

WALK-THROUGH: 1.[COMPETENT] Write a simple unit test

Test a single function in isolation using a unit test.

1.1 Install dependencies:

npm install

1.2 Run the tests:

npm test

Check the terminal and inspect the results.

1.3 🔍 Inspect the code coverage

The tests will now run when you change your code. You should also see the current Code Coverage:

Check the coverage folder and open the coverage/lcov-report/index.html file in your browser. You should see something like this:

Code Coverage for a specific function:

1.3 Complete the missing tests:

• 📝 Add tests for calculatePriceAfterDiscount.ts and get the coverage to 100% for this function

Follow the examples in the tests files:

• calculateGrossPrice.spec.ts
• brandInventoryValue.spec.ts

Run the tests in watch mode:

npm run test:dev

You should see something like this:

Press a to run all the tests. Keep them running to get real-time feedback on your progress.

Make sure you cover the function at 100% in tests, see below:

Solution:

• 🚀 CODE SOLUTION - Adding a unit test: git checkout solution_one
• 🖥️ VIDEO SOLUTION - Adding a unit test

---

WALK-THROUGH: 2.[PROFICIENT] Add the missing function, in a TDD style

Use Test-Driven Development to implement a method. We have already written test cases for the function, you have to write the code.

TODO's:

• 📝 Complete the function in filterAndSortByDiscount.ts so the test in filterAndSortByDiscount.spec.ts will pass.

Check the failed test message and implement a function to make the tests pass:

Solution:

• 🚀 CODE SOLUTION - Add the function in TDD style: git checkout solution_two
• 🖥️ VIDEO SOLUTION - Add the function in TDD style

---

WALK-THROUGH: 3.[PROFICIENT] Write an integration test

TODO's:

• 📝 Add tests for calculateCartItemPrice.ts and get the coverage to 100% for this function

💡 HINT: Use jest to mock dependencies.

Note: We have added some mock objects to make it easier for you in mocksExample.ts.

Solution:

• 🚀 CODE SOLUTION - Add integration tests: git checkout solution_three
• 🖥️ VIDEO SOLUTION - Add integration tests

3.1 EXPERT - Use auto-mocking for your test objects

💡 HINT: Use ts-auto-mock to easily create mock objects.

    const discountedProduct = createMock<Product>({
        discount: {
            isEnabled: true,
            percentage: 50,
        },
    });

Solution:

• 🚀 CODE SOLUTION - Set up auto-mocks: git checkout solution_three_automocks
• 🖥️ VIDEO SOLUTION - Set up auto-mocks

---

WALK-THROUGH: 4.[EXPERT][BONUS🎁] Get the code coverage to 100% by addding integration tests

TODO's:

• 📝 Get the code coverage to 100% for the module by adding integration tests in priceCalculator.spec.ts

💡 HINT: Use jest to mock dependencies.

💡 HINT: Use ts-auto-mock to easily create mock objects.

Getting Help

If you have issues with the Action Item, you can get help and feedback in the Community or, in the Weekly Calls.