@rancher/shell 0.2.5 → 0.3.1

package/components/__tests__/NamespaceFilter.test.ts

@@ -0,0 +1,221 @@
+import { mount } from '@vue/test-utils';
+import NamespaceFilter from '@shell/components/nav/NamespaceFilter.vue';
+
+describe('component: NamespaceFilter', () => {
+  describe('given namespace select input', () => {
+    it('should be visible', () => {
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const filter = wrapper.find(`[data-testid="namespaces-filter"]`);
+
+      expect(filter).toBeDefined();
+    });
+
+    it('should display no namespace selection', () => {
+      const text = 'none';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const element = wrapper.find(`[data-testid="namespaces-values-none"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the default namespace', () => {
+      const text = 'special namespace';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => ([{
+            label: text,
+            kind:  'special',
+          }]),
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-values-label"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the selected namespace', () => {
+      const text = 'current namespace';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [{ label: text }],
+        },
+        directives: { shortkey: () => jest.fn() },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+
+    it('should display the selected namespace from user preferences if options are available', () => {
+      const text = 'my preference';
+      const key = 'local';
+      const preferences = {
+        [key]: [
+          `ns://${ text }`
+        ]
+      };
+
+      jest.spyOn(NamespaceFilter.computed.value, 'set');
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [{
+            id:    `ns://${ text }`,
+            kind:  'namespace',
+            label: text
+          }],
+          currentProduct: () => undefined,
+          key:            () => key,
+        },
+        mocks: {
+          $store: {
+            getters: {
+              'i18n/t':            () => text,
+              'prefs/get':         () => preferences,
+              namespaceFilterMode: () => undefined,
+            },
+          }
+        },
+        directives: { shortkey: () => jest.fn() }
+      });
+
+      const element = wrapper.find(`[data-testid="namespaces-value-0"]`).element.textContent;
+
+      expect(element).toContain(text);
+    });
+  });
+
+  describe('given namespace menu options', () => {
+    it('should be opened and displayed on click', async() => {
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => '', namespaceFilterMode: () => undefined } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
+
+      await dropdown.trigger('click');
+      const menu = wrapper.find(`[data-testid="namespaces-menu"]`);
+
+      expect(menu).toBeDefined();
+    });
+
+    it('should contain no options', async() => {
+      const text = 'no options';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          filtered: () => [],
+          options:  () => [],
+          value:    () => [],
+        },
+        mocks:      { $store: { getters: { 'i18n/t': () => text, namespaceFilterMode: () => undefined } } },
+        directives: { shortkey: () => jest.fn() }
+      });
+      const dropdown = wrapper.find(`[data-testid="namespaces-dropdown"]`);
+
+      await dropdown.trigger('click');
+      const option = wrapper.find(`[data-testid="namespaces-option-none"]`).element.textContent;
+
+      expect(option).toContain(text);
+    });
+
+    it('should contain an option', async() => {
+      const text = 'my option';
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          options: () => [],
+          value:   () => [],
+        },
+        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');
+      const option = wrapper.find(`[data-testid="namespaces-option-0"]`).element.textContent;
+
+      expect(option).toContain(text);
+    });
+
+    it('should set the option as user preference', async() => {
+      const text = 'my option';
+      const key = 'my key';
+      const value = {
+        ids: [text],
+        key
+      };
+      const actionName = 'switchNamespaces';
+      const action = jest.fn();
+
+      jest.spyOn(NamespaceFilter.computed.value, 'get').mockReturnValue([]);
+      const wrapper = mount(NamespaceFilter, {
+        computed: {
+          options:             () => [],
+          currentProduct:      () => undefined,
+          namespaceFilterMode: () => undefined,
+          key:                 () => key,
+        },
+        mocks: {
+          $store: {
+            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');
+
+      expect(action).toHaveBeenCalledWith(actionName, value);
+    });
+
+    it.todo('should generate the options based on the Rancher resources');
+  });
+});

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

package/components/__tests__/PodSecurityAdmission.test.ts

@@ -0,0 +1,398 @@
+import { mount } from '@vue/test-utils';
+import PodSecurityAdmission from '@shell/components/PodSecurityAdmission.vue';
+
+describe('component: PodSecurityAdmission', () => {
+  it.each([
+    ['updateLabels', {
+      audit:             'privileged',
+      'audit-version':   'latest',
+      enforce:           'privileged',
+      'enforce-version': 'latest',
+      warn:              'privileged',
+      'warn-version':    'latest',
+    }],
+    ['updateExemptions', {
+      namespaces: [], runtimeClasses: [], usernames: []
+    }]
+  ])('should emit %p and exemptions on creation if labels always active', (emission, value) => {
+    const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'create', labelsAlwaysActive: true } });
+
+    expect(wrapper.emitted(emission)![0][0]).toStrictEqual(value);
+  });
+
+  describe('handling labels', () => {
+    it.each([
+      ['true', 'active'],
+      ['', 'level'],
+      ['', 'version'],
+    ])('should display default value %p for input %p', (value, inputId) => {
+      const wrapper = mount(PodSecurityAdmission, { propsData: { mode: 'edit' } });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+      expect(input.value).toStrictEqual(value);
+    });
+
+    describe.each([
+      'pod-security.kubernetes.io/',
+      ''
+    ])('given prefix %p', (prefix) => {
+      it('should map labels to the form control', () => {
+        const labels = {
+          [`${ prefix }enforce`]:         'baseline',
+          [`${ prefix }enforce-version`]: '123'
+        };
+        const psaControls = {
+          audit: {
+            active:  false,
+            level:   'privileged',
+            version: ''
+          },
+          enforce: {
+            active:  true,
+            level:   'baseline',
+            version: '123'
+          },
+          warn: {
+            active:  false,
+            level:   'privileged',
+            version: ''
+          },
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        expect(wrapper.vm.psaControls).toStrictEqual(psaControls);
+      });
+
+      it.each([
+      // ['true', 'active'],
+      // ['baseline', 'level'],
+        ['123', 'version'],
+      ])('should map labels to the form, with value %p for input %p', (value, inputId) => {
+        const labels = {
+          [`${ prefix }enforce`]:         'baseline',
+          [`${ prefix }enforce-version`]: '123'
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.value).toStrictEqual(value);
+      });
+
+      it.each([
+      // ['true', 'active'],
+      // ['privileged', 'level'],
+        ['', 'version'],
+      ])('should map labels to the form, using default values if none, with value %p for input %p', (value, inputId) => {
+        const labels = {
+          [`${ prefix }enforce`]:         '',
+          [`${ prefix }enforce-version`]: ''
+        };
+
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:         'edit',
+            labels,
+            labelsPrefix: prefix
+          }
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.value).toStrictEqual(value);
+      });
+
+      describe('changing input values', () => {
+        it('should add labels if active', () => {
+          const version = '123';
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: version
+          };
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels:       {},
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue(version);
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+
+        it('should remove other labels if not active', () => {
+          const labels = {
+            [`${ prefix }audit`]:         'privileged',
+            [`${ prefix }audit-version`]: 'latest'
+          };
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: 'latest',
+          };
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels,
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+
+          // Unable to toggle the checkbox, so we enforce the data
+          wrapper.setData({
+            psaControls: {
+              audit: {
+                active:  false,
+                level:   '',
+                version: ''
+              }
+            }
+          });
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+
+        it('should assign default version and level if missing', () => {
+          const wrapper = mount(PodSecurityAdmission, {
+            propsData: {
+              mode:         'edit',
+              labels:       {},
+              labelsPrefix: prefix
+            },
+            // Unable to toggle the checkbox, so we enforce the data
+            data: () => ({
+              psaControls: {
+                enforce: {
+                  active:  true,
+                  level:   '',
+                  version: ''
+                }
+              }
+            }),
+          });
+          const newLabels = {
+            [`${ prefix }enforce`]:         'privileged',
+            [`${ prefix }enforce-version`]: 'latest'
+          };
+
+          // Unable to toggle the checkbox, so we use the input
+          wrapper.find(`[data-testid="pod-security-admission--psaControl-0-version"]`).find('input').setValue('');
+
+          expect(wrapper.emitted('updateLabels')![0][0]).toStrictEqual(newLabels);
+        });
+      });
+    });
+
+    describe.each(['level', 'version'])('should keep always %p enabled', (inputId) => {
+      it('given labelsAlwaysActive true and no labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:               'edit',
+            labelsAlwaysActive: true,
+            labels:             {}
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(false);
+      });
+
+      it('given existing values', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:   'edit',
+            labels: {
+              [`enforce`]:         'baseline',
+              [`enforce-version`]: '123'
+            }
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(false);
+      });
+    });
+
+    describe.each(['level', 'version'])('should keep always %p disabled', (inputId) => {
+      it('given labelsAlwaysActive false and no labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:               'edit',
+            labelsAlwaysActive: false,
+            labels:             {}
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+
+      it('given disabled active status', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: { mode: 'edit' },
+          data:      () => ({
+            psaControls: {
+              enforce: {
+                active:  false,
+                level:   '',
+                version: ''
+              }
+            }
+          }),
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+
+      it('given view mode and provided labels', () => {
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode:   'view',
+            labels: {
+              [`enforce`]:         'baseline',
+              [`enforce-version`]: '123'
+            }
+          },
+        });
+
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+        expect(input.disabled).toBe(true);
+      });
+    });
+
+    it.each([
+      [true, false],
+    ])('should display the checkbox %p', (value) => {
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode:               'edit',
+          labelsAlwaysActive: value
+        }
+      });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaControl-0-active"]`).element as HTMLInputElement;
+
+      expect(!input).toBe(value);
+    });
+  });
+
+  describe('handling exemptions', () => {
+    it.each([
+      [['namespace1', 'namespace2'], 'namespace1,namespace2'],
+    ])('should map %p to the form control as %p', (exemption, control) => {
+      const exemptions = { namespaces: exemption };
+      const result = {
+        namespaces: {
+          active: true,
+          value:  control
+        },
+        runtimeClasses: {
+          active: false,
+          value:  ''
+        },
+        usernames: {
+          active: false,
+          value:  ''
+        },
+      };
+
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode: 'edit',
+          exemptions,
+        }
+      });
+
+      expect(wrapper.vm.psaExemptionsControls).toStrictEqual(result);
+    });
+
+    it.each([
+      // ['true', 'active'],
+      ['username', 'value'],
+    ])('should map to the form, with value %p for input %p', (value, inputId) => {
+      const exemptions = { usernames: [value] };
+      const wrapper = mount(PodSecurityAdmission, {
+        propsData: {
+          mode: 'edit',
+          exemptions
+        }
+      });
+
+      const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-${ inputId }"]`).find('input').element as HTMLInputElement;
+
+      expect(input.value).toStrictEqual(value);
+    });
+
+    describe('changing input values', () => {
+      it.each([
+        ['username1', ['username1']],
+        ['username1, username2', ['username1', 'username2']],
+        ['username1,username2', ['username1', 'username2']],
+      ])('should emit exemption input value %p as %p', (value, exemption) => {
+        const exemptions = {
+          usernames:      exemption,
+          namespaces:     [],
+          runtimeClasses: []
+        };
+        const wrapper = mount(PodSecurityAdmission, {
+          propsData: {
+            mode: 'edit',
+            exemptions
+          },
+        });
+        // Unable to toggle the checkbox, so we use the input
+        const input = wrapper.find(`[data-testid="pod-security-admission--psaExemptionsControl-0-value"]`).find('input');
+
+        input.setValue(value);
+
+        expect(wrapper.emitted('updateExemptions')![0][0]).toStrictEqual(exemptions);
+      });
+    });
+  });
+});

package/components/__tests__/SimpleBox.spec.ts

@@ -0,0 +1,28 @@
+import { mount } from '@vue/test-utils';
+import SimpleBox from '@shell/components/SimpleBox.vue';
+
+describe('component: SimpleBox.vue', () => {
+  const wrapper = mount(SimpleBox, { propsData: { title: 'Simple box title' } });
+
+  it('show title', () => {
+    const title = wrapper.find(`[data-testid="simple-box-title"]`);
+
+    expect(title.element).toBeDefined();
+  });
+
+  it('show close button', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    expect(closeButton.element).toBeDefined();
+  });
+
+  it('close emit', async() => {
+    await wrapper.setProps({ canClose: true });
+    const closeButton = wrapper.find(`[data-testid="simple-box-close"]`);
+
+    await closeButton.trigger('click');
+
+    expect(wrapper.emitted('close')).toBeTruthy();
+  });
+});