particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Image Builder service for console.redhat.com
840 commits 9 branches 22 tags 26 MiB
Find a file
lucasgarfield 9d8236ad76 Dev Dependencies: Add Mock Service Worker 
As we begin migrating to RTK Query for API calls, we will need a means
of mocking API endpoints for testing that works well with RTKQ. Mock
Service Worker is an API mocking library that uses the Service Worker
API to intercept actual requests and is recommended for use with RTKQ.

https://mswjs.io/docs/

Some additional justification from the creator of RKT Query that
explains why we would not want to simply continue mocking our API
endpoints using Jest:
```
I wouldn't use jest mocking. I would mock the API.

The reason for this being is that your mocks will assume certain return
values from the RTKQ hook - and if your assumptions are wrong, you might
have a nice green running test, but in reality your app will still fail.

An example of this would be using skip and not checking for
isUninitialized - since that case will not come up if you are not using
skip and you might just assume that you will only ever see isLoading,
isSuccess and isError cases in your component. It's a perfectly valid
assumption in many cases, but not always true. Mocking RTKQ would hide
the resulting bug behind green tests.

Instead, I would recommend using something like mock service worker to
just mock your api endpoints and let RTKQ do it's work. That is how we
are testing RTKQ ourselved in our own tests - you are welcome to take a
ook there: RTKQ tests.
```
https://stackoverflow.com/a/70313785
2023-02-15 09:23:24 +01:00
.github Add Schutzbot and Sonarqube 2022-09-02 16:09:12 +02:00
.travis CI: Fix location of Jenkinsfile for sed 2022-06-03 12:38:36 +02:00
config config: remove module name in webpack config (#959) 2023-02-09 12:17:27 +01:00
deploy config: remove module name in webpack config (#959) 2023-02-09 12:17:27 +01:00
devel devel: expose correct composer ports and use tern migrations 2022-11-18 14:00:15 +01:00
distribution Fix docker stack (#713) 2022-04-26 14:00:53 +01:00
schutzbot ci: add tags to AWS instances 2022-11-10 18:46:09 +01:00
src ESLint: Add prefer-const rule 2023-02-10 11:37:06 +01:00
.eslintrc.yml ESLint: Add prefer-const rule 2023-02-10 11:37:06 +01:00
.gitignore Stop ignoring lock-file. 2021-10-12 15:03:04 +02:00
.gitlab-ci.yml Add Schutzbot and Sonarqube 2022-09-02 16:09:12 +02:00
.stylelintrc.json package-json: remove unnused stylint-scss and bump dependencies 2022-03-24 15:48:34 +01:00
.travis.yml .travis: Enable stage-stable and prod-stable branches 2022-04-21 14:42:55 +02:00
babel.config.js babel: update the babel config 2022-04-11 13:18:30 +02:00
build_deploy.sh Frontend container migration 2022-10-18 17:12:09 +02:00
codecov.yml codecov.yml: reset comment to default 2021-10-28 15:02:18 +01:00
LICENSE osbuild-installer-frontend 2020-03-27 10:14:04 +01:00
package-lock.json Dev Dependencies: Add Mock Service Worker 2023-02-15 09:23:24 +01:00
package.json Dev Dependencies: Add Mock Service Worker 2023-02-15 09:23:24 +01:00
pr_check.sh pr_check: use new combined iqe plugin 2022-12-08 09:03:40 +00:00
README.md README: update start scripts (#711) 2022-04-22 15:38:48 +01:00

README.md

image-builder-frontend

Frontend Development

To develop the frontend you can use a proxy to run image-builder-frontend locally against the chrome and backend at console.redhat.com.

Working against the production environment is preferred, as any work can be released without worrying if a feature from stage has been released yet.

Nodejs and npm version

Make sure you have npm@7 and node 15+ installed. If you need multiple versions of nodejs check out nvm.

Webpack proxy

  1. run npm ci

  2. run npm run prod-beta. This command uses a prod-beta env by default. Configure your environment by the env attribute in dev.webpack.config.js.

  3. Secondly redirect a few prod.foo.redhat.com to localhost, if this has not been done already.

echo "127.0.0.1 prod.foo.redhat.com" >> /etc/hosts
  1. open browser at https://prod.foo.redhat.com:1337/beta/insights/image-builder

Webpack proxy (staging) -- Runs with image-builder's stage deployment

  1. run npm ci

  2. run npm run stage-beta. This command uses a stage-beta env by default. Configure your environment by the env attribute in dev.webpack.config.js.

  3. Secondly redirect a few stage.foo.redhat.com to localhost, if this has not been done already.

echo "127.0.0.1 stage.foo.redhat.com" >> /etc/hosts
  1. open browser at https://stage.foo.redhat.com:1337/beta/insights/image-builder

Insights proxy (deprecated)

  1. Clone the insights proxy: https://github.com/RedHatInsights/insights-proxy

  2. Setting up the proxy

    Choose a runner (podman or docker), and point the SPANDX_CONFIG variable to profile/local-frontend.js included in image-builder-frontend.

        sudo insights-proxy/scripts/patch-etc-hosts.sh
    export RUNNER="podman"
    export SPANDX_CONFIG=$PATH_TO/image-builder-frontend/profiles/local-frontend.js
    sudo -E insights-proxy/scripts/run.sh

  3. Starting up image-builder-frontend

    In the image-builder-frontend checkout directory

        npm install
    npm start

The UI should be running on https://prod.foo.redhat.com:1337/beta/insights/image-builder/landing. Note that this requires you to have access to either production or stage (plus VPN and proxy config) of insights.

Backend Development

To develop both the frontend and the backend you can again use the proxy to run both the frontend and backend locally against the chrome at cloud.redhat.com. For instructions see devel/README.md.

Style Guidelines

This project uses eslint's recommended styling guidelines. These rules can be found here: https://eslint.org/docs/rules/

Test Guidelines

Testing is done using React Testing Library. All UI contributions must also include a new test or update an existing test in order to maintain code coverage.

Tests can be run with

    npm run test

These tests will also be run in our Travis CI when a PR is opened.