From b7c735c8ac11b8182807070fc6f84f2606e15427 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Wed, 15 Apr 2020 12:09:18 +0000
Subject: Add latest changes from gitlab-org/gitlab@master

---
 .../edit/components/active_toggle_spec.js          | 65 ++++++++++++++++++++++
 spec/frontend/notes/components/note_header_spec.js | 42 +++++++++++---
 2 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 spec/frontend/integrations/edit/components/active_toggle_spec.js

(limited to 'spec/frontend')

diff --git a/spec/frontend/integrations/edit/components/active_toggle_spec.js b/spec/frontend/integrations/edit/components/active_toggle_spec.js
new file mode 100644
index 00000000000..8a11c200c15
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/active_toggle_spec.js
@@ -0,0 +1,65 @@
+import { mount } from '@vue/test-utils';
+import ActiveToggle from '~/integrations/edit/components/active_toggle.vue';
+import { GlToggle } from '@gitlab/ui';
+
+const GL_TOGGLE_ACTIVE_CLASS = 'is-checked';
+
+describe('ActiveToggle', () => {
+  let wrapper;
+
+  const defaultProps = {
+    initialActivated: true,
+    disabled: false,
+  };
+
+  const createComponent = props => {
+    wrapper = mount(ActiveToggle, {
+      propsData: Object.assign({}, defaultProps, props),
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) wrapper.destroy();
+  });
+
+  const findGlToggle = () => wrapper.find(GlToggle);
+  const findButtonInToggle = () => findGlToggle().find('button');
+  const findInputInToggle = () => findGlToggle().find('input');
+
+  describe('template', () => {
+    describe('initialActivated is false', () => {
+      it('renders GlToggle as inactive', () => {
+        createComponent({
+          initialActivated: false,
+        });
+
+        expect(findGlToggle().exists()).toBe(true);
+        expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
+        expect(findInputInToggle().attributes('value')).toBe('false');
+      });
+    });
+
+    describe('initialActivated is true', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('renders GlToggle as active', () => {
+        expect(findGlToggle().exists()).toBe(true);
+        expect(findButtonInToggle().classes()).toContain(GL_TOGGLE_ACTIVE_CLASS);
+        expect(findInputInToggle().attributes('value')).toBe('true');
+      });
+
+      describe('on toggle click', () => {
+        it('switches the form value', () => {
+          findButtonInToggle().trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(findButtonInToggle().classes()).not.toContain(GL_TOGGLE_ACTIVE_CLASS);
+            expect(findInputInToggle().attributes('value')).toBe('false');
+          });
+        });
+      });
+    });
+  });
+});
diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index 642ab5138dc..d477de69716 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -16,7 +16,9 @@ describe('NoteHeader component', () => {
   const findActionsWrapper = () => wrapper.find({ ref: 'discussionActions' });
   const findChevronIcon = () => wrapper.find({ ref: 'chevronIcon' });
   const findActionText = () => wrapper.find({ ref: 'actionText' });
+  const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
+  const findSpinner = () => wrapper.find({ ref: 'spinner' });
 
   const author = {
     avatar_url: null,
@@ -33,11 +35,7 @@ describe('NoteHeader component', () => {
       store: new Vuex.Store({
         actions,
       }),
-      propsData: {
-        ...props,
-        actionTextHtml: '',
-        noteId: '1394',
-      },
+      propsData: { ...props },
     });
   };
 
@@ -108,17 +106,18 @@ describe('NoteHeader component', () => {
     createComponent();
 
     expect(findActionText().exists()).toBe(false);
-    expect(findTimestamp().exists()).toBe(false);
+    expect(findTimestampLink().exists()).toBe(false);
   });
 
   describe('when createdAt is passed as a prop', () => {
     it('renders action text and a timestamp', () => {
       createComponent({
         createdAt: '2017-08-02T10:51:58.559Z',
+        noteId: 123,
       });
 
       expect(findActionText().exists()).toBe(true);
-      expect(findTimestamp().exists()).toBe(true);
+      expect(findTimestampLink().exists()).toBe(true);
     });
 
     it('renders correct actionText if passed', () => {
@@ -133,8 +132,9 @@ describe('NoteHeader component', () => {
     it('calls an action when timestamp is clicked', () => {
       createComponent({
         createdAt: '2017-08-02T10:51:58.559Z',
+        noteId: 123,
       });
-      findTimestamp().trigger('click');
+      findTimestampLink().trigger('click');
 
       expect(actions.setTargetNoteHash).toHaveBeenCalled();
     });
@@ -153,4 +153,30 @@ describe('NoteHeader component', () => {
       expect(wrapper.find(GitlabTeamMemberBadge).exists()).toBe(expected);
     },
   );
+
+  describe('loading spinner', () => {
+    it('shows spinner when showSpinner is true', () => {
+      createComponent();
+      expect(findSpinner().exists()).toBe(true);
+    });
+
+    it('does not show spinner when showSpinner is false', () => {
+      createComponent({ showSpinner: false });
+      expect(findSpinner().exists()).toBe(false);
+    });
+  });
+
+  describe('timestamp', () => {
+    it('shows timestamp as a link if a noteId was provided', () => {
+      createComponent({ createdAt: new Date().toISOString(), noteId: 123 });
+      expect(findTimestampLink().exists()).toBe(true);
+      expect(findTimestamp().exists()).toBe(false);
+    });
+
+    it('shows timestamp as plain text if a noteId was not provided', () => {
+      createComponent({ createdAt: new Date().toISOString() });
+      expect(findTimestampLink().exists()).toBe(false);
+      expect(findTimestamp().exists()).toBe(true);
+    });
+  });
 });
-- 
cgit v1.2.1