Commit 1518d4bc authored by Denys Mishunov's avatar Denys Mishunov Committed by Phil Hughes

Set up basic Vue app + GraphQL + Apollo

The basic Vue application with support for GraphQL and Apollo
parent 262bcdd6
......@@ -3,6 +3,7 @@ import BlobViewer from '~/blob/viewer';
import ZenMode from '~/zen_mode';
import initNotes from '~/init_notes';
import snippetEmbed from '~/snippet/snippet_embed';
import initSnippetsApp from '~/snippets';
document.addEventListener('DOMContentLoaded', () => {
if (!gon.features.snippetsVue) {
......@@ -11,5 +12,7 @@ document.addEventListener('DOMContentLoaded', () => {
initNotes();
new ZenMode(); // eslint-disable-line no-new
snippetEmbed();
} else {
initSnippetsApp();
}
});
<script>
import getSnippet from '../queries/getSnippet.query.graphql';
export default {
apollo: {
snippetData: {
query: getSnippet,
variables() {
return {
ids: this.snippetGid,
};
},
update: data => data.snippets.edges[0].node,
},
},
props: {
snippetGid: {
type: String,
required: true,
},
},
data() {
return {
snippetData: {},
};
},
};
</script>
<template>
<div class="js-snippet-view"></div>
</template>
import Vue from 'vue';
import Translate from '~/vue_shared/translate';
import VueApollo from 'vue-apollo';
import createDefaultClient from '~/lib/graphql';
import SnippetsApp from './components/app.vue';
Vue.use(VueApollo);
Vue.use(Translate);
export default () => {
const el = document.getElementById('js-snippet-view');
if (!el) {
return false;
}
const { snippetGid } = el.dataset;
const apolloProvider = new VueApollo({
defaultClient: createDefaultClient(),
});
return new Vue({
el,
apolloProvider,
render(createElement) {
return createElement(SnippetsApp, {
props: {
snippetGid,
},
});
},
});
};
query getSnippet($ids: [ID!]) {
snippets(ids: $ids) {
edges {
node {
title
description
createdAt
updatedAt
visibility
}
}
}
}
......@@ -5,7 +5,7 @@
- page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
- if Feature.enabled?(:snippets_vue)
#js-snippet-view{ 'data-qa-selector': 'snippet_view' }
#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
- else
= render 'shared/snippets/header'
......
import SnippetApp from '~/snippets/components/app.vue';
import { createLocalVue, shallowMount } from '@vue/test-utils';
describe('Snippet view app', () => {
let wrapper;
let snippetDataMock;
const localVue = createLocalVue();
const defaultProps = {
snippetGid: 'gid://gitlab/PersonalSnippet/35',
};
function createComponent({ props = defaultProps, snippetData = {} } = {}) {
snippetDataMock = jest.fn();
const $apollo = {
queries: {
snippetData: snippetDataMock,
},
};
wrapper = shallowMount(SnippetApp, {
sync: false,
mocks: { $apollo },
localVue,
propsData: {
...props,
},
});
wrapper.setData({
snippetData,
});
}
afterEach(() => {
wrapper.destroy();
});
it('renders itself', () => {
createComponent();
expect(wrapper.find('.js-snippet-view').exists()).toBe(true);
});
});
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