TARDIS Webtool

Project Description

The goal of this project is giving easier access to cobald/tardis resources through a webinterface. The app is a single page application with a REST backend written in python/fastapi.

Tooling

As the main framework we use vue + vite. For styling tailwindcss is used as a css framework. Routing: vue router Testing: See below Api calls: axios The whole project is written almost exclusively in typescript (Don't use anything else for src files). State Management: pinia with persistent stores plugin

Development environment

Almost everything you need for development should be included in the project. VSCode is highly recommended as the dev environment. When opening the project in vscode you should be prompted by vscode to install all recommended extensions.

Running the project

As of now the app is still in development. Thus it is run with the vite dev server:

npm run dev

The vite proxy settings are configured to a REST API running on http://localhost:4321. Make this setting lines up with the REST API config.

Testing

There are multiple frameworks in use for testing:

vitest for simple unit tests vue testing library for isolated component testing cypress for E2E testing

To run tests there are multiple possibilities:

npm run test

for simple continuous cli testing.

npm run test:cov

for continuous cli testing with coverage results (cov results are also saved in a separate directore and can be viewed in the browser).

npm run test:ui

for an additional web GUI. To open cypress:

npm run cypress:open

These recommendations for testing will be used in this project. That means:

• unit testing for logic only .ts files like util
• semi-isolated component testing with minimal mocking with the vue testing library.
  • These tests should be used to test general behaviour of components and not specific implementation details.
• E2E testing with working backend and fully rendered page.
  • This should test the whole UX including properly rendered DOM elements etc.

Formatting

Prettier is used for formatting. Simply enable formatOnSave in your vscode settings JSON. The extension however doesn't always work. That's why I recommend using the formatting scripts:

npm run format:[check,fix]

Contributing

This project uses conventional commits as its commit standard. Simply use the recommended vscode extension to make the use of conventional commits easier. At this point the scopes aren't strictly defined anywhere as there it's not yet possible to add a description to the scopes in settings.json. In the future a new text document will be commited into the repo that defines all scopes correctly.

The Result Type

When possible e.g. in very low level functions like api calls, never throw errors but instead use the custom Result<T> type defined in util. Only try/catch or handle the error with the Result api (unwrap(), expect(), ...) the error when the situation is fitting or the actual value is needed. Make sure functions don't throw in unexpected places.