diff options
Diffstat (limited to 'spec/frontend/grafana_integration/components')
-rw-r--r-- | spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap | 42 | ||||
-rw-r--r-- | spec/frontend/grafana_integration/components/grafana_integration_spec.js | 22 |
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', + }), ); }); }); |