mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
Apply suggestions from code review
Co-Authored-By: mattwr18 <mattwr18@gmail.com> Co-Authored-By: Robert Schäfer <git@roschaefer.de>
This commit is contained in:
parent
0d47f6b1d4
commit
c7ef9ba04a
@ -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
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||

|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user