Commit b83a4f83 authored by Phil Hughes's avatar Phil Hughes

Merge branch '64722-mg-export-frontend-fixtures' into 'master'

Resolve "Export frontend fixtures as pipeline artifact"

Closes #64722 and #59166

See merge request gitlab-org/gitlab-ce!30917
parents 4c30b0a1 444a3627
Pipeline #71933234 passed with stages
in 35 minutes and 48 seconds
......@@ -137,6 +137,7 @@ karma:
paths:
- chrome_debug.log
- coverage-javascript/
- tmp/tests/frontend/
# see https://gitlab.com/gitlab-org/gitlab-ce/issues/64756
# reports:
# junit: junit_karma.xml
......@@ -151,7 +152,7 @@ jest:
script:
- scripts/gitaly-test-spawn
- date
- bundle exec rake karma:fixtures
- bundle exec rake frontend:fixtures
- date
- yarn jest --ci --coverage
artifacts:
......@@ -161,6 +162,7 @@ jest:
paths:
- coverage-frontend/
- junit_jest.xml
- tmp/tests/frontend/
# see https://gitlab.com/gitlab-org/gitlab-ce/issues/64756
# reports:
# junit: junit_jest.xml
......
......@@ -60,8 +60,8 @@ Style/FrozenStringLiteralComment:
RSpec/FilePath:
Exclude:
- 'qa/**/*'
- 'spec/javascripts/fixtures/*'
- 'ee/spec/javascripts/fixtures/*'
- 'spec/frontend/fixtures/*'
- 'ee/spec/frontend/fixtures/*'
- 'spec/requests/api/v3/*'
Naming/FileName:
......
......@@ -107,7 +107,8 @@ if (specFilters.length) {
module.exports = function(config) {
process.env.TZ = 'Etc/UTC';
const fixturesPath = `${IS_EE ? 'ee/' : ''}spec/javascripts/fixtures`;
const fixturesPath = `tmp/tests/frontend/fixtures${IS_EE ? '-ee' : ''}`;
const staticFixturesPath = 'spec/frontend/fixtures/static';
const karmaConfig = {
basePath: ROOT_PATH,
......@@ -131,8 +132,13 @@ module.exports = function(config) {
frameworks: ['jasmine'],
files: [
{ pattern: 'spec/javascripts/test_bundle.js', watched: false },
{ pattern: `${fixturesPath}/**/*@(.json|.html|.png|.bmpr|.pdf)`, included: false },
{ pattern: `${fixturesPath}/**/*`, included: false },
{ pattern: `${staticFixturesPath}/**/*`, included: false },
],
proxies: {
'/fixtures/': `/base/${fixturesPath}/`,
'/fixtures/static/': `/base/${staticFixturesPath}/`,
},
preprocessors: {
'spec/javascripts/**/*.js': ['webpack', 'sourcemap'],
'ee/spec/javascripts/**/*.js': ['webpack', 'sourcemap'],
......
......@@ -80,18 +80,20 @@ describe('Component', () => {
Remember that the performance of each test depends on the environment.
### Manual module mocks
Jest supports [manual module mocks](https://jestjs.io/docs/en/manual-mocks) by placing a mock in a `__mocks__/` directory next to the source module. **Don't do this.** We want to keep all of our test-related code in one place (the `spec/` folder), and the logic that Jest uses to apply mocks from `__mocks__/` is rather inconsistent.
Instead, our test runner detects manual mocks from `spec/frontend/mocks/`. Any mock placed here is automatically picked up and injected whenever you import its source module.
- Files in `spec/frontend/mocks/ce` will mock the corresponding CE module from `app/assets/javascripts`, mirroring the source module's path.
- Example: `spec/frontend/mocks/ce/lib/utils/axios_utils` will mock the module `~/lib/utils/axios_utils`.
- Example: `spec/frontend/mocks/ce/lib/utils/axios_utils` will mock the module `~/lib/utils/axios_utils`.
- Files in `spec/frontend/mocks/node` will mock NPM packages of the same name or path.
- We don't support mocking EE modules yet.
If a mock is found for which a source module doesn't exist, the test suite will fail. 'Virtual' mocks, or mocks that don't have a 1-to-1 association with a source module, are not supported yet.
#### Writing a mock
Create a JS module in the appropriate place in `spec/frontend/mocks/`. That's it. It will automatically mock its source package in all tests.
Make sure that your mock's export has the same format as the mocked module. So, if you're mocking a CommonJS module, you'll need to use `module.exports` instead of the ES6 `export`.
......@@ -99,14 +101,15 @@ Make sure that your mock's export has the same format as the mocked module. So,
It might be useful for a mock to expose a property that indicates if the mock was loaded. This way, tests can assert the presence of a mock without calling any logic and causing side-effects. The `~/lib/utils/axios_utils` module mock has such a property, `isMock`, that is `true` in the mock and undefined in the original class. Jest's mock functions also have a `mock` property that you can test.
#### Bypassing mocks
If you ever need to import the original module in your tests, use [`jest.requireActual()`](https://jestjs.io/docs/en/jest-object#jestrequireactualmodulename) (or `jest.requireActual().default` for the default export). The `jest.mock()` and `jest.unmock()` won't have an effect on modules that have a manual mock, because mocks are imported and cached before any tests are run.
#### Keep mocks light
Global mocks introduce magic and can affect how modules are imported in your tests. Try to keep them as light as possible and dependency-free. A global mock should be useful for any unit test. For example, the `axios_utils` and `jquery` module mocks throw an error when an HTTP request is attempted, since this is useful behaviour in >99% of tests.
When in doubt, construct mocks in your test file using [`jest.mock()`](https://jestjs.io/docs/en/jest-object#jestmockmodulename-factory-options), [`jest.spyOn()`](https://jestjs.io/docs/en/jest-object#jestspyonobject-methodname), etc.
## Karma test suite
GitLab uses the [Karma][karma] test runner with [Jasmine] as its test
......@@ -462,7 +465,7 @@ See this [section][vue-test].
For running the frontend tests, you need the following commands:
- `rake karma:fixtures` (re-)generates [fixtures](#frontend-test-fixtures).
- `rake frontend:fixtures` (re-)generates [fixtures](#frontend-test-fixtures).
- `yarn test` executes the tests.
As long as the fixtures don't change, `yarn test` is sufficient (and saves you some time).
......@@ -515,8 +518,8 @@ Information on setting up and running RSpec integration tests with
Code that is added to HAML templates (in `app/views/`) or makes Ajax requests to the backend has tests that require HTML or JSON from the backend.
Fixtures for these tests are located at:
- `spec/javascripts/fixtures/`, for running tests in CE.
- `ee/spec/javascripts/fixtures/`, for running tests in EE.
- `spec/frontend/fixtures/`, for running tests in CE.
- `ee/spec/frontend/fixtures/`, for running tests in EE.
Fixture files in:
......@@ -527,7 +530,7 @@ The following are examples of tests that work for both Karma and Jest:
```javascript
it('makes a request', () => {
const responseBody = getJSONFixture('some/fixture.json'); // loads spec/javascripts/fixtures/some/fixture.json
const responseBody = getJSONFixture('some/fixture.json'); // loads spec/frontend/fixtures/some/fixture.json
axiosMock.onGet(endpoint).reply(200, responseBody);
myButton.click();
......@@ -536,7 +539,7 @@ it('makes a request', () => {
});
it('uses some HTML element', () => {
loadFixtures('some/page.html'); // loads spec/javascripts/fixtures/some/page.html and adds it to the DOM
loadFixtures('some/page.html'); // loads spec/frontend/fixtures/some/page.html and adds it to the DOM
const element = document.getElementById('#my-id');
......@@ -544,12 +547,12 @@ it('uses some HTML element', () => {
});
```
HTML and JSON fixtures are generated from backend views and controllers using RSpec (see `spec/javascripts/fixtures/*.rb`).
HTML and JSON fixtures are generated from backend views and controllers using RSpec (see `spec/frontend/fixtures/*.rb`).
For each fixture, the content of the `response` variable is stored in the output file.
This variable gets automagically set if the test is marked as `type: :request` or `type: :controller`.
Fixtures are regenerated using the `bin/rake karma:fixtures` command but you can also generate them individually,
for example `bin/rspec spec/javascripts/fixtures/merge_requests.rb`.
Fixtures are regenerated using the `bin/rake frontend:fixtures` command but you can also generate them individually,
for example `bin/rspec spec/frontend/fixtures/merge_requests.rb`.
When creating a new fixture, it often makes sense to take a look at the corresponding tests for the endpoint in `(ee/)spec/controllers/` or `(ee/)spec/requests/`.
## Gotchas
......
unless Rails.env.production?
namespace :frontend do
desc 'GitLab | Frontend | Generate fixtures for JavaScript tests'
RSpec::Core::RakeTask.new(:fixtures, [:pattern]) do |t, args|
args.with_defaults(pattern: '{spec,ee/spec}/frontend/fixtures/*.rb')
ENV['NO_KNAPSACK'] = 'true'
t.pattern = args[:pattern]
t.rspec_opts = '--format documentation'
end
desc 'GitLab | Frontend | Run JavaScript tests'
task tests: ['yarn:check'] do
sh "yarn test" do |ok, res|
abort('rake frontend:tests failed') unless ok
end
end
end
desc 'GitLab | Frontend | Shortcut for frontend:fixtures and frontend:tests'
task frontend: ['frontend:fixtures', 'frontend:tests']
end
unless Rails.env.production?
namespace :karma do
# alias exists for legacy reasons
desc 'GitLab | Karma | Generate fixtures for JavaScript tests'
task fixtures: ['karma:rspec_fixtures']
desc 'GitLab | Karma | Generate fixtures using RSpec'
RSpec::Core::RakeTask.new(:rspec_fixtures, [:pattern]) do |t, args|
args.with_defaults(pattern: '{spec,ee/spec}/javascripts/fixtures/*.rb')
ENV['NO_KNAPSACK'] = 'true'
t.pattern = args[:pattern]
t.rspec_opts = '--format documentation'
end
task fixtures: ['frontend:fixtures']
desc 'GitLab | Karma | Run JavaScript tests'
task tests: ['yarn:check'] do
......
/* eslint-disable import/no-commonjs */
const path = require('path');
const { ErrorWithStack } = require('jest-util');
const JSDOMEnvironment = require('jest-environment-jsdom');
const ROOT_PATH = path.resolve(__dirname, '../..');
class CustomEnvironment extends JSDOMEnvironment {
constructor(config, context) {
super(config, context);
......@@ -35,9 +38,8 @@ class CustomEnvironment extends JSDOMEnvironment {
this.rejectedPromises.push(error);
};
this.global.fixturesBasePath = `${process.cwd()}/${
IS_EE ? 'ee/' : ''
}spec/javascripts/fixtures`;
this.global.fixturesBasePath = `${ROOT_PATH}/tmp/tests/frontend/fixtures${IS_EE ? '-ee' : ''}`;
this.global.staticFixturesBasePath = `${ROOT_PATH}/spec/frontend/fixtures`;
// Not yet supported by JSDOM: https://github.com/jsdom/jsdom/issues/317
this.global.document.createRange = () => ({
......
......@@ -21,6 +21,6 @@ describe Admin::AbuseReportsController, '(JavaScript fixtures)', type: :controll
it 'abuse_reports/abuse_reports_list.html' do
get :index
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -23,6 +23,6 @@ describe Admin::UsersController, '(JavaScript fixtures)', type: :controller do
get :new
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -28,6 +28,6 @@ describe Admin::ApplicationSettingsController, '(JavaScript fixtures)', type: :c
get :show
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -34,6 +34,6 @@ describe Projects::AutocompleteSourcesController, '(JavaScript fixtures)', type:
type_id: issue.id
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -29,6 +29,6 @@ describe Projects::BlobController, '(JavaScript fixtures)', type: :controller do
id: 'add-ipython-files/files/ipython/basic.ipynb'
})
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -23,6 +23,6 @@ describe Projects::BoardsController, '(JavaScript fixtures)', type: :controller
project_id: project
})
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -27,6 +27,6 @@ describe Projects::BranchesController, '(JavaScript fixtures)', type: :controlle
project_id: project
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -29,6 +29,6 @@ describe Projects::ClustersController, '(JavaScript fixtures)', type: :controlle
id: cluster
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -28,6 +28,6 @@ describe Projects::CommitController, '(JavaScript fixtures)', type: :controller
get :show, params: params
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -38,6 +38,6 @@ describe Projects::DeployKeysController, '(JavaScript fixtures)', type: :control
project_id: project
}, format: :json
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -21,7 +21,7 @@ describe 'Groups (JavaScript fixtures)', type: :controller do
it 'groups/edit.html' do
get :edit, params: { id: group }
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -29,7 +29,7 @@ describe 'Groups (JavaScript fixtures)', type: :controller do
it 'groups/ci_cd_settings.html' do
get :show, params: { group_id: group }
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -48,7 +48,7 @@ describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller
project_id: project
}
expect(response).to be_success
expect(response).to be_successful
end
private
......@@ -60,7 +60,7 @@ describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller
id: issue.to_param
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -117,6 +117,6 @@ describe API::Issues, '(JavaScript fixtures)', type: :request do
get_related_merge_requests(project.id, issue.iid, user)
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -39,7 +39,7 @@ describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do
id: build_with_artifacts.to_param
}
expect(response).to be_success
expect(response).to be_successful
end
it 'jobs/delayed.json' do
......@@ -49,6 +49,6 @@ describe Projects::JobsController, '(JavaScript fixtures)', type: :controller do
id: delayed_job.to_param
}, format: :json
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -35,7 +35,7 @@ describe 'Labels (JavaScript fixtures)' do
group_id: group
}, format: 'json'
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -52,7 +52,7 @@ describe 'Labels (JavaScript fixtures)' do
project_id: project
}, format: 'json'
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -129,6 +129,6 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont
id: merge_request.to_param
}, format: :html
expect(response).to be_success
expect(response).to be_successful
end
end
require 'spec_helper'
describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type: :controller do
......@@ -65,6 +64,6 @@ describe Projects::MergeRequests::DiffsController, '(JavaScript fixtures)', type
**extra_params
}, format: :json
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -28,7 +28,7 @@ describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :
id: pipeline_schedule.id
}
expect(response).to be_success
expect(response).to be_successful
end
it 'pipeline_schedules/edit_with_variables.html' do
......@@ -38,6 +38,6 @@ describe Projects::PipelineSchedulesController, '(JavaScript fixtures)', type: :
id: pipeline_schedule_populated.id
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -29,6 +29,6 @@ describe Projects::PipelinesController, '(JavaScript fixtures)', type: :controll
project_id: project
}, format: :json
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -18,6 +18,8 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
end
before do
stub_licensed_features(variable_environment_scope: true)
project.add_maintainer(admin)
sign_in(admin)
allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon')
......@@ -34,7 +36,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
id: project
}
expect(response).to be_success
expect(response).to be_successful
end
it 'projects/overview.html' do
......@@ -43,7 +45,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
id: project_with_repo
}
expect(response).to be_success
expect(response).to be_successful
end
it 'projects/edit.html' do
......@@ -52,7 +54,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
id: project
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -63,7 +65,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
project_id: project
}
expect(response).to be_success
expect(response).to be_successful
end
it 'projects/ci_cd_settings_with_variables.html' do
......@@ -75,7 +77,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
project_id: project_variable_populated
}
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -29,6 +29,6 @@ describe Projects::ServicesController, '(JavaScript fixtures)', type: :controlle
id: service.to_param
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -12,6 +12,6 @@ describe SearchController, '(JavaScript fixtures)', type: :controller do
it 'search/show.html' do
get :show
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -29,6 +29,6 @@ describe Projects::ServicesController, '(JavaScript fixtures)', type: :controlle
id: service.to_param
}
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -19,7 +19,7 @@ describe 'Sessions (JavaScript fixtures)' do
it 'sessions/new.html' do
get :new
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -28,6 +28,6 @@ describe SnippetsController, '(JavaScript fixtures)', type: :controller do
get(:show, params: { id: snippet.to_param })
expect(response).to be_success
expect(response).to be_successful
end
end
# Please do not add new files here!
Instead use a Ruby file in the fixtures root directory (`spec/frontend/fixtures/`).
<div class="js-kubernetes-logs" data-logs-path="/root/kubernetes-app/environments/1/logs">
<div class="build-page">
<div class="build-trace-container prepend-top-default">
<div class="top-bar js-top-bar">
<div class="truncated-info hidden-xs pull-left"></div>
<div class="dropdown prepend-left-10 js-pod-dropdown">
<button aria-expanded="false" class="dropdown-menu-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-chevron-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"></div>
</div>
<div class="controllers pull-right">
<div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to top">
<button class="js-scroll-up btn-scroll btn-transparent btn-blank" disabled type="button"></button>
</div>
<div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Scroll to bottom">
<button class="js-scroll-down btn-scroll btn-transparent btn-blank" disabled type="button"></button>
</div>
<div class="refresh-control pull-right">
<div class="has-tooltip controllers-buttons" data-container="body" data-placement="top" title="Refresh">
<button class="js-refresh-log btn-default btn-refresh" disabled type="button"></button>
</div>
</div>
</div>
</div>
<pre class="build-trace" id="build-trace"><code class="bash js-build-output"><div class="build-loader-animation js-build-refresh"></div></code></pre>
</div>
</div>
</div>
......@@ -29,7 +29,7 @@ describe 'Todos (JavaScript fixtures)' do
it 'todos/todos.html' do
get :index
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -48,7 +48,7 @@ describe 'Todos (JavaScript fixtures)' do
issuable_id: issue_2.id
}, format: 'json'
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -23,7 +23,7 @@ context 'U2F' do
post :create, params: { user: { login: user.username, password: user.password } }
expect(response).to be_success
expect(response).to be_successful
end
end
......@@ -38,7 +38,7 @@ context 'U2F' do
it 'u2f/register.html' do
get :show
expect(response).to be_success
expect(response).to be_successful
end
end
end
......@@ -4,12 +4,15 @@ import path from 'path';
import { ErrorWithStack } from 'jest-util';
export function getFixture(relativePath) {
const absolutePath = path.join(global.fixturesBasePath, relativePath);
const basePath = relativePath.startsWith('static/')
? global.staticFixturesBasePath
: global.fixturesBasePath;
const absolutePath = path.join(basePath, relativePath);
if (!fs.existsSync(absolutePath)) {
throw new ErrorWithStack(
`Fixture file ${relativePath} does not exist.
Did you run bin/rake karma:fixtures?`,
Did you run bin/rake frontend:fixtures?`,
getFixture,
);
}
......
*.html.raw
*.html
*.json
*.pdf
*.bmpr
*
!.gitignore
# Please do not add new files here!
Instead use a Ruby file in the fixtures root directory (`spec/javascripts/fixtures/`).
export const FIXTURES_PATH = `/base/${
process.env.IS_GITLAB_EE ? 'ee/' : ''
}spec/javascripts/fixtures`;
export const FIXTURES_PATH = `/fixtures`;
export const TEST_HOST = 'http://test.host';
export const DUMMY_IMAGE_URL = `${FIXTURES_PATH}/static/images/one_white_pixel.png`;
......
......@@ -19,7 +19,7 @@ module JavaScriptFixturesHelpers
end
def fixture_root_path
(Gitlab.ee? ? 'ee/' : '') + 'spec/javascripts/fixtures'
'tmp/tests/frontend/fixtures' + (Gitlab.ee? ? '-ee' : '')
end
# Public: Removes all fixture files from given directory
......
......@@ -130,7 +130,7 @@ module TestEnv
# Keeps gitlab-shell and gitlab-test
def clean_test_path
Dir[TMP_TEST_PATH].each do |entry|
unless File.basename(entry) =~ /\A(gitaly|gitlab-(shell|test|test_bare|test-fork|test-fork_bare))\z/
unless test_dirs.include?(File.basename(entry))