Commit 6651bc38 authored by Ammar Alakkad's avatar Ammar Alakkad Committed by Jose Ivan Vargas

Replace projects storage placeholder with usage-graph

parent 958aa425
<script>
import { GlAlert } from '@gitlab/ui';
import { s__ } from '~/locale';
import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
import getProjectStorageCount from '../queries/project_storage.query.graphql';
import { parseGetProjectStorageResults } from '../utils';
......@@ -8,6 +9,7 @@ export default {
name: 'StorageCounterApp',
components: {
GlAlert,
UsageGraph,
},
inject: ['projectPath'],
apollo: {
......@@ -43,8 +45,13 @@ export default {
};
</script>
<template>
<gl-alert v-if="error" variant="danger" @dismiss="clearError">
{{ error }}
</gl-alert>
<div v-else>{{ $options.i18n.placeholder }}</div>
<div>
<gl-alert v-if="error" variant="danger" @dismiss="clearError">
{{ error }}
</gl-alert>
<div v-else>{{ $options.i18n.placeholder }}</div>
<div v-if="project.statistics" class="gl-w-full">
<usage-graph :root-storage-statistics="project.statistics" :limit="0" />
</div>
</div>
</template>
......@@ -60,5 +60,6 @@ export const parseGetProjectStorageResults = (data) => {
totalUsage: numberToHumanSize(storageSize),
storageTypes,
},
statistics: projectStatistics,
};
};
......@@ -4,18 +4,18 @@ import VueApollo from 'vue-apollo';
import createMockApollo from 'helpers/mock_apollo_helper';
import StorageCounterApp from '~/projects/storage_counter/components/app.vue';
import getProjectStorageCount from '~/projects/storage_counter/queries/project_storage.query.graphql';
import UsageGraph from '~/vue_shared/components/storage_counter/usage_graph.vue';
import { projectStorageCountResponse } from './mock_data';
const localVue = createLocalVue();
describe('Storage counter app', () => {
let wrapper;
const createMockApolloProvider = () => {
const createMockApolloProvider = ({ mutationMock }) => {
localVue.use(VueApollo);
const requestHandlers = [
[getProjectStorageCount, jest.fn().mockRejectedValue(new Error('GraphQL error'))],
];
const requestHandlers = [[getProjectStorageCount, mutationMock]];
return createMockApollo(requestHandlers);
};
......@@ -36,6 +36,7 @@ describe('Storage counter app', () => {
};
const findAlert = () => wrapper.findComponent(GlAlert);
const findUsageGraph = () => wrapper.findComponent(UsageGraph);
beforeEach(() => {
createComponent();
......@@ -50,10 +51,10 @@ describe('Storage counter app', () => {
});
describe('handling apollo fetching error', () => {
let mockApollo;
const mutationMock = jest.fn().mockRejectedValue(new Error('GraphQL error'));
beforeEach(() => {
mockApollo = createMockApolloProvider();
const mockApollo = createMockApolloProvider({ mutationMock });
createComponent({ mockApollo });
});
......@@ -61,4 +62,22 @@ describe('Storage counter app', () => {
expect(findAlert().exists()).toBe(true);
});
});
describe('rendering <usage-graph />', () => {
const mutationMock = jest.fn().mockResolvedValue(projectStorageCountResponse);
beforeEach(() => {
const mockApollo = createMockApolloProvider({ mutationMock });
createComponent({ mockApollo });
});
it('renders usage-graph component if project.statistics exists', () => {
expect(findUsageGraph().exists()).toBe(true);
});
it('passes project.statistics to usage-graph component', () => {
const { __typename, ...statistics } = projectStorageCountResponse.data.project.statistics;
expect(findUsageGraph().props('rootStorageStatistics')).toMatchObject(statistics);
});
});
});
export const projectStorageCountResponse = {
data: {
project: {
id: 'gid://gitlab/Project/20',
statistics: {
buildArtifactsSize: 400000,
lfsObjectsSize: 4800000,
packagesSize: 3800000,
repositorySize: 39000000,
snippetsSize: 0,
storageSize: 39930000,
uploadsSize: 0,
wikiSize: 300000,
__typename: 'ProjectStatistics',
},
__typename: 'Project',
},
},
};
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