Skip to content

G
gitlab-ce
Commit 1d5053d2 authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

Merge branch '296547-add-drawer-content' into 'master' 

Add pipeline editor drawer content

See merge request gitlab-org/gitlab!60957
parents 71dee555 b92018b8
Hide whitespace changes
Inline Side-by-side
Showing with 606 additions and 11 deletions
app/assets/javascripts/pipeline_editor/components/drawer/cards/first_pipeline_card.vue 0 → 100644
View file @ 1d5053d2
<script>
import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
import PipelineVisualReference from '../ui/pipeline_visual_reference.vue';
export default {
i18n: {
title: s__('PipelineEditorTutorial|🚀 Run your first pipeline'),
firstParagraph: s__(
'PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs.',
),
secondParagraph: s__(
'PipelineEditorTutorial|In the example below, %{codeStart}build%{codeEnd} and %{codeStart}deploy%{codeEnd} each contain one job, and %{codeStart}test%{codeEnd} contains two jobs. Your scripts run in jobs like these.',
),
thirdParagraph: s__(
'PipelineEditorTutorial|You can use %{linkStart}CI/CD examples and templates%{linkEnd} to get your first %{codeStart}.gitlab-ci.yml%{codeEnd} configuration file started. Your first pipeline runs when you commit the changes.',
),
note: s__(
'PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}',
),
},
components: {
GlCard,
GlLink,
GlSprintf,
PipelineVisualReference,
},
inject: ['ciExamplesHelpPagePath', 'runnerHelpPagePath'],
};
</script>
<template>
<gl-card>
<template #default>
<h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
<p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
<p class="gl-mb-3">
<gl-sprintf :message="$options.i18n.secondParagraph">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<pipeline-visual-reference />
<p class="gl-my-3">
<gl-sprintf :message="$options.i18n.thirdParagraph">
<template #link="{ content }">
<gl-link :href="ciExamplesHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
<p class="gl-mb-0">
<gl-sprintf :message="$options.i18n.note">
<template #link="{ content }">
<gl-link :href="runnerHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</p>
</template>
</gl-card>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/cards/getting_started_card.vue 0 → 100644
View file @ 1d5053d2
<script>
import { GlCard, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
i18n: {
title: s__('PipelineEditorTutorial|Get started with GitLab CI/CD'),
firstParagraph: s__(
'PipelineEditorTutorial|GitLab CI/CD can automatically build, test, and deploy your application.',
),
secondParagraph: s__(
'PipelineEditorTutorial|The pipeline stages and jobs are defined in a %{codeStart}.gitlab-ci.yml%{codeEnd} file. You can edit, visualize and validate the syntax in this file by using the Pipeline Editor.',
),
},
components: {
GlCard,
GlSprintf,
},
};
</script>
<template>
<gl-card>
<template #default>
<h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
<p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
<p class="gl-mb-0">
<gl-sprintf :message="$options.i18n.secondParagraph">
<template #code="{ content }">
<code>{{ content }}</code>
</template>
</gl-sprintf>
</p>
</template>
</gl-card>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue 0 → 100644
View file @ 1d5053d2
<script>
import { GlCard, GlLink, GlSprintf } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
i18n: {
title: s__('PipelineEditorTutorial|⚙️ Pipeline configuration reference'),
firstParagraph: s__('PipelineEditorTutorial|Resources to help with your CI/CD configuration:'),
browseExamples: s__(
'PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}',
),
viewSyntaxRef: s__(
'PipelineEditorTutorial|View %{linkStart}.gitlab-ci.yml syntax reference%{linkEnd}',
),
learnMore: s__(
'PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}',
),
needs: s__(
'PipelineEditorTutorial|Make your pipeline more efficient with the %{linkStart}Needs keyword%{linkEnd}',
),
},
components: {
GlCard,
GlLink,
GlSprintf,
},
inject: ['ciExamplesHelpPagePath', 'ciHelpPagePath', 'needsHelpPagePath', 'ymlHelpPagePath'],
};
</script>
<template>
<gl-card>
<template #default>
<h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
<p class="gl-mb-3">{{ $options.i18n.firstParagraph }}</p>
<ul>
<li>
<gl-sprintf :message="$options.i18n.browseExamples">
<template #link="{ content }">
<gl-link :href="ciExamplesHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</li>
<li>
<gl-sprintf :message="$options.i18n.viewSyntaxRef">
<template #link="{ content }">
<gl-link :href="ymlHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</li>
<li>
<gl-sprintf :message="$options.i18n.learnMore">
<template #link="{ content }">
<gl-link :href="ciHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</li>
<li>
<gl-sprintf :message="$options.i18n.needs">
<template #link="{ content }">
<gl-link :href="needsHelpPagePath" target="_blank">
{{ content }}
</gl-link>
</template>
</gl-sprintf>
</li>
</ul>
</template>
</gl-card>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue 0 → 100644
View file @ 1d5053d2
<script>
import { GlCard } from '@gitlab/ui';
import { s__ } from '~/locale';
export default {
i18n: {
title: s__('PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline'),
firstParagraph: s__(
'PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes.',
),
},
components: {
GlCard,
},
};
</script>
<template>
<gl-card>
<template #default>
<h4 class="gl-font-lg gl-mt-0">{{ $options.i18n.title }}</h4>
<p class="gl-mb-0">{{ $options.i18n.firstParagraph }}</p>
</template>
</gl-card>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
View file @ 1d5053d2
<script>
import { GlButton, GlIcon } from '@gitlab/ui';
import { __ } from '~/locale';
import FirstPipelineCard from './cards/first_pipeline_card.vue';
import GettingStartedCard from './cards/getting_started_card.vue';
import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
export default {
width: {
......@@ -11,6 +15,10 @@ export default {
toggleTxt: __('Collapse'),
},
components: {
FirstPipelineCard,
GettingStartedCard,
PipelineConfigReferenceCard,
VisualizeAndLintCard,
GlButton,
GlIcon,
},
......@@ -55,7 +63,7 @@ export default {
<template>
<aside
aria-live="polite"
class="gl-fixed gl-right-0 gl-h-full gl-bg-gray-10 gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100"
class="gl-fixed gl-right-0 gl-bg-gray-10 gl-shadow-drawer gl-transition-medium gl-border-l-solid gl-border-1 gl-border-gray-100 gl-h-full gl-z-index-9999 gl-overflow-y-auto"
:style="rootStyle"
>
<gl-button
......@@ -63,14 +71,19 @@ export default {
class="gl-w-full gl-h-9 gl-rounded-0! gl-border-none! gl-border-b-solid! gl-border-1! gl-border-gray-100 gl-text-decoration-none! gl-outline-0! gl-display-flex"
:class="buttonClass"
:title="__('Toggle sidebar')"
data-testid="toggleBtn"
@click="toggleDrawer"
>
<span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">{{
__('Collapse')
}}</span>
<span v-if="isExpanded" class="gl-text-gray-500 gl-mr-3" data-testid="collapse-text">
{{ __('Collapse') }}
</span>
<gl-icon data-testid="toggle-icon" :name="buttonIconName" />
</gl-button>
<div v-if="isExpanded" class="gl-p-5" data-testid="drawer-content"></div>
<div v-if="isExpanded" class="gl-h-full gl-p-5" data-testid="drawer-content">
<getting-started-card class="gl-mb-4" />
<first-pipeline-card class="gl-mb-4" />
<visualize-and-lint-card class="gl-mb-4" />
<pipeline-config-reference-card />
<div class="gl-h-13"></div>
</div>
</aside>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/ui/demo_job_pill.vue 0 → 100644
View file @ 1d5053d2
<script>
export default {
props: {
jobName: {
type: String,
required: true,
},
},
};
</script>
<template>
<div
class="gl-w-13 gl-h-6 gl-font-sm gl-bg-white gl-inset-border-1-blue-500 gl-text-center gl-text-truncate gl-rounded-pill gl-px-4 gl-py-2 gl-relative gl-z-index-1 gl-transition-duration-slow gl-transition-timing-function-ease"
>
{{ jobName }}
</div>
</template>
app/assets/javascripts/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue 0 → 100644
View file @ 1d5053d2
<script>
import { s__ } from '~/locale';
import DemoJobPill from './demo_job_pill.vue';
export default {
i18n: {
stageNames: {
build: s__('StageName|Build'),
test: s__('StageName|Test'),
deploy: s__('StageName|Deploy'),
},
jobNames: {
build: s__('JobName|build-job'),
test_1: s__('JobName|unit-test'),
test_2: s__('JobName|lint-test'),
deploy: s__('JobName|deploy-app'),
},
},
stageClasses:
'gl-bg-blue-50 gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-4 gl-rounded-base',
titleClasses: 'gl-text-blue-600 gl-mb-4',
components: {
DemoJobPill,
},
};
</script>
<template>
<div class="gl-display-flex gl-justify-content-center">
<div :class="$options.stageClasses" class="gl-mr-5">
<div :class="$options.titleClasses">{{ $options.i18n.stageNames.build }}</div>
<demo-job-pill :job-name="$options.i18n.jobNames.build" />
</div>
<div :class="$options.stageClasses" class="gl-mr-5">
<div :class="$options.titleClasses">{{ $options.i18n.stageNames.test }}</div>
<demo-job-pill class="gl-mb-3" :job-name="$options.i18n.jobNames.test_1" />
<demo-job-pill :job-name="$options.i18n.jobNames.test_2" />
</div>
<div :class="$options.stageClasses">
<div :class="$options.titleClasses">{{ $options.i18n.stageNames.deploy }}</div>
<demo-job-pill :job-name="$options.i18n.jobNames.deploy" />
</div>
</div>
</template>
app/assets/javascripts/pipeline_editor/index.js
View file @ 1d5053d2
......@@ -30,13 +30,19 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
pipelineEtag,
// Add to provide/inject API for static values
ciConfigPath,
ciExamplesHelpPagePath,
ciHelpPagePath,
defaultBranch,
emptyStateIllustrationPath,
helpPaths,
lintHelpPagePath,
needsHelpPagePath,
newMergeRequestPath,
pipelinePagePath,
projectFullPath,
projectPath,
projectNamespace,
runnerHelpPagePath,
ymlHelpPagePath,
} = el?.dataset;
......@@ -80,15 +86,21 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
apolloProvider,
provide: {
ciConfigPath,
ciExamplesHelpPagePath,
ciHelpPagePath,
configurationPaths,
defaultBranch,
emptyStateIllustrationPath,
helpPaths,
lintHelpPagePath,
needsHelpPagePath,
newMergeRequestPath,
pipelinePagePath,
projectFullPath,
projectPath,
projectNamespace,
runnerHelpPagePath,
ymlHelpPagePath,
configurationPaths,
},
render(h) {
return h(PipelineEditorApp);
......
app/helpers/ci/pipeline_editor_helper.rb
View file @ 1d5053d2
......@@ -12,16 +12,21 @@ module Ci
commit_sha = project.commit ? project.commit.sha : ''
{
"ci-config-path": project.ci_config_path_or_default,
"ci-examples-help-page-path" => help_page_path('ci/examples/README'),
"ci-help-page-path" => help_page_path('ci/README'),
"commit-sha" => commit_sha,
"default-branch" => project.default_branch,
"empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
"initial-branch-name": params[:branch_name],
"lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
"needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
"new-merge-request-path" => namespace_project_new_merge_request_path,
"pipeline_etag" => project.commit ? graphql_etag_pipeline_sha_path(commit_sha) : '',
"pipeline-page-path" => project_pipelines_path(project),
"project-path" => project.path,
"project-full-path" => project.full_path,
"project-namespace" => project.namespace.full_path,
"runner-help-page-path" => help_page_path('ci/runners/README'),
"yml-help-page-path" => help_page_path('ci/yaml/README')
}
end
......
locale/gitlab.pot
View file @ 1d5053d2
......@@ -18666,6 +18666,18 @@ msgstr ""
msgid "Job was retried"
msgstr ""
msgid "JobName|build-job"
msgstr ""
msgid "JobName|deploy-app"
msgstr ""
msgid "JobName|lint-test"
msgstr ""
msgid "JobName|unit-test"
msgstr ""
msgid "Jobs"
msgstr ""
......@@ -23821,6 +23833,54 @@ msgstr ""
msgid "PipelineCharts|Total:"
msgstr ""
msgid "PipelineEditorTutorial|A typical GitLab pipeline consists of three stages: build, test and deploy. Each stage can have one or more jobs."
msgstr ""
msgid "PipelineEditorTutorial|Browse %{linkStart}CI/CD examples and templates%{linkEnd}"
msgstr ""
msgid "PipelineEditorTutorial|Get started with GitLab CI/CD"
msgstr ""
msgid "PipelineEditorTutorial|GitLab CI/CD can automatically build, test, and deploy your application."
msgstr ""
msgid "PipelineEditorTutorial|If you’re using a self-managed GitLab instance, %{linkStart}make sure your instance has runners available.%{linkEnd}"
msgstr ""
msgid "PipelineEditorTutorial|In the example below, %{codeStart}build%{codeEnd} and %{codeStart}deploy%{codeEnd} each contain one job, and %{codeStart}test%{codeEnd} contains two jobs. Your scripts run in jobs like these."
msgstr ""
msgid "PipelineEditorTutorial|Learn more about %{linkStart}GitLab CI/CD concepts%{linkEnd}"
msgstr ""
msgid "PipelineEditorTutorial|Make your pipeline more efficient with the %{linkStart}Needs keyword%{linkEnd}"
msgstr ""
msgid "PipelineEditorTutorial|Resources to help with your CI/CD configuration:"
msgstr ""
msgid "PipelineEditorTutorial|The pipeline stages and jobs are defined in a %{codeStart}.gitlab-ci.yml%{codeEnd} file. You can edit, visualize and validate the syntax in this file by using the Pipeline Editor."
msgstr ""
msgid "PipelineEditorTutorial|Use the Visualize and Lint tabs in the Pipeline Editor to visualize your pipeline and check for any errors or warnings before committing your changes."
msgstr ""
msgid "PipelineEditorTutorial|View %{linkStart}.gitlab-ci.yml syntax reference%{linkEnd}"
msgstr ""
msgid "PipelineEditorTutorial|You can use %{linkStart}CI/CD examples and templates%{linkEnd} to get your first %{codeStart}.gitlab-ci.yml%{codeEnd} configuration file started. Your first pipeline runs when you commit the changes."
msgstr ""
msgid "PipelineEditorTutorial|⚙️ Pipeline configuration reference"
msgstr ""
msgid "PipelineEditorTutorial|💡 Tip: Visualize and validate your pipeline"
msgstr ""
msgid "PipelineEditorTutorial|🚀 Run your first pipeline"
msgstr ""
msgid "PipelineEditor|The CI/CD configuration is continuously validated. Errors and warnings are displayed when the CI/CD configuration file is not empty."
msgstr ""
......@@ -30521,6 +30581,15 @@ msgstr ""
msgid "Stage removed"
msgstr ""
msgid "StageName|Build"
msgstr ""
msgid "StageName|Deploy"
msgstr ""
msgid "StageName|Test"
msgstr ""
msgid "Standard"
msgstr ""
......
spec/frontend/pipeline_editor/components/drawer/cards/first_pipeline_card_spec.js 0 → 100644
View file @ 1d5053d2
import { getByRole } from '@testing-library/dom';
import { mount } from '@vue/test-utils';
import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
import PipelineVisualReference from '~/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue';
describe('First pipeline card', () => {
let wrapper;
const defaultProvide = {
ciExamplesHelpPagePath: '/pipelines/examples',
runnerHelpPagePath: '/help/runners',
};
const createComponent = () => {
wrapper = mount(FirstPipelineCard, {
provide: {
...defaultProvide,
},
});
};
const getLinkByName = (name) => getByRole(wrapper.element, 'link', { name }).href;
const findPipelinesLink = () => getLinkByName(/examples and templates/i);
const findRunnersLink = () => getLinkByName(/make sure your instance has runners available/i);
const findVisualReference = () => wrapper.findComponent(PipelineVisualReference);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the title', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
});
it('renders the content', () => {
expect(findVisualReference().exists()).toBe(true);
});
it('renders the links', () => {
expect(findRunnersLink()).toContain(defaultProvide.runnerHelpPagePath);
expect(findPipelinesLink()).toContain(defaultProvide.ciExamplesHelpPagePath);
});
});
spec/frontend/pipeline_editor/components/drawer/cards/getting_started_card_spec.js 0 → 100644
View file @ 1d5053d2
import { shallowMount } from '@vue/test-utils';
import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
describe('Getting started card', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(GettingStartedCard);
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the title', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
});
it('renders the content', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
});
});
spec/frontend/pipeline_editor/components/drawer/cards/pipeline_config_reference_card_spec.js 0 → 100644
View file @ 1d5053d2
import { getByRole } from '@testing-library/dom';
import { mount } from '@vue/test-utils';
import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
describe('Pipeline config reference card', () => {
let wrapper;
const defaultProvide = {
ciExamplesHelpPagePath: 'help/ci/examples/',
ciHelpPagePath: 'help/ci/introduction',
needsHelpPagePath: 'help/ci/yaml#needs',
ymlHelpPagePath: 'help/ci/yaml',
};
const createComponent = () => {
wrapper = mount(PipelineConfigReferenceCard, {
provide: {
...defaultProvide,
},
});
};
const getLinkByName = (name) => getByRole(wrapper.element, 'link', { name }).href;
const findCiExamplesLink = () => getLinkByName(/CI\/CD examples and templates/i);
const findCiIntroLink = () => getLinkByName(/GitLab CI\/CD concepts/i);
const findNeedsLink = () => getLinkByName(/Needs keyword/i);
const findYmlSyntaxLink = () => getLinkByName(/.gitlab-ci.yml syntax reference/i);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the title', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
});
it('renders the content', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
});
it('renders the links', () => {
expect(findCiExamplesLink()).toContain(defaultProvide.ciExamplesHelpPagePath);
expect(findCiIntroLink()).toContain(defaultProvide.ciHelpPagePath);
expect(findNeedsLink()).toContain(defaultProvide.needsHelpPagePath);
expect(findYmlSyntaxLink()).toContain(defaultProvide.ymlHelpPagePath);
});
});
spec/frontend/pipeline_editor/components/drawer/cards/visualize_and_lint_card_spec.js 0 → 100644
View file @ 1d5053d2
import { shallowMount } from '@vue/test-utils';
import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
describe('Visual and Lint card', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(VisualizeAndLintCard);
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the title', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.title);
});
it('renders the content', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.firstParagraph);
});
});
spec/frontend/pipeline_editor/components/drawer/pipeline_editor_drawer_spec.js
View file @ 1d5053d2
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import FirstPipelineCard from '~/pipeline_editor/components/drawer/cards/first_pipeline_card.vue';
import GettingStartedCard from '~/pipeline_editor/components/drawer/cards/getting_started_card.vue';
import PipelineConfigReferenceCard from '~/pipeline_editor/components/drawer/cards/pipeline_config_reference_card.vue';
import VisualizeAndLintCard from '~/pipeline_editor/components/drawer/cards/visualize_and_lint_card.vue';
import PipelineEditorDrawer from '~/pipeline_editor/components/drawer/pipeline_editor_drawer.vue';
describe('Pipeline editor drawer', () => {
......@@ -8,7 +13,12 @@ describe('Pipeline editor drawer', () => {
wrapper = shallowMount(PipelineEditorDrawer);
};
const findToggleBtn = () => wrapper.find('[data-testid="toggleBtn"]');
const findFirstPipelineCard = () => wrapper.findComponent(FirstPipelineCard);
const findGettingStartedCard = () => wrapper.findComponent(GettingStartedCard);
const findPipelineConfigReferenceCard = () => wrapper.findComponent(PipelineConfigReferenceCard);
const findToggleBtn = () => wrapper.findComponent(GlButton);
const findVisualizeAndLintCard = () => wrapper.findComponent(VisualizeAndLintCard);
const findArrowIcon = () => wrapper.find('[data-testid="toggle-icon"]');
const findCollapseText = () => wrapper.find('[data-testid="collapse-text"]');
const findDrawerContent = () => wrapper.find('[data-testid="drawer-content"]');
......@@ -24,7 +34,7 @@ describe('Pipeline editor drawer', () => {
createComponent();
});
it('show the left facing arrow icon', () => {
it('shows the left facing arrow icon', () => {
expect(findArrowIcon().props('name')).toBe('chevron-double-lg-left');
});
......@@ -51,7 +61,7 @@ describe('Pipeline editor drawer', () => {
await clickToggleBtn();
});
it('show the right facing arrow icon', () => {
it('shows the right facing arrow icon', () => {
expect(findArrowIcon().props('name')).toBe('chevron-double-lg-right');
});
......@@ -59,10 +69,17 @@ describe('Pipeline editor drawer', () => {
expect(findCollapseText().exists()).toBe(true);
});
it('show the drawer content', () => {
it('shows the drawer content', () => {
expect(findDrawerContent().exists()).toBe(true);
});
it('shows all the introduction cards', () => {
expect(findFirstPipelineCard().exists()).toBe(true);
expect(findGettingStartedCard().exists()).toBe(true);
expect(findPipelineConfigReferenceCard().exists()).toBe(true);
expect(findVisualizeAndLintCard().exists()).toBe(true);
});
it('can close the drawer by clicking on the toggle button', async () => {
expect(findDrawerContent().exists()).toBe(true);
......
spec/frontend/pipeline_editor/components/drawer/ui/demo_job_pill_spec.js 0 → 100644
View file @ 1d5053d2
import { shallowMount } from '@vue/test-utils';
import DemoJobPill from '~/pipeline_editor/components/drawer/ui/demo_job_pill.vue';
describe('Demo job pill', () => {
let wrapper;
const jobName = 'my-build-job';
const createComponent = () => {
wrapper = shallowMount(DemoJobPill, {
propsData: {
jobName,
},
});
};
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the jobName', () => {
expect(wrapper.text()).toContain(jobName);
});
});
spec/frontend/pipeline_editor/components/drawer/ui/pipeline_visual_reference_spec.js 0 → 100644
View file @ 1d5053d2
import { shallowMount } from '@vue/test-utils';
import DemoJobPill from '~/pipeline_editor/components/drawer/ui/demo_job_pill.vue';
import PipelineVisualReference from '~/pipeline_editor/components/drawer/ui/pipeline_visual_reference.vue';
describe('Demo job pill', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(PipelineVisualReference);
};
const findAllDemoJobPills = () => wrapper.findAllComponents(DemoJobPill);
beforeEach(() => {
createComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('renders all stage names', () => {
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.build);
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.test);
expect(wrapper.text()).toContain(wrapper.vm.$options.i18n.stageNames.deploy);
});
it('renders all job pills', () => {
expect(findAllDemoJobPills()).toHaveLength(4);
});
});
spec/helpers/ci/pipeline_editor_helper_spec.rb
View file @ 1d5053d2
......@@ -40,16 +40,21 @@ RSpec.describe Ci::PipelineEditorHelper do
it 'returns pipeline editor data' do
expect(pipeline_editor_data).to eq({
"ci-config-path": project.ci_config_path_or_default,
"ci-examples-help-page-path" => help_page_path('ci/examples/README'),
"ci-help-page-path" => help_page_path('ci/README'),
"commit-sha" => project.commit.sha,
"default-branch" => project.default_branch,
"empty-state-illustration-path" => 'foo',
"initial-branch-name": nil,
"lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
"needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
"new-merge-request-path" => '/mock/project/-/merge_requests/new',
"pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
"pipeline-page-path" => project_pipelines_path(project),
"project-path" => project.path,
"project-full-path" => project.full_path,
"project-namespace" => project.namespace.full_path,
"runner-help-page-path" => help_page_path('ci/runners/README'),
"yml-help-page-path" => help_page_path('ci/yaml/README')
})
end
......@@ -61,16 +66,21 @@ RSpec.describe Ci::PipelineEditorHelper do
it 'returns pipeline editor data' do
expect(pipeline_editor_data).to eq({
"ci-config-path": project.ci_config_path_or_default,
"ci-examples-help-page-path" => help_page_path('ci/examples/README'),
"ci-help-page-path" => help_page_path('ci/README'),
"commit-sha" => '',
"default-branch" => project.default_branch,
"empty-state-illustration-path" => 'foo',
"initial-branch-name": nil,
"lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
"needs-help-page-path" => help_page_path('ci/yaml/README', anchor: 'needs'),
"new-merge-request-path" => '/mock/project/-/merge_requests/new',
"pipeline_etag" => '',
"pipeline-page-path" => project_pipelines_path(project),
"project-path" => project.path,
"project-full-path" => project.full_path,
"project-namespace" => project.namespace.full_path,
"runner-help-page-path" => help_page_path('ci/runners/README'),
"yml-help-page-path" => help_page_path('ci/yaml/README')
})
end
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7