2 files changed, 28 insertions, 36 deletions

diff --git a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
index 1d2a5d636bc..33e2c0db5e5 100644
--- a/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
+++ b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
@@ -43,19 +43,25 @@ exports[`grafana integration component default state to match the default snapsh
     class="settings-content"
   >
     <form>
-      <gl-form-checkbox-stub
-        class="mb-4"
-        id="grafana-integration-enabled"
+      <gl-form-group-stub
+        label="Enable authentication"
+        label-for="grafana-integration-enabled"
+        labeldescription=""
       >
+        <gl-form-checkbox-stub
+          id="grafana-integration-enabled"
+        >
+          
+          Active
         
-        Active
-      
-      </gl-form-checkbox-stub>
+        </gl-form-checkbox-stub>
+      </gl-form-group-stub>
        
       <gl-form-group-stub
         description="Enter the base URL of the Grafana instance."
         label="Grafana URL"
         label-for="grafana-url"
+        labeldescription=""
       >
         <gl-form-input-stub
           id="grafana-url"
@@ -67,6 +73,7 @@ exports[`grafana integration component default state to match the default snapsh
       <gl-form-group-stub
         label="API token"
         label-for="grafana-token"
+        labeldescription=""
       >
         <gl-form-input-stub
           id="grafana-token"
@@ -76,32 +83,19 @@ exports[`grafana integration component default state to match the default snapsh
         <p
           class="form-text text-muted"
         >
-          
-          Enter the Grafana API token.
-          
-          <a
-            href="https://grafana.com/docs/http_api/auth/#create-api-token"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            
-            More information.
-            
-            <gl-icon-stub
-              class="vertical-align-middle"
-              name="external-link"
-              size="16"
-            />
-          </a>
+          <gl-sprintf-stub
+            message="Enter the %{docLinkStart}Grafana API token%{docLinkEnd}."
+          />
         </p>
       </gl-form-group-stub>
        
       <gl-button-stub
         buttontextclasses=""
         category="primary"
+        data-testid="save-grafana-settings-button"
         icon=""
         size="medium"
-        variant="success"
+        variant="confirm"
       >
         
         Save changes
diff --git a/spec/frontend/grafana_integration/components/grafana_integration_spec.js b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
index f1a8e6fe2dc..3cb4dd41574 100644
--- a/spec/frontend/grafana_integration/components/grafana_integration_spec.js
+++ b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
@@ -1,7 +1,8 @@
 import { GlButton } from '@gitlab/ui';
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
-import { deprecatedCreateFlash as createFlash } from '~/flash';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import createFlash from '~/flash';
 import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
 import { createStore } from '~/grafana_integration/store';
 import axios from '~/lib/utils/axios_utils';
@@ -51,8 +52,7 @@ describe('grafana integration component', () => {
     it('renders as an expand button by default', () => {
       wrapper = shallowMount(GrafanaIntegration, { store });
 
-      const button = wrapper.find(GlButton);
-
+      const button = wrapper.findComponent(GlButton);
       expect(button.text()).toBe('Expand');
     });
   });
@@ -70,6 +70,7 @@ describe('grafana integration component', () => {
   describe('form', () => {
     beforeEach(() => {
       jest.spyOn(axios, 'patch').mockImplementation();
+      wrapper = mountExtended(GrafanaIntegration, { store });
     });
 
     afterEach(() => {
@@ -77,7 +78,7 @@ describe('grafana integration component', () => {
     });
 
     describe('submit button', () => {
-      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
+      const findSubmitButton = () => wrapper.findByTestId('save-grafana-settings-button');
 
       const endpointRequest = [
         operationsSettingsEndpoint,
@@ -93,9 +94,7 @@ describe('grafana integration component', () => {
       ];
 
       it('submits form on click', () => {
-        wrapper = mount(GrafanaIntegration, { store });
         axios.patch.mockResolvedValue();
-
         findSubmitButton(wrapper).trigger('click');
 
         expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
@@ -104,7 +103,6 @@ describe('grafana integration component', () => {
 
       it('creates flash banner on error', () => {
         const message = 'mockErrorMessage';
-        wrapper = mount(GrafanaIntegration, { store });
         axios.patch.mockRejectedValue({ response: { data: { message } } });
 
         findSubmitButton().trigger('click');
@@ -114,10 +112,10 @@ describe('grafana integration component', () => {
           .$nextTick()
           .then(jest.runAllTicks)
           .then(() =>
-            expect(createFlash).toHaveBeenCalledWith(
-              `There was an error saving your changes. ${message}`,
-              'alert',
-            ),
+            expect(createFlash).toHaveBeenCalledWith({
+              message: `There was an error saving your changes. ${message}`,
+              type: 'alert',
+            }),
           );
       });
     });