Commit 860a9a27 authored by Filipa Lacerda's avatar Filipa Lacerda

Merge branch 'add-code-analytics-vue-skeleton' into 'master'

Add skeleton for code analytics

See merge request gitlab-org/gitlab!18266
parents f579a78d 35957f86
<script>
import { GlEmptyState } from '@gitlab/ui';
import createStore from '../store';
export default {
name: 'CodeAnalytics',
store: createStore(),
components: {
GlEmptyState,
},
props: {
emptyStateSvgPath: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-empty-state
:title="__('Identify the most frequently changed files in your repository')"
:description="
__(
'Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots.',
)
"
:svg-path="emptyStateSvgPath"
/>
</template>
import Vue from 'vue';
import CodeAnalytics from './components/app.vue';
export default () => {
const el = document.querySelector('#js-code-analytics-app');
const { emptyStateSvgPath } = el.dataset;
return new Vue({
el,
name: 'CodeAnalyticsApp',
components: {
CodeAnalytics,
},
render: createElement =>
createElement(CodeAnalytics, {
props: {
emptyStateSvgPath,
},
}),
});
};
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default () => new Vuex.Store({});
import initCodeAnalyticsApp from 'ee/analytics/code_analytics/index';
document.addEventListener('DOMContentLoaded', initCodeAnalyticsApp);
- page_title _("Code Analytics")
#js-code-analytics-app{ data: { "empty-state-svg-path" => image_path("illustrations/monitoring/getting_started.svg")} }
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlEmptyState } from '@gitlab/ui';
import Component from 'ee/analytics/code_analytics/components/app.vue';
const emptyStateSvgPath = 'path/to/empty/state';
const localVue = createLocalVue();
localVue.use(Vuex);
let wrapper;
const createComponent = () =>
shallowMount(Component, {
localVue,
sync: false,
propsData: {
emptyStateSvgPath,
},
});
describe('Code Analytics component', () => {
beforeEach(() => {
wrapper = createComponent();
});
afterEach(() => {
wrapper.destroy();
});
describe('displays the components as required', () => {
it('displays an empty state', () => {
const emptyState = wrapper.find(GlEmptyState);
expect(emptyState.exists()).toBe(true);
expect(emptyState.props('title')).toBe(
'Identify the most frequently changed files in your repository',
);
expect(emptyState.props('description')).toBe(
'Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots.',
);
expect(emptyState.props('svgPath')).toBe(emptyStateSvgPath);
});
});
});
......@@ -4005,6 +4005,9 @@ msgstr ""
msgid "Code"
msgstr ""
msgid "Code Analytics"
msgstr ""
msgid "Code Owners"
msgstr ""
......@@ -8530,6 +8533,12 @@ msgstr ""
msgid "Identifier"
msgstr ""
msgid "Identify areas of the codebase associated with a lot of churn, which can indicate potential code hotspots."
msgstr ""
msgid "Identify the most frequently changed files in your repository"
msgstr ""
msgid "Identities"
msgstr ""
......
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