feat: adding form with actions example

aws-amplify · Feb 25, 2022 · b11929a · b11929a
1 parent 18c2006
commit b11929a
Show file tree

Hide file tree

Showing 6 changed files with 228 additions and 8 deletions.
diff --git a/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts b/packages/test-generator/integration-test-templates/cypress/integration/generate-spec.ts
@@ -142,9 +142,9 @@ const EXPECTED_SUCCESSFUL_CASES = new Set([
   'DataStoreActions',
   'FormWithState',
   'InternalMutation',
-  'TwoWayBindings',
   'InputMutationOnClick',
   'ConditionalInMutation',
+  'TwoWayBindings',
 ]);
 const EXPECTED_INVALID_INPUT_CASES = new Set([
   'ComponentMissingProperties',

diff --git a/...ges/test-generator/integration-test-templates/cypress/integration/two-way-binding-spec.ts b/...ges/test-generator/integration-test-templates/cypress/integration/two-way-binding-spec.ts
@@ -0,0 +1,206 @@
+/*
+  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/two-way-binding-tests');
+  });
+
+  describe('CheckboxField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#checkbox-field-section').within(() => {
+        cy.get('.amplify-checkbox__button').invoke('attr', 'data-checked').should('eq', 'false');
+        cy.contains('Subscribe').click();
+        cy.get('.amplify-checkbox__button').invoke('attr', 'data-checked').should('eq', 'true');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#checkbox-field-section').within(() => {
+        cy.get('.amplify-checkbox__button').invoke('attr', 'data-checked').should('eq', 'true');
+        cy.contains('Set CheckboxFieldValue').click();
+        cy.get('.amplify-checkbox__button').invoke('attr', 'data-checked').should('eq', 'false');
+      });
+    });
+  });
+
+  describe('PasswordField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#password-field-section').within(() => {
+        cy.contains('Entered Value').should('not.exist');
+        cy.get('input').type('Entered Value');
+        cy.contains('Entered Value');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#password-field-section').within(() => {
+        cy.contains('admin123').should('not.exist');
+        cy.contains('Set PasswordFieldValue').click();
+        cy.contains('admin123');
+      });
+    });
+  });
+
+  describe('PhoneNumberField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#phone-number-field-section').within(() => {
+        cy.contains('Entered Value').should('not.exist');
+        cy.get('input').type('Entered Value');
+        cy.contains('Entered Value');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#phone-number-field-section').within(() => {
+        cy.contains('8675309').should('not.exist');
+        cy.contains('Set PhoneNumberFieldValue').click();
+        cy.contains('8675309');
+      });
+    });
+  });
+
+  describe('RadioGroupField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#radio-group-field-section').within(() => {
+        cy.get('#radio-group-field-value').contains('css').should('not.exist');
+        cy.contains('css').click();
+        cy.get('#radio-group-field-value').contains('css');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#radio-group-field-section').within(() => {
+        cy.get('#radio-group-field-value').contains('javascript').should('not.exist');
+        cy.contains('Set RadioGroupField').click();
+        cy.get('#radio-group-field-value').contains('javascript');
+      });
+    });
+  });
+
+  describe('SearchField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#search-field-section').within(() => {
+        cy.contains('Entered Value').should('not.exist');
+        cy.get('input').type('Entered Value');
+        cy.contains('Entered Value');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#search-field-section').within(() => {
+        cy.contains('UI Docs').should('not.exist');
+        cy.contains('Set SearchFieldValue').click();
+        cy.contains('UI Docs');
+      });
+    });
+  });
+
+  describe('SelectField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#select-field-section').within(() => {
+        cy.contains('banana').should('not.exist');
+        cy.get('select').select('banana');
+        cy.contains('banana');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#select-field-section').within(() => {
+        cy.contains('orange').should('not.exist');
+        cy.contains('Set SelectFieldValue').click();
+        cy.contains('orange');
+      });
+    });
+  });
+
+  describe('SliderField', () => {
+    // Disabling ui interaction test, moving thumb slider is failing.
+    it.skip('updates on ui interaction', () => {
+      cy.get('#slider-field-section').within(() => {
+        // cy.contains('90').should('not.exist');
+        cy.get('.amplify-sliderfield__thumb').trigger('mousedown');
+        cy.get('.amplify-sliderfield__thumb').trigger('mousemove', -20);
+        cy.get('.amplify-sliderfield__thumb').trigger('mouseup');
+        cy.contains('90');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#slider-field-section').within(() => {
+        cy.contains('90').should('not.exist');
+        cy.contains('Set SliderFieldValue').click();
+        cy.contains('90');
+      });
+    });
+  });
+
+  describe('StepperField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#stepper-field-section').within(() => {
+        cy.contains('1').should('not.exist');
+        cy.get('.amplify-stepperfield__button--increase').click();
+        cy.contains('1');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#stepper-field-section').within(() => {
+        cy.contains('9').should('not.exist');
+        cy.contains('Set StepperFieldValue').click();
+        cy.contains('9');
+      });
+    });
+  });
+
+  describe('SwitchField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#switch-field-section').within(() => {
+        cy.get('.amplify-switch-thumb').invoke('attr', 'data-checked').should('eq', 'false');
+        cy.contains('Subscribe').click();
+        cy.get('.amplify-switch-thumb').invoke('attr', 'data-checked').should('eq', 'true');
+        cy.contains('Subscribe').click();
+        cy.get('.amplify-switch-thumb').invoke('attr', 'data-checked').should('eq', 'false');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#switch-field-section').within(() => {
+        cy.get('.amplify-switch-thumb').invoke('attr', 'data-checked').should('eq', 'false');
+        cy.contains('Set SwitchFieldValue').click();
+        cy.get('.amplify-switch-thumb').invoke('attr', 'data-checked').should('eq', 'true');
+      });
+    });
+  });
+
+  describe('TextField', () => {
+    it('updates on ui interaction', () => {
+      cy.get('#text-field-section').within(() => {
+        cy.contains('Entered Value').should('not.exist');
+        cy.get('input').type('Entered Value');
+        cy.contains('Entered Value');
+      });
+    });
+
+    it('updates on state mutation', () => {
+      cy.get('#text-field-section').within(() => {
+        cy.contains('Hardcoded Value').should('not.exist');
+        cy.contains('Set TextFieldValue').click();
+        cy.contains('Hardcoded Value');
+      });
+    });
+  });
+});
diff --git a/packages/test-generator/integration-test-templates/src/App.tsx b/packages/test-generator/integration-test-templates/src/App.tsx
@@ -21,8 +21,8 @@ import PrimitivesTests from './PrimitivesTests';
 import ComplexTests from './ComplexTests';
 import IconsetTests from './IconsetTests';
 import SnippetTests from './SnippetTests'; // eslint-disable-line import/extensions
-import TwoWayBinding from './TwoWayBinding';
 import WorkflowTests from './WorkflowTests';
+import TwoWayBindingTests from './TwoWayBindingTests';
 
 // use fake endpoint so useDataStoreBinding does not fail
 Amplify.configure({
@@ -56,7 +56,7 @@ const HomePage = () => {
           <a href="/workflow-tests">Workflow Tests</a>
         </li>
         <li>
-          <a href="/two-way-binding">Two Way Binding Example</a>
+          <a href="/two-way-binding-tests">Two Way Binding Tests</a>
         </li>
       </ul>
     </div>
@@ -74,7 +74,7 @@ export default function App() {
         <Route path="/iconset-tests" element={<IconsetTests />} />
         <Route path="/snippet-tests" element={<SnippetTests />} />
         <Route path="/workflow-tests" element={<WorkflowTests />} />
-        <Route path="/two-way-binding" element={<TwoWayBinding />} />
+        <Route path="/two-way-binding-tests" element={<TwoWayBindingTests />} />
         <Route path="*" element={<HomePage />} />
       </Routes>
     </Router>

diff --git a/...tion-test-templates/src/TwoWayBinding.tsx → ...test-templates/src/TwoWayBindingTests.tsx b/...tion-test-templates/src/TwoWayBinding.tsx → ...test-templates/src/TwoWayBindingTests.tsx
@@ -17,10 +17,24 @@ import '@aws-amplify/ui-react/styles.css';
 import { AmplifyProvider } from '@aws-amplify/ui-react';
 import { TwoWayBindings } from './ui-components'; // eslint-disable-line import/extensions
 
-export default function AmIADevYet() {
+export default function TwoWayBindingTests() {
   return (
     <AmplifyProvider>
-      <TwoWayBindings />
+      <TwoWayBindings
+        overrides={{
+          CheckboxFieldSection: { id: 'checkbox-field-section' },
+          PasswordFieldSection: { id: 'password-field-section' },
+          PhoneNumberFieldSection: { id: 'phone-number-field-section' },
+          RadioGroupFieldSection: { id: 'radio-group-field-section' },
+          RadioGroupFieldValue: { id: 'radio-group-field-value' },
+          SearchFieldSection: { id: 'search-field-section' },
+          SelectFieldSection: { id: 'select-field-section' },
+          SliderFieldSection: { id: 'slider-field-section' },
+          StepperFieldSection: { id: 'stepper-field-section' },
+          SwitchFieldSection: { id: 'switch-field-section' },
+          TextFieldSection: { id: 'text-field-section' },
+        }}
+      />
     </AmplifyProvider>
   );
 }
diff --git a/packages/test-generator/lib/components/workflow/index.ts b/packages/test-generator/lib/components/workflow/index.ts
@@ -23,6 +23,6 @@ export { default as SetStateWithoutInitialValue } from './setStateWithoutInitial
 export { default as UpdateVisibility } from './updateVisibility.json';
 export { default as DataStoreActions } from './dataStoreActions.json';
 export { default as FormWithState } from './formWithState.json';
-export { default as TwoWayBindings } from './twoWayBindings.json';
 export { default as InputMutationOnClick } from './inputMutationOnClick.json';
 export { default as ConditionalInMutation } from './conditionalInMutation.json';
+export { default as TwoWayBindings } from './twoWayBindings.json';
diff --git a/packages/test-generator/lib/components/workflow/twoWayBindings.json b/packages/test-generator/lib/components/workflow/twoWayBindings.json
@@ -696,7 +696,7 @@
           "name": "SwitchFieldInput",
           "properties": {
             "label": {
-              "value": "SwitchField"
+              "value": "Subscribe"
             },
             "labelPosition": {
               "value": "start"