Design

As described in the Tools section, CATcher is an Angular application that is distributed as a web app.

This page describes CATcher's design. As an Angular application, the different views of the CATcher app are built out of components, and the content displayed on these views is constructed using data provided by services. In the following sections we will briefly describe the design of some views and services within CATcher.

Views

There are only a few views accessible by the user, in each phase of the practical exam.

The diagram below shows how a user can navigate between the different views in the bug reporting phase.

Each view is built out of components. As an example, the following diagram deconstructs the ViewIssueComponent, which is used to display / update details about a bug report (i.e. the title, tester's original report, team's response, etc), to show how it is built using several smaller components. For instance, the TitleComponent, a child component of ViewIssueComponent, is responsible for displaying / updating the bug report's title.

Services

Services are classes that define business logic or communicate with the app's backend (GitHub). For ease of understanding, we have distinct services for the different types of data exchanged with the backend. Below are some examples:

• IssueService: Responsible for creating / updating issues, and periodically fetching issues from GitHub.
• AuthService: Responsible for initiating the authentication process, and querying / updating application state related to authentication.
• LabelService: Responsible for ensuring the GitHub repo has the required labels, and providing label data to various components.

Under the hood, several services use the GitHubService to communicate with GitHub. The GitHubService abstracts the details of communication with GitHub, away from the other services.