1 files changed, 49 insertions, 1 deletions

diff --git a/spec/frontend/ref/components/ref_selector_spec.js b/spec/frontend/ref/components/ref_selector_spec.js
index 2688e4b3428..1556f5b19dc 100644
--- a/spec/frontend/ref/components/ref_selector_spec.js
+++ b/spec/frontend/ref/components/ref_selector_spec.js
@@ -26,12 +26,14 @@ describe('Ref selector component', () => {
   let tagsApiCallSpy;
   let commitApiCallSpy;
 
-  const createComponent = () => {
+  const createComponent = (props = {}, attrs = {}) => {
     wrapper = mount(RefSelector, {
       propsData: {
         projectId,
         value: '',
+        ...props,
       },
+      attrs,
       listeners: {
         // simulate a parent component v-model binding
         input: selectedRef => {
@@ -163,6 +165,52 @@ describe('Ref selector component', () => {
   });
 
   describe('post-initialization behavior', () => {
+    describe('when the parent component provides an `id` binding', () => {
+      const id = 'git-ref';
+
+      beforeEach(() => {
+        createComponent({}, { id });
+
+        return waitForRequests();
+      });
+
+      it('adds the provided ID to the GlNewDropdown instance', () => {
+        expect(wrapper.attributes().id).toBe(id);
+      });
+    });
+
+    describe('when a ref is pre-selected', () => {
+      const preselectedRef = fixtures.branches[0].name;
+
+      beforeEach(() => {
+        createComponent({ value: preselectedRef });
+
+        return waitForRequests();
+      });
+
+      it('renders the pre-selected ref name', () => {
+        expect(findButtonContent().text()).toBe(preselectedRef);
+      });
+    });
+
+    describe('when the selected ref is updated by the parent component', () => {
+      const updatedRef = fixtures.branches[0].name;
+
+      beforeEach(() => {
+        createComponent();
+
+        return waitForRequests();
+      });
+
+      it('renders the updated ref name', () => {
+        wrapper.setProps({ value: updatedRef });
+
+        return localVue.nextTick().then(() => {
+          expect(findButtonContent().text()).toBe(updatedRef);
+        });
+      });
+    });
+
     describe('when the search query is updated', () => {
       beforeEach(() => {
         createComponent();