@rancher/shell 0.3.0 → 0.3.1

package/components/__tests__/ButtonGroup.test.ts

@@ -0,0 +1,124 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonGroup from '@shell/components/ButtonGroup.vue';
+
+describe('component: ButtonGroup', () => {
+  it('should render component with the default props correctly', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        value: 'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+    const firstBtnLabel = wrapper.find('[data-testid="button-group-child-0"] span');
+    const secondBtn = wrapper.find('[data-testid="button-group-child-1"]');
+    const secondBtnLabel = wrapper.find('[data-testid="button-group-child-1"] span');
+    const thirdBtn = wrapper.find('[data-testid="button-group-child-2"]');
+
+    expect(wrapper.findAll('button')).toHaveLength(3);
+    expect(firstBtn.exists()).toBe(true);
+    expect(firstBtn.attributes().type).toBe('button');
+    expect(firstBtn.classes()).toContain('btn');
+    expect(firstBtn.classes()).toContain('bg-primary');
+    expect(secondBtn.classes()).toContain('bg-disabled');
+    expect(thirdBtn.classes()).toContain('bg-disabled');
+
+    expect(firstBtnLabel.text()).toBe('label1');
+    expect(secondBtnLabel.text()).toBe('label2');
+  });
+
+  it('should render component with icon correctly', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1',
+        icon:  'some-icon'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        activeClass:   'bg-another-active-class',
+        inactiveClass: 'bg-some-inactive-class',
+        iconSize:      'xxxxl',
+        value:         'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+    const firstBtnIcon = wrapper.find('[data-testid="button-group-child-0"] i');
+    const firstBtnLabel = wrapper.find('[data-testid="button-group-child-0"] span');
+    const secondBtn = wrapper.find('[data-testid="button-group-child-1"]');
+
+    expect(wrapper.findAll('button')).toHaveLength(3);
+
+    expect(firstBtn.classes()).toContain('bg-another-active-class');
+    expect(secondBtn.classes()).toContain('bg-some-inactive-class');
+
+    expect(firstBtnLabel.exists()).toBe(true);
+    expect(firstBtnIcon.exists()).toBe(true);
+
+    expect(firstBtnIcon.classes()).toContain('icon');
+    expect(firstBtnIcon.classes()).toContain('some-icon');
+    expect(firstBtnIcon.classes()).toContain('icon-xxxxl');
+  });
+
+  it('clicking on button should emit event "input"', () => {
+    const options = [
+      {
+        label: 'label1',
+        value: 'val1'
+      },
+      {
+        label: 'label2',
+        value: 'val2'
+      },
+      {
+        label: 'label3',
+        value: 'val3'
+      },
+    ];
+
+    const wrapper = shallowMount(ButtonGroup, {
+      propsData: {
+        options,
+        value: 'val1'
+      },
+      directives: { 'trim-whitespace': jest.fn() },
+    });
+
+    const firstBtn = wrapper.find('[data-testid="button-group-child-0"]');
+
+    firstBtn.trigger('click');
+
+    expect(wrapper.emitted('input')).toHaveLength(1);
+    expect(wrapper.emitted('input')![0][0]).toBe('val1');
+  });
+});

package/components/__tests__/ClusterBadge.test.ts

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import ClusterBadge from '@shell/components/ClusterBadge.vue';
+
+describe('component: ClusterBadge', () => {
+  it('should render component with the correct data applied', () => {
+    const clusterProp = {
+      badge: {
+        color:     'red',
+        textColor: 'blue',
+        text:      'some-text',
+      }
+    };
+
+    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+
+    const elem = wrapper.find('div');
+
+    expect(elem.classes()).toContain('cluster-badge');
+    expect(elem.attributes().style).toBe('background-color: red; color: blue;');
+    expect(elem.text()).toBe('some-text');
+  });
+
+  it('should NOT render component if there is no badge property in object', () => {
+    const clusterProp = {};
+
+    const wrapper = shallowMount(ClusterBadge, { propsData: { cluster: clusterProp } });
+
+    const elem = wrapper.find('div');
+
+    expect(elem.exists()).toBe(false);
+  });
+});

package/components/__tests__/CollapsibleCard.test.ts

@@ -0,0 +1,64 @@
+import { shallowMount } from '@vue/test-utils';
+import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
+
+describe('component: CollapsibleCard', () => {
+  it('should render component with the correct data applied', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title' },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardWrapper = wrapper.find('.collapsible-card');
+    const cardHeader = wrapper.find('.collapsible-card-header');
+    const cardBody = wrapper.find('.collapsible-card-body');
+
+    expect(cardWrapper.exists()).toBe(true);
+
+    expect(cardHeader.exists()).toBe(true);
+    expect(cardHeader.find('h2 span').text()).toBe('some-card-title');
+    expect(cardHeader.find('p').exists()).toBe(true);
+    expect(cardHeader.find('p').text()).toBe('some stuff for header');
+    expect(cardHeader.find('i').exists()).toBe(true);
+    expect(cardHeader.find('i').classes()).toContain('icon-chevron-up');
+
+    expect(cardBody.exists()).toBe(true);
+    expect(cardBody.find('p').exists()).toBe(true);
+    expect(cardBody.find('p').text()).toBe('some content');
+  });
+
+  it('clicking on card header should emit event', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title' },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardHeader = wrapper.find('.collapsible-card-header');
+
+    cardHeader.trigger('click');
+
+    expect(wrapper.emitted('toggleCollapse')).toHaveLength(1);
+    expect(wrapper.emitted('toggleCollapse')![0][0]).toBe(true);
+  });
+
+  it('clicking on card title should emit event', () => {
+    const wrapper = shallowMount(CollapsibleCard, {
+      propsData: { title: 'some-card-title', isTitleClickable: true },
+      slots:     {
+        'header-right': '<p>some stuff for header</p>',
+        content:        '<p>some content</p>'
+      }
+    });
+
+    const cardHeaderTitle = wrapper.find('.collapsible-card-header h2 span');
+
+    cardHeaderTitle.trigger('click');
+
+    expect(wrapper.emitted('titleClick')).toHaveLength(1);
+  });
+});

package/components/__tests__/ConsumptionGauge.test.ts

@@ -0,0 +1,88 @@
+import { mount } from '@vue/test-utils';
+import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
+import PercentageBar from '@shell/components/PercentageBar.vue';
+
+describe('component: ConsumptionGauge', () => {
+  it('should render component with the correct data applied', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName: 'some-resource-name',
+        capacity:     1000,
+        used:         200,
+        units:        'cores',
+        colorStops
+      },
+    });
+
+    const mainWrapper = wrapper.find('.consumption-gauge');
+    const title = wrapper.find('.consumption-gauge h3');
+    const usedSpan = wrapper.find('.consumption-gauge .numbers span:nth-child(1)');
+    const percentageSpan = wrapper.find('.consumption-gauge .percentage');
+    const percentageBar = wrapper.findComponent(PercentageBar);
+
+    expect(mainWrapper.exists()).toBe(true);
+    expect(title.exists()).toBe(true);
+    expect(title.text()).toBe('some-resource-name');
+    expect(usedSpan.exists()).toBe(true);
+    // check translation key as for translation are not applied
+    expect(usedSpan.text()).toBe('%node.detail.glance.consumptionGauge.used%');
+
+    expect(percentageSpan.exists()).toBe(true);
+    expect(percentageSpan.text()).toContain('20%');
+
+    // checking PercentageBar component render
+    expect(percentageBar.exists()).toBe(true);
+    expect(percentageBar.props().value).toBe(20);
+    expect(percentageBar.props().colorStops).toBe(colorStops);
+  });
+
+  it('usedAsResourceName should render secondary title instead of main h3 title', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName:       'some-resource-name',
+        capacity:           1000,
+        used:               200,
+        units:              'cores',
+        colorStops,
+        usedAsResourceName: true
+      }
+    });
+
+    const mainTitle = wrapper.find('.consumption-gauge h3');
+    const slotTitle = wrapper.find('.consumption-gauge h4');
+
+    expect(mainTitle.exists()).toBe(false);
+    expect(slotTitle.exists()).toBe(true);
+    expect(slotTitle.text()).toBe('some-resource-name');
+  });
+
+  it('passing slot TITLE should render correctly', () => {
+    const colorStops = {
+      0: '--success', 30: '--warning', 70: '--error'
+    };
+
+    const wrapper = mount(ConsumptionGauge, {
+      propsData: {
+        resourceName: 'some-resource-name',
+        capacity:     1000,
+        used:         200,
+        units:        'cores',
+        colorStops
+      },
+      slots: { title: '<p class="slot-class">another title</p>' }
+    });
+
+    const slotElem = wrapper.find('.consumption-gauge .slot-class');
+
+    expect(slotElem.exists()).toBe(true);
+    expect(slotElem.text()).toBe('another title');
+  });
+});

package/components/__tests__/CruResource.test.ts

@@ -30,7 +30,7 @@ describe('component: CruResource', () => {
     expect(element).toBeDefined();
   });
 
-  it('should display errors', () => {
+  it('should display multiple errors', () => {
     const errors = ['mistake!', 'BiG MiStAke11'];
     const wrapper = mount(CruResource, {
       propsData: {
@@ -61,6 +61,7 @@ describe('component: CruResource', () => {
     const node = wrapper.find('#cru-errors');
 
     expect(node.element.childElementCount).toBe(errors.length);
-    expect(node.text()).toBe(`${ errors[0] } ${ errors[1] }`);
+    expect(node.text()).toContain(errors[0]);
+    expect(node.text()).toContain(errors[1]);
   });
 });

package/components/__tests__/FixedBanner.test.ts

@@ -0,0 +1,129 @@
+import { shallowMount } from '@vue/test-utils';
+import FixedBanner from '@shell/components/FixedBanner.vue';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const SETTING_NO_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":null,"button":null},"showHeader":"true","showFooter":"true","showConsent":"false"}' };
+const SETTING_WITH_CONSENT = { value: '{"loginError":{"message":"","showMessage":"false"},"bannerHeader":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME HEADER TEXT"},"bannerFooter":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME FOOTER TEXT"},"bannerConsent":{"background":" #EEEFF4","color":" #141419","textAlignment":"center","fontWeight":null,"fontStyle":null,"fontSize":"14px","textDecoration":null,"text":"SOME CONSENT TEXT" ,"button": "some-button-label"},"showHeader":"true","showFooter":"true","showConsent":"true"}' };
+
+const parsedBannerStyle = {
+  'background-color': ' #EEEFF4',
+  color:              ' #141419',
+  'font-size':        '14px',
+  'font-style':       '',
+  'font-weight':      '',
+  'text-align':       'center',
+  'text-decoration':  '',
+};
+
+const parsedBannerContent = {
+  background:     ' #EEEFF4',
+  color:          ' #141419',
+  fontSize:       '14px',
+  fontStyle:      null,
+  fontWeight:     null,
+  textAlignment:  'center',
+  textDecoration: null,
+};
+
+describe('component: FixedBanner', () => {
+  it('should render HEADER fixed banner correctly', async() => {
+    const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: { header: true },
+      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+    });
+
+    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
+
+    expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
+    expect(wrapper.vm.showHeader).toStrictEqual(true);
+
+    const bannerElem = wrapper.find('.banner');
+    const noArrayTextElem = wrapper.find('.banner > p');
+
+    expect(bannerElem.exists()).toBe(true);
+    expect(bannerElem.classes()).not.toContain('banner-consent');
+    expect(noArrayTextElem.exists()).toBe(true);
+    expect(noArrayTextElem.text()).toBe('SOME HEADER TEXT');
+  });
+
+  it('should render FOOTER fixed banner, as text array (newline char), correctly', async() => {
+    const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: { footer: true },
+      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+    });
+
+    wrapper.setData({ bannerSetting: SETTING_NO_CONSENT });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
+
+    expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
+    expect(wrapper.vm.showFooter).toStrictEqual(true);
+
+    const bannerElem = wrapper.find('.banner');
+    const noArrayTextElem = wrapper.find('.banner > p');
+
+    expect(bannerElem.exists()).toBe(true);
+    expect(bannerElem.classes()).not.toContain('banner-consent');
+    expect(noArrayTextElem.exists()).toBe(true);
+    expect(noArrayTextElem.text()).toBe('SOME FOOTER TEXT');
+  });
+
+  it('should render CONSENT as a DIALOG correctly', async() => {
+    const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: { consent: true },
+      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+    });
+
+    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.bannerStyle).toStrictEqual(parsedBannerStyle);
+
+    expect(wrapper.vm.banner).toStrictEqual(expect.objectContaining(parsedBannerContent));
+    expect(wrapper.vm.showConsent).toStrictEqual(true);
+
+    const bannerElem = wrapper.find('.banner');
+    const bannerDialogGlassElem = wrapper.find('.banner-dialog-glass');
+    const bannerDialogElem = wrapper.find('.banner-dialog');
+    const bannerDialogFrameElem = wrapper.find('.banner-dialog-frame');
+    const buttonDialog = wrapper.find('.banner-dialog button');
+    const noArrayTextElem = wrapper.find('.banner > p');
+
+    expect(bannerElem.exists()).toBe(true);
+    expect(bannerDialogGlassElem.exists()).toBe(true);
+    expect(bannerDialogElem.exists()).toBe(true);
+    expect(bannerDialogFrameElem.exists()).toBe(true);
+    expect(buttonDialog.exists()).toBe(true);
+    expect(noArrayTextElem.exists()).toBe(true);
+    expect(noArrayTextElem.text()).toBe('SOME CONSENT TEXT');
+  });
+
+  it('clicking dialog button should hide dialog', async() => {
+    const wrapper = shallowMount(FixedBanner as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: { consent: true },
+      mocks:     { $store: { getters: { 'management/byId': jest.fn() } } }
+    });
+
+    wrapper.setData({ bannerSetting: SETTING_WITH_CONSENT });
+
+    await wrapper.vm.$nextTick();
+
+    const buttonDialog = wrapper.find('.banner-dialog button');
+    const spy = jest.spyOn(wrapper.vm, 'hideDialog');
+
+    expect(wrapper.vm.showDialog).toBe(true);
+
+    buttonDialog.trigger('click');
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(wrapper.vm.showDialog).toBe(false);
+  });
+});

package/components/__tests__/GrowlManager.test.ts

@@ -0,0 +1,147 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import GrowlManager from '@shell/components/GrowlManager.vue';
+import Vuex from 'vuex';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const stackMock = [
+  {
+    title:   'growl1-title',
+    message: 'growl1-message',
+    icon:    'growl1-icon',
+    timeout: 5000,
+    id:      'growl1-id',
+    color:   'red'
+  },
+  {
+    title:   'growl2-title',
+    message: 'growl2-message',
+    icon:    'growl2-icon',
+    timeout: 5000,
+    id:      'growl2-id',
+    color:   'red'
+  }
+];
+
+describe('component: GrowlManager', () => {
+  it('should render component with the correct data applied', async() => {
+    const mockStore = {
+      getters:  { 'i18n/t': jest.fn() },
+      dispatch: () => jest.fn()
+    };
+
+    const wrapper = shallowMount(GrowlManager as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      computed: { stack: () => stackMock },
+      mocks:    { $store: mockStore }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const growlMainContainer = wrapper.find('.growl-container');
+    const growlListContainer = wrapper.find('.growl-list');
+    const growlListItems = wrapper.findAll('.growl-list .growl');
+    const growlFirstItemIcon = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .icon-container .icon');
+    const growlFirstItemTitle = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .growl-text div');
+    const growlFirstItemMessage = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .growl-text p');
+    const growlFirstItemClose = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .close.icon');
+    const clearAllButton = wrapper.find('button[type="button"]');
+
+    expect(growlMainContainer.exists()).toBe(true);
+    expect(growlListContainer.exists()).toBe(true);
+    expect(growlListItems).toHaveLength(2);
+    expect(growlFirstItemIcon.classes()).toContain('icon-growl1-icon');
+    expect(growlFirstItemTitle.text()).toBe('growl1-title');
+    expect(growlFirstItemMessage.text()).toBe('growl1-message');
+    expect(growlFirstItemClose.exists()).toBe(true);
+    expect(clearAllButton.exists()).toBe(true);
+  });
+
+  it('clicking on individual growl close should dismiss the individual growl', async() => {
+    const mockStore = {
+      getters:  { 'i18n/t': jest.fn() },
+      dispatch: () => jest.fn()
+    };
+
+    const wrapper = shallowMount(GrowlManager as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      computed: { stack: () => stackMock },
+      mocks:    { $store: mockStore }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const growlFirstItemClose = wrapper.find('.growl-list [data-testid="growl-list-item-0"] .close.icon');
+    const spyClose = jest.spyOn(wrapper.vm, 'close');
+    const spyDispatch = jest.spyOn(mockStore, 'dispatch');
+
+    growlFirstItemClose.trigger('click');
+
+    expect(spyClose).toHaveBeenCalledTimes(1);
+    expect(spyClose).toHaveBeenCalledWith(stackMock[0]);
+    expect(spyDispatch).toHaveBeenCalledTimes(1);
+  });
+
+  it('clicking on clear all growls should dismiss all growls', async() => {
+    const mockStore = {
+      getters:  { 'i18n/t': jest.fn() },
+      dispatch: () => jest.fn()
+    };
+
+    const wrapper = shallowMount(GrowlManager as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      computed: { stack: () => stackMock },
+      mocks:    { $store: mockStore }
+    });
+
+    const clearAllButton = wrapper.find('button[type="button"]');
+    const spyCloseAll = jest.spyOn(wrapper.vm, 'closeAll');
+    const spyDispatch = jest.spyOn(mockStore, 'dispatch');
+
+    clearAllButton.trigger('click');
+
+    await wrapper.vm.$nextTick();
+
+    expect(spyCloseAll).toHaveBeenCalledTimes(1);
+    expect(spyDispatch).toHaveBeenCalledTimes(1);
+  });
+
+  it('growl should auto remove itself after set interval of 1 second', async() => {
+    const localVue = createLocalVue();
+
+    localVue.use(Vuex);
+
+    const store = new Vuex.Store({
+      modules: {
+        growl: {
+          namespaced: true,
+          state:      { stack: [] },
+          actions:    { clear: jest.fn() },
+          mutations:  {
+            updateStack: (state) => {
+              state.stack = stackMock;
+            }
+          }
+        },
+      },
+      getters: { 'i18n/t': () => jest.fn() }
+    });
+
+    jest.useFakeTimers();
+
+    const wrapper = shallowMount(GrowlManager as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      store,
+      localVue
+    });
+
+    const spyCloseExpired = jest.spyOn(wrapper.vm, 'closeExpired');
+
+    expect(spyCloseExpired).not.toHaveBeenCalled();
+
+    // this is to trigger the watch so that autoRemove can do its part
+    store.commit('growl/updateStack');
+
+    await wrapper.vm.$nextTick();
+
+    jest.advanceTimersByTime(1001);
+
+    expect(spyCloseExpired).toHaveBeenCalledTimes(1);
+  });
+});