Commit de7026df authored by Kushal Pandya's avatar Kushal Pandya

Merge branch '249661-ci-lint-loading-button' into 'master'

Add a loding indicator for the submit button in the CI lint page

See merge request gitlab-org/gitlab!46671
parents 5ebdd826 d53fe992
......@@ -27,6 +27,7 @@ export default {
data() {
return {
content: '',
loading: false,
valid: false,
errors: null,
warnings: null,
......@@ -44,6 +45,7 @@ export default {
},
methods: {
async lint() {
this.loading = true;
try {
const {
data: {
......@@ -62,6 +64,8 @@ export default {
} catch (error) {
this.apiError = error;
this.isErrorDismissed = false;
} finally {
this.loading = false;
}
},
clear() {
......@@ -93,6 +97,7 @@ export default {
<div class="gl-display-flex gl-align-items-center">
<gl-button
class="gl-mr-4"
:loading="loading"
category="primary"
variant="success"
data-testid="ci-lint-validate"
......
import { GlAlert } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import waitForPromises from 'helpers/wait_for_promises';
import EditorLite from '~/vue_shared/components/editor_lite.vue';
import CiLint from '~/ci_lint/components/ci_lint.vue';
import CiLintResults from '~/ci_lint/components/ci_lint_results.vue';
import lintCIMutation from '~/ci_lint/graphql/mutations/lint_ci.mutation.graphql';
import { mockLintDataValid } from '../mock_data';
describe('CI Lint', () => {
let wrapper;
......@@ -9,6 +13,7 @@ describe('CI Lint', () => {
const endpoint = '/namespace/project/-/ci/lint';
const content =
"test_job:\n stage: build\n script: echo 'Building'\n only:\n - web\n - chat\n - pushes\n allow_failure: true ";
const mockMutate = jest.fn().mockResolvedValue(mockLintDataValid);
const createComponent = () => {
wrapper = shallowMount(CiLint, {
......@@ -23,13 +28,15 @@ describe('CI Lint', () => {
},
mocks: {
$apollo: {
mutate: jest.fn(),
mutate: mockMutate,
},
},
});
};
const findEditor = () => wrapper.find(EditorLite);
const findAlert = () => wrapper.find(GlAlert);
const findCiLintResults = () => wrapper.find(CiLintResults);
const findValidateBtn = () => wrapper.find('[data-testid="ci-lint-validate"]');
const findClearBtn = () => wrapper.find('[data-testid="ci-lint-clear"]');
......@@ -38,6 +45,7 @@ describe('CI Lint', () => {
});
afterEach(() => {
mockMutate.mockClear();
wrapper.destroy();
});
......@@ -67,6 +75,35 @@ describe('CI Lint', () => {
});
});
it('validation displays results', async () => {
findValidateBtn().vm.$emit('click');
await wrapper.vm.$nextTick();
expect(findValidateBtn().props('loading')).toBe(true);
await waitForPromises();
expect(findCiLintResults().exists()).toBe(true);
expect(findValidateBtn().props('loading')).toBe(false);
});
it('validation displays error', async () => {
mockMutate.mockRejectedValue('Error!');
findValidateBtn().vm.$emit('click');
await wrapper.vm.$nextTick();
expect(findValidateBtn().props('loading')).toBe(true);
await waitForPromises();
expect(findCiLintResults().exists()).toBe(false);
expect(findAlert().text()).toBe('Error!');
expect(findValidateBtn().props('loading')).toBe(false);
});
it('content is cleared on clear action', async () => {
expect(findEditor().props('value')).toBe(content);
......
......@@ -81,3 +81,14 @@ export const mockErrors = [
export const mockWarnings = [
'"jobs:multi_project_job may allow multiple pipelines to run for a single action due to `rules:when` clause with no `workflow:rules` - read more: https://docs.gitlab.com/ee/ci/troubleshooting.html#pipeline-warnings"',
];
export const mockLintDataValid = {
data: {
lintCI: {
errors: [],
warnings: [],
valid: true,
jobs: mockJobs,
},
},
};
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment