In this repo:

• API health reporting page PoC using Vue.js.
• How to create and document a reusable Vue.js component with Storybook.
• How to write unit tests using vue-test-utils.
• How to write E2E tests using Playwright.

You can find some notes as well as instructions on how to view the various parts in the sections below:

Make sure you have the required versions of Node.js and npm installed in your machine.

• nodejs >= 16.x
• npm >= 8.x

then run

npm install

• Implemented using Vue.js 2 for the frontend and express/SQLite for the backend.
• Used Bootstrap 4 for base elements' styling along with custom SCSS when needed.
• Stats are fetched when each table row expands using last week's date range to shape the request to the backend so that frontend receives only the necessary data.

In order to view the API health analytics page:

1. Start express and webpack dev server using

npm run dev

2. Open http://localhost:8080 in your browser

• A reusable SearchBar component similar to GitHub and Storybook.
• Includes functionality to focus on the search input when pressing the / key.
• Storybook is used for both creating and documenting the component.
• An additional page that includes the SearchBar component is created for basic E2E testing.

In order to view Storybook

1. Start Storybook using

npm run storybook

2. Open http://localhost:6006/?path=/story/design-system-search-bar--default in your browser

There are some unit tests created using vue-test-utils/Jest, you can run them using:

npm run test:unit

There are some E2E tests created using Playwright.
In order to run the E2E tests:

• You have to install Playwright and its deps with npx playwright install and npx playwright install-deps
• Then, you have to first start express and webpack dev server (if not already started) using:

npm run dev

and finally run

npm run test:e2e

express/SQLite as a mock backend.

npm run backend

npm run serve

npm run build

npm run lint

npm run test:unit

npm run test:e2e

npm run storybook

See Configuration Reference.