difuoan / luvely

Vue component library with unit-, integration- and e2e-tests. Dockerized.

LuVeLy Component Library

Dockerized storybook component library with all the goodies!

Overview

• Installing & Running Repository
  • Prerequisites
  • Clone & Install Repository
  • Run Repository
  • Enable Visual Tests
• Run Tests
  • Run Individual Tests
• Playground
• All make Commands
• Knowledge
• Issues

Installing & Running Repository

Prerequisites

• working Docker installation
• a Chromatic account (for visual testing)

Clone & Install Repository

git clone https://github.com/difuoan/storybook
cd storybook
make init

Make sure to update the .env file with your credentials

[email protected]

Then build the container.

make build

Run Repository

Unless you have changed the DOMAIN variables in the .env or .env.example file the storybook UI should be reachable under storybook.localhost after you run the following command.

make up

Enable Visual Tests

Follow the setup process further. The next steps will be described in the "Visual Tests" panel inside the storybook UI (see screenshot ⇒)

Run Tests

You can view the results in the "Report" pages in the storybook UI.

make test

Run Individual Tests

make test-e2e       # run end to end tests
make test-unit      # run unit tests
make test-storybook # run component tests

Playground

You can create a playground to manually test your components based on the src folder. It will behave like a regular single page application (no router installed). The playground will run automatically when you run make up, so you probably won't need the following command.

make playground

All make Commands

init           # initialise the env
up             # start the container
start          # start the container
down           # end the container
stop           # end the container
tail           # echo logs
build          # build image
restart        # restart container
clear          # destroy environment
ps             # print all docker containers
login          # open bash in container
playground     # run vite page
test           # run all tests
test-storybook # run storybook (component) tests
test-unit      # run unit tests
test-e2e       # run end to end tests

Knowledge

• node.js
• npm
• Vue
• Vite
• Docker
• Docker Compose
• GNU make
• Traefik
• TypeScript
• Storybook

Issues

• If the "Report" pages doesn't work it's probably because the tests haven't been exectured yet. Read the Run Tests section.
• If the .env file keeps resetting it's probably because you have re-initialised the project. Don't call make init or change the variables in the .env.example file instead.
• If you want to execute npm commands use make login to ensure they get executed from within the container and as the correct user.
• If you find a console output about Download the React DevTool or something like that you can probably safely ignore it by right-clicking the message and hiding it from the context menu.