chore: add integ tests for storage field

packages/test-generator/integration-test-templates/cypress/e2e/form/DSUserProfile-spec.cy.ts

@@ -0,0 +1,130 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+
+import { getStorageManagerByLabel, getInputByLabel } from '../../utils/form';
+
+describe.only('FormTests - DSUserProfile', () => {
+  const firstFile = 'amplify-logo.jpg';
+  const secondFile = 'amplify-logo.svg';
+
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/form-tests/DSUserProfile');
+  });
+
+  specify('Should be able to add and remove files on storage field', () => {
+    cy.get('#CreateUserProfile > form').within(() => {
+      getInputByLabel('Name').type('John Doe');
+      getInputByLabel('Headline').type('Hello World');
+
+      getStorageManagerByLabel('Image').within(() => {
+        cy.get('input[type=file]').selectFile(`cypress/fixtures/${firstFile}`, { action: 'select', force: true });
+        // File is found in the selected list
+        cy.get('div.amplify-storagemanager__file__list > div.amplify-storagemanager__file').within(() => {
+          // Remove file from selected list
+          cy.contains(`Remove file ${firstFile}`).click();
+        });
+        // Removed file should not exist
+        cy.get('div.amplify-storagemanager__file__list > div.amplify-storagemanager__file').should('not.exist');
+      });
+    });
+  });
+
+  specify('Should render error when uploading number of files that exceed maxFileCount limit', () => {
+    cy.get('#CreateUserProfile > form').within(() => {
+      getStorageManagerByLabel('Image').within(() => {
+        // `image` field configured with maxFileCount = 1
+        cy.get('input[type=file]').selectFile([`cypress/fixtures/${firstFile}`, `cypress/fixtures/${secondFile}`], {
+          action: 'select',
+          force: true,
+        });
+
+        cy.contains(/Cannot choose more than/).should('exist');
+      });
+    });
+  });
+
+  specify('Should be able to select multiple files on supported storage fields', () => {
+    cy.get('#CreateUserProfile > form').within(() => {
+      getStorageManagerByLabel('Additional images').within(() => {
+        // `additionalImages` field configured with maxFileCount = 2
+        cy.get('input[type=file]').selectFile([`cypress/fixtures/${firstFile}`, `cypress/fixtures/${secondFile}`], {
+          action: 'select',
+          force: true,
+        });
+
+        cy.contains(/Cannot choose more than/).should('not.exist');
+      });
+    });
+  });
+
+  specify('Should load with existing user profile and be able to unlink existing files from record', () => {
+    // Check initial data
+    cy.get('#UpdateUserProfile > #data-preview').within(() => {
+      cy.get('p')
+        .contains('name')
+        .contains(/Jane Doe/);
+      cy.get('p')
+        .contains('headline')
+        .contains(/Hello World/);
+      cy.get('p')
+        .contains('image')
+        .contains(/"file1.jpg"/);
+      cy.get('p')
+        .contains('additionalImages')
+        .contains(/["file2.jpg","file3.png"]/);
+    });
+
+    cy.get('#UpdateUserProfile > form').within(() => {
+      getInputByLabel('Name').should('have.value', 'Jane Doe');
+      getInputByLabel('Headline').should('have.value', 'Hello World');
+
+      getStorageManagerByLabel('Image').within(() => {
+        // There should be a file associated with the user on load
+        cy.get('div.amplify-storagemanager__file__list > div.amplify-storagemanager__file').contains(/file1.jpg/);
+      });
+
+      getStorageManagerByLabel('Additional images').within(() => {
+        // There should be multiple file associated with the user on load
+        cy.get('div.amplify-storagemanager__file__list > div.amplify-storagemanager__file')
+          .should('have.length', 2)
+          .first()
+          .within(() => {
+            // remove the first file (file2.jpg)
+            cy.contains(/file2.jpg/);
+            cy.contains(/Remove file/).click();
+          });
+      });
+
+      cy.contains(/Submit/).click();
+    });
+
+    // Check data send onSubmit
+    cy.get('#UpdateUserProfile > #data-preview').within(() => {
+      cy.get('p')
+        .contains('name')
+        .contains(/Jane Doe/);
+      cy.get('p')
+        .contains('headline')
+        .contains(/Hello World/);
+      cy.get('p')
+        .contains('image')
+        .contains(/"file1.jpg"/);
+      cy.get('p')
+        .contains('additionalImages')
+        .contains(/["file3.png"]/);
+    });
+  });
+});

packages/test-generator/integration-test-templates/cypress/e2e/generate-spec.cy.ts

@@ -43,6 +43,8 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'DataStoreFormUpdateCompositeDog',
   'DataStoreFormUpdateCompositeDogScalar',
   'DataStoreFormCreateCompositeDog',
+  'DataStoreFormCreateUserProfile',
+  'DataStoreFormUpdateUserProfile',
   'DataStoreFormUpdateCompositeToy',
   'DataStoreFormUpdateModelWithVariableCollisions',
   'DataStoreFormUpdateCar',

packages/test-generator/integration-test-templates/cypress/utils/form.ts

@@ -56,3 +56,12 @@ export const typeInAutocomplete = (content: string) => {
       cy.get('input').type(content);
     });
 };
+
+export const getStorageManagerByLabel = (label) => {
+  return cy
+    .contains('label', label)
+    .parent()
+    .within(() => {
+      cy.get('div.amplify-storagemanager');
+    });
+};

packages/test-generator/integration-test-templates/src/App.tsx

@@ -25,12 +25,13 @@ import WorkflowTests from './WorkflowTests';
 import TwoWayBindingTests from './TwoWayBindingTests';
 import ActionBindingTests from './ActionBindingTests';
 import FormTests from './FormTests';
-import { DATA_STORE_MOCK_EXPORTS, AUTH_MOCK_EXPORTS } from './mock-utils';
+import { DATA_STORE_MOCK_EXPORTS, AUTH_MOCK_EXPORTS, STORAGE_MOCK_EXPORTS } from './mock-utils';
 
 // use fake endpoint so useDataStoreBinding does not fail
 Amplify.configure({
   ...DATA_STORE_MOCK_EXPORTS,
   ...AUTH_MOCK_EXPORTS,
+  ...STORAGE_MOCK_EXPORTS,
 });
 
 const HomePage = () => {

packages/test-generator/integration-test-templates/src/FormTests/DSUserProfile.tsx

@@ -0,0 +1,83 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+import '@aws-amplify/ui-react/styles.css';
+import { AmplifyProvider, View, Heading, Text } from '@aws-amplify/ui-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { DataStore } from '@aws-amplify/datastore';
+import { DataStoreFormCreateUserProfile, DataStoreFormUpdateUserProfile } from '../ui-components'; // eslint-disable-line import/extensions, max-len
+import { UserProfile } from '../models';
+
+const initializeTestData = async () => {
+  const existingProfile = await DataStore.save(
+    new UserProfile({
+      name: 'Jane Doe',
+      image: 'file1.jpg',
+      additionalImages: ['file2.jpg', 'file3.png'],
+      headline: 'Hello World',
+    }),
+  );
+  return { existingProfile };
+};
+
+export default function () {
+  const [DataStoreCreateUserProfileRecord, setDataStoreCreateUserProfileRecord] = useState<Partial<UserProfile>>({});
+  const [isInitialized, setInitialized] = useState(false);
+  const initializeStarted = useRef(false);
+
+  useEffect(() => {
+    const initializeTestState = async () => {
+      if (initializeStarted.current) {
+        return;
+      }
+      // DataStore.clear() doesn't appear to reliably work in this scenario.
+      indexedDB.deleteDatabase('amplify-datastore');
+      const { existingProfile } = await initializeTestData();
+      setDataStoreCreateUserProfileRecord(existingProfile);
+      setInitialized(true);
+    };
+
+    initializeTestState();
+    initializeStarted.current = true;
+  }, []);
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  return (
+    <AmplifyProvider>
+      <Heading>UserProfile</Heading>
+      <View id="CreateUserProfile">
+        <DataStoreFormCreateUserProfile />
+      </View>
+      <View id="UpdateUserProfile">
+        <View id="data-preview">
+          {DataStoreCreateUserProfileRecord &&
+            Object.entries(DataStoreCreateUserProfileRecord).map(([prop, value]) => {
+              return <Text>{`${prop}: ${JSON.stringify(value)}`}</Text>;
+            })}
+        </View>
+        <DataStoreFormUpdateUserProfile
+          id={DataStoreCreateUserProfileRecord?.id}
+          onSubmit={(r) => {
+            setDataStoreCreateUserProfileRecord(r);
+            return r;
+          }}
+        />
+      </View>
+    </AmplifyProvider>
+  );
+}

packages/test-generator/integration-test-templates/src/FormTests/index.tsx

@@ -26,6 +26,7 @@ import DSBidirectionalToy from './DSBidirectionalToy';
 import DSModelWithVariableCollisions from './DSModelWithVariableCollisions';
 import DSCar from './DSCar';
 import DSDealership from './DSDealership';
+import DSUserProfile from './DSUserProfile';
 
 export default function FormTests() {
   const { subject } = useParams();
@@ -55,6 +56,8 @@ export default function FormTests() {
       return <DSCar />;
     case 'DSDealership':
       return <DSDealership />;
+    case 'DSUserProfile':
+      return <DSUserProfile />;
 
     default:
       return (
@@ -97,6 +100,9 @@ export default function FormTests() {
             <li>
               <Link to="DSDealership">DSDealership</Link>
             </li>
+            <li>
+              <Link to="DSUserProfile">DSUserProfile</Link>
+            </li>
           </ul>
         </div>
       );

packages/test-generator/integration-test-templates/src/mock-utils.ts

@@ -31,6 +31,12 @@ export const AUTH_MOCK_EXPORTS = {
   aws_user_pools_web_client_id: TEST_POOL_NAME,
 };
 
+export const STORAGE_MOCK_EXPORTS = {
+  aws_user_files_s3_bucket: 'bucket',
+  aws_user_files_s3_bucket_region: TEST_REGION,
+  aws_user_files_s3_dangerously_connect_to_http_endpoint_for_testing: true,
+};
+
 export const initializeAuthMockData = (authAttributes: Record<string, string>) => {
   const buildAuthKey = (key: string) => `CognitoIdentityServiceProvider.${TEST_POOL_NAME}.${TEST_USER_NAME}.${key}`;
   const generateJwt = (tokenData: any) => `.${Buffer.from(JSON.stringify(tokenData), 'utf8').toString('base64')}`;

packages/test-generator/integration-test-templates/src/models/index.js

@@ -32,6 +32,7 @@ const City = {
 const {
   UserPreference,
   User,
+  UserProfile,
   Listing,
   ComplexModel,
   Class,
@@ -63,6 +64,7 @@ const {
 export {
   UserPreference,
   User,
+  UserProfile,
   Listing,
   ComplexModel,
   Class,