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.
## Karma test suite
GitLab uses the [Karma][karma] test runner with [Jasmine] as its test
framework for our JavaScript unit and integration tests. For integration tests,
we generate HTML files using RSpec (see `spec/javascripts/fixtures/*.rb` for examples).
Some fixtures are still HAML templates that are translated to HTML files using the same mechanism (see `static_fixtures.rb`).
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.
framework for our JavaScript unit and integration tests.
We generate HTML and JSON fixtures from backend views and controllers
using RSpec (see `spec/javascripts/fixtures/*.rb` for examples).
Fixtures are served during testing by the [jasmine-jquery][jasmine-jquery] plugin.
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'
describe ApplicationController, '(Static JavaScript fixtures)', type: :controller do
include JavaScriptFixturesHelpers
before(:all) do
clean_frontend_fixtures('static/')
end
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|
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