diff --git a/changelogs/unreleased/dynamic-todos-fixture.yml b/changelogs/unreleased/dynamic-todos-fixture.yml
new file mode 100644
index 00000000000..580bc729e3c
--- /dev/null
+++ b/changelogs/unreleased/dynamic-todos-fixture.yml
@@ -0,0 +1,4 @@
+---
+title: Replace static fixture for right_sidebar_spec.js
+merge_request: 9211
+author: winniehell
diff --git a/spec/javascripts/fixtures/.gitignore b/spec/javascripts/fixtures/.gitignore
index 009b68d5d1c..0c35cdd778e 100644
--- a/spec/javascripts/fixtures/.gitignore
+++ b/spec/javascripts/fixtures/.gitignore
@@ -1 +1,2 @@
 *.html.raw
+*.json
diff --git a/spec/javascripts/fixtures/todos.json b/spec/javascripts/fixtures/todos.json
deleted file mode 100644
index 62c2387d515..00000000000
--- a/spec/javascripts/fixtures/todos.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "count": 1,
-    "delete_path": "/dashboard/todos/1"
-}
\ No newline at end of file
diff --git a/spec/javascripts/fixtures/todos.rb b/spec/javascripts/fixtures/todos.rb
new file mode 100644
index 00000000000..2c08b06ea9e
--- /dev/null
+++ b/spec/javascripts/fixtures/todos.rb
@@ -0,0 +1,52 @@
+require 'spec_helper'
+
+describe 'Todos (JavaScript fixtures)' do
+  include JavaScriptFixturesHelpers
+
+  let(:admin) { create(:admin) }
+  let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
+  let(:project) { create(:project_empty_repo, namespace: namespace, path: 'todos-project') }
+  let(:issue_1) { create(:issue, title: 'issue_1', project: project) }
+  let!(:todo_1) { create(:todo, user: admin, project: project, target: issue_1, created_at: 5.hours.ago) }
+  let(:issue_2) { create(:issue, title: 'issue_2', project: project) }
+  let!(:todo_2) { create(:todo, :done, user: admin, project: project, target: issue_2, created_at: 50.hours.ago) }
+
+  before(:all) do
+    clean_frontend_fixtures('todos/')
+  end
+
+  describe Dashboard::TodosController, '(JavaScript fixtures)', type: :controller do
+    render_views
+
+    before(:each) do
+      sign_in(admin)
+    end
+
+    it 'todos/todos.html.raw' do |example|
+      get :index
+
+      expect(response).to be_success
+      store_frontend_fixture(response, example.description)
+    end
+  end
+
+  describe Projects::TodosController, '(JavaScript fixtures)', type: :controller do
+    render_views
+
+    before(:each) do
+      sign_in(admin)
+    end
+
+    it 'todos/todos.json' do |example|
+      post :create,
+        namespace_id: namespace.path,
+        project_id: project.path,
+        issuable_type: 'issue',
+        issuable_id: issue_2.id,
+        format: 'json'
+
+      expect(response).to be_success
+      store_frontend_fixture(response, example.description)
+    end
+  end
+end
diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js
index f7636865aa1..9284af8a8d9 100644
--- a/spec/javascripts/right_sidebar_spec.js
+++ b/spec/javascripts/right_sidebar_spec.js
@@ -34,7 +34,7 @@ require('~/extensions/jquery.js');
   describe('RightSidebar', function() {
     var fixtureName = 'issues/open-issue.html.raw';
     preloadFixtures(fixtureName);
-    loadJSONFixtures('todos.json');
+    loadJSONFixtures('todos/todos.json');
 
     beforeEach(function() {
       loadFixtures(fixtureName);
@@ -64,7 +64,7 @@ require('~/extensions/jquery.js');
     });
 
     it('should broadcast todo:toggle event when add todo clicked', function() {
-      var todos = getJSONFixture('todos.json');
+      var todos = getJSONFixture('todos/todos.json');
       spyOn(jQuery, 'ajax').and.callFake(function() {
         var d = $.Deferred();
         var response = todos;