mirror of https://github.com/rancher/dashboard.git
559 lines
18 KiB
TypeScript
559 lines
18 KiB
TypeScript
import TopLevelMenu from '@shell/components/nav/TopLevelMenu.vue';
|
|
import { mount, Wrapper } from '@vue/test-utils';
|
|
import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
|
|
import { PINNED_CLUSTERS } from '@shell/store/prefs';
|
|
import { nextTick } from 'vue';
|
|
|
|
/**
|
|
* `clusters` doubles up as both mgmt and prov clusters (don't shoot the messenger)
|
|
*/
|
|
const generateStore = (clusters: any[], settings = [{}]) => {
|
|
return {
|
|
getters: {
|
|
'management/byId': jest.fn(),
|
|
'management/schemaFor': () => ({}),
|
|
'management/paginationEnabled': () => false,
|
|
'i18n/t': jest.fn(),
|
|
'features/get': jest.fn(),
|
|
'prefs/theme': jest.fn(),
|
|
defaultClusterId: jest.fn(),
|
|
clusterId: jest.fn(),
|
|
'type-map/activeProducts': [],
|
|
'management/all': (type: string) => {
|
|
switch (type) {
|
|
case CAPI.RANCHER_CLUSTER:
|
|
return clusters;
|
|
case MANAGEMENT.CLUSTER:
|
|
return clusters;
|
|
case COUNT:
|
|
return [{ counts: { [MANAGEMENT.CLUSTER]: { summary: { count: clusters.length } } } }];
|
|
case MANAGEMENT.SETTING:
|
|
return settings;
|
|
}
|
|
},
|
|
'prefs/get': (pref: string) => {
|
|
if (pref === PINNED_CLUSTERS) {
|
|
return [];
|
|
}
|
|
},
|
|
},
|
|
dispatch: (action: string, args: any) => {
|
|
if (action === 'management/findAll' && args.type === CAPI.RANCHER_CLUSTER) {
|
|
return clusters;
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
const waitForIt = async() => {
|
|
jest.advanceTimersByTime(1000); // Wait for debounced call to fetch updated cluster list
|
|
await nextTick(); // Wait for changes to cluster list to trigger changes
|
|
};
|
|
|
|
describe('topLevelMenu', () => {
|
|
beforeEach(() => {
|
|
jest.useFakeTimers();
|
|
});
|
|
|
|
afterEach(() => {
|
|
jest.runOnlyPendingTimers();
|
|
jest.useRealTimers();
|
|
});
|
|
|
|
it('should display clusters', async() => {
|
|
const clusters = [{
|
|
name: 'whatever',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
}];
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: { ...generateStore(clusters) },
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const cluster = wrapper.find('[data-testid="top-level-menu-cluster-0"]');
|
|
|
|
expect(cluster.exists()).toBe(true);
|
|
});
|
|
|
|
it('should show local cluster always on top of the list of clusters (unpinned and ready clusters)', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
name: 'x32-cwf5-name',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'c-cluster',
|
|
isReady: true
|
|
},
|
|
{
|
|
name: 'x33-cwf5-name',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
nameDisplay: 'a-cluster',
|
|
isReady: true
|
|
},
|
|
{
|
|
name: 'x34-cwf5-name',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
nameDisplay: 'b-cluster',
|
|
isReady: true
|
|
},
|
|
{
|
|
name: 'local-name',
|
|
id: 'local',
|
|
mgmt: { id: 'local' },
|
|
nameDisplay: 'local',
|
|
isReady: true
|
|
},
|
|
])
|
|
}
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('b-cluster');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('c-cluster');
|
|
});
|
|
|
|
it('should show local cluster always on top of the list of clusters (unpinned and mix ready/unready clusters)', async() => {
|
|
const clusters = [
|
|
{
|
|
name: 'x32-cwf5-name',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'c-cluster',
|
|
isReady: true
|
|
},
|
|
{
|
|
name: 'x33-cwf5-name',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
nameDisplay: 'a-cluster',
|
|
isReady: false
|
|
},
|
|
{
|
|
name: 'x34-cwf5-name',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
nameDisplay: 'b-cluster',
|
|
isReady: true
|
|
},
|
|
{
|
|
name: 'local-name',
|
|
id: 'local',
|
|
mgmt: { id: 'local' },
|
|
nameDisplay: 'local',
|
|
isReady: true,
|
|
isLocal: true,
|
|
},
|
|
];
|
|
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: { ...generateStore(clusters) }
|
|
},
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-1"] .cluster-name p').text()).toStrictEqual('b-cluster');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
|
|
expect(wrapper.find('[data-testid="top-level-menu-cluster-3"] .cluster-name p').text()).toStrictEqual('a-cluster');
|
|
});
|
|
|
|
it('should show local cluster always on top of the list of clusters (pinned and ready clusters)', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
name: 'x32-cwf5-name',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'c-cluster',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'x33-cwf5-name',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
nameDisplay: 'a-cluster',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'x34-cwf5-name',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
nameDisplay: 'b-cluster',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'local-name',
|
|
id: 'local',
|
|
mgmt: { id: 'local' },
|
|
nameDisplay: 'local',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
])
|
|
}
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-2"] .cluster-name p').text()).toStrictEqual('b-cluster');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-3"] .cluster-name p').text()).toStrictEqual('c-cluster');
|
|
});
|
|
|
|
it('should show local cluster always on top of the list of clusters (pinned and mix ready/unready clusters)', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
data: () => {
|
|
return { hasProvCluster: true, showPinClusters: true };
|
|
},
|
|
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
name: 'x32-cwf5-name',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'c-cluster',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'x33-cwf5-name',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
nameDisplay: 'a-cluster',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'x34-cwf5-name',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
nameDisplay: 'b-cluster',
|
|
isReady: false,
|
|
pinned: true
|
|
},
|
|
{
|
|
name: 'local-name',
|
|
id: 'local',
|
|
mgmt: { id: 'local' },
|
|
nameDisplay: 'local',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
])
|
|
}
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-0"] .cluster-name p').text()).toStrictEqual('local');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-1"] .cluster-name p').text()).toStrictEqual('a-cluster');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-2"] .cluster-name p').text()).toStrictEqual('c-cluster');
|
|
expect(wrapper.find('[data-testid="pinned-ready-cluster-3"] .cluster-name p').text()).toStrictEqual('b-cluster');
|
|
});
|
|
|
|
it('should show description if it is available on the prov cluster', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
// pinned ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
description: 'some-description1',
|
|
nameDisplay: 'some-label',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
// pinned NOT ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
description: 'some-description2',
|
|
nameDisplay: 'some-label',
|
|
pinned: true
|
|
},
|
|
// unpinned ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
description: 'some-description3',
|
|
nameDisplay: 'some-label',
|
|
isReady: true
|
|
},
|
|
// unpinned NOT ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id4',
|
|
mgmt: { id: 'an-id4' },
|
|
description: 'some-description4',
|
|
nameDisplay: 'some-label'
|
|
},
|
|
])
|
|
},
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const description1 = wrapper.find('[data-testid="pinned-menu-cluster-an-id1"] .description');
|
|
const description2 = wrapper.find('[data-testid="pinned-menu-cluster-disabled-an-id2"] .description');
|
|
const description3 = wrapper.find('[data-testid="menu-cluster-an-id3"] .description');
|
|
const description4 = wrapper.find('[data-testid="menu-cluster-disabled-an-id4"] .description');
|
|
|
|
expect(description1.text()).toStrictEqual('some-description1');
|
|
expect(description2.text()).toStrictEqual('some-description2');
|
|
expect(description3.text()).toStrictEqual('some-description3');
|
|
expect(description4.text()).toStrictEqual('some-description4');
|
|
});
|
|
|
|
it('should show description if it is available on the mgmt cluster (relevant for RKE1/ember world)', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
// pinned ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
description: 'some-description1',
|
|
nameDisplay: 'some-label',
|
|
isReady: true,
|
|
pinned: true
|
|
},
|
|
// pinned NOT ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id2',
|
|
mgmt: { id: 'an-id2' },
|
|
description: 'some-description2',
|
|
nameDisplay: 'some-label',
|
|
pinned: true
|
|
},
|
|
// unpinned ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id3',
|
|
mgmt: { id: 'an-id3' },
|
|
description: 'some-description3',
|
|
nameDisplay: 'some-label',
|
|
isReady: true
|
|
},
|
|
// unpinned NOT ready cluster
|
|
{
|
|
name: 'whatever',
|
|
id: 'an-id4',
|
|
mgmt: { id: 'an-id4' },
|
|
description: 'some-description4',
|
|
nameDisplay: 'some-label'
|
|
},
|
|
]),
|
|
}
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const description1 = wrapper.find('[data-testid="pinned-menu-cluster-an-id1"] .description');
|
|
const description2 = wrapper.find('[data-testid="pinned-menu-cluster-disabled-an-id2"] .description');
|
|
const description3 = wrapper.find('[data-testid="menu-cluster-an-id3"] .description');
|
|
const description4 = wrapper.find('[data-testid="menu-cluster-disabled-an-id4"] .description');
|
|
|
|
expect(description1.text()).toStrictEqual('some-description1');
|
|
expect(description2.text()).toStrictEqual('some-description2');
|
|
expect(description3.text()).toStrictEqual('some-description3');
|
|
expect(description4.text()).toStrictEqual('some-description4');
|
|
});
|
|
|
|
describe('searching a term', () => {
|
|
describe('should displays a no results message if have clusters but', () => {
|
|
it('given no matching clusters', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
data: () => ({ clusterFilter: 'whatever' }),
|
|
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'something else'
|
|
}
|
|
])
|
|
},
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
|
|
|
|
expect(noResults.exists()).toBe(true);
|
|
});
|
|
|
|
it('given no matched pinned clusters', async() => {
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
data: () => ({ clusterFilter: 'whatever' }),
|
|
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: 'something else',
|
|
pinned: true
|
|
}
|
|
])
|
|
},
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
|
|
|
|
expect(noResults.exists()).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('should not displays a no results message', () => {
|
|
it('given matching clusters', async() => {
|
|
const search = 'you found me';
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
data: () => ({ clusterFilter: search }),
|
|
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
nameDisplay: search
|
|
}
|
|
])
|
|
},
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
|
|
|
|
expect(wrapper.vm.clustersFiltered).toHaveLength(1);
|
|
expect(noResults.exists()).toBe(false);
|
|
});
|
|
|
|
it('given clusters with status pinned', async() => {
|
|
const search = 'you found me';
|
|
const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
|
|
data: () => ({ clusterFilter: search }),
|
|
|
|
global: {
|
|
mocks: {
|
|
$route: {},
|
|
$store: {
|
|
...generateStore([
|
|
{
|
|
nameDisplay: search,
|
|
pinned: true,
|
|
id: 'an-id1',
|
|
mgmt: { id: 'an-id1' },
|
|
}
|
|
])
|
|
},
|
|
},
|
|
|
|
stubs: ['BrandImage', 'router-link'],
|
|
},
|
|
});
|
|
|
|
await waitForIt();
|
|
|
|
const noResults = wrapper.find('[data-testid="top-level-menu-no-results"]');
|
|
|
|
expect(wrapper.vm.pinFiltered).toHaveLength(1);
|
|
expect(noResults.exists()).toBe(false);
|
|
});
|
|
});
|
|
});
|
|
});
|