chore: adding mutation binding tests

packages/test-generator/integration-test-templates/cypress/integration/action-binding-spec.ts

@@ -0,0 +1,99 @@
+/*
+  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.
+ */
+
+describe('Workflow', () => {
+  before(() => {
+    cy.visit('http://localhost:3000/action-binding-tests');
+  });
+
+  describe('Mutation Bindings', () => {
+    it('supports value bindings', () => {
+      cy.get('#mutated-value').contains('Fixed Value').should('not.exist');
+      cy.contains('Apply Fixed Property Mutation').click();
+      cy.get('#mutated-value').contains('Fixed Value');
+    });
+
+    it('supports bound prop bindings', () => {
+      cy.get('#mutated-value').contains('Bound Value').should('not.exist');
+      cy.contains('Apply Bound Property Mutation').click();
+      cy.get('#mutated-value').contains('Bound Value');
+    });
+
+    it('supports concat bindings', () => {
+      cy.get('#mutated-value').contains('Concatenated Value').should('not.exist');
+      cy.contains('Apply Concatenated Property Mutation').click();
+      cy.get('#mutated-value').contains('Concatenated Value');
+    });
+
+    it('supports conditional bindings', () => {
+      cy.get('#mutated-value').contains('Conditional Value').should('not.exist');
+      cy.contains('Apply Conditional Property Mutation').click();
+      cy.get('#mutated-value').contains('Conditional Value');
+    });
+
+    // Auth Bindings not yet supported in functional tests
+    it.skip('supports auth bindings', () => {
+      cy.get('#mutated-value').contains('Auth Value').should('not.exist');
+      cy.contains('Apply Auth Property Mutation').click();
+      cy.get('#mutated-value').contains('Auth Value');
+    });
+
+    it('supports state bindings', () => {
+      cy.get('#mutated-value').contains('State Value').should('not.exist');
+      cy.contains('Apply State Property Mutation').click();
+      cy.get('#mutated-value').contains('State Value');
+    });
+  });
+
+  describe('DataStore Bindings', () => {
+    it('supports value bindings', () => {
+      cy.get('#data-store-value').contains('Fixed Value').should('not.exist');
+      cy.contains('Apply Fixed Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('Fixed Value');
+    });
+
+    it('supports bound prop bindings', () => {
+      cy.get('#data-store-value').contains('Bound Value').should('not.exist');
+      cy.contains('Apply Bound Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('Bound Value');
+    });
+
+    it('supports concat bindings', () => {
+      cy.get('#data-store-value').contains('Concatenated Value').should('not.exist');
+      cy.contains('Apply Concatenated Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('Concatenated Value');
+    });
+
+    it('supports conditional bindings', () => {
+      cy.get('#data-store-value').contains('Conditional Value').should('not.exist');
+      cy.contains('Apply Conditional Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('Conditional Value');
+    });
+
+    // Auth Bindings not yet supported in functional tests
+    it.skip('supports auth bindings', () => {
+      cy.get('#data-store-value').contains('Auth Value').should('not.exist');
+      cy.contains('Apply Auth Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('Auth Value');
+    });
+
+    it('supports state bindings', () => {
+      cy.get('#data-store-value').contains('State Value').should('not.exist');
+      cy.contains('Apply State Property DataStoreUpdateItemAction').click();
+      cy.get('#data-store-value').contains('State Value');
+    });
+  });
+});

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

@@ -145,6 +145,8 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'InputMutationOnClick',
   'ConditionalInMutation',
   'TwoWayBindings',
+  'MutationActionBindings',
+  'DataStoreActionBindings',
 ]);
 const EXPECTED_INVALID_INPUT_CASES = new Set([
   'ComponentMissingProperties',

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

@@ -0,0 +1,67 @@
+/*
+  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 { useState, useEffect } from 'react';
+import '@aws-amplify/ui-react/styles.css';
+import { AmplifyProvider } from '@aws-amplify/ui-react';
+import { DataStore } from '@aws-amplify/datastore';
+import { useDataStoreBinding } from '@aws-amplify/ui-react/internal';
+import { User, Listing } from './models';
+// eslint-disable-next-line import/extensions
+import { MutationActionBindings, DataStoreActionBindings } from './ui-components';
+
+export default function ActionBindingTests() {
+  const [isInitialized, setInitialized] = useState(false);
+
+  useEffect(() => {
+    const initializeTestState = async () => {
+      // DataStore.clear() doesn't appear to reliably work in this scenario.
+      indexedDB.deleteDatabase('amplify-datastore');
+      await DataStore.save(new Listing({ title: 'Default Value' }));
+      await DataStore.save(new User({ firstName: 'Johnny', lastName: 'Bound Value', age: 45 }));
+      setInitialized(true);
+    };
+
+    initializeTestState();
+  }, []);
+
+  // Pulling this binding out here, since currently there's a bug in observeQuery, that doesn't let
+  // us define a component which gets observable updates if a criteria is defined
+  // https://github.com/aws-amplify/amplify-js/issues/9573
+  const listing = useDataStoreBinding({
+    type: 'collection',
+    model: Listing,
+  }).items[0];
+
+  if (!isInitialized) {
+    return null;
+  }
+
+  return (
+    <AmplifyProvider>
+      <MutationActionBindings
+        overrides={{
+          MutatedValue: { id: 'mutated-value' },
+        }}
+      />
+      <DataStoreActionBindings
+        listing={listing}
+        overrides={{
+          DataStoreValue: { id: 'data-store-value' },
+        }}
+      />
+    </AmplifyProvider>
+  );
+}

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

@@ -23,6 +23,7 @@ import IconsetTests from './IconsetTests';
 import SnippetTests from './SnippetTests'; // eslint-disable-line import/extensions
 import WorkflowTests from './WorkflowTests';
 import TwoWayBindingTests from './TwoWayBindingTests';
+import ActionBindingTests from './ActionBindingTests';
 
 // use fake endpoint so useDataStoreBinding does not fail
 Amplify.configure({
@@ -58,6 +59,9 @@ const HomePage = () => {
         <li>
           <a href="/two-way-binding-tests">Two Way Binding Tests</a>
         </li>
+        <li>
+          <a href="/action-binding-tests">Action Binding Test</a>
+        </li>
       </ul>
     </div>
   );
@@ -75,6 +79,7 @@ export default function App() {
         <Route path="/snippet-tests" element={<SnippetTests />} />
         <Route path="/workflow-tests" element={<WorkflowTests />} />
         <Route path="/two-way-binding-tests" element={<TwoWayBindingTests />} />
+        <Route path="/action-binding-tests" element={<ActionBindingTests />} />
         <Route path="*" element={<HomePage />} />
       </Routes>
     </Router>