@@ -8,12 +8,7 @@ Currently we rely on different sources to present diffs, these include:
...
@@ -8,12 +8,7 @@ Currently we rely on different sources to present diffs, these include:
## Deep Dive
## Deep Dive
In January 2019, Oswaldo Ferreira hosted a [Deep Dive] on GitLab's Diffs and Commenting on Diffs functionality to share his domain specific knowledge with anyone who may work in this part of the code base in the future. You can find the [recording on YouTube], and the slides on [Google Slides] and in [PDF]. Everything covered in this deep dive was accurate as of GitLab 11.7, and while specific details may have changed since then, it should still serve as a good introduction.
In January 2019, Oswaldo Ferreira hosted a [Deep Dive](https://gitlab.com/gitlab-org/create-stage/issues/1) on GitLab's Diffs and Commenting on Diffs functionality to share his domain specific knowledge with anyone who may work in this part of the code base in the future. You can find the [recording on YouTube](https://www.youtube.com/watch?v=K6G3gMcFyek), and the slides on [Google Slides](https://docs.google.com/presentation/d/1bGutFH2AT3bxOPZuLMGl1ANWHqFnrxwQwjiwAZkF-TU/edit) and in [PDF](https://gitlab.com/gitlab-org/create-stage/uploads/b5ad2f336e0afcfe0f99db0af0ccc71a/). Everything covered in this deep dive was accurate as of GitLab 11.7, and while specific details may have changed since then, it should still serve as a good introduction.
You can find an example of the above in this [class][container-class-example];
You can find an example of the above in this [class](https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/mini_pipeline_graph_dropdown.js);
@@ -12,17 +12,17 @@ What is described in the following sections can be found in these examples:
...
@@ -12,17 +12,17 @@ What is described in the following sections can be found in these examples:
## Vue architecture
## Vue architecture
All new features built with Vue.js must follow a [Flux architecture][flux].
All new features built with Vue.js must follow a [Flux architecture](https://facebook.github.io/flux/).
The main goal we are trying to achieve is to have only one data flow and only one data entry.
The main goal we are trying to achieve is to have only one data flow and only one data entry.
In order to achieve this goal we use [vuex](#vuex).
In order to achieve this goal we use [vuex](#vuex).
You can also read about this architecture in vue docs about [state management][state-management]
You can also read about this architecture in vue docs about [state management](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)
and about [one way data flow][one-way-data-flow].
and about [one way data flow](https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow).
### Components and Store
### Components and Store
In some features implemented with Vue.js, like the [issue board][issue-boards]
In some features implemented with Vue.js, like the [issue board](https://gitlab.com/gitlab-org/gitlab-foss/tree/master/app/assets/javascripts/boards)
or [environments table][environments-table]
or [environments table](https://gitlab.com/gitlab-org/gitlab-foss/tree/master/app/assets/javascripts/environments)
you can find a clear separation of concerns:
you can find a clear separation of concerns:
```plaintext
```plaintext
...
@@ -47,7 +47,7 @@ of the new feature should be.
...
@@ -47,7 +47,7 @@ of the new feature should be.
The Store and the Service should be imported and initialized in this file and
The Store and the Service should be imported and initialized in this file and
provided as a prop to the main component.
provided as a prop to the main component.
Be sure to read about [page-specific JavaScript][page_specific_javascript].
Be sure to read about [page-specific JavaScript](./performance.md#page-specific-javascript).
### Bootstrapping Gotchas
### Bootstrapping Gotchas
...
@@ -162,7 +162,7 @@ For example, tables are used in a quite amount of places across GitLab, a table
...
@@ -162,7 +162,7 @@ For example, tables are used in a quite amount of places across GitLab, a table
would be a good fit for a component. On the other hand, a table cell used only
would be a good fit for a component. On the other hand, a table cell used only
in one table would not be a good use of this pattern.
in one table would not be a good use of this pattern.
You can read more about components in Vue.js site, [Component System][component-system]
You can read more about components in Vue.js site, [Component System](https://vuejs.org/v2/guide/#Composing-with-Components).
### A folder for the Store
### A folder for the Store
...
@@ -278,7 +278,7 @@ const vm = mountComponent(Component, data);
...
@@ -278,7 +278,7 @@ const vm = mountComponent(Component, data);
### Test the component's output
### Test the component's output
The main return value of a Vue component is the rendered output. In order to test the component we
The main return value of a Vue component is the rendered output. In order to test the component we
need to test the rendered output. [Vue][vue-test] guide's to unit test show us exactly that:
need to test the rendered output. [Vue](https://vuejs.org/v2/guide/unit-testing.html) guide's to unit test show us exactly that:
## Vue.js Expert Role
## Vue.js Expert Role
...
@@ -289,13 +289,3 @@ One should apply to be a Vue.js expert by opening an MR when the Merge Request's
...
@@ -289,13 +289,3 @@ One should apply to be a Vue.js expert by opening an MR when the Merge Request's
- Full understanding of testing a Vue and Vuex application
- Full understanding of testing a Vue and Vuex application
- Vuex code follows the [documented pattern](vuex.md#actions-pattern-request-and-receive-namespaces)
- Vuex code follows the [documented pattern](vuex.md#actions-pattern-request-and-receive-namespaces)
- Knowledge about the existing Vue and Vuex applications and existing reusable components
- Knowledge about the existing Vue and Vuex applications and existing reusable components
@@ -5,7 +5,7 @@ at GitLab. We use Karma with Jasmine and Jest for JavaScript unit and integratio
...
@@ -5,7 +5,7 @@ at GitLab. We use Karma with Jasmine and Jest for JavaScript unit and integratio
and RSpec feature tests with Capybara for e2e (end-to-end) integration testing.
and RSpec feature tests with Capybara for e2e (end-to-end) integration testing.
Unit and feature tests need to be written for all new features.
Unit and feature tests need to be written for all new features.
Most of the time, you should use [RSpec] for your feature tests.
Most of the time, you should use [RSpec](https://github.com/rspec/rspec-rails#feature-specs) for your feature tests.
Regression tests should be written for bug fixes to prevent them from recurring
Regression tests should be written for bug fixes to prevent them from recurring
in the future.
in the future.
...
@@ -15,7 +15,7 @@ information on general testing practices at GitLab.
...
@@ -15,7 +15,7 @@ information on general testing practices at GitLab.
## Vue.js testing
## Vue.js testing
If you are looking for a guide on Vue component testing, you can jump right away to this [section][vue-test].
If you are looking for a guide on Vue component testing, you can jump right away to this [section](../fe_guide/vue.md#testing-vue-components).
## Jest
## Jest
...
@@ -30,7 +30,7 @@ Jest tests can be found in `/spec/frontend` and `/ee/spec/frontend` in EE.
...
@@ -30,7 +30,7 @@ Jest tests can be found in `/spec/frontend` and `/ee/spec/frontend` in EE.
## Karma test suite
## Karma test suite
While GitLab is switching over to [Jest][jest] you'll still find Karma tests in our application. [Karma][karma] is a test runner which uses [Jasmine] as its test
While GitLab is switching over to [Jest](https://jestjs.io) you'll still find Karma tests in our application. [Karma](http://karma-runner.github.io/) is a test runner which uses [Jasmine](https://jasmine.github.io/) as its test
framework. Jest also uses Jasmine as foundation, that's why it's looking quite similar.
framework. Jest also uses Jasmine as foundation, that's why it's looking quite similar.
Karma tests live in `spec/javascripts/` and `/ee/spec/javascripts` in EE.
Karma tests live in `spec/javascripts/` and `/ee/spec/javascripts` in EE.
...
@@ -549,7 +549,8 @@ TBU
...
@@ -549,7 +549,8 @@ TBU
Jasmine provides stubbing and mocking capabilities. There are some subtle differences in how to use it within Karma and Jest.
Jasmine provides stubbing and mocking capabilities. There are some subtle differences in how to use it within Karma and Jest.
Stubs or spies are often used synonymously. In Jest it's quite easy thanks to the `.spyOn` method. [Official docs][jestspy]
Stubs or spies are often used synonymously. In Jest it's quite easy thanks to the `.spyOn` method.
GitLab is built on top of [Ruby on Rails](https://rubyonrails.org/), and we're using [RSpec] for all
GitLab is built on top of [Ruby on Rails](https://rubyonrails.org/), and we're using [RSpec](https://github.com/rspec/rspec-rails#feature-specs) for all
the backend tests, with [Capybara] for end-to-end integration testing.
the backend tests, with [Capybara](https://github.com/teamcapybara/capybara) for end-to-end integration testing.
On the frontend side, we're using [Jest](https://jestjs.io/) and [Karma](http://karma-runner.github.io/)/[Jasmine](https://jasmine.github.io/) for JavaScript unit and
On the frontend side, we're using [Jest](https://jestjs.io/) and [Karma](http://karma-runner.github.io/)/[Jasmine](https://jasmine.github.io/) for JavaScript unit and
integration testing.
integration testing.
...
@@ -58,14 +58,10 @@ Everything you should know about how to test Rake tasks.
...
@@ -58,14 +58,10 @@ Everything you should know about how to test Rake tasks.
## [End-to-end tests](end_to_end/index.md)
## [End-to-end tests](end_to_end/index.md)
Everything you should know about how to run end-to-end tests using
Everything you should know about how to run end-to-end tests using
| `spec/features/` | [Capybara] + [RSpec] | If your test has the `:js` metadata, the browser driver will be [Poltergeist], otherwise it's using [RackTest]. |
| `spec/features/` | [Capybara](https://github.com/teamcapybara/capybara) + [RSpec](https://github.com/rspec/rspec-rails#feature-specs) | If your test has the `:js` metadata, the browser driver will be [Poltergeist], otherwise it's using [RackTest]. |
### Frontend feature tests
### Frontend feature tests
...
@@ -487,7 +487,7 @@ Every new feature should come with a [test plan].
...
@@ -487,7 +487,7 @@ Every new feature should come with a [test plan].
| Tests path | Testing engine | Notes |
| Tests path | Testing engine | Notes |
| ---------- | -------------- | ----- |
| ---------- | -------------- | ----- |
| `qa/qa/specs/features/` | [Capybara] + [RSpec] + Custom QA framework | Tests should be placed under their corresponding [Product category] |
| `qa/qa/specs/features/` | [Capybara](https://github.com/teamcapybara/capybara) + [RSpec](https://github.com/rspec/rspec-rails#feature-specs) + Custom QA framework | Tests should be placed under their corresponding [Product category] |
> See [end-to-end tests](end_to_end/index.md) for more information.
> See [end-to-end tests](end_to_end/index.md) for more information.
...
@@ -517,14 +517,11 @@ These tests run against the UI and ensure that basic functionality is working.
...
@@ -517,14 +517,11 @@ These tests run against the UI and ensure that basic functionality is working.
### GitLab QA orchestrator
### GitLab QA orchestrator
[GitLab QA orchestrator] is a tool that allows to test that all these pieces
[GitLab QA orchestrator](https://gitlab.com/gitlab-org/gitlab-qa) is a tool that allows to test that all these pieces
integrate well together by building a Docker image for a given version of GitLab
integrate well together by building a Docker image for a given version of GitLab
Rails and running end-to-end tests (i.e. using Capybara) against it.
Rails and running end-to-end tests (i.e. using Capybara) against it.
Learn more in the [GitLab QA orchestrator README][gitlab-qa-readme].
Learn more in the [GitLab QA orchestrator README](https://gitlab.com/gitlab-org/gitlab-qa/tree/master/README.md).