Document testing frontend changes with F!F

README.md

@@ -15,6 +15,13 @@ reports and optionally stub certain checkpoints for regression testing.
 - [How to use Ladybug](#how-to-use-ladybug)
 - [How to incorporate Ladybug into your application or framework](#how-to-incorporate-ladybug-into-your-application-or-framework)
 - [How to change and test Ladybug](#how-to-change-and-test-ladybug)
+  - [General setup](#general-setup)
+  - [Backend development](#backend-development)
+  - [Testing backend changes with Frank!Framework](#testing-backend-changes-with-frank!framework)
+  - [Frontend development](#frontend-development)
+  - [Testing frontend changes with the test webapp](#testing-frontend-changes-with-the-test-webapp)
+  - [Testing frontend changes with Frank!Framework](#testing-frontend-changes-with-frank!framework)
+  - [Testing frontend changes with unit tests](#testing-frontend-changes-with-unit-tests)
 - [Create and publish NPM package and WebJar](#create-and-publish-npm-package-and-webjar)
 - [CI/CD](#cicd)
 
@@ -133,6 +140,8 @@ The [next section](#how-to-change-and-test-ladybug) also describes how to run La
 How to change and test Ladybug
 ==============================
 
+General setup
+-------------
 
 Clone the following projects to your Git folder or any other folder of your choice:
 
@@ -144,6 +153,9 @@ Clone the following projects to your Git folder or any other folder of your choi
 
 Create skip-replace-inject.txt in the ibis-ladybug folder (see pom.xml for more info).
 
+Backend development
+-------------------
+
 Read the Frank!Runner [README.md](https://github.com/ibissource/frank-runner#frankrunner) to learn how to integrate it
 with your IDE but you can also just start the restart.bat in the frank-runner/specials/ibis-ladybug folder. This should
 build and run the test webapp with Ladybug. When Tomcat has been started by the Frank!Runner browse to:
@@ -158,11 +170,17 @@ properties as describes in the comments in this file.
 You can also enable spring.profiles.active=storage.file to use the file storage and see the reports generated by the
 unit tests of the ibis-ladybug project in the Ladybug GUI.
 
+Testing backend changes with Frank!Framework
+--------------------------------------------
+
 To test your Ladybug changes with the Frank!Framework enable test.with.iaf=true. By default it will test with the webapp
 module of the Frank!Framework. This can be changed with the iaf.module property. The frank-runner/specials folder
 contains a folder per module that can have it's own build.properties with custom properties (see the build.xml for
 possible values).
 
+Frontend development
+--------------------
+
 Please do the following to set up your development environment for the front-end:
 * Install [Node.js](https://nodejs.org/en/), choose version 16. You should get executables `npm` version 8.x and `node` version 16.x. Check these versions using `npm -v` and `node -v`.
 * Change directory to your checkout of ladybug-frontend.
@@ -171,10 +189,20 @@ Please do the following to set up your development environment for the front-end
 * Run `yarn install --frozen-lockfile` to install your dependencies. The flag ensures that you get exactly the same dependencies as the other developers have. If you want to include a new dependency, update `package.json` and do `yarn install`. File `yarn.lock` will be updated, the list of all dependencies including dependencies of other dependencies. Check in `yarn.lock` to ensure that other developers will update to the same dependencies as you. In case you don't have a direct internet connection you might need to set HTTPS_PROXY, see https://docs.cypress.io/guides/references/proxy-configuration.
 * Run `yarn prepare` to prepare Git hooks. If you do not do this, you will not be able to commit or push in the ladybug-frontend project.
 
-Test your environment as follows:
+Testing frontend changes with the test webapp
+---------------------------------------------
+
 * Start the backend using `frank-runner/specials/ibis-ladybug` as explained before. Wait until Tomcat is up and running.
 * Execute command `ng serve` from within the `ladybug-frontend` checkout. This wil make Node.js serve the Ladybug frontend files and proxy the Ladybug backend api as the src folder contains a proxy.conf.json (this will circumvent CORS related problems as the frontend served by Node.js on port 4200 would call the api on port 80). It is now possible to use both the WebJars packaged Ladybug frontend and the Ladybug frontend served by Node.js. The page on the following url (also mentioned above) contains links to both frontends: `http://localhost`.
 
+Testing frontend changes with Frank!Framework
+---------------------------------------------
+
+The Frank!Framework incorporates Ladybug and configures is a bit different then the test webapp. It for example adds a Gray box view which you might want to test. The Frank!Framework serves the Ladybug on a different url then the test webapp so you need to configure the previously mentioned proxy a bit different and change the url in src/proxy.conf.json from http://localhost/ladybug to http://localhost/iaf/ladybug. In case you also have backend changes you can start the Frank!Framework as eplained above (with test.with.iaf=true). Otherwise it is easier to for example run Frank2Example1. See the Frank!Runner [README.md](https://github.com/ibissource/frank-runner#frankrunner) for more information on how to start a Frank2Example1 or another Frank.
+
+Testing frontend changes with unit tests
+----------------------------------------
+
 To run the unit tests of the frontend, run the following command:
 
 ```