Hook up editor

Hook up the editor lite
component in the CI lint
view.

app/assets/javascripts/ci_lint/components/ci_lint.vue

 <script>
 import { GlButton, GlFormCheckbox, GlIcon, GlLink, GlAlert } from '@gitlab/ui';
+import EditorLite from '~/vue_shared/components/editor_lite.vue';
 import CiLintResults from './ci_lint_results.vue';
 import lintCIMutation from '../graphql/mutations/lint_ci.mutation.graphql';
 
@@ -11,6 +12,7 @@ export default {
     GlLink,
     GlAlert,
     CiLintResults,
+    EditorLite,
   },
   props: {
     endpoint: {
@@ -62,6 +64,9 @@ export default {
         this.isErrorDismissed = false;
       }
     },
+    clear() {
+      this.content = '';
+    },
   },
 };
 </script>
@@ -76,22 +81,31 @@ export default {
         @dismiss="isErrorDismissed = true"
         >{{ apiError }}</gl-alert
       >
-
-      <textarea v-model="content" cols="175" rows="20"></textarea>
+      <div class="file-holder gl-mb-3">
+        <div class="js-file-title file-title clearfix">
+          {{ __('Contents of .gitlab-ci.yml') }}
+        </div>
+        <editor-lite v-model="content" file-name="*.yml" data-testid="ci-lint-editor-lite" />
+      </div>
     </div>
 
     <div class="col-sm-12 gl-display-flex gl-justify-content-space-between">
       <div class="gl-display-flex gl-align-items-center">
-        <gl-button class="gl-mr-4" category="primary" variant="success" @click="lint">{{
-          __('Validate')
-        }}</gl-button>
+        <gl-button
+          class="gl-mr-4"
+          category="primary"
+          variant="success"
+          data-testid="ci-lint-validate"
+          @click="lint"
+          >{{ __('Validate') }}</gl-button
+        >
         <gl-form-checkbox v-model="dryRun"
           >{{ __('Simulate a pipeline created for the default branch') }}
           <gl-link :href="helpPagePath" target="_blank"
             ><gl-icon class="gl-text-blue-600" name="question-o"/></gl-link
         ></gl-form-checkbox>
       </div>
-      <gl-button>{{ __('Clear') }}</gl-button>
+      <gl-button data-testid="ci-lint-clear" @click="clear">{{ __('Clear') }}</gl-button>
     </div>
 
     <ci-lint-results

spec/frontend/ci_lint/components/ci_lint_spec.js

+import { shallowMount } from '@vue/test-utils';
+import CiLint from '~/ci_lint/components/ci_lint.vue';
+import lintCIMutation from '~/ci_lint/graphql/mutations/lint_ci.mutation.graphql';
+
+describe('CI Lint', () => {
+  let wrapper;
+
+  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 createComponent = () => {
+    wrapper = shallowMount(CiLint, {
+      data() {
+        return {
+          content,
+        };
+      },
+      propsData: {
+        endpoint,
+        helpPagePath: '/help/ci/lint#pipeline-simulation',
+      },
+      mocks: {
+        $apollo: {
+          mutate: jest.fn(),
+        },
+      },
+    });
+  };
+
+  const findEditor = () => wrapper.find('[data-testid="ci-lint-editor-lite"]');
+  const findValidateBtn = () => wrapper.find('[data-testid="ci-lint-validate"]');
+  const findClearBtn = () => wrapper.find('[data-testid="ci-lint-clear"]');
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('displays the editor', () => {
+    expect(findEditor().exists()).toBe(true);
+  });
+
+  it('validate action calls mutation correctly', () => {
+    findValidateBtn().vm.$emit('click');
+
+    expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+      mutation: lintCIMutation,
+      variables: { content, dry: false, endpoint },
+    });
+  });
+
+  it('validate action calls mutation with dry run', async () => {
+    const dryRunEnabled = true;
+
+    await wrapper.setData({ dryRun: dryRunEnabled });
+
+    findValidateBtn().vm.$emit('click');
+
+    expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
+      mutation: lintCIMutation,
+      variables: { content, dry: dryRunEnabled, endpoint },
+    });
+  });
+
+  it('content is cleared on clear action', async () => {
+    await findClearBtn().vm.$emit('click');
+
+    expect(findEditor().props('value')).toBe('');
+  });
+});