@rancher/shell 0.3.0 → 0.3.2

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);
+  });
+});

package/components/__tests__/NamespaceFilter.test.ts

@@ -25,7 +25,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
@@ -60,7 +60,8 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [{ label: text }],
         },
-        directives: { shortkey: () => jest.fn() }
+        directives: { shortkey: () => jest.fn() },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
       });
 
       const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
@@ -92,8 +93,9 @@ describe('component: NamespaceFilter', () => {
         mocks: {
           $store: {
             getters: {
-              'i18n/t':    () => text,
-              'prefs/get': () => preferences
+              'i18n/t':            () => text,
+              'prefs/get':         () => preferences,
+              namespaceFilterMode: () => undefined,
             },
           }
         },
@@ -114,6 +116,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
+        mocks:      { $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -132,7 +135,7 @@ describe('component: NamespaceFilter', () => {
           options:  () => [],
           value:    () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
@@ -147,18 +150,20 @@ describe('component: NamespaceFilter', () => {
       const text = 'my option';
       const wrapper = mount(NamespaceFilter, {
         computed: {
-          filtered: () => [
-            {
-              kind:  'namespace',
-              label: `default-${ text }`,
-            },
-          ],
           options: () => [],
           value:   () => [],
         },
-        mocks:      { $store: { getters: { 'i18n/t': () => text } } },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
         directives: { shortkey: () => jest.fn() }
       });
+
+      (wrapper.vm as any).cachedFiltered = [
+        {
+          kind:  'namespace',
+          label: `default-${ text }`,
+        },
+      ];
+
       const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
 
       await dropdown.trigger('click');
@@ -180,28 +185,31 @@ describe('component: NamespaceFilter', () => {
       jest.spyOn(NamespaceFilter.computed.value, 'get').mockReturnValue([]);
       const wrapper = mount(NamespaceFilter, {
         computed: {
-          filtered: () => [
-            {
-              label:     text,
-              key,
-              elementId: text,
-              id:        text,
-              kind:      'namespace',
-            },
-          ],
-          options:        () => [],
-          currentProduct: () => undefined,
-          key:            () => key,
+          options:             () => [],
+          currentProduct:      () => undefined,
+          namespaceFilterMode: () => undefined,
+          key:                 () => key,
         },
         mocks: {
           $store: {
-            getters:  { 'i18n/t': () => text },
+            getters:  { 'i18n/t': () => text, namespaceFilterMode: () => undefined },
             dispatch: action
           }
         },
         directives: { shortkey: () => jest.fn() }
       });
 
+      (wrapper.vm as any).cachedFiltered = [
+        {
+          label:     text,
+          key,
+          elementId: text,
+          id:        text,
+          kind:      'namespace',
+          enabled:   true,
+        },
+      ];
+
       await wrapper.find(`[data-testid="namespaces-dropdown"]`).trigger('click');
       await wrapper.find(`[data-testid="namespaces-option-0"]`).trigger('click');
 

package/components/__tests__/PercentageBar.test.ts

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import PercentageBar, { PreferredDirection } from '@shell/components/PercentageBar.vue';
+import Bar from '@shell/components/graph/Bar.vue';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+
+const colorStops = {
+  0: '--success', 30: '--warning', 70: '--error'
+};
+
+describe('component: PercentageBar', () => {
+  it('should render component with the correct data applied', () => {
+    const wrapper = shallowMount(PercentageBar as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      propsData: {
+        value:              25,
+        preferredDirection: PreferredDirection.MORE,
+        showPercentage:     true,
+        colorStops
+      }
+    });
+
+    const container = wrapper.find('.percentage-bar');
+    const barComponent = wrapper.findComponent(Bar);
+    const val = wrapper.find('.percentage-value');
+
+    expect(container.exists()).toBe(true);
+    expect(barComponent.exists()).toBe(true);
+    expect(val.exists()).toBe(true);
+    expect(val.text()).toBe('25%');
+    expect(wrapper.vm.primaryColor).toBe('--warning');
+  });
+});