@rancher/shell 3.0.12-rc.3 → 3.0.12-rc.4

package/edit/auth/__tests__/github.test.ts

@@ -0,0 +1,234 @@
+import { nextTick } from 'vue';
+import { mount, type VueWrapper, flushPromises } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+
+import GitHub from '@shell/edit/auth/github.vue';
+
+jest.mock('@shell/utils/clipboard', () => {
+  return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
+});
+
+const validClientId = 'github-client-id';
+const validClientSecret = 'github-client-secret';
+const validAppId = '12345';
+const validPrivateKey = '-----BEGIN RSA PRIVATE KEY-----\ntest\n-----END RSA PRIVATE KEY-----';
+const validTargetUrl = 'https://github.mycompany.com';
+
+const mockGitHubModel = {
+  enabled:      false,
+  id:           'github',
+  clientId:     validClientId,
+  clientSecret: validClientSecret,
+  hostname:     'github.com',
+  tls:          true,
+};
+
+const mockGitHubAppModel = {
+  ...mockGitHubModel,
+  id:         'githubapp',
+  appId:      validAppId,
+  privateKey: validPrivateKey,
+};
+
+const requiredSetup = (modelOverrides = {}, dataOverrides = {}) => ({
+  data() {
+    return {
+      isEnabling:     false,
+      editConfig:     false,
+      model:          { ...mockGitHubModel, ...modelOverrides },
+      serverSetting:  null,
+      errors:         [],
+      originalModel:  null,
+      principals:     [],
+      authConfigName: 'github',
+      targetType:     'public',
+      targetUrl:      '',
+      ...dataOverrides,
+    } as any;
+  },
+  global: {
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
+        },
+        dispatch: jest.fn(),
+      },
+      $route:  { query: { AS: '' }, params: { id: 'github' } },
+      $router: { applyQuery: jest.fn() },
+    },
+  },
+  props: {
+    value: {},
+    mode:  _EDIT,
+  },
+});
+
+describe('github.vue', () => {
+  describe('GitHub provider', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(GitHub, { ...requiredSetup() });
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    describe('save button disabled', () => {
+      it('when clientId is empty', async() => {
+        wrapper.setData({ model: { clientId: '' } });
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+
+      it('when clientSecret is empty', async() => {
+        wrapper.setData({ model: { clientSecret: '' } });
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+
+      it('when both clientId and clientSecret are empty', async() => {
+        wrapper.setData({ model: { clientId: '' } });
+        wrapper.setData({ model: { clientSecret: '' } });
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
+
+    describe('save button enabled', () => {
+      it('when clientId and clientSecret are filled', async() => {
+        await nextTick();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+
+      it('when provider is already enabled and not editing config', async() => {
+        wrapper.setData({ model: { ...mockGitHubModel, enabled: true }, editConfig: false });
+        await nextTick();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
+  });
+
+  describe('GitHub App provider', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(GitHub, { ...requiredSetup(mockGitHubAppModel) });
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    describe('save button disabled', () => {
+      it('when appId is empty', async() => {
+        wrapper.setData({ model: { appId: '' } });
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+
+      it('when privateKey is empty', async() => {
+        wrapper.vm.model.privateKey = '';
+        wrapper.setData({ model: { privateKey: '' } });
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
+
+    describe('save button enabled', () => {
+      it('when all required fields are filled', async() => {
+        await nextTick();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
+  });
+
+  describe('GitHub App fields not required for GitHub provider', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(GitHub, { ...requiredSetup() });
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('save button is enabled even when appId and privateKey are absent', async() => {
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+  });
+
+  describe('private GitHub Enterprise target', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    beforeEach(() => {
+      wrapper = mount(
+        GitHub,
+        { ...requiredSetup({}, { targetType: 'private', targetUrl: validTargetUrl }) }
+      );
+    });
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('save button is disabled when targetUrl is empty', async() => {
+      wrapper.setData({ targetType: 'private', targetUrl: '' });
+      await wrapper.vm.validateAllFields();
+      await flushPromises();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(true);
+    });
+
+    it('save button is enabled when targetUrl is filled', async() => {
+      await nextTick();
+
+      const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+      expect(saveButton.disabled).toBe(false);
+    });
+  });
+});

package/edit/auth/__tests__/oidc.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
-import { mount, type VueWrapper } from '@vue/test-utils';
+import { mount, type VueWrapper, flushPromises } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 
 import oidc from '@shell/edit/auth/oidc.vue';
@@ -9,6 +9,18 @@ jest.mock('@shell/utils/clipboard', () => {
   return { copyTextToClipboard: jest.fn(() => Promise.resolve({})) };
 });
 
+const mockStore = {
+  getters: {
+    'i18n/t':      (key: string) => key,
+    'i18n/exists': () => false,
+  },
+};
+
+jest.mock('vuex', () => ({
+  ...jest.requireActual('vuex'),
+  useStore: () => mockStore,
+}));
+
 const validClientId = 'rancheroidc';
 const validClientSecret = 'TOkUxg0P67m1UXWNkJLHDPkUZFIKOWSq';
 const validUrl = 'https://localhost:8080';
@@ -79,20 +91,26 @@ describe('oidc.vue', () => {
     });
 
     describe('have "Create" button disabled', () => {
-      it('given missing Auth endpoint URL', () => {
+      // validateAllFields() replicates what happens on blur in a real browser: it runs
+      // the toTypedSchema validators for every registered field and flushes async errors.
+      it('given missing Auth endpoint URL', async() => {
         wrapper.vm.model.authEndpoint = '';
         wrapper.vm.model.scopes = 'openid profile email'; // set scope to be sure
         wrapper.vm.oidcScope = ['openid', 'profile', 'email']; // TODO #13457: this is duplicated due wrong format of scopes
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
 
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
         expect(saveButton.disabled).toBe(true);
       });
 
-      it('given missing required basic scopes', () => {
-        wrapper.vm.model.authEndpoint = 'whatever'; // set auth endpoint to be sure
+      it('given missing required basic scopes', async() => {
+        wrapper.vm.model.authEndpoint = validAuthEndpoint; // set auth endpoint to be sure
         wrapper.vm.model.scopes = 'something else'; // set wrong scope
         wrapper.vm.oidcScope = ['something', 'else']; // TODO #13457: this is duplicated due wrong format of scopes
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
 
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -101,7 +119,8 @@ describe('oidc.vue', () => {
 
       it('when provider is disabled and editing config before fields are filled in', async() => {
         wrapper.setData({ model: {}, editConfig: true });
-        await nextTick();
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
 
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 
@@ -110,7 +129,8 @@ describe('oidc.vue', () => {
 
       it('when provider is disabled and editing config after required fields and scope is missing openid', async() => {
         wrapper.setData({ oidcUrls: { url: validUrl, realm: validRealm } });
-        await nextTick();
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
 
         const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
 

package/edit/auth/__tests__/saml.test.ts

@@ -0,0 +1,196 @@
+import { nextTick } from 'vue';
+import { mount, type VueWrapper, flushPromises } from '@vue/test-utils';
+import { _EDIT } from '@shell/config/query-params';
+import Saml from '@shell/edit/auth/saml.vue';
+
+const REQUIRED_FIELDS = [
+  'displayNameField',
+  'userNameField',
+  'uidField',
+  'groupsField',
+  'rancherApiHost',
+  'spKey',
+  'spCert',
+  'idpMetadataContent',
+] as const;
+
+type RequiredField = typeof REQUIRED_FIELDS[number];
+
+const validModel = {
+  enabled:            false,
+  id:                 'shibboleth',
+  displayNameField:   'givenName',
+  userNameField:      'uid',
+  uidField:           'uid',
+  groupsField:        'memberOf',
+  rancherApiHost:     'https://rancher.example.com',
+  spKey:              '-----BEGIN RSA PRIVATE KEY-----\ntest\n-----END RSA PRIVATE KEY-----',
+  spCert:             '-----BEGIN CERTIFICATE-----\ntest\n-----END CERTIFICATE-----',
+  idpMetadataContent: '<EntityDescriptor/>',
+};
+
+const emptyRequiredFields: Record<RequiredField, string> = {
+  displayNameField:   '',
+  userNameField:      '',
+  uidField:           '',
+  groupsField:        '',
+  rancherApiHost:     '',
+  spKey:              '',
+  spCert:             '',
+  idpMetadataContent: '',
+};
+
+const mountOptions = (model: object) => ({
+  data() {
+    return {
+      isEnabling:     false,
+      editConfig:     false,
+      model:          { ...model },
+      serverSetting:  null,
+      errors:         [],
+      originalModel:  null,
+      principals:     [],
+      authConfigName: 'shibboleth',
+    } as any;
+  },
+  global: {
+    mocks: {
+      $fetchState: { pending: false },
+      $store:      {
+        getters: {
+          currentStore:              () => 'current_store',
+          'current_store/schemaFor': jest.fn(),
+          'current_store/all':       jest.fn(),
+          'i18n/t':                  (val: string) => val,
+          'i18n/exists':             jest.fn(),
+        },
+        dispatch: jest.fn(),
+      },
+      $route:  { query: { AS: '' }, params: { id: 'shibboleth' } },
+      $router: { applyQuery: jest.fn() },
+    },
+  },
+  props: {
+    value: {},
+    mode:  _EDIT,
+  },
+});
+
+describe('saml.vue', () => {
+  describe('validationPassed computed', () => {
+    let wrapper: VueWrapper<any, any>;
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('returns true when all required fields are filled', async() => {
+      wrapper = mount(Saml, mountOptions(validModel));
+      await flushPromises();
+
+      expect(wrapper.vm.validationPassed).toBe(true);
+    });
+
+    it('returns false when all required fields are empty', async() => {
+      wrapper = mount(Saml, mountOptions({ ...validModel, ...emptyRequiredFields }));
+      await wrapper.vm.validateAllFields();
+      await flushPromises();
+
+      expect(wrapper.vm.validationPassed).toBe(false);
+    });
+
+    it('returns true when provider is enabled and not editing config, regardless of field state', async() => {
+      wrapper = mount(Saml, mountOptions({
+        ...validModel, ...emptyRequiredFields, enabled: true
+      }));
+      await wrapper.vm.validateAllFields();
+      await flushPromises();
+
+      expect(wrapper.vm.validationPassed).toBe(true);
+    });
+
+    it('returns false when provider is enabled but editConfig is true and required fields are empty', async() => {
+      wrapper = mount(Saml, {
+        ...mountOptions({
+          ...validModel, ...emptyRequiredFields, enabled: true
+        }),
+        data() {
+          return {
+            isEnabling: false,
+            editConfig: true,
+            model:      {
+              ...validModel, ...emptyRequiredFields, enabled: true
+            },
+            serverSetting:  null,
+            errors:         [],
+            originalModel:  null,
+            principals:     [],
+            authConfigName: 'shibboleth',
+          } as any;
+        },
+      });
+      await wrapper.vm.validateAllFields();
+      await flushPromises();
+
+      expect(wrapper.vm.validationPassed).toBe(false);
+    });
+  });
+
+  describe('Enable button', () => {
+    describe('is disabled', () => {
+      let wrapper: VueWrapper<any, any>;
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('when all required fields are empty', async() => {
+        wrapper = mount(Saml, mountOptions({ ...validModel, ...emptyRequiredFields }));
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+
+      it.each([...REQUIRED_FIELDS])('when only %s is empty', async(field: RequiredField) => {
+        wrapper = mount(Saml, mountOptions({ ...validModel, [field]: '' }));
+        await wrapper.vm.validateAllFields();
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(true);
+      });
+    });
+
+    describe('is enabled', () => {
+      let wrapper: VueWrapper<any, any>;
+
+      afterEach(() => {
+        wrapper.unmount();
+      });
+
+      it('when all required fields are filled', async() => {
+        wrapper = mount(Saml, mountOptions(validModel));
+        await flushPromises();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+
+      it('when provider is already enabled and not editing config', async() => {
+        wrapper = mount(Saml, mountOptions({
+          ...validModel, ...emptyRequiredFields, enabled: true
+        }));
+        await nextTick();
+
+        const saveButton = wrapper.find('[data-testid="form-save"]').element as HTMLInputElement;
+
+        expect(saveButton.disabled).toBe(false);
+      });
+    });
+  });
+});