From 65f558e4f2b58991fff95752f30400a3648665c0 Mon Sep 17 00:00:00 2001 From: Suzanne Aitchison Date: Thu, 15 Apr 2021 15:03:06 +0100 Subject: [PATCH] add some notes re manual testing in pr template and docs (#13414) --- .github/PULL_REQUEST_TEMPLATE.md | 5 +++-- docs/tests/manual-tests.md | 37 ++++++++++++++++++++++++++++++++ docs/tests/readme.md | 1 + 3 files changed, 41 insertions(+), 2 deletions(-) create mode 100644 docs/tests/manual-tests.md diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index d0b0dbfa3..e8129a74a 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -33,8 +33,9 @@ ## QA Instructions, Screenshots, Recordings -_Please replace this line with instructions on how to test your changes, as well -as any relevant images for UI changes._ +_Please replace this line with instructions on how to test your changes, a note +on the devices and browsers this has been tested on, as well as any relevant +images for UI changes._ ### UI accessibility concerns? diff --git a/docs/tests/manual-tests.md b/docs/tests/manual-tests.md new file mode 100644 index 000000000..7a2a90be0 --- /dev/null +++ b/docs/tests/manual-tests.md @@ -0,0 +1,37 @@ +--- +title: Manual Tests +--- + +# Manual Tests + +We try to automate as much as possible, but particularly for frontend changes it +is usually necessary to verify work with a manual test. When manually testing a +feature, it's useful to check: + +- Does the UI look consistent across different desktop browsers? +- Is the UI optimised for a mobile layout? +- Does the feature behave consistently across desktop and mobile browsers? +- Is the feature accessible? (See the + [Accessibility testing docs](/tests/accessibility-tests)) + +## Tips for testing on mobile + +For features involving touch interactions it becomes more important to test on +actual mobile devices, rather than using the browser dev-tools device simulator. +There can be some platform-specific differences in how these touch events are +handled and it's useful to make sure a feature is checked on both android and +iOS. + +One way to run your development code on your own mobile device is to use +[ngrok](https://ngrok.com/). ngrok is a free tool that allows you to access your +`localhost:3000` via a standard URL. To use it: + +- Follow [ngrok's instructions](https://ngrok.com/) to download/install the tool + (there is a free tier) +- Run `ngrok http 3000` in your terminal +- Copy the URL given in response (e.g. `xxxxxxxxx.ngrok.io`) and add it to your + `.env` file's `APP_DOMAIN` value (replacing `localhost:3000`) +- Start the app via `bin/startup` as usual +- Visit the ngrok URL on your mobile (to save copying the text, you could use a + [QR code generator](https://www.qr-code-generator.com/free-generator/) on your + desktop browser so you only need to point your camera at the screen) diff --git a/docs/tests/readme.md b/docs/tests/readme.md index 43337f47e..b4b59aad2 100644 --- a/docs/tests/readme.md +++ b/docs/tests/readme.md @@ -5,6 +5,7 @@ items: - integration-tests.md - unit-functional-tests.md - frontend-tests.md + - manual-tests.md - accessibility-tests.md - e2e-tests.md - regression-tests.md