add tests for Project Access

move test data from `mocks` to `tests` folder

frontend/packages/dev-console/src/components/project-access/ProjectAccessForm.tsx

@@ -11,7 +11,7 @@ enum accessRoles {
   edit = 'Edit',
 }
 
-const ProjectAccess: React.FC<FormikProps<FormikValues>> = ({
+const ProjectAccessForm: React.FC<FormikProps<FormikValues>> = ({
   handleSubmit,
   handleReset,
   isSubmitting,
@@ -44,4 +44,4 @@ const ProjectAccess: React.FC<FormikProps<FormikValues>> = ({
   </Form>
 );
 
-export default ProjectAccess;
+export default ProjectAccessForm;

frontend/packages/dev-console/src/components/project-access/ProjectAccessPage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { match as RMatch } from 'react-router';
 import { NamespaceBar } from '@console/internal/components/namespace';
-import RenderProjectAccessPage, { RenderProjectAccessPageProps } from './RenderProjectAccessPage';
+import RenderProjectAccess from './RenderProjectAccessPage';
 
 export interface ProjectAccessPageProps {
   match: RMatch<{
@@ -11,13 +11,13 @@ export interface ProjectAccessPageProps {
 
 const ProjectAccessPage: React.FC<ProjectAccessPageProps> = ({ match }) => {
   const namespace = match.params.ns;
-  const props: RenderProjectAccessPageProps = {
+  const props: React.ComponentProps<typeof RenderProjectAccess> = {
     namespace,
   };
   return (
     <>
       <NamespaceBar />
-      <RenderProjectAccessPage {...props} />
+      <RenderProjectAccess {...props} />
     </>
   );
 };

frontend/packages/dev-console/src/components/project-access/RenderProjectAccessPage.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { Firehose } from '@console/internal/components/utils';
 import { withStartGuide } from '@console/internal/components/start-guide';
 import ProjectListPage from '../projects/ProjectListPage';
-import ProjectAccess, { ProjectAccessProps } from './ProjectAccess';
+import ProjectAccess from './ProjectAccess';
 
 export interface RenderProjectAccessPageProps {
   namespace: string;
 }
 
-const RenderProjectAccessPage: React.FC<RenderProjectAccessPageProps> = ({ namespace }) => {
-  const props: ProjectAccessProps = {
+export const RenderProjectAccessPage: React.FC<RenderProjectAccessPageProps> = ({ namespace }) => {
+  const props: React.ComponentProps<typeof ProjectAccess> = {
     formName: 'project access',
     namespace,
   };

frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccess.spec.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { Formik } from 'formik';
+import { LoadingBox, StatusBox } from '@console/internal/components/utils';
+import ProjectAccess from '../ProjectAccess';
+
+type ProjectAccessProps = React.ComponentProps<typeof ProjectAccess>;
+
+describe('Project Access', () => {
+  it('should show the LoadingBox when role bindings are not loaded, but user has access to role bindings', () => {
+    const projectAccessProps: ProjectAccessProps = {
+      formName: 'project access',
+      namespace: 'abc',
+      roleBindings: {
+        data: [],
+        loaded: false,
+        loadError: {},
+      },
+    };
+    const renderProjectAccess = shallow(<ProjectAccess {...projectAccessProps} />);
+    expect(renderProjectAccess.find(LoadingBox).exists()).toBeTruthy();
+    expect(renderProjectAccess.find(Formik).exists()).toBe(false);
+  });
+
+  it('should show the StatusBox when there is error loading the role bindings', () => {
+    const projectAccessProps: ProjectAccessProps = {
+      formName: 'project access',
+      namespace: 'abc',
+      roleBindings: {
+        data: [],
+        loaded: false,
+        loadError: { error: 'user has no access to role bindigs' },
+      },
+    };
+    const renderProjectAccess = shallow(<ProjectAccess {...projectAccessProps} />);
+    expect(renderProjectAccess.find(StatusBox).exists()).toBeTruthy();
+    expect(renderProjectAccess.find(Formik).exists()).toBe(false);
+  });
+
+  it('should load the Formik Form Component when role bindings loads without any error', () => {
+    const projectAccessProps: ProjectAccessProps = {
+      formName: 'project access',
+      namespace: 'abc',
+      roleBindings: {
+        data: [],
+        loaded: true,
+        loadError: undefined,
+      },
+    };
+    const renderProjectAccess = shallow(<ProjectAccess {...projectAccessProps} />);
+    expect(renderProjectAccess.find(Formik).exists()).toBe(true);
+  });
+});

frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessPage.spec.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { NamespaceBar } from '@console/internal/components/namespace';
+import ProjectAccessPage from '../ProjectAccessPage';
+import RenderProjectAccess from '../RenderProjectAccessPage';
+
+describe('Project Access Page', () => {
+  const projectAccessPageProps: React.ComponentProps<typeof ProjectAccessPage> = {
+    match: {
+      isExact: true,
+      path: `/project-access/ns/:ns`,
+      url: ``,
+      params: {
+        ns: 'default',
+      },
+    },
+  };
+  const wrapper = shallow(<ProjectAccessPage {...projectAccessPageProps} />);
+  it('should have the NamespaceBar Component', () => {
+    expect(wrapper.find(NamespaceBar).exists()).toBeTruthy();
+  });
+  it('should render the RenderProjectAccessPage Component', () => {
+    expect(wrapper.find(RenderProjectAccess).exists()).toBeTruthy();
+  });
+});

frontend/packages/dev-console/src/components/project-access/__tests__/RenderProjectAccessPage.spec.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import ProjectAccess from '../ProjectAccess';
+import ProjectListPage from '../../projects/ProjectListPage';
+import { RenderProjectAccessPage } from '../RenderProjectAccessPage';
+
+type RenderProjectAccessPageProps = React.ComponentProps<typeof RenderProjectAccessPage>;
+
+describe('Render Project Access Page', () => {
+  it('should render Project Access page', () => {
+    const renderProjectAccessPageProps: RenderProjectAccessPageProps = {
+      namespace: 'abc',
+    };
+    const renderProjectAccessPageWrapper = shallow(
+      <RenderProjectAccessPage {...renderProjectAccessPageProps} />,
+    );
+    expect(renderProjectAccessPageWrapper.find(ProjectAccess).exists()).toBe(true);
+  });
+
+  it('should render the project list when a namespace is not selected', () => {
+    const renderProjectAccessPageProps: RenderProjectAccessPageProps = {
+      namespace: '',
+    };
+    const renderProjectAccessPageWrapper = shallow(
+      <RenderProjectAccessPage {...renderProjectAccessPageProps} />,
+    );
+    expect(renderProjectAccessPageWrapper.find(ProjectAccess).exists()).toBe(false);
+    expect(renderProjectAccessPageWrapper.find(ProjectListPage).exists()).toBe(true);
+  });
+});

frontend/packages/dev-console/src/components/project-access/__tests__/project-access-form-submit-utils.spec.ts

@@ -17,7 +17,7 @@ import {
   rolesBindingsToBeRemoved,
   formValues2,
   roleBindingsToBeCreated2,
-} from '../__mocks__/project-access-form-mock';
+} from './project-access-form-data';
 
 describe('Project Access handleSubmit Utils', () => {
   it('should get roles removed by the user', async () => {

frontend/packages/dev-console/src/components/project-access/__tests__/project-access-form-utils.spec.tsx

@@ -5,7 +5,7 @@ import {
   roleBindingsWithRequiredRolesResult,
   roleBindingsWithRequiredRoles,
   roleBindingsWithRequiredAttributes,
-} from '../__mocks__/project-access-form-mock';
+} from './project-access-form-data';
 
 describe('Fetch required roles', () => {
   it('should fetch the only the required rolebindings', async () => {

frontend/packages/dev-console/src/components/project-access/__tests__/project-access-form-validation-utils.spec.ts

@@ -1,6 +1,6 @@
 import { cloneDeep } from 'lodash';
 import { validationSchema } from '../project-access-form-validation-utils';
-import { mockProjectAccessData } from '../__mocks__/project-access-form-mock';
+import { mockProjectAccessData } from './project-access-form-data';
 
 describe('ValidationUtils', () => {
   it('should throw an error if Name field is empty', async () => {