update test readme

apps/nowcasting-app/cypress/readme.md

@@ -1,13 +1,54 @@
 # Match Image Snapshot
-## saving refrence snapshots
-1. when create a new test using `toMatchImageSnapshot` command , please make sure to commit the generated `test name #0.png` files and a duplicate file named `test name #1.png` to account for the retries
+## saving reference snapshots
+1. when creating a new test using `toMatchImageSnapshot` command, please make sure to commit the generated `test name #0.png` files and a duplicate file named `test name #1.png` to account for the retries
 (this is due to `cypress-plugin-snapshots` not supporting cypress retries feature)
-2. if you are using multiple `toMatchImageSnapshot` in a single test case ,please pass a globaly unique name to the command  
+2. if you are using multiple `toMatchImageSnapshot` in a single test case, please pass a globally unique name to the command  
 ```
 cy.get("#element1").toMatchImageSnapshot({name:"test name-element1"})
 cy.get("#element2").toMatchImageSnapshot({name:"test name-element2"})
 ```
-3. run cypress in docker and on your local machine to match the github-action envirment
+3. run cypress in docker and on your local machine to match the github-action environment
 ```
 cd cypress && docker-compose up
-```
+```
+
+## updating cypress snapshots
+
+1. first checkout the previous snapshots
+```
+.
+├── ...
+├── cypress                   
+│   ├── e2e         # End-to-end, integration tests
+│   |   ├── __image_snapshots__      # refrence snapshots that cypress uses for comparison
+|   |   |   ├── mw-view #0.png
+|   |   |   ├── mw-view #1.png
+|   |   |   └──...
+|   |   └──...
+│   └── ...         
+└── ...
+
+```
+2. start test server `yarn dev:test`
+3. run cypress in docker `cd cypress && docker-compose up`
+4. the test should fail since you updated the app visually and you should see the resulting snapshots here
+```
+.
+├── ...
+├── cypress                   
+│   ├── e2e        
+│   |   ├── __image_snapshots__    
+|   |   |   ├── mw-view #0.actual.png
+|   |   |   ├── mw-view #0.diff.png
+|   |   |   ├── mw-view #0.png
+|   |   |   ├── mw-view #1.actual.png
+|   |   |   ├── mw-view #1.diff.png
+|   |   |   ├── mw-view #1.png
+|   |   |   └──...
+|   |   └──...
+│   └── ...         
+└── ...
+
+```
+5. review the changes,if approved replace `mw-view #1.png and mw-view #0.png` with `mw-view #0.actual.png`
+or run `./scripts/update-cypress-snapshots.sh` to update all test snapshots

apps/nowcasting-app/scripts/update-cypress-snapshots.sh

@@ -0,0 +1,43 @@
+#!/usr/bin/env bash
+
+SCRIPT_DIR=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
+cd $SCRIPT_DIR
+cd ../cypress/e2e/__image_snapshots__/
+
+allfiles=(*)
+snapshotnames=(*)
+
+
+#### get snapshotnames from allfiles
+
+IFS='#'
+for k in "${!allfiles[@]}"
+  do
+    file=(${snapshotnames[$k]})
+    snapshotnames[$k]=${file[0]}
+done
+IFS=' '
+####
+
+### filter uniq snapshotnames
+declare -A Aseen
+uniqueFiles=()
+for w in "${snapshotnames[@]}"; do
+    [[ ${Aseen[$w]} ]] && continue
+    uniqueFiles+=( "$w" )
+    Aseen[$w]=x
+done
+####
+
+### replace actual snapshot with refrence snapshot
+for w in "${uniqueFiles[@]}"; do
+    newfile="$w#0.actual.png"
+    if [[ " ${allfiles[*]} " =~ "${newfile}" ]]; then
+      echo "updating $w ..."
+      cp -f "./$newfile" "./$w#0.png"
+      cp -f "./$newfile" "./$w#1.png"
+    fi
+
+done
+####
+