1 of 35

Workshop 4: Adventures in Automated Testing

  • Please do these now:
    1. Pick a programming language for the workshop:
      • Yellow Post-It for JavaScript.
      • Green Post-It for Python.
      • Blue Post-It for Java.
    2. Put your name on the Post-It and paste it on the participants board.
      • We will allocate a table for you after the briefing.
    3. Sit in the front section.
    4. Join the Telegram Channel.
  • Agenda:

​

​

​

​

​

​

​

​

  • WiFi: STACK_DEV
  • Password: dev@STACK24

8:30am

Registration

9:10am

Briefing - Adventure Guide

9:40am

Hands-on-Lab Exercises (individual activity)

11:20am

Demo: Coding with AI

11:40am

Reflections & Questions

12:00pm

End

Scan QR to join the Telegram Channel

1

2 of 35

Adventures in Automated Testing

Michael Cheng

Principal Software Engineer

Government Technology Agency of Singapore

3 of 35

An introduction to automated testing

Briefing - Adventure Guide

3

4 of 35

What is Automated Testing?

  • Test Code: Programming code that verifies the behavior of your production code.
  • Tests are repeatable and predictable.
  • Usually runs in the Command Line / Terminal / Console.

4

5 of 35

What is Automated Testing?

  • Given an input to the program, it should return an expected output / result.
    • Sum of 1 and 1 should return 2.
    • sum(1, 1) == 2

from fizz_buzz import fizz_buzz

​

def test_empty_list():

input = 2

​

result = fizz_buzz(input)

​

assert result == [1, 2]

5

6 of 35

What is Testable Code?

  • You should be able to test parts of your software in isolation - smallest units can be independently tested?
    • Control the inputs to the code / function - this allows you to test both regular cases & edge cases.
    • Control dependencies (by mocking the response) - everything that a piece of code does not own but uses.

Test Subject

Input

Username

Email

Values from web form

Output

User Account

Database Entry

True / False

Collaborators

Database results

API Response

6

7 of 35

Different types of Automated Tests - Test Pyramid

  • UI: Referring to end-to-end tests (eg. Browser automation)
  • Integration Test: Ensures that individual components or modules of your application work well together (eg. connecting to database).
  • Unit Test: Low level tests of isolated functions.

7

8 of 35

Different types of Automated Tests - Test Pyramid

8

9 of 35

Simple structure of a test file

  1. Import / use the actual function you are testing (test subject).
  2. Setup the code so you can run the test subject without compile / syntax error.
  3. Execute the function.
  4. Compare / assert the output of the function / changed state with an expected result.

9

10 of 35

Sample test file (Python + PyTest)

from fizz_buzz import fizz_buzz

​

def test_empty_list():

input = 2

​

result = fizz_buzz(input)

​

assert result == [1, 2]

  1. Import
  2. Setup
  3. Execute
  4. Compare

10

11 of 35

Difference between Integration & End to End Testing.

  • Integration test is still at the code level - how your production code interacts with other modules and external systems.
    • Focuses on specific interactions between components or modules within the system.
    • e.g. Turn off mocking the DB connection.
  • End to End test - usually involves a client
    • Ensures the entire application and all its parts work together as expected, just as a real user would interact with it.
    • eg. Web Browser or mobile simulator / device.

11

12 of 35

When to use any of these automated testing?

Unit Tests

Integration Tests

End-to-End Tests

  • Good to cover as many branches of the code - good for checking edge cases safely.
  • 100% code coverage is counter productive. Minimally should cover behavior of new code.
  • To test / ensure behavior of critical system components that you have been mocking in unit tests.
  • Test critical path of your applications.
  • Can be a challenge to mock external dependencies.

12

13 of 35

Start your web browsers!

Hands on Lab

13

14 of 35

Hands on Lab Exercises

  • We will use a To Do List app to help illustrate the concepts. It will have these features:
    • List of To Do Items
    • Add new To Do Item
    • Delete To Do Item
    • Edit a To Do Item
    • Mark Item as Done / Not Done
  • There is a front-end app (VueJS) and a backend API app written in your preferred programming languages.

14

15 of 35

Hands on Lab Exercises

  • Through the exercises, you will learn about:
    • The different parts of the front-end and backend apps,
    • The unit tests and integration tests for each of the apps,
    • The End-to-End Test written in Playwright.
  • We will be using GitHub Codespaces and VSCode (IDE)
    • All in the web browser.

Programming Language

Application Framework

Database

Unit Test

E2E Library

JavaScript

ExpressJS

SQLite

Vitest

Playwright JS

Python

FastAPI

SQLite

Pytest

Playwright Python

Java

Spring Boot

H2

Junit

Playwright Java

15

16 of 35

Hands on Lab Exercises

  • Stretch Goal (Exercises 9-13):
    • Implement a new feature: Clear Completed To Do Items

As a User,

When I have added multiple Tasks to the To Do List,

And I have marked some Task as "Done",

Then the "Clear Completed" button should be enabled.

​

When I click on "Clear Completed",

Then I the "Done" Tasks should disappear from the To Do list.

16

17 of 35

Hands on Lab Exercises

17

18 of 35

Facilitators

  • JavaScript
    • Du Yanchao
    • Dexter Mooi
    • Elizabeth Lim
    • Song Menglu
  • Python
    • Ani Adhikary
    • Andrey Bodoev
    • Ray Chuan
    • Tomoe Suzuki
  • Java
    • Anarane Tung
    • Kok Chee Kean
    • Woo Huiren

Link to Hands-on-Lab Exercises

https://github.com/miccheng/test-automation-workshop

18

19 of 35

Adventures in Automated Testing Agenda

  • Agenda:

​

​

​

​

​

​

​

​

  • WiFi: STACK_DEV
  • Password: dev@STACK24

8:30am

Registration

9:10am

Briefing - Adventure Guide

9:40am

Hands-on-Lab Exercises (individual activity)

11:05am

Demo: Coding with AI

11:30am

Reflections & Questions

12:00pm

End

Scan QR to join the Telegram Channel

https://github.com/miccheng/test-automation-workshop

19

20 of 35

Coding with AI

Demo

20

21 of 35

Coding with AI

  • How we used ChatGPT to create the sample application?
    • Sample Prompt (example)
    • More prompts.
  • Demo: How to use GitHub Copilot to implement new features with automated tests?
    • Comment blocks as prompts for in-line code suggestions.
    • Context helps Copilot give you better answers.
      • Open up all the relevant / related files in the editor.
    • Copilot Chat for more ambiguous tasks.

21

22 of 35

Think deep thoughts…

Reflections

22

23 of 35

Benefits of writing tests

  • Test coverage provides more confidence that your code is behaving as expected.
    • Help ensure that new features did not introduce bugs.
    • A Bug is just a test you have not written yet.
    • Also helps you when refactoring - optimizing the code readability / performance without changing behaviour.

23

24 of 35

Benefits of writing tests

  • Prevent regression bugs: Ensure that you didn't introduce unexpected behaviours to other parts of the system when you make code changes.
  • Implicit documentation on expected behavior of your code.
  • Reduces the cost of change.
    • Scalable way of checking the system.
    • Saves time in the long run.

24

25 of 35

Think deeper thoughts…

Questions?

If shy, can also ask in the Telegram Channel

25

26 of 35

Email: michael_cheng@tech.gov.sg

LinkedIn: https://www.linkedin.com/in/miccheng/

https://go.gov.sg/stack2024-workshop-feedback

Share your feedback with us!

26

Thank you!

27 of 35

Adventures in Automated Testing - Logistics

  • Please do these now:
    • Pick a programming language for the workshop:
      • Yellow Post-It for JavaScript.
      • Green Post-It for Python.
      • Blue Post-It for Java.
    • Put your name on the Post-It and paste it on the participants board.
      • We will allocate a table for you after the briefing.
    • Sit in the front section.
    • Join the Telegram Channel.
  • Agenda:

​

​

​

​

​

​

​

​

  • WiFi:

8:30am

Registration

9:10am

Briefing - Adventure Guide

9:40am

Hands-on-Lab Exercises (individual activity)

11:20am

Demo: Coding with AI

11:40am

Reflections & Questions

12:00pm

End

Scan QR to join the Telegram Channel

27

28 of 35

Presentation title [40pt Calibri]

Speaker Name [24pt Calibri]

Speaker Title [20pt Calibri]

Speaker Organisation [20pt Calibri]

29 of 35

Divider Title Text [24-20pt Calibri]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.

Divider Title [35pt, Calibri]

29

30 of 35

Presentation title [36-32pt Calibri] – OPTION 1

Presentation Text [26-18pt Calibri]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

​

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.

30

31 of 35

Presentation title [36-32pt Calibri] – OPTION 2

Presentation Text [26-18pt Calibri]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

​

Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

Image

31

32 of 35

Presentation title [36-32pt Calibri]

Presentation Text [26-18pt Calibri]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

​

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam.

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo.

32

33 of 35

Presentation title [36-32pt Calibri]

Presentation Text [26-18pt Calibri]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

​

Ut wisi enim ad minim veniam, quis nostrud

exerci tation ullamcorper suscipit lobortis nisl

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

​

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet

Image

33

34 of 35

Email: XXX

LinkedIn: XXX

​

34

Thank you!

35 of 35

35

Thank you!