Commit f8f0676a authored by Jacques's avatar Jacques

Add fork suggestion component

Added a fork suggestion component
parent 6b755868
<script>
import { GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
export default {
i18n: {
message: __(
'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
),
fork: __('Fork'),
cancel: __('Cancel'),
},
components: {
GlButton,
},
props: {
forkPath: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="file-fork-suggestion">
<span class="file-fork-suggestion-note" data-testid="message">{{ $options.i18n.message }}</span>
<gl-button
class="gl-mr-3"
category="secondary"
variant="confirm"
:href="forkPath"
data-testid="fork"
>
{{ $options.i18n.fork }}
</gl-button>
<gl-button class="gl-mr-3" data-testid="cancel" @click="$emit('cancel')">
{{ $options.i18n.cancel }}
</gl-button>
</div>
</template>
...@@ -38773,6 +38773,9 @@ msgstr "" ...@@ -38773,6 +38773,9 @@ msgstr ""
msgid "You can’t %{tag_start}edit%{tag_end} files directly in this project. Fork this project and submit a merge request with your changes." msgid "You can’t %{tag_start}edit%{tag_end} files directly in this project. Fork this project and submit a merge request with your changes."
msgstr "" msgstr ""
msgid "You can’t edit files directly in this project. Fork this project and submit a merge request with your changes."
msgstr ""
msgid "You could not create a new trigger." msgid "You could not create a new trigger."
msgstr "" msgstr ""
......
import { shallowMount } from '@vue/test-utils';
import ForkSuggestion from '~/repository/components/fork_suggestion.vue';
const DEFAULT_PROPS = { forkPath: 'some_file.js/fork' };
describe('ForkSuggestion component', () => {
let wrapper;
const createComponent = () => {
wrapper = shallowMount(ForkSuggestion, {
propsData: { ...DEFAULT_PROPS },
});
};
beforeEach(() => createComponent());
afterEach(() => wrapper.destroy());
const findMessage = () => wrapper.find('[data-testid="message"]');
const findForkButton = () => wrapper.find('[data-testid="fork"]');
const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
it('renders a message', () => {
expect(findMessage().exists()).toBe(true);
expect(findMessage().text()).toBe(
'You can’t edit files directly in this project. Fork this project and submit a merge request with your changes.',
);
});
it('renders component', () => {
const { forkPath } = DEFAULT_PROPS;
expect(wrapper.props()).toMatchObject({ forkPath });
});
it('renders a Fork button', () => {
expect(findForkButton().exists()).toBe(true);
expect(findForkButton().text()).toBe('Fork');
expect(findForkButton().attributes('href')).toBe(DEFAULT_PROPS.forkPath);
});
it('renders a Cancel button', () => {
expect(findCancelButton().exists()).toBe(true);
expect(findCancelButton().text()).toBe('Cancel');
});
it('emits a cancel event when Cancel button is clicked', () => {
findCancelButton().vm.$emit('click');
expect(wrapper.emitted('cancel')).toEqual([[]]);
});
});
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