JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TabNavigation component fixed, unit tests added (#2834)

Browse Source
This commit is contained in:
Yehor Butko 2019-08-20 18:23:56 +03:00 committed by GitHub
parent 9ec0ceddf3
commit 513563eff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 108 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/satellite/src/components/account/AccountArea.vue
View File

@ -14,7 +14,7 @@
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import TabNavigation from '@/components/navigation/TabNavigation.vue';
import { ACCOUNT_ROUTES } from '@/utils/constants/tabNavigation';
import { NavigationLink } from '@/types/navigation';
@Component({
components: {
@ -22,10 +22,14 @@
},
})
export default class AccountArea extends Vue {
public navigation: object = ACCOUNT_ROUTES;
public navigation: NavigationLink[] = [
new NavigationLink('/account/profile', 'Profile'),
new NavigationLink('/account/payment-methods', 'Payment Methods'),
new NavigationLink('/account/billing-history', 'Billing History'),
];
public mounted(): void {
this.$router.push(ACCOUNT_ROUTES.PROFILE.path);
this.$router.push(this.navigation[0].path);
}
}
</script>

6
web/satellite/src/components/navigation/TabNavigation.vue
View File

@ -11,12 +11,12 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { NavigationLink } from '@/types/navigation';
@Component({})
export default class TabNavigation extends Vue {
// TODO: add types for navigation
@Prop({default: {}})
private navigation: any;
@Prop({default: new Array(NavigationLink)})
private navigation: NavigationLink[];
}
</script>

11
web/satellite/src/components/project/ProjectOverviewArea.vue
View File

@ -21,7 +21,7 @@
import EmptyState from '@/components/common/EmptyStateArea.vue';
import TabNavigation from '@/components/navigation/TabNavigation.vue';
import { EMPTY_STATE_IMAGES } from '@/utils/constants/emptyStatesImages';
import { PROJECT_ROUTES } from '@/utils/constants/tabNavigation';
import { NavigationLink } from '@/types/navigation';
@Component({
components: {
@ -31,10 +31,15 @@
})
export default class ProjectDetailsArea extends Vue {
// TODO: make type for project routes
public navigation: any = PROJECT_ROUTES;
public navigation: NavigationLink[] = [
new NavigationLink('/project-overview/details', 'Details'),
new NavigationLink('/project-overview/payment-methods', 'Payment Methods'),
new NavigationLink('/project-overview/billing-history', 'Billing History'),
new NavigationLink('/project-overview/usage-report', 'Report'),
];
public mounted(): void {
this.$router.push(PROJECT_ROUTES.DETAILS.path);
this.$router.push(this.navigation[0].path);
}
public get isProjectSelected(): boolean {

13
web/satellite/src/types/navigation.ts Normal file
View File

@ -0,0 +1,13 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
export class NavigationLink {
public path: string;
public name: string;
public constructor(path: string, name: string) {
this.path = path;
this.name = name;
}
}

3
web/satellite/src/utils/constants/ProjectMemberSortEnum.ts
View File

@ -1,3 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

37
web/satellite/src/utils/constants/tabNavigation.ts
View File

@ -1,37 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
// TODO: remove global objects
export const PROJECT_ROUTES = {
DETAILS: {
path: '/project-overview/details',
name: 'Details'
},
PAYMENT_METHODS: {
path: '/project-overview/payment-methods',
name: 'Payment Methods'
},
BILLING_HISTORY: {
path: '/project-overview/billing-history',
name: 'Billing History'
},
REPORT: {
path: '/project-overview/usage-report',
name: 'Report'
},
};
export const ACCOUNT_ROUTES = {
PROFILE: {
path: '/account/profile',
name: 'Profile'
},
PAYMENT_METHODS: {
path: '/account/payment-methods',
name: 'Payment Methods'
},
BILLING_HISTORY: {
path: '/account/billing-history',
name: 'Billing History'
},
};

48
web/satellite/tests/unit/components/navigation/TabNavigation.spec.ts Normal file
View File

@ -0,0 +1,48 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
import VueRouter from 'vue-router';
import TabNavigation from '@/components/navigation/TabNavigation.vue';
import { NavigationLink } from '@/types/navigation';
const localVue = createLocalVue();
localVue.use(VueRouter);
const navigation: NavigationLink[] = [
new NavigationLink('path1', 'name1'),
new NavigationLink('path2', 'name2'),
new NavigationLink('path3', 'name3'),
];
describe('TabNavigation', () => {
it('snapshot not changed', () => {
const wrapper = shallowMount(TabNavigation, {
localVue,
propsData: {
navigation,
}
});
expect(wrapper).toMatchSnapshot();
});
it('navigation links renders correctly', () => {
const wrapper = shallowMount(TabNavigation, {
localVue,
propsData: {
navigation,
}
});
const navigationLinks = wrapper.findAll('.tab-navigation-container__item');
expect(navigationLinks.length).toBe(navigation.length);
for (let i = 0; i < navigation.length; i++) {
expect(navigationLinks.at(i).text()).toBe(navigation[i].name);
}
});
});

29
web/satellite/tests/unit/components/navigation/__snapshots__/TabNavigation.spec.ts.snap Normal file
View File

@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReferralStats snapshot not changed 1`] = `
<div class="tab-navigation-container">
<router-link to="path1" class="tab-navigation-container__item">
<p>name1</p>
</router-link>
<router-link to="path2" class="tab-navigation-container__item">
<p>name2</p>
</router-link>
<router-link to="path3" class="tab-navigation-container__item">
<p>name3</p>
</router-link>
</div>
`;
exports[`TabNavigation snapshot not changed 1`] = `
<div class="tab-navigation-container">
<router-link-stub to="path1" tag="a" event="click" class="tab-navigation-container__item">
<p>name1</p>
</router-link-stub>
<router-link-stub to="path2" tag="a" event="click" class="tab-navigation-container__item">
<p>name2</p>
</router-link-stub>
<router-link-stub to="path3" tag="a" event="click" class="tab-navigation-container__item">
<p>name3</p>
</router-link-stub>
</div>
`;