1 files changed, 100 insertions, 0 deletions
diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js
new file mode 100644
index 00000000000..2d57af6137c
--- /dev/null
+++ b/spec/javascripts/diffs/components/changed_files_spec.js
@@ -0,0 +1,100 @@
+import Vue from 'vue';
+import $ from 'jquery';
+import { mountComponentWithStore } from 'spec/helpers';
+import store from '~/diffs/store';
+import ChangedFiles from '~/diffs/components/changed_files.vue';
+
+describe('ChangedFiles', () => {
+  const Component = Vue.extend(ChangedFiles);
+  const createComponent = props => mountComponentWithStore(Component, { props, store });
+  let vm;
+
+  beforeEach(() => {
+    setFixtures(`
+      <div id="dummy-element"></div>
+      <div class="js-tabs-affix"></div>
+    `);
+    const props = {
+      diffFiles: [
+        {
+          addedLines: 10,
+          removedLines: 20,
+          blob: {
+            path: 'some/code.txt',
+          },
+          filePath: 'some/code.txt',
+        },
+      ],
+    };
+    vm = createComponent(props);
+  });
+
+  describe('with single file added', () => {
+    it('shows files changes', () => {
+      expect(vm.$el).toContainText('1 changed file');
+    });
+
+    it('shows file additions and deletions', () => {
+      expect(vm.$el).toContainText('10 additions');
+      expect(vm.$el).toContainText('20 deletions');
+    });
+  });
+
+  describe('template', () => {
+    describe('diff view mode buttons', () => {
+      let inlineButton;
+      let parallelButton;
+
+      beforeEach(() => {
+        inlineButton = vm.$el.querySelector('.js-inline-diff-button');
+        parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
+      });
+
+      it('should have Inline and Side-by-side buttons', () => {
+        expect(inlineButton).toBeDefined();
+        expect(parallelButton).toBeDefined();
+      });
+
+      it('should add active class to Inline button', done => {
+        vm.$store.state.diffs.diffViewType = 'inline';
+
+        vm.$nextTick(() => {
+          expect(inlineButton.classList.contains('active')).toEqual(true);
+          expect(parallelButton.classList.contains('active')).toEqual(false);
+
+          done();
+        });
+      });
+
+      it('should toggle active state of buttons when diff view type changed', done => {
+        vm.$store.state.diffs.diffViewType = 'parallel';
+
+        vm.$nextTick(() => {
+          expect(inlineButton.classList.contains('active')).toEqual(false);
+          expect(parallelButton.classList.contains('active')).toEqual(true);
+
+          done();
+        });
+      });
+
+      describe('clicking them', () => {
+        it('should toggle the diff view type', done => {
+          $(parallelButton).click();
+
+          vm.$nextTick(() => {
+            expect(inlineButton.classList.contains('active')).toEqual(false);
+            expect(parallelButton.classList.contains('active')).toEqual(true);
+
+            $(inlineButton).click();
+
+            vm.$nextTick(() => {
+              expect(inlineButton.classList.contains('active')).toEqual(true);
+              expect(parallelButton.classList.contains('active')).toEqual(false);
+              done();
+            });
+          });
+        });
+      });
+    });
+  });
+});