diff --git a/changelogs/unreleased/create-dynamic-fixture-for-build_spec.yml b/changelogs/unreleased/create-dynamic-fixture-for-build_spec.yml
new file mode 100644
index 00000000000..f0d9ff0c34f
--- /dev/null
+++ b/changelogs/unreleased/create-dynamic-fixture-for-build_spec.yml
@@ -0,0 +1,4 @@
+---
+title: Create dynamic fixture for build_spec
+merge_request: 7589
+author: winniehell
diff --git a/spec/javascripts/build_spec.js.es6 b/spec/javascripts/build_spec.js.es6
index ee192c4f18a..1a56819724d 100644
--- a/spec/javascripts/build_spec.js.es6
+++ b/spec/javascripts/build_spec.js.es6
@@ -11,10 +11,10 @@
 
 (() => {
   describe('Build', () => {
-    fixture.preload('build.html');
+    fixture.preload('builds/build-with-artifacts.html.raw');
 
     beforeEach(function () {
-      fixture.load('build.html');
+      fixture.load('builds/build-with-artifacts.html.raw');
       spyOn($, 'ajax');
     });
 
@@ -28,15 +28,7 @@
       });
 
       describe('setup', function () {
-        const removeDate = new Date();
-        removeDate.setUTCFullYear(removeDate.getUTCFullYear() + 1);
-        // give the test three days to run
-        removeDate.setTime(removeDate.getTime() + (3 * 24 * 60 * 60 * 1000));
-
         beforeEach(function () {
-          const removeDateElement = document.querySelector('.js-artifacts-remove');
-          removeDateElement.innerText = removeDate.toString();
-
           this.build = new Build();
         });
 
diff --git a/spec/javascripts/fixtures/build.html.haml b/spec/javascripts/fixtures/build.html.haml
deleted file mode 100644
index 06b49516e5c..00000000000
--- a/spec/javascripts/fixtures/build.html.haml
+++ /dev/null
@@ -1,62 +0,0 @@
-.build-page
-  .prepend-top-default
-    .autoscroll-container
-      %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
-    #js-build-scroll.scroll-controls
-      %a.btn{href: '#build-trace'}
-        %i.fa.fa-angle-up
-      %a.btn{href: '#down-build-trace'}
-        %i.fa.fa-angle-down
-    %pre.build-trace#build-trace
-      %code.bash.js-build-output
-      %i.fa.fa-refresh.fa-spin.js-build-refresh
-
-%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar
-  .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
-    Build
-    %strong #1
-    %a.gutter-toggle.pull-right.js-sidebar-build-toggle{ href: "#" }
-      %i.fa.fa-angle-double-right
-  .blocks-container
-    .dropdown.build-dropdown
-      .title Stage
-      %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.stage-selection More
-        %i.fa.fa-caret-down
-      %ul.dropdown-menu
-        %li
-          %a.stage-item build
-        %li
-          %a.stage-item test
-        %li
-          %a.stage-item deploy
-  .builds-container
-    .build-job{data: {stage: 'build'}}
-      %a{href: 'http://example.com/root/test-build/builds/1'}
-        %i.fa.fa-check
-        %i.fa.fa-check-circle-o
-        %span
-          Setup
-    .build-job{data: {stage: 'test'}}
-      %a{href: 'http://example.com/root/test-build/builds/2'}
-        %i.fa.fa-check
-        %i.fa.fa-check-circle-o
-        %span
-          Tests
-    .build-job{data: {stage: 'deploy'}}
-      %a{href: 'http://example.com/root/test-build/builds/3'}
-        %i.fa.fa-check
-        %i.fa.fa-check-circle-o
-        %span
-          Deploy
-
-.js-build-options{ data: { page_url: 'http://example.com/root/test-build/builds/2',
-  build_url: 'http://example.com/root/test-build/builds/2.json',
-  build_status: 'passed',
-  build_stage: 'test',
-  log_state: 'buildstate' }}
-
-%p.build-detail-row
-  The artifacts will be removed in
-  %span.js-artifacts-remove
-    2016-12-19 09:02:12 UTC
diff --git a/spec/javascripts/fixtures/builds.rb b/spec/javascripts/fixtures/builds.rb
new file mode 100644
index 00000000000..e47698f71ed
--- /dev/null
+++ b/spec/javascripts/fixtures/builds.rb
@@ -0,0 +1,32 @@
+require 'spec_helper'
+
+describe Projects::BuildsController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:project) { create(:project_empty_repo) }
+  let(:pipeline) { create(:ci_empty_pipeline, project: project) }
+  let!(:build_with_artifacts) { create(:ci_build, :success, :artifacts, :trace, pipeline: pipeline, stage: 'test', artifacts_expire_at: Time.now + 18.months) }
+  let!(:failed_build) { create(:ci_build, :failed, pipeline: pipeline, stage: 'build') }
+  let!(:pending_build) { create(:ci_build, :pending, pipeline: pipeline, stage: 'deploy') }
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('builds/')
+  end
+
+  before(:each) do
+    sign_in(admin)
+  end
+
+  it 'builds/build-with-artifacts.html.raw' do |example|
+    get :show,
+      namespace_id: project.namespace.to_param,
+      project_id: project.to_param,
+      id: build_with_artifacts.to_param
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end