From c7ef9ba04a3fc8a6afd9b0066a813e02430f4bf4 Mon Sep 17 00:00:00 2001 From: Alina Beck Date: Mon, 4 Nov 2019 11:45:17 +0300 Subject: [PATCH] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: mattwr18 Co-Authored-By: Robert Schäfer --- webapp/README.md | 6 +++--- webapp/testing.md | 9 +++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/webapp/README.md b/webapp/README.md index 9f44267c2..b692b3d9c 100644 --- a/webapp/README.md +++ b/webapp/README.md @@ -45,7 +45,7 @@ For more information see our [frontend testing guide](testing.md). Use these com {% tabs %} {% tab title="With Docker" %} -After starting the application following the above guidelines open new terminal windows for each of these commands: +After starting the application following the above guidelines, open new terminal windows for each of these commands: ```bash # run eslint @@ -68,7 +68,7 @@ You can then visit the Storybook playground on `http://localhost:3002` {% tab title="Without Docker" %} -After starting the application following the above guidelines open new terminal windows for each of these commands: +After starting the application following the above guidelines, open new terminal windows for each of these commands: ```bash # run eslint @@ -92,7 +92,7 @@ You can then visit the Storybook playground on `http://localhost:3002` ## Styleguide Migration -We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration our new components will live in a `view` folder to separate them from the old, yet untouched components. +We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Human-Connection/Nitro-Styleguide) into the main [Human Connection repository](https://github.com/Human-Connection/Human-Connection) and refactoring our components in the process. During this migration, our new components will live in a `view` folder to separate them from the old, yet untouched components. ### Folder Structure diff --git a/webapp/testing.md b/webapp/testing.md index 9e530c4bf..fb300e14f 100644 --- a/webapp/testing.md +++ b/webapp/testing.md @@ -13,6 +13,7 @@ We write unit tests with the help of [Jest](https://jestjs.io/) and [Vue Test Ut To run all tests use the command `yarn test` in the `/webapp` directory. Other useful commands are: - `yarn test -t test-name` to run tests including `test-name` in their file or test names - `yarn test -o` to run tests related to files that have been changed since the latest commit +- `yarn run path/to/component.spec.js` to run a single test file ## Documentation and manual testing @@ -20,17 +21,17 @@ To run all tests use the command `yarn test` in the `/webapp` directory. Other u ### Component documentation -With Storybook our components can be documented in detail and offer a visual reference to other developers. When all components are properly documented Storybook can be used as a big component library – where developers can browse through design tokens and components and immediately verify that the component offers the desired functionality. +With Storybook our components can be documented in detail and offer a visual reference to other developers. When all components are properly documented, Storybook can be used as a big component library – where developers can browse through design tokens and components and immediately verify that the component offers the desired functionality. ### Manual testing in an isolated environment -When adding new components or changing existing ones Storybook can be helpful not only to document the feature for future use but also to test different use cases (e.g. by passing different types of `props`) in an isolated playground. +When adding new components or changing existing ones, Storybook can be helpful not only to document the feature for future use, but also to test different use cases (e.g. by passing different types of `props`) in an isolated playground. -With the right addons Storybook also gives immediate feedback on how well the component complies with accessibility guidelines. +With the right addons, Storybook also gives immediate feedback on how well the component complies with accessibility guidelines. ------ -To run Storybook first start the app, then enter the following command in a new terminal window: `yarn storybook`. The output should look similar to this: +To run Storybook, first start the app, then enter the following command in a new terminal window: `yarn storybook`. The output should look similar to this: ![Storybook output](../.gitbook/assets/storybook-output.png)