From c593fb59ca3f9de8fd256ee51cf04d9cafe0c4ad Mon Sep 17 00:00:00 2001 From: Timid Robot Zehta Date: Fri, 12 Apr 2024 09:32:27 -0700 Subject: [PATCH 1/2] improve behavior of docker containers and document local cypress testing --- .gitignore | 2 + Dockerfile | 19 ++++++++++ README.md | 92 +++++++++++++++++++++++++++++----------------- docker-compose.yml | 11 ++++-- 4 files changed, 87 insertions(+), 37 deletions(-) create mode 100644 Dockerfile diff --git a/.gitignore b/.gitignore index 5892fdac..787b83f2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ +.cache/ .idea/ +.npm/ chromedriver.log coverage/ dist/ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 00000000..02a63958 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,19 @@ +# https://docs.docker.com/engine/reference/builder/ + +# In order for NGINX to consistently serve the docs directory the parent +# directory (repository root) needs to be mounted because building the site +# deletes and recreates the docs directory. If the docs directory itself is +# mounted, the container will continue to serve an empty directory (resulting +# in a 403) after it is deleted because it is mounting the original docs +# directory and not the new one. + +# https://hub.docker.com/_/nginx/ +FROM nginx:latest + +RUN mkdir /app + +WORKDIR /app + +# Update the NGINX configuraiton to serve /app/docs +RUN sed -e's#/usr/share/nginx/html#/app/docs#' -i \ + /etc/nginx/conf.d/default.conf diff --git a/README.md b/README.md index 5599afa8..15b69be7 100644 --- a/README.md +++ b/README.md @@ -69,14 +69,31 @@ website](https://www.docker.com/products/docker-desktop) and follow the installation instructions. +### Startup containers + +The containers can be started with: +```shell +docker compose up +``` +(See [Docker Compose overview | Docker Docs](https://docs.docker.com/compose/) +for more information on managing containes with `docker compose`.) + + +### Initial setup + +Before the chooser-node container can be used effectively, a clean install of +NPM packages from `package-lock.json` is required: +```shell +docker compose exec chooser-node npm ci +``` +**This step generally only needs to be done once.** + + ### Run Node development server -1. Perform a clean install of NPM packages from `package-lock.json` - ```shell - docker compose exec chooser-node npm ci - ``` - - (this initial step can be skipped if previously completed) -2. Run Node development server +1. Startup containers (see above) +2. Complete initial setup (see above) +3. Run Node development server ```shell docker compose exec chooser-node npm run serve ``` @@ -85,12 +102,9 @@ installation instructions. ### Create production (standalone) build -1. Perform a clean install of NPM packages from `package-lock.json` - ```shell - docker compose exec chooser-node npm ci - ``` - - (this initial step can be skipped if previously completed) -2. Run Node development server +1. Startup containers (see above) +2. Complete initial setup (see above) +3. Run Node development server ```shell docker compose exec chooser-node npm run build ``` @@ -105,12 +119,9 @@ when making modifications to this location. ### Create standalone (production) build -1. Perform a clean install of NPM packages from `package-lock.json` - ```shell - docker compose exec chooser-node npm ci - ``` - - (this initial step can be skipped if previously completed) -2. Run Node development server +1. Startup containers (see above) +2. Complete initial setup (see above) +3. Run Node development server ```shell docker compose exec chooser-node npm run build ``` @@ -131,12 +142,9 @@ docker compose exec chooser-node VUE_APP_CC_OUTPUT=embedded npm run build ### Create a web component build -1. Perform a clean install of NPM packages from `package-lock.json` - ```shell - docker compose exec chooser-node npm ci - ``` - - (this initial step can be skipped if previously completed) -2. Run Node development server +1. Startup containers (see above) +2. Complete initial setup (see above) +3. Run Node development server ```shell docker compose exec chooser-node npm run build-component ``` @@ -165,19 +173,35 @@ docker compose exec chooser-node VUE_APP_CC_OUTPUT=embedded npm run build-compon ``` -## Running Tests +## Perform unit tests on standalone or embedded build -You can run tests by executing: -```shell -docker compose exec chooser-node npm run test -``` +1. Startup containers (see above) +2. Complete initial setup (see above) +2. Run unit tests + ```shell + docker compose exec chooser-node npm run test:unit + ``` -For running tests on a web-component build, run: -```shell -docker compose exec chooser-node npm run test-component -``` +## Perform unit tests on web-component build -It starts a server with the `dist/demo.html` on which tests can be run. +1. Startup containers (see above) +2. Complete initial setup (see above) +3. Create a web component build (see above) +2. Run unit tests + ```shell + docker compose exec chooser-node npm run test-component + ``` + - It starts a server with the `dist/demo.html` on which tests can be run. + + +## Perform Cypress tests + +1. Startup containers (see above) +2. Run Cypress tests + ```shell + docker run -it -v $PWD:/e2e -w /e2e -e CYPRESS_baseUrl=http://host.docker.internal:8888 cypress/included:latest + ``` + - (This will download the cypress/included image when first run) ## CSS Build diff --git a/docker-compose.yml b/docker-compose.yml index 869948a6..35827b3c 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -5,18 +5,23 @@ version: '2.4' services: chooser-web: - # https://hub.docker.com/_/nginx/ - image: 'nginx:latest' + build: . ports: - '8888:80' restart: on-failure volumes: - - './docs:/usr/share/nginx/html:ro' + - '.:/app:ro' chooser-node: # continue running until shutdown (allows docker compose exec which is much # faster than docker compose run) per https://serverfault.com/a/1084975 command: sh -c 'trap "exit" TERM; while true; do sleep 1; done' + environment: + # Store caches in repository directory. This save time across container + # runs. NOTE: cypress is not supported in this container--see README.md + CYPRESS_CACHE_FOLDER: /app/.cache/Cypress + npm_config_cache: /app/.npm + npm_config_devdir: /app/.cache/node-gyp image: 'node:14' ports: - '8080:8080' From 5c124397b1e188b05e16edbc62bf3805a6912e82 Mon Sep 17 00:00:00 2001 From: Timid Robot Zehta Date: Fri, 12 Apr 2024 09:43:44 -0700 Subject: [PATCH 2/2] remove cypress cache as it is unused and causes unit test errors --- docker-compose.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index 35827b3c..c5ebb163 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -18,8 +18,7 @@ services: command: sh -c 'trap "exit" TERM; while true; do sleep 1; done' environment: # Store caches in repository directory. This save time across container - # runs. NOTE: cypress is not supported in this container--see README.md - CYPRESS_CACHE_FOLDER: /app/.cache/Cypress + # runs. npm_config_cache: /app/.npm npm_config_devdir: /app/.cache/node-gyp image: 'node:14'