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

EE port of Resolve "Export frontend fixtures as pipeline artifact"

See merge request gitlab-org/gitlab-ee!14751

.gitlab/ci/frontend.gitlab-ci.yml

@@ -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

.rubocop.yml

@@ -62,8 +62,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:

config/karma.config.js

@@ -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'],

doc/development/testing_guide/frontend_testing.md

@@ -80,6 +80,7 @@ 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.
@@ -92,6 +93,7 @@ Instead, our test runner detects manual mocks from `spec/frontend/mocks/`. Any m
 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

ee/spec/javascripts/fixtures/.gitignore

-*.html.raw
-*.html
-*.json
-*.pdf
-*.bmpr
+*
+!.gitignore

ee/spec/javascripts/fixtures/static/README.md

-# Please do not add new files here!
-
-Instead use a Ruby file in the fixtures root directory (`spec/javascripts/fixtures/`).

ee/spec/javascripts/fixtures/static/environments_logs.html

-<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>

lib/tasks/frontend.rake

+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

lib/tasks/karma.rake

 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

spec/frontend/environment.js

 /* 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 = () => ({

spec/javascripts/fixtures/abuse_reports.rb → spec/frontend/fixtures/abuse_reports.rb

@@ -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

spec/javascripts/fixtures/admin_users.rb → spec/frontend/fixtures/admin_users.rb

@@ -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

spec/javascripts/fixtures/application_settings.rb → spec/frontend/fixtures/application_settings.rb

@@ -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

spec/javascripts/fixtures/autocomplete_sources.rb → spec/frontend/fixtures/autocomplete_sources.rb

@@ -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

spec/javascripts/fixtures/blob.rb → spec/frontend/fixtures/blob.rb

@@ -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

spec/javascripts/fixtures/boards.rb → spec/frontend/fixtures/boards.rb

@@ -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

spec/javascripts/fixtures/branches.rb → spec/frontend/fixtures/branches.rb

@@ -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

spec/javascripts/fixtures/clusters.rb → spec/frontend/fixtures/clusters.rb

@@ -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

spec/javascripts/fixtures/commit.rb → spec/frontend/fixtures/commit.rb

@@ -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

spec/javascripts/fixtures/deploy_keys.rb → spec/frontend/fixtures/deploy_keys.rb

@@ -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

spec/javascripts/fixtures/groups.rb → spec/frontend/fixtures/groups.rb

@@ -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

spec/javascripts/fixtures/issues.rb → spec/frontend/fixtures/issues.rb

@@ -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

spec/javascripts/fixtures/jobs.rb → spec/frontend/fixtures/jobs.rb

@@ -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

spec/javascripts/fixtures/labels.rb → spec/frontend/fixtures/labels.rb

@@ -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

spec/javascripts/fixtures/merge_requests.rb → spec/frontend/fixtures/merge_requests.rb

@@ -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

spec/javascripts/fixtures/merge_requests_diffs.rb → spec/frontend/fixtures/merge_requests_diffs.rb

-
 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

spec/javascripts/fixtures/pipeline_schedules.rb → spec/frontend/fixtures/pipeline_schedules.rb

@@ -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

spec/javascripts/fixtures/pipelines.rb → spec/frontend/fixtures/pipelines.rb

@@ -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

spec/javascripts/fixtures/projects.rb → spec/frontend/fixtures/projects.rb

@@ -18,9 +18,8 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
   end
 
   before do
-    # EE-specific start
     stub_licensed_features(variable_environment_scope: true)
-    # EE specific end
+
     project.add_maintainer(admin)
     sign_in(admin)
     allow(SecureRandom).to receive(:hex).and_return('securerandomhex:thereisnospoon')
@@ -37,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
@@ -46,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
@@ -55,7 +54,7 @@ describe 'Projects (JavaScript fixtures)', type: :controller do
         id: project
       }
 
-      expect(response).to be_success
+      expect(response).to be_successful
     end
   end
 
@@ -66,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
@@ -78,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

spec/javascripts/fixtures/prometheus_service.rb → spec/frontend/fixtures/prometheus_service.rb

@@ -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

spec/javascripts/fixtures/search.rb → spec/frontend/fixtures/search.rb

@@ -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

spec/javascripts/fixtures/services.rb → spec/frontend/fixtures/services.rb

@@ -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

spec/javascripts/fixtures/sessions.rb → spec/frontend/fixtures/sessions.rb

@@ -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

spec/javascripts/fixtures/snippet.rb → spec/frontend/fixtures/snippet.rb

@@ -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

spec/frontend/fixtures/static/README.md

+# Please do not add new files here!
+
+Instead use a Ruby file in the fixtures root directory (`spec/frontend/fixtures/`).

spec/frontend/fixtures/static/environments_logs.html

+<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>

spec/javascripts/fixtures/todos.rb → spec/frontend/fixtures/todos.rb

@@ -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

spec/javascripts/fixtures/u2f.rb → spec/frontend/fixtures/u2f.rb

@@ -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

spec/frontend/helpers/fixtures.js

@@ -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,
     );
   }

spec/javascripts/fixtures/.gitignore

-*.html.raw
-*.html
-*.json
-*.pdf
-*.bmpr
+*
+!.gitignore

spec/javascripts/fixtures/static/README.md

-# Please do not add new files here!
-
-Instead use a Ruby file in the fixtures root directory (`spec/javascripts/fixtures/`).

spec/javascripts/fixtures/static/ajax_loading_spinner.html

-<a class="js-ajax-loading-spinner" data-remote href="http://goesnowhere.nothing/whereami">
-<i class="fa fa-trash-o"></i>
-</a>

spec/javascripts/fixtures/static/balsamiq_viewer.html

-<div class="file-content balsamiq-viewer" data-endpoint="/test" id="js-balsamiq-viewer"></div>

spec/javascripts/fixtures/static/create_item_dropdown.html

-<div class="js-create-item-dropdown-fixture-root">
-<input name="variable[environment]" type="hidden">
-<div class="dropdown "><button class="dropdown-menu-toggle js-dropdown-menu-toggle" type="button" data-toggle="dropdown"><span class="dropdown-toggle-text ">some label</span><i aria-hidden="true" data-hidden="true" class="fa fa-chevron-down"></i></button><div class="dropdown-menu dropdown-select dropdown-menu-selectable"><div class="dropdown-input"><input type="search" id="" class="dropdown-input-field" autocomplete="off" /><i aria-hidden="true" data-hidden="true" class="fa fa-search dropdown-input-search"></i><i aria-hidden="true" data-hidden="true" role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i></div><div class="dropdown-content js-dropdown-content"></div><div class="dropdown-footer"><ul class="dropdown-footer-list">
-<li>
-<button class="dropdown-create-new-item-button js-dropdown-create-new-item">
-Create wildcard
-<code></code>
-</button>
-</li>
-</ul>
-</div><div class="dropdown-loading"><i aria-hidden="true" data-hidden="true" class="fa fa-spinner fa-spin"></i></div></div></div></div>

spec/javascripts/fixtures/static/environments/table.html

-<table>
-<thead>
-<tr>
-<th>Environment</th>
-<th>Last deployment</th>
-<th>Job</th>
-<th>Commit</th>
-<th></th>
-<th></th>
-</tr>
-</thead>
-<tbody>
-<tr id="environment-row"></tr>
-</tbody>
-</table>

spec/javascripts/fixtures/static/event_filter.html

-<ul class="nav-links event-filter scrolling-tabs nav nav-tabs">
-<li class="active">
-<a class="event-filter-link" href="/dashboard/activity" id="all_event_filter" title="Filter by all">
-<span>
-All
-</span>
-</a>
-</li>
-<li>
-<a class="event-filter-link" href="/dashboard/activity" id="push_event_filter" title="Filter by push events">
-<span>
-Push events
-</span>
-</a>
-</li>
-<li>
-<a class="event-filter-link" href="/dashboard/activity" id="merged_event_filter" title="Filter by merge events">
-<span>
-Merge events
-</span>
-</a>
-</li>
-<li>
-<a class="event-filter-link" href="/dashboard/activity" id="issue_event_filter" title="Filter by issue events">
-<span>
-Issue events
-</span>
-</a>
-</li>
-<li>
-<a class="event-filter-link" href="/dashboard/activity" id="comments_event_filter" title="Filter by comments">
-<span>
-Comments
-</span>
-</a>
-</li>
-<li>
-<a class="event-filter-link" href="/dashboard/activity" id="team_event_filter" title="Filter by team">
-<span>
-Team
-</span>
-</a>
-</li>
-</ul>

spec/javascripts/fixtures/static/gl_dropdown.html

-<div>
-<div class="dropdown inline">
-<button class="dropdown-menu-toggle" data-toggle="dropdown" id="js-project-dropdown" type="button">
-<div class="dropdown-toggle-text">
-Projects
-</div>
-<i class="fa fa-chevron-down dropdown-toggle-caret js-projects-dropdown-toggle"></i>
-</button>
-<div class="dropdown-menu dropdown-select dropdown-menu-selectable">
-<div class="dropdown-title">
-<span>Go to project</span>
-<button aria="{:label=&gt;&quot;Close&quot;}" class="dropdown-title-button dropdown-menu-close">
-<i class="fa fa-times dropdown-menu-close-icon"></i>
-</button>
-</div>
-<div class="dropdown-input">
-<input class="dropdown-input-field" placeholder="Filter results" type="search">
-<i class="fa fa-search dropdown-input-search"></i>
-</div>
-<div class="dropdown-content"></div>
-<div class="dropdown-loading">
-<i class="fa fa-spinner fa-spin"></i>
-</div>
-</div>
-</div>
-</div>

spec/javascripts/fixtures/static/gl_field_errors.html

-<form action="submit" class="gl-show-field-errors" method="post">
-<div class="form-group">
-<input class="required-text" required type="text">Text</input>
-</div>
-<div class="form-group">
-<input class="email" required title="Please provide a valid email address." type="email">Email</input>
-</div>
-<div class="form-group">
-<input class="password" required type="password">Password</input>
-</div>
-<div class="form-group">
-<input class="alphanumeric" pattern="[a-zA-Z0-9]" required type="text">Alphanumeric</input>
-</div>
-<div class="form-group">
-<input class="hidden" type="hidden">
-</div>
-<div class="form-group">
-<input class="custom gl-field-error-ignore" type="text">Custom, do not validate</input>
-</div>
-<div class="form-group"></div>
-<input class="submit" type="submit">Submit</input>
-</form>

spec/javascripts/fixtures/static/issuable_filter.html

-<form action="/user/project/issues?scope=all&amp;state=closed" class="js-filter-form">
-<input id="utf8" name="utf8" value="✓">
-<input id="check-all-issues" name="check-all-issues">
-<input id="search" name="search">
-<input id="author_id" name="author_id">
-<input id="assignee_id" name="assignee_id">
-<input id="milestone_title" name="milestone_title">
-<input id="label_name" name="label_name">
-</form>

spec/javascripts/fixtures/static/issue_sidebar_label.html

-<div class="block labels">
-<div class="sidebar-collapsed-icon js-sidebar-labels-tooltip"></div>
-<div class="title hide-collapsed">
-<a class="edit-link float-right" href="#">
-Edit
-</a>
-</div>
-<div class="selectbox hide-collapsed" style="display: none;">
-<div class="dropdown">
-<button class="dropdown-menu-toggle js-label-select js-multiselect" data-ability-name="issue" data-field-name="issue[label_names][]" data-issue-update="/root/test/issues/2.json" data-labels="/root/test/labels.json" data-project-id="12" data-show-any="true" data-show-no="true" data-toggle="dropdown" type="button">
-<span class="dropdown-toggle-text">
-Label
-</span>
-<i class="fa fa-chevron-down"></i>
-</button>
-<div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
-<div class="dropdown-page-one">
-<div class="dropdown-content"></div>
-<div class="dropdown-loading">
-<i class="fa fa-spinner fa-spin"></i>
-</div>
-</div>
-</div>
-</div>
-</div>
-</div>

spec/javascripts/fixtures/static/line_highlighter.html

-<div class="file-holder">
-<div class="file-content">
-<div class="line-numbers">
-<a data-line-number="1" href="#L1" id="L1">
-<i class="fa fa-link"></i>
-1
-</a>
-<a data-line-number="2" href="#L2" id="L2">
-<i class="fa fa-link"></i>
-2
-</a>
-<a data-line-number="3" href="#L3" id="L3">
-<i class="fa fa-link"></i>
-3
-</a>
-<a data-line-number="4" href="#L4" id="L4">
-<i class="fa fa-link"></i>
-4
-</a>
-<a data-line-number="5" href="#L5" id="L5">
-<i class="fa fa-link"></i>
-5
-</a>
-<a data-line-number="6" href="#L6" id="L6">
-<i class="fa fa-link"></i>
-6
-</a>
-<a data-line-number="7" href="#L7" id="L7">
-<i class="fa fa-link"></i>
-7
-</a>
-<a data-line-number="8" href="#L8" id="L8">
-<i class="fa fa-link"></i>
-8
-</a>
-<a data-line-number="9" href="#L9" id="L9">
-<i class="fa fa-link"></i>
-9
-</a>
-<a data-line-number="10" href="#L10" id="L10">
-<i class="fa fa-link"></i>
-10
-</a>
-<a data-line-number="11" href="#L11" id="L11">
-<i class="fa fa-link"></i>
-11
-</a>
-<a data-line-number="12" href="#L12" id="L12">
-<i class="fa fa-link"></i>
-12
-</a>
-<a data-line-number="13" href="#L13" id="L13">
-<i class="fa fa-link"></i>
-13
-</a>
-<a data-line-number="14" href="#L14" id="L14">
-<i class="fa fa-link"></i>
-14
-</a>
-<a data-line-number="15" href="#L15" id="L15">
-<i class="fa fa-link"></i>
-15
-</a>
-<a data-line-number="16" href="#L16" id="L16">
-<i class="fa fa-link"></i>
-16
-</a>
-<a data-line-number="17" href="#L17" id="L17">
-<i class="fa fa-link"></i>
-17
-</a>
-<a data-line-number="18" href="#L18" id="L18">
-<i class="fa fa-link"></i>
-18
-</a>
-<a data-line-number="19" href="#L19" id="L19">
-<i class="fa fa-link"></i>
-19
-</a>
-<a data-line-number="20" href="#L20" id="L20">
-<i class="fa fa-link"></i>
-20
-</a>
-<a data-line-number="21" href="#L21" id="L21">
-<i class="fa fa-link"></i>
-21
-</a>
-<a data-line-number="22" href="#L22" id="L22">
-<i class="fa fa-link"></i>
-22
-</a>
-<a data-line-number="23" href="#L23" id="L23">
-<i class="fa fa-link"></i>
-23
-</a>
-<a data-line-number="24" href="#L24" id="L24">
-<i class="fa fa-link"></i>
-24
-</a>
-<a data-line-number="25" href="#L25" id="L25">
-<i class="fa fa-link"></i>
-25
-</a>
-</div>
-<pre class="code highlight"><code><span class="line" id="LC1">Line 1</span><span class="line" id="LC2">Line 2</span><span class="line" id="LC3">Line 3</span><span class="line" id="LC4">Line 4</span><span class="line" id="LC5">Line 5</span><span class="line" id="LC6">Line 6</span><span class="line" id="LC7">Line 7</span><span class="line" id="LC8">Line 8</span><span class="line" id="LC9">Line 9</span><span class="line" id="LC10">Line 10</span><span class="line" id="LC11">Line 11</span><span class="line" id="LC12">Line 12</span><span class="line" id="LC13">Line 13</span><span class="line" id="LC14">Line 14</span><span class="line" id="LC15">Line 15</span><span class="line" id="LC16">Line 16</span><span class="line" id="LC17">Line 17</span><span class="line" id="LC18">Line 18</span><span class="line" id="LC19">Line 19</span><span class="line" id="LC20">Line 20</span><span class="line" id="LC21">Line 21</span><span class="line" id="LC22">Line 22</span><span class="line" id="LC23">Line 23</span><span class="line" id="LC24">Line 24</span><span class="line" id="LC25">Line 25</span></code></pre>
-</div>
-</div>

spec/javascripts/fixtures/static/linked_tabs.html

-<ul class="nav nav-tabs new-session-tabs linked-tabs">
-<li class="nav-item">
-<a class="nav-link" data-action="tab1" data-target="div#tab1" data-toggle="tab" href="foo/bar/1">
-Tab 1
-</a>
-</li>
-<li class="nav-item">
-<a class="nav-link" data-action="tab2" data-target="div#tab2" data-toggle="tab" href="foo/bar/1/context">
-Tab 2
-</a>
-</li>
-</ul>
-<div class="tab-content">
-<div class="tab-pane" id="tab1">
-Tab 1 Content
-</div>
-<div class="tab-pane" id="tab2">
-Tab 2 Content
-</div>
-</div>

spec/javascripts/fixtures/static/merge_requests_show.html

-<a class="btn-close"></a>
-<div class="detail-page-description">
-<div class="description js-task-list-container">
-<div class="md">
-<ul class="task-list">
-<li class="task-list-item">
-<input class="task-list-item-checkbox" type="checkbox">
-Task List Item
-</li>
-</ul>
-<textarea class="js-task-list-field">- [ ] Task List Item</textarea>
-</div>
-</div>
-</div>
-<form action="/foo" class="js-issuable-update"></form>

spec/javascripts/fixtures/static/mini_dropdown_graph.html

-<div class="js-builds-dropdown-tests dropdown dropdown js-mini-pipeline-graph">
-<button class="js-builds-dropdown-button" data-toggle="dropdown" data-stage-endpoint="foobar">
-Dropdown
-</button>
-<ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
-<li class="js-builds-dropdown-list scrollable-menu">
-<ul></ul>
-</li>
-<li class="js-builds-dropdown-loading hidden">
-<span class="fa fa-spinner"></span>
-</li>
-</ul>
-</div>

spec/javascripts/fixtures/static/notebook_viewer.html

-<div class="file-content" data-endpoint="/test" id="js-notebook-viewer"></div>

spec/javascripts/fixtures/static/oauth_remember_me.html

-<div id="oauth-container">
-<input id="remember_me" type="checkbox">
-<a class="oauth-login twitter" href="http://example.com/"></a>
-<a class="oauth-login github" href="http://example.com/"></a>
-<a class="oauth-login facebook" href="http://example.com/?redirect_fragment=L1"></a>
-</div>

spec/javascripts/fixtures/static/pdf_viewer.html

-<div class="file-content" data-endpoint="/test" id="js-pdf-viewer"></div>

spec/javascripts/fixtures/static/pipeline_graph.html

-<div class="pipeline-visualization js-pipeline-graph">
-<ul class="stage-column-list">
-<li class="stage-column">
-<div class="stage-name">
-<a href="/">
-Test
-<div class="builds-container">
-<ul>
-<li class="build">
-<div class="curve"></div>
-<a>
-<svg></svg>
-<div class="ci-status-text">
-stop_review
-</div>
-</a>
-</li>
-</ul>
-</div>
-</a>
-</div>
-</li>
-</ul>
-</div>

spec/javascripts/fixtures/static/pipelines.html

-<div>
-<div data-can-create-pipeline="true" data-ci-lint-path="foo" data-empty-state-svg-path="foo" data-endpoint="foo" data-error-state-svg-path="foo" data-has-ci="foo" data-help-auto-devops-path="foo" data-help-page-path="foo" data-new-pipeline-path="foo" data-reset-cache-path="foo" id="pipelines-list-vue"></div>
-</div>

spec/javascripts/fixtures/static/project_select_combo_button.html

-<div class="project-item-select-holder">
-<input class="project-item-select" data-group-id="12345" data-relative-path="issues/new">
-<a class="new-project-item-link" data-label="New issue" data-type="issues" href="">
-<i class="fa fa-spinner spin"></i>
-</a>
-<a class="new-project-item-select-button">
-<i class="fa fa-caret-down"></i>
-</a>
-</div>

spec/javascripts/fixtures/static/search_autocomplete.html

-<div class="search search-form">
-<form class="form-inline">
-<div class="search-input-container">
-<div class="search-input-wrap">
-<div class="dropdown">
-<input class="search-input dropdown-menu-toggle" id="search">
-<div class="dropdown-menu dropdown-select">
-<div class="dropdown-content"></div>
-</div>
-</div>
-</div>
-</div>
-<input class="js-search-project-options" type="hidden">
-</form>
-</div>

spec/javascripts/fixtures/static/signin_tabs.html

-<ul class="nav-links new-session-tabs">
-<li class="active">
-<a href="#ldap">LDAP</a>
-</li>
-<li>
-<a href="#login-pane">Standard</a>
-</li>
-</ul>

spec/javascripts/fixtures/static/sketch_viewer.html

-<div class="file-content" data-endpoint="/test_sketch_file.sketch" id="js-sketch-viewer">
-<div class="js-loading-icon"></div>
-</div>

spec/javascripts/test_constants.js

-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`;

spec/support/helpers/javascript_fixtures_helpers.rb

@@ -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

spec/support/helpers/test_env.rb

@@ -316,6 +316,7 @@ module TestEnv
   # These are directories that should be preserved at cleanup time
   def test_dirs
     @test_dirs ||= %w[
+      frontend
       gitaly
       gitlab-shell
       gitlab-test