Merge branch 'winh-frontend-testing-levels-diagrams-docs' into 'master'
Add diagrams for frontend testing levels (docs) See merge request gitlab-org/gitlab-ce!31999
This commit is contained in:
commit
9174d60ba1
1 changed files with 152 additions and 0 deletions
|
@ -619,6 +619,42 @@ See also [Notes on testing Vue components](../fe_guide/vue.html#testing-vue-comp
|
||||||
|
|
||||||
Unit tests are on the lowest abstraction level and typically test functionality that is not directly perceivable by a user.
|
Unit tests are on the lowest abstraction level and typically test functionality that is not directly perceivable by a user.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph RL
|
||||||
|
plain[Plain JavaScript];
|
||||||
|
Vue[Vue Components];
|
||||||
|
feature-flags[Feature Flags];
|
||||||
|
license-checks[License Checks];
|
||||||
|
|
||||||
|
plain---Vuex;
|
||||||
|
plain---GraphQL;
|
||||||
|
Vue---plain;
|
||||||
|
Vue---Vuex;
|
||||||
|
Vue---GraphQL;
|
||||||
|
browser---plain;
|
||||||
|
browser---Vue;
|
||||||
|
plain---backend;
|
||||||
|
Vuex---backend;
|
||||||
|
GraphQL---backend;
|
||||||
|
Vue---backend;
|
||||||
|
backend---database;
|
||||||
|
backend---feature-flags;
|
||||||
|
backend---license-checks;
|
||||||
|
|
||||||
|
class plain tested;
|
||||||
|
class Vuex tested;
|
||||||
|
|
||||||
|
classDef node color:#909090,fill:#f0f0f0,stroke-width:2px,stroke:#909090
|
||||||
|
classDef label stroke-width:0;
|
||||||
|
classDef tested color:#000000,fill:#a0c0ff,stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
subgraph " "
|
||||||
|
tested;
|
||||||
|
mocked;
|
||||||
|
class tested tested;
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
#### When to use unit tests
|
#### When to use unit tests
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
|
@ -711,6 +747,41 @@ Unit tests are on the lowest abstraction level and typically test functionality
|
||||||
|
|
||||||
Component tests cover the state of a single component that is perceivable by a user depending on external signals such as user input, events fired from other components, or application state.
|
Component tests cover the state of a single component that is perceivable by a user depending on external signals such as user input, events fired from other components, or application state.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph RL
|
||||||
|
plain[Plain JavaScript];
|
||||||
|
Vue[Vue Components];
|
||||||
|
feature-flags[Feature Flags];
|
||||||
|
license-checks[License Checks];
|
||||||
|
|
||||||
|
plain---Vuex;
|
||||||
|
plain---GraphQL;
|
||||||
|
Vue---plain;
|
||||||
|
Vue---Vuex;
|
||||||
|
Vue---GraphQL;
|
||||||
|
browser---plain;
|
||||||
|
browser---Vue;
|
||||||
|
plain---backend;
|
||||||
|
Vuex---backend;
|
||||||
|
GraphQL---backend;
|
||||||
|
Vue---backend;
|
||||||
|
backend---database;
|
||||||
|
backend---feature-flags;
|
||||||
|
backend---license-checks;
|
||||||
|
|
||||||
|
class Vue tested;
|
||||||
|
|
||||||
|
classDef node color:#909090,fill:#f0f0f0,stroke-width:2px,stroke:#909090
|
||||||
|
classDef label stroke-width:0;
|
||||||
|
classDef tested color:#000000,fill:#a0c0ff,stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
subgraph " "
|
||||||
|
tested;
|
||||||
|
mocked;
|
||||||
|
class tested tested;
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
#### When to use component tests
|
#### When to use component tests
|
||||||
|
|
||||||
- Vue components
|
- Vue components
|
||||||
|
@ -781,6 +852,46 @@ Component tests cover the state of a single component that is perceivable by a u
|
||||||
Integration tests cover the interaction between all components on a single page.
|
Integration tests cover the interaction between all components on a single page.
|
||||||
Their abstraction level is comparable to how a user would interact with the UI.
|
Their abstraction level is comparable to how a user would interact with the UI.
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph RL
|
||||||
|
plain[Plain JavaScript];
|
||||||
|
Vue[Vue Components];
|
||||||
|
feature-flags[Feature Flags];
|
||||||
|
license-checks[License Checks];
|
||||||
|
|
||||||
|
plain---Vuex;
|
||||||
|
plain---GraphQL;
|
||||||
|
Vue---plain;
|
||||||
|
Vue---Vuex;
|
||||||
|
Vue---GraphQL;
|
||||||
|
browser---plain;
|
||||||
|
browser---Vue;
|
||||||
|
plain---backend;
|
||||||
|
Vuex---backend;
|
||||||
|
GraphQL---backend;
|
||||||
|
Vue---backend;
|
||||||
|
backend---database;
|
||||||
|
backend---feature-flags;
|
||||||
|
backend---license-checks;
|
||||||
|
|
||||||
|
class plain tested;
|
||||||
|
class Vue tested;
|
||||||
|
class Vuex tested;
|
||||||
|
class GraphQL tested;
|
||||||
|
class browser tested;
|
||||||
|
linkStyle 0,1,2,3,4,5,6 stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
classDef node color:#909090,fill:#f0f0f0,stroke-width:2px,stroke:#909090
|
||||||
|
classDef label stroke-width:0;
|
||||||
|
classDef tested color:#000000,fill:#a0c0ff,stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
subgraph " "
|
||||||
|
tested;
|
||||||
|
mocked;
|
||||||
|
class tested tested;
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
#### When to use integration tests
|
#### When to use integration tests
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
|
@ -838,6 +949,47 @@ This also implies that database queries are executed which makes this category s
|
||||||
|
|
||||||
See also the [RSpec testing guidelines](../testing_guide/best_practices.md#rspec).
|
See also the [RSpec testing guidelines](../testing_guide/best_practices.md#rspec).
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph RL
|
||||||
|
plain[Plain JavaScript];
|
||||||
|
Vue[Vue Components];
|
||||||
|
feature-flags[Feature Flags];
|
||||||
|
license-checks[License Checks];
|
||||||
|
|
||||||
|
plain---Vuex;
|
||||||
|
plain---GraphQL;
|
||||||
|
Vue---plain;
|
||||||
|
Vue---Vuex;
|
||||||
|
Vue---GraphQL;
|
||||||
|
browser---plain;
|
||||||
|
browser---Vue;
|
||||||
|
plain---backend;
|
||||||
|
Vuex---backend;
|
||||||
|
GraphQL---backend;
|
||||||
|
Vue---backend;
|
||||||
|
backend---database;
|
||||||
|
backend---feature-flags;
|
||||||
|
backend---license-checks;
|
||||||
|
|
||||||
|
class backend tested;
|
||||||
|
class plain tested;
|
||||||
|
class Vue tested;
|
||||||
|
class Vuex tested;
|
||||||
|
class GraphQL tested;
|
||||||
|
class browser tested;
|
||||||
|
linkStyle 0,1,2,3,4,5,6,7,8,9,10 stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
classDef node color:#909090,fill:#f0f0f0,stroke-width:2px,stroke:#909090
|
||||||
|
classDef label stroke-width:0;
|
||||||
|
classDef tested color:#000000,fill:#a0c0ff,stroke:#6666ff,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||||
|
|
||||||
|
subgraph " "
|
||||||
|
tested;
|
||||||
|
mocked;
|
||||||
|
class tested tested;
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
#### When to use feature tests
|
#### When to use feature tests
|
||||||
|
|
||||||
- Use cases that require a backend and cannot be tested using fixtures.
|
- Use cases that require a backend and cannot be tested using fixtures.
|
||||||
|
|
Loading…
Reference in a new issue