1 files changed, 16 insertions, 12 deletions

diff --git a/spec/frontend/performance_bar/components/add_request_spec.js b/spec/frontend/performance_bar/components/add_request_spec.js
index 5422481439e..627e004ce3e 100644
--- a/spec/frontend/performance_bar/components/add_request_spec.js
+++ b/spec/frontend/performance_bar/components/add_request_spec.js
@@ -1,12 +1,16 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import { GlFormInput, GlButton } from '@gitlab/ui';
 import AddRequest from '~/performance_bar/components/add_request.vue';
 
 describe('add request form', () => {
   let wrapper;
 
+  const findGlFormInput = () => wrapper.findComponent(GlFormInput);
+  const findGlButton = () => wrapper.findComponent(GlButton);
+
   beforeEach(() => {
-    wrapper = shallowMount(AddRequest);
+    wrapper = mount(AddRequest);
   });
 
   afterEach(() => {
@@ -14,35 +18,35 @@ describe('add request form', () => {
   });
 
   it('hides the input on load', () => {
-    expect(wrapper.find('input').exists()).toBe(false);
+    expect(findGlFormInput().exists()).toBe(false);
   });
 
   describe('when clicking the button', () => {
     beforeEach(async () => {
-      wrapper.find('button').trigger('click');
+      findGlButton().trigger('click');
       await nextTick();
     });
 
     it('shows the form', () => {
-      expect(wrapper.find('input').exists()).toBe(true);
+      expect(findGlFormInput().exists()).toBe(true);
     });
 
     describe('when pressing escape', () => {
       beforeEach(async () => {
-        wrapper.find('input').trigger('keyup.esc');
+        findGlFormInput().trigger('keyup.esc');
         await nextTick();
       });
 
       it('hides the input', () => {
-        expect(wrapper.find('input').exists()).toBe(false);
+        expect(findGlFormInput().exists()).toBe(false);
       });
     });
 
     describe('when submitting the form', () => {
       beforeEach(async () => {
-        wrapper.find('input').setValue('http://gitlab.example.com/users/root/calendar.json');
+        findGlFormInput().setValue('http://gitlab.example.com/users/root/calendar.json');
         await nextTick();
-        wrapper.find('input').trigger('keyup.enter');
+        findGlFormInput().trigger('keyup.enter');
         await nextTick();
       });
 
@@ -54,13 +58,13 @@ describe('add request form', () => {
       });
 
       it('hides the input', () => {
-        expect(wrapper.find('input').exists()).toBe(false);
+        expect(findGlFormInput().exists()).toBe(false);
       });
 
       it('clears the value for next time', async () => {
-        wrapper.find('button').trigger('click');
+        findGlButton().trigger('click');
         await nextTick();
-        expect(wrapper.find('input').text()).toEqual('');
+        expect(findGlFormInput().text()).toEqual('');
       });
     });
   });