Commit 8046cede authored by Mike Greiling's avatar Mike Greiling

Merge branch 'winh-remove-static-fixtures' into 'master'

Remove static JavaScript HAML fixtures

Closes #24753

See merge request gitlab-org/gitlab-ce!26019
parents 53b92141 28961d6a
...@@ -53,12 +53,9 @@ Remember that the performance of each test depends on the environment. ...@@ -53,12 +53,9 @@ Remember that the performance of each test depends on the environment.
## Karma test suite ## Karma test suite
GitLab uses the [Karma][karma] test runner with [Jasmine] as its test GitLab uses the [Karma][karma] test runner with [Jasmine] as its test
framework for our JavaScript unit and integration tests. For integration tests, framework for our JavaScript unit and integration tests.
we generate HTML files using RSpec (see `spec/javascripts/fixtures/*.rb` for examples). We generate HTML and JSON fixtures from backend views and controllers
Some fixtures are still HAML templates that are translated to HTML files using the same mechanism (see `static_fixtures.rb`). using RSpec (see `spec/javascripts/fixtures/*.rb` for examples).
Adding these static fixtures should be avoided as they are harder to keep up to date with real views.
The existing static fixtures will be migrated over time.
Please see [gitlab-org/gitlab-ce#24753](https://gitlab.com/gitlab-org/gitlab-ce/issues/24753) to track our progress.
Fixtures are served during testing by the [jasmine-jquery][jasmine-jquery] plugin. Fixtures are served during testing by the [jasmine-jquery][jasmine-jquery] plugin.
JavaScript tests live in `spec/javascripts/`, matching the folder structure JavaScript tests live in `spec/javascripts/`, matching the folder structure
......
%a.js-ajax-loading-spinner{href: "http://goesnowhere.nothing/whereami", data: {remote: true}}
%i.fa.fa-trash-o
.file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: '/test' } }
.js-create-item-dropdown-fixture-root
%input{ name: 'variable[environment]', type: 'hidden' }
= dropdown_tag('some label',
options: { toggle_class: 'js-dropdown-menu-toggle',
content_class: 'js-dropdown-content',
filter: true,
dropdown_class: "dropdown-menu-selectable",
footer_content: true }) do
%ul.dropdown-footer-list
%li
%button{ class: "dropdown-create-new-item-button js-dropdown-create-new-item" }
Create wildcard
%code
%ul.nav-links.event-filter.scrolling-tabs.nav.nav-tabs
%li.active
%a.event-filter-link{ id: "all_event_filter", title: "Filter by all", href: "/dashboard/activity"}
%span
All
%li
%a.event-filter-link{ id: "push_event_filter", title: "Filter by push events", href: "/dashboard/activity"}
%span
Push events
%li
%a.event-filter-link{ id: "merged_event_filter", title: "Filter by merge events", href: "/dashboard/activity"}
%span
Merge events
%li
%a.event-filter-link{ id: "issue_event_filter", title: "Filter by issue events", href: "/dashboard/activity"}
%span
Issue events
%li
%a.event-filter-link{ id: "comments_event_filter", title: "Filter by comments", href: "/dashboard/activity"}
%span
Comments
%li
%a.event-filter-link{ id: "team_event_filter", title: "Filter by team", href: "/dashboard/activity"}
%span
Team
\ No newline at end of file
%div
.dropdown.inline
%button#js-project-dropdown.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
.dropdown-toggle-text
Projects
%i.fa.fa-chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle
.dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title
%span Go to project
%button.dropdown-title-button.dropdown-menu-close{aria: {label: 'Close'}}
%i.fa.fa-times.dropdown-menu-close-icon
.dropdown-input
%input.dropdown-input-field{type: 'search', placeholder: 'Filter results'}
%i.fa.fa-search.dropdown-input-search
.dropdown-content
.dropdown-loading
%i.fa.fa-spinner.fa-spin
%form.gl-show-field-errors{action: 'submit', method: 'post'}
.form-group
%input.required-text{required: true, type: 'text'} Text
.form-group
%input.email{type: 'email', title: 'Please provide a valid email address.', required: true } Email
.form-group
%input.password{type: 'password', required: true} Password
.form-group
%input.alphanumeric{type: 'text', pattern: '[a-zA-Z0-9]', required: true} Alphanumeric
.form-group
%input.hidden{ type:'hidden' }
.form-group
%input.custom.gl-field-error-ignore{ type:'text' } Custom, do not validate
.form-group
%input.submit{type: 'submit'} Submit
%form.js-filter-form{action: '/user/project/issues?scope=all&state=closed'}
%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'}
.block.labels
.sidebar-collapsed-icon.js-sidebar-labels-tooltip
.title.hide-collapsed
%a.edit-link.float-right{ href: "#" }
Edit
.selectbox.hide-collapsed{ style: "display: none;" }
.dropdown
%button.dropdown-menu-toggle.js-label-select.js-multiselect{ type: "button", data: { ability_name: "issue", field_name: "issue[label_names][]", issue_update: "/root/test/issues/2.json", labels: "/root/test/labels.json", project_id: "12", show_any: "true", show_no: "true", toggle: "dropdown" } }
%span.dropdown-toggle-text
Label
%i.fa.fa-chevron-down
.dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
.dropdown-page-one
.dropdown-content
.dropdown-loading
%i.fa.fa-spinner.fa-spin
.file-holder
.file-content
.line-numbers
- 1.upto(25) do |i|
%a{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
%i.fa.fa-link
= i
%pre.code.highlight
%code
- 1.upto(25) do |i|
%span.line{id: "LC#{i}"}= "Line #{i}"
%ul.nav.nav-tabs.new-session-tabs.linked-tabs
%li.nav-item
%a.nav-link{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
Tab 1
%li.nav-item
%a.nav-link{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } }
Tab 2
.tab-content
#tab1.tab-pane
Tab 1 Content
#tab2.tab-pane
Tab 2 Content
%a.btn-close
.detail-page-description
.description.js-task-list-container
.wiki
%ul.task-list
%li.task-list-item
%input.task-list-item-checkbox{type: 'checkbox'}
Task List Item
%textarea.js-task-list-field
\- [ ] Task List Item
%form.js-issuable-update{action: '/foo'}
%div.js-builds-dropdown-tests.dropdown.dropdown.js-mini-pipeline-graph
%button.js-builds-dropdown-button{'data-stage-endpoint' => 'foobar', data: { toggle: 'dropdown'} }
Dropdown
%ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
%li.js-builds-dropdown-list.scrollable-menu
%ul
%li.js-builds-dropdown-loading.hidden
%span.fa.fa-spinner
.file-content#js-notebook-viewer{ data: { endpoint: '/test' } }
#oauth-container
%input#remember_me{ type: "checkbox" }
%a.oauth-login.twitter{ href: "http://example.com/" }
%a.oauth-login.github{ href: "http://example.com/" }
%a.oauth-login.facebook{ href: "http://example.com/?redirect_fragment=L1" }
.file-content#js-pdf-viewer{ data: { endpoint: '/test' } }
%div.pipeline-visualization.js-pipeline-graph
%ul.stage-column-list
%li.stage-column
.stage-name
%a{:href => "/"}
Test
.builds-container
%ul
%li.build
.curve
%a
%svg
.ci-status-text
stop_review
%div
#pipelines-list-vue{ data: { endpoint: 'foo',
"help-page-path" => 'foo',
"help-auto-devops-path" => 'foo',
"empty-state-svg-path" => 'foo',
"error-state-svg-path" => 'foo',
"new-pipeline-path" => 'foo',
"can-create-pipeline" => 'true',
"has-ci" => 'foo',
"ci-lint-path" => 'foo',
"reset-cache-path" => 'foo' } }
.project-item-select-holder
%input.project-item-select{ data: { group_id: '12345' , relative_path: 'issues/new' } }
%a.new-project-item-link{ data: { label: 'New issue', type: 'issues' }, href: ''}
%i.fa.fa-spinner.spin
%a.new-project-item-select-button
%i.fa.fa-caret-down
.search.search-form
%form.form-inline
.search-input-container
.search-input-wrap
.dropdown
%input#search.search-input.dropdown-menu-toggle
.dropdown-menu.dropdown-select
.dropdown-content
%input{ type: "hidden", class: "js-search-project-options" }
%ul.nav-links.new-session-tabs
%li.active
%a{ href: '#ldap' } LDAP
%li
%a{ href: '#login-pane'} Standard
.file-content#js-sketch-viewer{ data: { endpoint: '/test_sketch_file.sketch' } }
.js-loading-icon
# Please do not add new files here!
Instead use a Ruby file in the fixtures root directory (`spec/javascripts/fixtures/`).
<a class="js-ajax-loading-spinner" data-remote href="http://goesnowhere.nothing/whereami">
<i class="fa fa-trash-o"></i>
</a>
<div class="file-content balsamiq-viewer" data-endpoint="/test" id="js-balsamiq-viewer"></div>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<a class="btn-close"></a>
<div class="detail-page-description">
<div class="description js-task-list-container">
<div class="wiki">
<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>
<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>
<div class="file-content" data-endpoint="/test" id="js-notebook-viewer"></div>
<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>
<div class="file-content" data-endpoint="/test" id="js-pdf-viewer"></div>
<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>
<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>
<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>
<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>
<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>
<div class="file-content" data-endpoint="/test_sketch_file.sketch" id="js-sketch-viewer">
<div class="js-loading-icon"></div>
</div>
...@@ -3,10 +3,6 @@ require 'spec_helper' ...@@ -3,10 +3,6 @@ require 'spec_helper'
describe ApplicationController, '(Static JavaScript fixtures)', type: :controller do describe ApplicationController, '(Static JavaScript fixtures)', type: :controller do
include JavaScriptFixturesHelpers include JavaScriptFixturesHelpers
before(:all) do
clean_frontend_fixtures('static/')
end
Dir.glob('{,ee/}spec/javascripts/fixtures/**/*.haml').map do |file_path| Dir.glob('{,ee/}spec/javascripts/fixtures/**/*.haml').map do |file_path|
it "static/#{file_path.sub(%r{\A(ee/)?spec/javascripts/fixtures/}, '').sub(/\.haml\z/, '.raw')}" do |example| it "static/#{file_path.sub(%r{\A(ee/)?spec/javascripts/fixtures/}, '').sub(/\.haml\z/, '.raw')}" do |example|
store_frontend_fixture(render_template(file_path), example.description) store_frontend_fixture(render_template(file_path), example.description)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment