[EPMDEDP-12391]: feat: Update Create/Edit widget snapshot tests

Change-Id: Ied3de45a13fa1f3db411422143058541b8cb51f7
epam · Aug 9, 2023 · f52b4b0 · f52b4b0
1 parent 72ee99f
commit f52b4b0
Show file tree

Hide file tree

Showing 70 changed files with 8,634 additions and 47 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,13 +1,13 @@
 module.exports = {
     coverageDirectory: './analysis/coverage/',
     moduleNameMapper: {
-        '^@kinvolk/headlamp-plugin/lib$': '<rootDir>/tests/headlamp-plugin/lib/index.ts',
-        '^@kinvolk/headlamp-plugin/lib/K8s/(.*)': ['<rootDir>/tests/headlamp-plugin/lib/k8s/$1'],
+        '^@kinvolk/headlamp-plugin/lib$': '<rootDir>/mocks/headlamp-plugin/lib/index.ts',
+        '^@kinvolk/headlamp-plugin/lib/K8s/(.*)': ['<rootDir>/mocks/headlamp-plugin/lib/k8s/$1'],
         '^@kinvolk/headlamp-plugin/lib/CommonComponents': [
-            '<rootDir>/tests/headlamp-plugin/components/common/index.tsx',
+            '<rootDir>/mocks/headlamp-plugin/components/common/index.tsx',
         ],
         '^@kinvolk/headlamp-plugin/lib/components/common': [
-            '<rootDir>/tests/headlamp-plugin/components/common/index.tsx',
+            '<rootDir>/mocks/headlamp-plugin/components/common/index.tsx',
         ],
     },
 };
diff --git a/mocks/headlamp-plugin/README.md b/mocks/headlamp-plugin/README.md
@@ -0,0 +1 @@
+This folder contains Headlamp's components and logic mocks for testing.
diff --git a/...adlamp-plugin/components/common/index.tsx → ...adlamp-plugin/components/common/index.tsx b/...adlamp-plugin/components/common/index.tsx → ...adlamp-plugin/components/common/index.tsx
@@ -6,6 +6,4 @@ export const SectionBox: React.FC = ({ children }): ReactElement => {
 
 export const SectionFilterHeader = (): ReactElement => null;
 
-export const SimpleTable = (): ReactElement => null;
-
 export const EditorDialog = (): ReactElement => null;
diff --git a/tests/headlamp-plugin/lib/K8s/apiProxy.ts → mocks/headlamp-plugin/lib/K8s/apiProxy.ts b/tests/headlamp-plugin/lib/K8s/apiProxy.ts → mocks/headlamp-plugin/lib/K8s/apiProxy.ts
diff --git a/tests/headlamp-plugin/lib/K8s/cluster.ts → mocks/headlamp-plugin/lib/K8s/cluster.ts b/tests/headlamp-plugin/lib/K8s/cluster.ts → mocks/headlamp-plugin/lib/K8s/cluster.ts
diff --git a/tests/headlamp-plugin/lib/index.ts → mocks/headlamp-plugin/lib/index.ts b/tests/headlamp-plugin/lib/index.ts → mocks/headlamp-plugin/lib/index.ts
@@ -8,18 +8,18 @@ const Utils = {
 };
 
 class Secret {
-    static default = {
-        apiEndpoint: {
-            post: () => {},
-            delete: () => {},
-        },
+    apiEndpoint: {
+        post: () => {};
+        delete: () => {};
     };
 }
 
 const K8s = {
     ApiProxy,
     cluster,
-    secret: Secret,
+    secret: {
+        default: Secret,
+    },
 };
 
 export { ApiProxy, K8s, Utils };
diff --git a/mocks/wrappers/default/index.tsx b/mocks/wrappers/default/index.tsx
@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { SnackbarProvider } from 'notistack';
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+export const TestWrapper: React.FC = ({ children }) => {
+    const queryClient = new QueryClient();
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <SnackbarProvider>{children}</SnackbarProvider>
+        </QueryClientProvider>
+    );
+};
diff --git a/src/k8s/Application/utils/editApplicationInstance/index.test.ts b/src/k8s/Application/utils/editApplicationInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/k8s/EDPCDPipeline/utils/editCDPipelineInstance/index.test.ts b/src/k8s/EDPCDPipeline/utils/editCDPipelineInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/k8s/EDPCDPipelineStage/utils/editCDPipelineStageInstance/index.test.ts b/src/k8s/EDPCDPipelineStage/utils/editCDPipelineStageInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/k8s/EDPCodebase/hooks/useAutotestsWithBranches.ts b/src/k8s/EDPCodebase/hooks/useAutotestsWithBranches.ts
@@ -16,6 +16,9 @@ export const useAutotestsWithBranches = (): AutotestWithBranchesOption[] => {
         },
         options: {
             onSuccess: async data => {
+                if (!data) {
+                    return;
+                }
                 const autotestsWithBranches = await Promise.all(
                     data?.items.map(async ({ metadata: { name } }) => {
                         const { items: autotestsBranches } =

diff --git a/src/k8s/EDPCodebase/utils/editCodebaseInstance/index.test.ts b/src/k8s/EDPCodebase/utils/editCodebaseInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/k8s/EDPCodebaseBranch/utils/editCodebaseBranchInstance/index.test.ts b/src/k8s/EDPCodebaseBranch/utils/editCodebaseBranchInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/k8s/PipelineRun/utils/createAutotestRunnerPipelineRunInstance/index.test.ts b/src/k8s/PipelineRun/utils/createAutotestRunnerPipelineRunInstance/index.test.ts
@@ -1,2 +1,2 @@
-// Todo: write new tests
+// Todo: write new mocks
 test('true', () => {});
diff --git a/src/pages/edp-stage-details/components/Applications/hooks/useColumns.tsx b/src/pages/edp-stage-details/components/Applications/hooks/useColumns.tsx
@@ -59,6 +59,7 @@ export const useColumns = (
                         <StatusIcon status={CUSTOM_RESOURCE_STATUSES.UNKNOWN} />
                     ),
                 width: '5%',
+                textAlign: 'center',
             },
             {
                 id: 'sync',
@@ -74,6 +75,7 @@ export const useColumns = (
                         <StatusIcon status={CUSTOM_RESOURCE_STATUSES.UNKNOWN} />
                     ),
                 width: '5%',
+                textAlign: 'center',
             },
             {
                 id: 'application',

diff --git a/src/providers/Form/components/FormControlLabelWithTooltip/index.tsx b/src/providers/Form/components/FormControlLabelWithTooltip/index.tsx
@@ -20,7 +20,7 @@ export const FormControlLabelWithTooltip = ({ label, title }: FormControlLabelWi
                 </Tooltip>
             </Render>
             <Render condition={!title}>
-                <Box style={{ height: rem(25) }} />
+                <Box style={{ height: rem(20) }} />
             </Render>
         </span>
     );

diff --git a/src/providers/Form/components/FormControlLabelWithTooltip/styles.ts b/src/providers/Form/components/FormControlLabelWithTooltip/styles.ts
@@ -10,7 +10,7 @@ export const useStyles = makeStyles((theme: DefaultTheme) => ({
 
         '& svg': {
             pointerEvents: 'auto',
-            marginBottom: rem(5),
+            marginBottom: rem(2),
         },
     },
     label: {

diff --git a/src/providers/Form/components/FormSelect/index.tsx b/src/providers/Form/components/FormSelect/index.tsx
@@ -20,6 +20,7 @@ export const FormSelect = React.forwardRef(
             options = [],
             errors,
             placeholder,
+            showLabelPlaceholder = false,
             disabled,
             ...props
         }: FormSelectProps,
@@ -47,9 +48,11 @@ export const FormSelect = React.forwardRef(
             <Grid container spacing={1}>
                 <Grid item xs={12} style={{ display: 'flex' }}>
                     <Grid container spacing={1}>
-                        <Grid item xs={12}>
-                            <FormControlLabelWithTooltip label={label} title={title} />
-                        </Grid>
+                        <Render condition={!!label || showLabelPlaceholder}>
+                            <Grid item xs={12}>
+                                <FormControlLabelWithTooltip label={label} title={title} />
+                            </Grid>
+                        </Render>
                         <Grid item xs={12} style={{ display: 'flex', alignItems: 'flex-end' }}>
                             <FormControl fullWidth>
                                 <Controller

diff --git a/src/providers/Form/components/FormSelect/types.ts b/src/providers/Form/components/FormSelect/types.ts
@@ -5,12 +5,13 @@ import { SelectOption } from '../../../../types/forms';
 
 export interface FormSelectProps {
     name: string;
+    errors: FieldErrors;
+    options: SelectOption[];
+    control: Control<any>;
     label?: string;
     title?: string | React.ReactElement;
     placeholder?: string;
-    control: Control<any>;
+    showLabelPlaceholder?: boolean;
     defaultValue?: string;
-    errors: FieldErrors;
-    options: SelectOption[];
     disabled?: boolean;
 }
diff --git a/src/providers/Form/components/FormTextField/index.tsx b/src/providers/Form/components/FormTextField/index.tsx
@@ -17,6 +17,7 @@ export const FormTextField = React.forwardRef(
             errors,
             placeholder,
             disabled = false,
+            showLabelPlaceholder = false,
             InputProps,
             TextFieldProps,
             ...props
@@ -29,9 +30,11 @@ export const FormTextField = React.forwardRef(
             <Grid container spacing={1}>
                 <Grid item xs={12} style={{ display: 'flex' }}>
                     <Grid container spacing={1}>
-                        <Grid item xs={12}>
-                            <FormControlLabelWithTooltip label={label} title={title} />
-                        </Grid>
+                        <Render condition={!!label || showLabelPlaceholder}>
+                            <Grid item xs={12}>
+                                <FormControlLabelWithTooltip label={label} title={title} />
+                            </Grid>
+                        </Render>
                         <Grid item xs={12} style={{ display: 'flex', alignItems: 'flex-end' }}>
                             <FormControl fullWidth>
                                 <Controller

diff --git a/src/providers/Form/components/FormTextField/types.ts b/src/providers/Form/components/FormTextField/types.ts
@@ -5,13 +5,14 @@ import { FieldErrors } from 'react-hook-form/dist/types/errors';
 
 export interface FormTextFieldProps {
     name: string;
+    control: Control<any>;
+    errors: FieldErrors;
     label?: string;
     title?: string;
-    control: Control<any>;
     defaultValue?: string;
     placeholder?: string;
     disabled?: boolean;
-    errors: FieldErrors;
     InputProps?: InputProps;
+    showLabelPlaceholder?: boolean;
     TextFieldProps?: StandardTextFieldProps;
 }