Add latest changes from gitlab-org/gitlab@master

3 files changed, 244 insertions, 0 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
new file mode 100644
index 00000000000..43239da344f
--- /dev/null
+++ b/spec/frontend/grafana_integration/components/__snapshots__/grafana_integration_spec.js.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`grafana integration component default state to match the default snapshot 1`] = `
+<section
+  class="settings no-animate js-grafana-integration"
+  id="grafana"
+>
+  <div
+    class="settings-header"
+  >
+    <h4
+      class="js-section-header"
+    >
+      
+      Grafana Authentication
+    
+    </h4>
+     
+    <glbutton-stub
+      class="js-settings-toggle"
+    >
+      Expand
+    </glbutton-stub>
+     
+    <p
+      class="js-section-sub-header"
+    >
+      
+      Embed Grafana charts in GitLab issues.
+    
+    </p>
+  </div>
+   
+  <div
+    class="settings-content"
+  >
+    <form>
+      <glformgroup-stub
+        description="Enter the base URL of the Grafana instance."
+        label="Grafana URL"
+        label-for="grafana-url"
+      >
+        <glforminput-stub
+          id="grafana-url"
+          placeholder="https://my-url.grafana.net/my-dashboard"
+          value="http://test.host"
+        />
+      </glformgroup-stub>
+       
+      <glformgroup-stub
+        label="API Token"
+        label-for="grafana-token"
+      >
+        <glforminput-stub
+          id="grafana-token"
+          value="someToken"
+        />
+         
+        <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
+            
+            <icon-stub
+              class="vertical-align-middle"
+              name="external-link"
+              size="16"
+            />
+          </a>
+        </p>
+      </glformgroup-stub>
+       
+      <glbutton-stub
+        variant="success"
+      >
+        
+        Save Changes
+      
+      </glbutton-stub>
+    </form>
+  </div>
+</section>
+`;
diff --git a/spec/frontend/grafana_integration/components/grafana_integration_spec.js b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
new file mode 100644
index 00000000000..594ea94dc6a
--- /dev/null
+++ b/spec/frontend/grafana_integration/components/grafana_integration_spec.js
@@ -0,0 +1,124 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import GrafanaIntegration from '~/grafana_integration/components/grafana_integration.vue';
+import { createStore } from '~/grafana_integration/store';
+import axios from '~/lib/utils/axios_utils';
+import { refreshCurrentPage } from '~/lib/utils/url_utility';
+import createFlash from '~/flash';
+import { TEST_HOST } from 'helpers/test_constants';
+
+jest.mock('~/lib/utils/url_utility');
+jest.mock('~/flash');
+
+describe('grafana integration component', () => {
+  let wrapper;
+  let store;
+  const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`;
+  const grafanaIntegrationUrl = `${TEST_HOST}`;
+  const grafanaIntegrationToken = 'someToken';
+
+  beforeEach(() => {
+    store = createStore({
+      operationsSettingsEndpoint,
+      grafanaIntegrationUrl,
+      grafanaIntegrationToken,
+    });
+  });
+
+  afterEach(() => {
+    if (wrapper.destroy) {
+      wrapper.destroy();
+      createFlash.mockReset();
+      refreshCurrentPage.mockReset();
+    }
+  });
+
+  describe('default state', () => {
+    it('to match the default snapshot', () => {
+      wrapper = shallowMount(GrafanaIntegration, { store });
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  it('renders header text', () => {
+    wrapper = shallowMount(GrafanaIntegration, { store });
+
+    expect(wrapper.find('.js-section-header').text()).toBe('Grafana Authentication');
+  });
+
+  describe('expand/collapse button', () => {
+    it('renders as an expand button by default', () => {
+      wrapper = shallowMount(GrafanaIntegration, { store });
+
+      const button = wrapper.find(GlButton);
+
+      expect(button.text()).toBe('Expand');
+    });
+  });
+
+  describe('sub-header', () => {
+    it('renders descriptive text', () => {
+      wrapper = shallowMount(GrafanaIntegration, { store });
+
+      expect(wrapper.find('.js-section-sub-header').text()).toContain(
+        'Embed Grafana charts in GitLab issues.',
+      );
+    });
+  });
+
+  describe('form', () => {
+    beforeEach(() => {
+      jest.spyOn(axios, 'patch').mockImplementation();
+    });
+
+    afterEach(() => {
+      axios.patch.mockReset();
+    });
+
+    describe('submit button', () => {
+      const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
+
+      const endpointRequest = [
+        operationsSettingsEndpoint,
+        {
+          project: {
+            grafana_integration_attributes: {
+              grafana_url: grafanaIntegrationUrl,
+              token: grafanaIntegrationToken,
+            },
+          },
+        },
+      ];
+
+      it('submits form on click', () => {
+        wrapper = mount(GrafanaIntegration, { store });
+        axios.patch.mockResolvedValue();
+
+        findSubmitButton(wrapper).trigger('click');
+
+        expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
+        return wrapper.vm.$nextTick().then(() => expect(refreshCurrentPage).toHaveBeenCalled());
+      });
+
+      it('creates flash banner on error', () => {
+        const message = 'mockErrorMessage';
+        wrapper = mount(GrafanaIntegration, { store });
+        axios.patch.mockRejectedValue({ response: { data: { message } } });
+
+        findSubmitButton().trigger('click');
+
+        expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
+        return wrapper.vm
+          .$nextTick()
+          .then(jest.runAllTicks)
+          .then(() =>
+            expect(createFlash).toHaveBeenCalledWith(
+              `There was an error saving your changes. ${message}`,
+              'alert',
+            ),
+          );
+      });
+    });
+  });
+});
diff --git a/spec/frontend/grafana_integration/store/mutations_spec.js b/spec/frontend/grafana_integration/store/mutations_spec.js
new file mode 100644
index 00000000000..d9b8c258623
--- /dev/null
+++ b/spec/frontend/grafana_integration/store/mutations_spec.js
@@ -0,0 +1,28 @@
+import mutations from '~/grafana_integration/store/mutations';
+import createState from '~/grafana_integration/store/state';
+
+describe('grafana integration mutations', () => {
+  let localState;
+
+  beforeEach(() => {
+    localState = createState();
+  });
+
+  describe('SET_GRAFANA_URL', () => {
+    it('sets grafanaUrl', () => {
+      const mockUrl = 'mockUrl';
+      mutations.SET_GRAFANA_URL(localState, mockUrl);
+
+      expect(localState.grafanaUrl).toBe(mockUrl);
+    });
+  });
+
+  describe('SET_GRAFANA_TOKEN', () => {
+    it('sets grafanaToken', () => {
+      const mockToken = 'mockToken';
+      mutations.SET_GRAFANA_TOKEN(localState, mockToken);
+
+      expect(localState.grafanaToken).toBe(mockToken);
+    });
+  });
+});