Merge branch 'master' into 34312-eslint-vue-plugin

* master: (78 commits)
  Use --left-right and --max-count for counting diverging commits
  API: get participants from merge_requests & issues
  Copy Mermaid graphs as GFM
  Rephrase paragraph about e2e tests in merge requests in docs
  Remove EE only sections from docs
  Update redis-rack to 2.0.4
  Refactor matchers for background migrations
  Add id to modal.vue to support data-toggle="modal"
  Allow local tests to use a modified Gitaly
  Fix specs
  Use computed prop in expand button
  Update check.md
  add deprecation and removal issue to docs
  Add status attribute to runner api entity
  Fix typos in a code comment
  Refactor RelativePositioning so that it can be used by other classes
  Backport 'Rebase' feature from EE to CE
  Just try to detect and assign once
  Fix custom name in branch creation for issue in Firefox
  Modify `LDAP::Person` to return username value based on attributes
  ...

2 files changed, 90 insertions, 4 deletions

diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js
new file mode 100644
index 00000000000..a33ab689dd1
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/expand_button_spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import expandButton from '~/vue_shared/components/expand_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('expand button', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(expandButton);
+    vm = mountComponent(Component, {
+      slots: {
+        expanded: '<p>Expanded!</p>',
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a collpased button', () => {
+    expect(vm.$el.textContent.trim()).toEqual('...');
+  });
+
+  it('hides expander on click', (done) => {
+    vm.$el.querySelector('button').click();
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;');
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/modal_spec.js
index 721f4044659..fe75a86cac8 100644
--- a/spec/javascripts/vue_shared/components/modal_spec.js
+++ b/spec/javascripts/vue_shared/components/modal_spec.js
@@ -2,11 +2,65 @@ import Vue from 'vue';
 import modal from '~/vue_shared/components/modal.vue';
 import mountComponent from '../../helpers/vue_mount_component_helper';
 
+const modalComponent = Vue.extend(modal);
+
 describe('Modal', () => {
-  it('does not render a primary button if no primaryButtonLabel', () => {
-    const modalComponent = Vue.extend(modal);
-    const vm = mountComponent(modalComponent);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    describe('without primaryButtonLabel', () => {
+      beforeEach(() => {
+        vm = mountComponent(modalComponent, {
+          primaryButtonLabel: null,
+        });
+      });
+
+      it('does not render a primary button', () => {
+        expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
+      });
+    });
+
+    describe('with id', () => {
+      it('does not render a primary button', () => {
+        beforeEach(() => {
+          vm = mountComponent(modalComponent, {
+            id: 'my-modal',
+          });
+        });
+
+        it('assigns the id to the modal', () => {
+          expect(vm.$el.querySelector('#my-modal.modal')).not.toBeNull();
+        });
+
+        it('does not show the modal immediately', () => {
+          expect(vm.$el.querySelector('#my-modal.modal')).not.toHaveClass('show');
+        });
+
+        it('does not show a backdrop', () => {
+          expect(vm.$el.querySelector('modal-backdrop')).toBeNull();
+        });
+      });
+    });
+
+    it('works with data-toggle="modal"', (done) => {
+      setFixtures(`
+        <button id="modal-button" data-toggle="modal" data-target="#my-modal"></button>
+        <div id="modal-container"></div>
+      `);
+
+      const modalContainer = document.getElementById('modal-container');
+      const modalButton = document.getElementById('modal-button');
+      vm = mountComponent(modalComponent, {
+        id: 'my-modal',
+      }, modalContainer);
+      const modalElement = vm.$el.querySelector('#my-modal');
+      $(modalElement).on('shown.bs.modal', () => done());
 
-    expect(vm.$el.querySelector('.js-primary-button')).toBeNull();
+      modalButton.click();
+    });
   });
 });