fix: simple property binding default value (#168)

aws-amplify · Oct 28, 2021 · de84261 · de84261
1 parent fbee20c
commit de84261
Show file tree

Hide file tree

Showing 15 changed files with 344 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "integ": "npm run integ:setup && npm run integ:test",
     "integ:setup": "./scripts/integ-setup.sh",
     "integ:templates": "./scripts/integ-templates.sh",
-    "integ:templates:watch": "nodemon --watch packages/test-generator/integration-test-templates/ -e tsx,ts,js,json --exec 'npm run integ:templates'",
+    "integ:templates:watch": "nodemon --watch packages/test-generator/integration-test-templates/ --watch packages/test-generator/lib -e tsx,ts,js,json --exec 'npm run integ:templates'",
     "integ:test": "./scripts/integ-test.sh",
     "integ:clean": "npx rimraf packages/integration-test"
   },

diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -1070,6 +1070,113 @@ export default function Profile(props: ProfileProps): React.ReactElement;
 "
 `;
 
+exports[`amplify render tests default value should render bound default value 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  Text,
+  TextProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type BoundDefaultValueProps = Partial<TextProps> & {
+  label?: String;
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function BoundDefaultValue(
+  props: BoundDefaultValueProps
+): React.ReactElement {
+  const { label, overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <Text {...rest} {...getOverrideProps(overrides, \\"Text\\")}>
+      {label || \\"Bound Default\\"}
+    </Text>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests default value should render simple and bound default value 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  Text,
+  TextProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type SimpleAndBoundDefaultValueProps = Partial<TextProps> & {
+  label?: String;
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function SimpleAndBoundDefaultValue(
+  props: SimpleAndBoundDefaultValueProps
+): React.ReactElement {
+  const {
+    label = \\"Simple Double Default\\",
+    overrides: overridesProp,
+    ...rest
+  } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <Text {...rest} {...getOverrideProps(overrides, \\"Text\\")}>
+      {label || \\"Bound Double Default\\"}
+    </Text>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
+exports[`amplify render tests default value should render simple default value 1`] = `
+Object {
+  "componentText": "/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  Text,
+  TextProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type SimplePropertyBindingDefaultValueProps = Partial<TextProps> & {
+  label?: String;
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function SimplePropertyBindingDefaultValue(
+  props: SimplePropertyBindingDefaultValueProps
+): React.ReactElement {
+  const {
+    label = \\"Default Binding Property\\",
+    overrides: overridesProp,
+    ...rest
+  } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <Text {...rest} {...getOverrideProps(overrides, \\"Text\\")}>
+      {label}
+    </Text>
+  );
+}
+",
+  "declaration": undefined,
+  "renderComponentToFilesystem": [Function],
+}
+`;
+
 exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -243,4 +243,20 @@ describe('amplify render tests', () => {
   it('should render navigation actions', () => {
     expect(generateWithAmplifyRenderer('componentWithActionNavigation')).toMatchSnapshot();
   });
+
+  describe('default value', () => {
+    it('should render bound default value', () => {
+      expect(generateWithAmplifyRenderer('default-value-components/boundDefaultValue')).toMatchSnapshot();
+    });
+
+    it('should render simple and bound default value', () => {
+      expect(generateWithAmplifyRenderer('default-value-components/simpleAndBoundDefaultValue')).toMatchSnapshot();
+    });
+
+    it('should render simple default value', () => {
+      expect(
+        generateWithAmplifyRenderer('default-value-components/simplePropertyBindingDefaultValue'),
+      ).toMatchSnapshot();
+    });
+  });
 });
diff --git a/...odegen-react/lib/__tests__/studio-ui-json/default-value-components/boundDefaultValue.json b/...odegen-react/lib/__tests__/studio-ui-json/default-value-components/boundDefaultValue.json
@@ -0,0 +1,18 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "BoundDefaultValue",
+  "bindingProperties": {
+    "label": {
+      "type": "String"
+    }
+  },
+  "properties": {
+    "value": {
+      "bindingProperties": {
+        "property": "label"
+      },
+      "defaultValue": "Bound Default"
+    }
+  }
+}
diff --git a/...act/lib/__tests__/studio-ui-json/default-value-components/simpleAndBoundDefaultValue.json b/...act/lib/__tests__/studio-ui-json/default-value-components/simpleAndBoundDefaultValue.json
@@ -0,0 +1,19 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "SimpleAndBoundDefaultValue",
+  "bindingProperties": {
+    "label": {
+      "type": "String",
+      "defaultValue": "Simple Double Default"
+    }
+  },
+  "properties": {
+    "value": {
+      "bindingProperties": {
+        "property": "label"
+      },
+      "defaultValue": "Bound Double Default"
+    }
+  }
+}
diff --git a/.../__tests__/studio-ui-json/default-value-components/simplePropertyBindingDefaultValue.json b/.../__tests__/studio-ui-json/default-value-components/simplePropertyBindingDefaultValue.json
@@ -0,0 +1,18 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "SimplePropertyBindingDefaultValue",
+  "bindingProperties": {
+    "label": {
+      "type": "String",
+      "defaultValue": "Default Binding Property"
+    }
+  },
+  "properties": {
+    "value": {
+      "bindingProperties": {
+        "property": "label"
+      }
+    }
+  }
+}
diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -20,6 +20,7 @@ import {
   StudioComponentSort,
   StudioComponentVariant,
   StudioComponentAction,
+  StudioComponentSimplePropertyBinding,
 } from '@amzn/amplify-ui-codegen-schema';
 import {
   StudioTemplateRenderer,
@@ -53,6 +54,8 @@ import ts, {
   Identifier,
   ComputedPropertyName,
   ArrowFunction,
+  LiteralExpression,
+  BooleanLiteral,
 } from 'typescript';
 import { ImportCollection } from './import-collection';
 import { ReactOutputManager } from './react-output-manager';
@@ -430,7 +433,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
             undefined,
             undefined,
             factory.createIdentifier(propName),
-            undefined,
+            isSimplePropertyBinding(binding) ? this.getDefaultValue(binding) : undefined,
           );
           elements.push(bindingElement);
         }
@@ -960,5 +963,23 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     return elements.filter((element) => element !== null && element !== undefined) as T[];
   }
 
+  private getDefaultValue(
+    binding: StudioComponentSimplePropertyBinding,
+  ): LiteralExpression | BooleanLiteral | undefined {
+    if (binding.defaultValue !== undefined) {
+      switch (binding.type) {
+        case 'String':
+          return factory.createStringLiteral(binding.defaultValue);
+        case 'Number':
+          return factory.createNumericLiteral(binding.defaultValue);
+        case 'Boolean':
+          return JSON.parse(binding.defaultValue) ? factory.createTrue() : factory.createFalse();
+        default:
+          throw new Error(`Could not parse binding with type ${binding.type}`);
+      }
+    }
+    return undefined;
+  }
+
   abstract renderJsx(component: StudioComponent): JsxElement | JsxFragment;
 }
diff --git a/...est-generator/integration-test-templates/cypress/integration/generated-components-spec.js b/...est-generator/integration-test-templates/cypress/integration/generated-components-spec.js
@@ -108,6 +108,62 @@ describe('Generated Components', () => {
   describe('Collections', () => {
     // TODO: Write Collection Cases
   });
+
+  describe('Default Value', () => {
+    it('Renders simple property binding default value', () => {
+      cy.get('#default-value')
+        .get('#bound-simple-binding-default')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Default Binding Property');
+        });
+    });
+
+    it('Overrides simple property binding default value', () => {
+      cy.get('#default-value')
+        .get('#bound-simple-binding-override')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Override Simple Binding');
+        });
+    });
+
+    it('Renders bound default value', () => {
+      cy.get('#default-value')
+        .get('#bound-default')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Bound Default');
+        });
+    });
+
+    it('Overrides bound default value', () => {
+      cy.get('#default-value')
+        .get('#bound-override')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Override Bound');
+        });
+    });
+
+    it('Renders simple default value when simple and bound', () => {
+      cy.get('#default-value')
+        .get('#simple-and-bound-default')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Simple Double Default');
+        });
+    });
+
+    it('Overrides simple and bound default value', () => {
+      cy.get('#default-value')
+        .get('#simple-and-bound-override')
+        .invoke('text')
+        .then((text) => {
+          expect(text.trim()).equal('Override Simple And Bound');
+        });
+    });
+  });
 });
 
 describe('Generated Themes', () => {

diff --git a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
@@ -32,6 +32,9 @@ import BasicComponentFlex from './ui-components/BasicComponentFlex';
 import BasicComponentImage from './ui-components/BasicComponentImage';
 import BasicComponentCustomRating from './ui-components/BasicComponentCustomRating';
 import ComponentWithVariant from './ui-components/ComponentWithVariant';
+import SimplePropertyBindingDefaultValue from './ui-components/SimplePropertyBindingDefaultValue';
+import BoundDefaultValue from './ui-components/BoundDefaultValue';
+import SimpleAndBoundDefaultValue from './ui-components/SimpleAndBoundDefaultValue';
 import theme from './ui-components/MyTheme';
 /* eslint-enable import/extensions */
 
@@ -110,6 +113,15 @@ export default function ComponentTests() {
         <ComponentWithVariant id="variant2" variant="secondary" />
         <ComponentWithVariant id="variant3" variant="primary" size="large" />
       </div>
+      <div id="default-value">
+        <h2>Default Value</h2>
+        <SimplePropertyBindingDefaultValue id="bound-simple-binding-default" />
+        <SimplePropertyBindingDefaultValue id="bound-simple-binding-override" label="Override Simple Binding" />
+        <BoundDefaultValue id="bound-default" />
+        <BoundDefaultValue id="bound-override" label="Override Bound" />
+        <SimpleAndBoundDefaultValue id="simple-and-bound-default" />
+        <SimpleAndBoundDefaultValue id="simple-and-bound-override" label="Override Simple And Bound" />
+      </div>
     </AmplifyProvider>
   );
 }
diff --git a/packages/test-generator/lib/components/default-value-components/boundDefaultValue.json b/packages/test-generator/lib/components/default-value-components/boundDefaultValue.json
@@ -0,0 +1,18 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "BoundDefaultValue",
+  "bindingProperties": {
+    "label": {
+      "type": "String"
+    }
+  },
+  "properties": {
+    "value": {
+      "bindingProperties": {
+        "property": "label"
+      },
+      "defaultValue": "Bound Default"
+    }
+  }
+}
diff --git a/packages/test-generator/lib/components/default-value-components/index.js b/packages/test-generator/lib/components/default-value-components/index.js
@@ -0,0 +1,18 @@
+/*
+  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.
+ */
+export { default as BoundDefaultValue } from './boundDefaultValue.json';
+export { default as SimplePropertyBindingDefaultValue } from './simplePropertyBindingDefaultValue.json';
+export { default as SimpleAndBouldDefaultValue } from './simpleAndBoundDefaultValue.json';
diff --git a/...es/test-generator/lib/components/default-value-components/simpleAndBoundDefaultValue.json b/...es/test-generator/lib/components/default-value-components/simpleAndBoundDefaultValue.json
@@ -0,0 +1,19 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "SimpleAndBoundDefaultValue",
+  "bindingProperties": {
+    "label": {
+      "type": "String",
+      "defaultValue": "Simple Double Default"
+    }
+  },
+  "properties": {
+    "value": {
+      "bindingProperties": {
+        "property": "label"
+      },
+      "defaultValue": "Bound Double Default"
+    }
+  }
+}