@aws-amplify/amplify-util-uibuilder 1.5.0 → 1.6.0-beta.1

package/src/__tests__/generateComponents.test.ts

@@ -7,8 +7,11 @@ jest.mock('amplify-cli-core');
 const awsMock = aws as any;
 const utilsMock = utils as any;
 
-utilsMock.shouldRenderComponents = jest.fn().mockImplementation(() => true);
-utilsMock.notifyMissingPackages = jest.fn().mockImplementation(() => true);
+utilsMock.shouldRenderComponents = jest.fn().mockReturnValue(true);
+utilsMock.notifyMissingPackages = jest.fn().mockReturnValue(true);
+jest.mock('../commands/utils/featureFlags', () => ({
+  getTransformerVersion: jest.fn().mockImplementation(() => 2),
+}));
 
 describe('can generate components', () => {
   let context: any;
@@ -36,27 +39,53 @@ describe('can generate components', () => {
         },
       ],
     };
-    mockedExport = jest.fn(() => ({
+    mockedExport = jest.fn().mockReturnValue({
       entities: schemas.entities,
-    }));
-    awsMock.AmplifyUIBuilder = jest.fn(() => ({
-      exportComponents: jest.fn(() => ({
+    });
+    awsMock.AmplifyUIBuilder = jest.fn().mockReturnValue({
+      exportComponents: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-      exportThemes: jest.fn(() => ({
+      }),
+      exportThemes: jest.fn().mockReturnValue({
         promise: () => mockedExport(),
-      })),
-    }));
-    utilsMock.generateUiBuilderComponents = jest.fn().mockImplementation(() => schemas.entities);
-    utilsMock.generateUiBuilderThemes = jest.fn().mockImplementation(() => schemas.entities);
-    utilsMock.getAmplifyDataSchema = jest.fn().mockImplementation(() => undefined);
-    utilsMock.generateAmplifyUiBuilderIndexFile = jest.fn().mockImplementation(() => true);
+      }),
+      exportForms: jest.fn().mockReturnValue({
+        promise: () => mockedExport(),
+      }),
+      exportViews: jest.fn().mockReturnValue({
+        promise: () => mockedExport(),
+      }),
+      getMetadata: jest.fn().mockReturnValue({
+        promise: jest.fn().mockReturnValue({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        }),
+      }),
+    });
+    utilsMock.generateUiBuilderComponents = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.generateUiBuilderThemes = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.generateUiBuilderForms = jest.fn().mockReturnValue(schemas.entities);
+    utilsMock.getAmplifyDataSchema = jest.fn().mockReturnValue(undefined);
+    utilsMock.generateAmplifyUiBuilderIndexFile = jest.fn().mockReturnValue(true);
+    utilsMock.generateAmplifyUiBuilderUtilFile = jest.fn().mockReturnValue(true);
   });
 
   it('runs generateComponents', async () => {
     await run(context);
-    expect(mockedExport).toBeCalledTimes(2);
+    expect(mockedExport).toBeCalledTimes(3);
     expect(utilsMock.generateUiBuilderComponents).toBeCalledTimes(1);
     expect(utilsMock.generateUiBuilderThemes).toBeCalledTimes(1);
+    expect(utilsMock.generateUiBuilderForms).toBeCalledTimes(1);
+  });
+
+  it('does not run generateComponents if not Amplify Admin app', async () => {
+    utilsMock.shouldRenderComponents = jest.fn().mockReturnValue(false);
+    await run(context);
+    expect(mockedExport).toBeCalledTimes(0);
+    expect(utilsMock.generateUiBuilderComponents).toBeCalledTimes(0);
+    expect(utilsMock.generateUiBuilderThemes).toBeCalledTimes(0);
+    expect(utilsMock.generateUiBuilderForms).toBeCalledTimes(0);
   });
 });

package/src/__tests__/getAmplifyDataSchema.test.ts

@@ -1,6 +1,7 @@
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
-import { AmplifyCategories, AmplifySupportedService } from 'amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
+import { AmplifyCategories, AmplifySupportedService, FeatureFlags } from 'amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
 import { printer } from 'amplify-prompts'; // eslint-disable-line import/no-extraneous-dependencies
+import { mocked } from 'ts-jest/utils';
 import { AmplifyStudioClient } from '../clients';
 import { getAmplifyDataSchema } from '../commands/utils';
 
@@ -17,14 +18,19 @@ jest.mock('amplify-cli-core', () => ({
         },
       },
     })),
+    getCLIJSON: jest.fn().mockReturnValue({ features: { graphqltransformer: { transformerversion: 1 } } }),
+    setCLIJSON: jest.fn(),
   },
   FeatureFlags: {
-    getBoolean: () => false,
-    getNumber: () => 0,
+    getBoolean: () => true,
+    getNumber: jest.fn(),
+    reloadValues: jest.fn(),
   },
 }));
 jest.mock('amplify-prompts');
 
+const mockedFeatureFlags = mocked(FeatureFlags);
+
 const getMockedSchema = jest.fn(
   // eslint-disable-next-line no-useless-escape, spellcheck/spell-checker
   () => `export const schema = {\n    \"models\": {\n        \"Blog\": {\n            \"name\": \"Blog\",\n            \"fields\": {\n                \"id\": {\n                    \"name\": \"id\",\n                    \"isArray\": false,\n                    \"type\": \"ID\",\n                    \"isRequired\": true,\n                    \"attributes\": []\n                },\n                \"title\": {\n                    \"name\": \"title\",\n                    \"isArray\": false,\n                    \"type\": \"String\",\n                    \"isRequired\": false,\n                    \"attributes\": []\n                },\n                \"content\": {\n                    \"name\": \"content\",\n                    \"isArray\": false,\n                    \"type\": \"String\",\n                    \"isRequired\": false,\n                    \"attributes\": []\n                },\n                \"status\": {\n                    \"name\": \"status\",\n                    \"isArray\": false,\n                    \"type\": {\n                        \"enum\": \"Status\"\n                    },\n                    \"isRequired\": false,\n                    \"attributes\": []\n                },\n                \"createdAt\": {\n                    \"name\": \"createdAt\",\n                    \"isArray\": false,\n                    \"type\": \"AWSDateTime\",\n                    \"isRequired\": false,\n                    \"attributes\": [],\n                    \"isReadOnly\": true\n                },\n                \"updatedAt\": {\n                    \"name\": \"updatedAt\",\n                    \"isArray\": false,\n                    \"type\": \"AWSDateTime\",\n                    \"isRequired\": false,\n                    \"attributes\": [],\n                    \"isReadOnly\": true\n                }\n            },\n            \"syncable\": true,\n            \"pluralName\": \"Blogs\",\n            \"attributes\": [\n                {\n                    \"type\": \"model\",\n                    \"properties\": {}\n                },\n                {\n                    \"type\": \"auth\",\n                    \"properties\": {\n                        \"rules\": [\n                            {\n                                \"allow\": \"public\",\n                                \"operations\": [\n                                    \"create\",\n                                    \"update\",\n                                    \"delete\",\n                                    \"read\"\n                                ]\n                            }\n                        ]\n                    }\n                }\n            ]\n        }\n    },\n    \"enums\": {\n        \"Status\": {\n            \"name\": \"Status\",\n            \"values\": [\n                \"ENABLED\",\n                \"DISABLED\"\n            ]\n        }\n    },\n    \"nonModels\": {},\n    \"version\": \"demo\"\n};`,
@@ -33,6 +39,20 @@ const getMockedSchema = jest.fn(
 describe('should sync amplify backend models', () => {
   let context: any;
 
+  beforeAll(() => {
+    // set metadata response
+    awsMock.AmplifyUIBuilder = jest.fn(() => ({
+      getMetadata: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        })),
+      })),
+    }));
+  });
+
   beforeEach(() => {
     context = {
       exeInfo: {
@@ -56,17 +76,21 @@ describe('should sync amplify backend models', () => {
           envName: 'testEnvName',
         },
       },
+      print: { warning: jest.fn() },
     };
-  });
 
-  it('should getAmplifyBackendModels', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
+    mockedFeatureFlags.getNumber.mockReturnValue(2);
+    getMockedSchema.mockClear();
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
         promise: () => ({
           Models: getMockedSchema(),
         }),
-      })),
-    }));
+      }),
+    });
+  });
+
+  it('should getAmplifyBackendModels', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(getMockedSchema).toBeCalled();
@@ -74,14 +98,22 @@ describe('should sync amplify backend models', () => {
     expect(Object.keys(dataSchema!.models)).toContain('Blog');
   });
 
+  it('should not getAmplifyBackendModels and return undefined if graphQLTransformer version not supported', async () => {
+    mockedFeatureFlags.getNumber.mockReturnValue(1);
+    const client = await AmplifyStudioClient.setClientInfo(context);
+    const dataSchema = await getAmplifyDataSchema(client);
+    expect(getMockedSchema).not.toBeCalled();
+    expect(dataSchema).toBeUndefined();
+  });
+
   it('should handle Models not found', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
-        promise: jest.fn(() => ({
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
+        promise: () => ({
           Models: undefined,
-        })),
-      })),
-    }));
+        }),
+      }),
+    });
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(dataSchema).toBeUndefined();
@@ -89,11 +121,11 @@ describe('should sync amplify backend models', () => {
   });
 
   it('should handle network error', async () => {
-    awsMock.AmplifyBackend = jest.fn(() => ({
-      getBackendAPIModels: jest.fn(() => ({
+    awsMock.AmplifyBackend = jest.fn().mockReturnValue({
+      getBackendAPIModels: jest.fn().mockReturnValue({
         promise: jest.fn().mockRejectedValue(new Error('Network Error')),
-      })),
-    }));
+      }),
+    });
     const client = await AmplifyStudioClient.setClientInfo(context);
     const dataSchema = await getAmplifyDataSchema(client);
     expect(dataSchema).toBeUndefined();

package/src/__tests__/shouldRenderComponents.test.ts

@@ -1,13 +1,60 @@
-import { $TSContext } from 'amplify-cli-core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  $TSContext, AmplifyCategories, AmplifySupportedService, CloudformationProviderFacade,
+} from 'amplify-cli-core';
+import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import { shouldRenderComponents } from '../commands/utils/shouldRenderComponents';
 
+const awsMock = aws as any;
+
+jest.mock('amplify-cli-core', () => ({
+  ...jest.requireActual('amplify-cli-core'),
+  stateManager: {
+    getMeta: jest.fn(() => ({
+      [AmplifyCategories.API]: {
+        MyResourceName: {
+          service: AmplifySupportedService.APPSYNC,
+        },
+      },
+    })),
+    // eslint-disable-next-line spellcheck/spell-checker
+    getCLIJSON: jest.fn().mockReturnValue({ features: { graphqltransformer: { transformerversion: 2 } } }),
+    setCLIJSON: jest.fn(),
+  },
+  FeatureFlags: {
+    getBoolean: () => true,
+    getNumber: jest.fn().mockReturnValue(2),
+    reloadValues: jest.fn(),
+  },
+}));
+CloudformationProviderFacade.isAmplifyAdminApp = jest.fn().mockReturnValue({
+  isAdminApp: true,
+});
+
 describe('should render components', () => {
   let context: $TSContext | any;
-  beforeEach(() => {
+
+  beforeAll(async () => {
+    // set metadata response
+    awsMock.AmplifyUIBuilder = jest.fn(() => ({
+      getMetadata: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        })),
+      })),
+    }));
     context = {
+      amplify: {
+        invokePluginMethod: () => ({}),
+      },
       input: {
         options: {
           'no-codegen': false,
+          appId: 'testAppId',
+          envName: 'testEnvName',
         },
       },
       exeInfo: {
@@ -35,12 +82,12 @@ describe('should render components', () => {
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);
   });
-  it("doesn't work if the frontend is not javascript", async () => {
+  it('should return false if frontend is ios', async () => {
     context.exeInfo.projectConfig.frontend = 'ios';
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);
   });
-  it("doesn't work if the frontend is not javascript", async () => {
+  it('should return false if frontend is vue', async () => {
     context.exeInfo.projectConfig.javascript.framework = 'vue';
     const shouldIt = await shouldRenderComponents(context);
     expect(shouldIt).toBe(false);

package/src/__tests__/syncAmplifyUiComponents.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable spellcheck/spell-checker */
 import { AmplifyCategories, AmplifySupportedService, stateManager } from 'amplify-cli-core'; // eslint-disable-line import/no-extraneous-dependencies
 import aws from 'aws-sdk'; // eslint-disable-line import/no-extraneous-dependencies
 import {
@@ -6,9 +7,11 @@ import {
   getEnvName,
   getAppId,
   resolveAppId,
+  generateUiBuilderForms,
 } from '../commands/utils';
 import { AmplifyStudioClient } from '../clients';
 import * as createUiBuilderComponentDependency from '../commands/utils/codegenResources';
+import { exampleSchema } from './utils';
 
 jest.mock('amplify-cli-core', () => ({
   ...jest.requireActual('amplify-cli-core'),
@@ -17,6 +20,9 @@ jest.mock('amplify-cli-core', () => ({
     getNumber: () => 0,
   },
 }));
+jest.mock('../commands/utils/featureFlags', () => ({
+  getTransformerVersion: jest.fn().mockReturnValue(2),
+}));
 
 const awsMock = aws as any;
 const stateManagerMock = stateManager as any;
@@ -64,12 +70,12 @@ describe('should sync amplify ui builder components', () => {
         promise: jest.fn(() => ({
           entities: [
             {
-              appId: 'd37nrm8rzt3oek',
+              appId: 'd37nrm8rzt3oek', // eslint-disable-line spellcheck/spell-checker
               bindingProperties: {},
               componentType: 'Box',
               environmentName: 'staging',
-              id: 's-s4mU579Ycf6JGHwhqT',
-              name: 'aawwdd',
+              id: 's-s4mU579Ycf6JGHwhqT', // eslint-disable-line spellcheck/spell-checker
+              name: 'aawwdd', // eslint-disable-line spellcheck/spell-checker
               overrides: {},
               properties: {},
               variants: [],
@@ -82,10 +88,62 @@ describe('should sync amplify ui builder components', () => {
           entities: [{}],
         })),
       })),
+      exportForms: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [{
+            name: 'BasicFormCreate',
+            formActionType: 'create',
+            dataType: {
+              dataSourceType: 'Custom',
+              dataTypeName: 'Post',
+            },
+            fields: {
+              name: {
+                inputType: {
+                  required: true,
+                  type: 'TextField',
+                  name: 'name',
+                  defaultValue: 'John Doe',
+                },
+                label: 'name',
+              },
+            },
+            sectionalElements: {},
+            style: {},
+          }],
+        })),
+      })),
+      exportViews: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          entities: [{
+            appId: '23342',
+            dataSource: { type: 'Custom' },
+            environmentName: 'staging',
+            id: 'id',
+            name: 'ProductTable',
+            // TODO: replace with export when Codegen updated
+            schemaVersion: '1.0',
+            style: {},
+            viewConfiguration: {
+              type: 'Table',
+            },
+          }],
+        })),
+      })),
+      getMetadata: jest.fn(() => ({
+        promise: jest.fn(() => ({
+          features: {
+            autoGenerateForms: 'true',
+            autoGenerateViews: 'true',
+          },
+        })),
+      })),
     }));
 
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn();
     createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn();
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn();
+    createUiBuilderComponentDependencyMock.createUiBuilderView = jest.fn();
   });
 
   it('pulls components from aws-sdk and passes them to createUiBuilderComponent', () => {
@@ -94,14 +152,14 @@ describe('should sync amplify ui builder components', () => {
 
   it('does not throw an error when createUiBuilderComponent fails', () => {
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!');
+      throw new Error('ahhh!'); // eslint-disable-line spellcheck/spell-checker
     });
     expect(async () => generateUiBuilderComponents(context, [])).not.toThrow();
   });
 
   it('does not throw an error when createUiBuilderThemes fails', () => {
     createUiBuilderComponentDependencyMock.createUiBuilderComponent = jest.fn(() => {
-      throw new Error('ahhh!');
+      throw new Error('ahhh!'); // eslint-disable-line spellcheck/spell-checker
     });
     expect(async () => generateUiBuilderThemes(context, [])).not.toThrow();
   });
@@ -113,19 +171,30 @@ describe('should sync amplify ui builder components', () => {
     expect(Object.keys(client)).toEqual(expect.arrayContaining([
       'listComponents',
       'listThemes',
+      'listForms',
       'getModels',
+      'loadMetadata',
       'createComponent',
     ]));
+    expect(client.metadata).toEqual(expect.objectContaining({
+      autoGenerateForms: true,
+      autoGenerateViews: true,
+    }));
+  });
+  it('can list components', async () => {
+    const client = await AmplifyStudioClient.setClientInfo(context);
+    const components = await client.listComponents();
+    expect(components.entities).toHaveLength(1);
   });
   it('can list themes', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
     const themes = await client.listThemes();
     expect(themes.entities).toHaveLength(1);
   });
-  it('can listUiBuilderComponents', async () => {
+  it('can list forms', async () => {
     const client = await AmplifyStudioClient.setClientInfo(context);
-    const components = await client.listThemes();
-    expect(components.entities).toHaveLength(1);
+    const forms = await client.listForms();
+    expect(forms.entities).toHaveLength(1);
   });
   it('can getAppId', async () => {
     const appId = getAppId(context);
@@ -169,4 +238,53 @@ describe('should sync amplify ui builder components', () => {
     const themes = generateUiBuilderThemes(context, [{}, {}]);
     expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
   });
+  it('can generate ui builder default theme when no themes are passed', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => ({}));
+    const themes = generateUiBuilderThemes(context, []);
+    expect(themes.every(theme => theme.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder default theme when no themes are passed', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderTheme = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const themes = generateUiBuilderThemes(context, []);
+    expect(themes.every(theme => theme.resultType === 'FAILURE')).toBeTruthy();
+  });
+  it('can generate ui builder forms', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [{}, {}]);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+  });
+  it('can handle failed generation generate ui builder forms', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => {
+      throw new Error('ahh!');
+    });
+    const forms = generateUiBuilderForms(context, [{}, {}]);
+    expect(forms.every(form => form.resultType === 'FAILURE')).toBeTruthy();
+  });
+  it('can generate uibuilder forms from data schema if autogen true', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [], exampleSchema, true);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+    // create & update form for author model
+    expect(forms.length).toEqual(2);
+  });
+
+  it('should not autogen forms for join tables or unsupported models', async () => {
+    expect(Object.keys(exampleSchema.models)).toStrictEqual(['Author', 'JoinTable', 'EmptyModel']);
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      (_ctx, schema, _dataSchema) => ({ name: schema.dataType.dataTypeName }),
+    );
+    const forms = generateUiBuilderForms(context, [], exampleSchema, true);
+    expect(forms.every(form => form.resultType === 'SUCCESS')).toBeTruthy();
+    // only create & update form for author model
+    expect(forms.map(f => (f.schema as any).name)).toStrictEqual(['Author', 'Author']);
+  });
+
+  it('does not generate uibuilder forms from data schema if autogen false', async () => {
+    createUiBuilderComponentDependencyMock.createUiBuilderForm = jest.fn().mockImplementation(() => ({}));
+    const forms = generateUiBuilderForms(context, [], exampleSchema, false);
+    expect(forms.length).toEqual(0);
+  });
 });

package/src/__tests__/utils.ts

@@ -0,0 +1,70 @@
+import type { GenericDataSchema } from '@aws-amplify/codegen-ui';
+
+export const exampleSchema: GenericDataSchema = {
+  dataSourceType: 'DataStore',
+  models: {
+    Author: {
+      fields: {
+        id: {
+          dataType: 'ID',
+          required: true,
+          readOnly: false,
+          isArray: false,
+        },
+        name: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        profileImageSrc: {
+          dataType: 'AWSURL',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        description: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: false,
+        },
+        books: {
+          dataType: 'String',
+          required: false,
+          readOnly: false,
+          isArray: true,
+        },
+        createdAt: {
+          dataType: 'AWSDateTime',
+          required: false,
+          readOnly: true,
+          isArray: false,
+        },
+        updatedAt: {
+          dataType: 'AWSDateTime',
+          required: false,
+          readOnly: true,
+          isArray: false,
+        },
+      },
+    },
+    JoinTable: {
+      fields: {
+        id: {
+          dataType: 'ID',
+          required: true,
+          readOnly: false,
+          isArray: false,
+        },
+      },
+      isJoinTable: true
+    },
+    EmptyModel: {
+      fields: {
+      },
+    },
+  },
+  enums: {}, // eslint-disable-line spellcheck/spell-checker
+  nonModels: {},
+};