fix: updates to get concat and conditional working, and adding tests

aws-amplify · Oct 19, 2021 · ef4600f · ef4600f
1 parent c3ee4e7
commit ef4600f
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 97 deletions.
diff --git a/packages/amplify-ui-codegen-schema/lib/types/index.ts b/packages/amplify-ui-codegen-schema/lib/types/index.ts
@@ -268,7 +268,7 @@ export type FixedStudioComponentProperty = {
  */
 export type BoundStudioComponentProperty = {
   /**
-   * This is the exposed property that will propogate down to this value
+   * This is the exposed property that will propagate down to this value
    */
   bindingProperties: {
     property: string;

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
@@ -197,7 +197,7 @@ export default function CollectionOfCustomButtons(
           <Button
             label={item.username || \\"hspain@gmail.com\\"}
             labelWidth={width}
-            backgroundColor={buttonColor.favoriteColor}
+            backgroundColor={buttonColor?.favoriteColor}
             disabled={isDisabled}
             {...getOverrideProps(overrides, \\"Collection.Flex.Button\\")}
           ></Button>
@@ -280,7 +280,7 @@ export default function CollectionOfCustomButtons(
           <Button
             label={item.username || \\"hspain@gmail.com\\"}
             labelWidth={width}
-            backgroundColor={buttonColor.favoriteColor}
+            backgroundColor={buttonColor?.favoriteColor}
             disabled={isDisabled}
             {...getOverrideProps(overrides, \\"Collection.Flex.Button\\")}
           ></Button>
@@ -539,7 +539,7 @@ export default function ComponentWithDataBinding(
   const overrides = { ...props.overrides };
   return (
     <Button
-      label={buttonUser.username || \\"hspain@gmail.com\\"}
+      label={buttonUser?.username || \\"hspain@gmail.com\\"}
       labelWidth={width}
       disabled={isDisabled}
       {...props}
@@ -685,8 +685,8 @@ export default function CustomButton(
   const overrides = { ...props.overrides };
   return (
     <Button
-      label={\`\${buttonUser.firstname || \\"Harrison\\"}\${\\" \\"}\${
-        buttonUser.lastname || \\"Spain\\"
+      label={\`\${buttonUser?.firstname || \\"Harrison\\"}\${\\" \\"}\${
+        buttonUser?.lastname || \\"Spain\\"
       }\`}
       labelWidth={width}
       {...props}
@@ -721,20 +721,22 @@ export default function CustomButton(
   const overrides = { ...props.overrides };
   return (
     <Button
-      label={\`\${buttonUser.firstname || \\"Harrison\\"}\${\\" \\"}\${
-        buttonUser.lastname || \\"Spain\\"
+      label={\`\${buttonUser?.firstname || \\"Harrison\\"}\${\\" \\"}\${
+        buttonUser?.lastname || \\"Spain\\"
       }\`}
       labelWidth={width}
-      disabled={buttonUser.isLoggedIn === true ? true : false}
+      disabled={
+        buttonUser?.isLoggedIn && buttonUser?.isLoggedIn === true ? true : false
+      }
       prompt={
-        buttonUser.age > 18
-          ? \`\${buttonUser.firstname}\${\\", cast your vote.\\"}\`
+        buttonUser?.age && buttonUser?.age > 18
+          ? \`\${buttonUser?.firstname}\${\\", cast your vote.\\"}\`
           : \\"Sorry you cannot vote\\"
       }
       backgroundColor={
-        buttonUser.isLoggedIn === true
-          ? buttonUser.loggedInColor
-          : buttonUser.loggedOutColor
+        buttonUser?.isLoggedIn && buttonUser?.isLoggedIn === true
+          ? buttonUser?.loggedInColor
+          : buttonUser?.loggedOutColor
       }
       {...props}
       {...getOverrideProps(overrides, \\"Button\\")}

diff --git a/packages/studio-ui-codegen-react/lib/react-component-render-helper.ts b/packages/studio-ui-codegen-react/lib/react-component-render-helper.ts
@@ -86,23 +86,23 @@ export function isDefaultValueOnly(
   return 'defaultValue' in prop && !(isCollectionItemBoundProperty(prop) || isBoundProperty(prop));
 }
 
+/**
+ * case: has field => <prop.bindingProperties.property>?.<prop.bindingProperties.field>
+ * case: no field =>  <prop.bindingProperties.property>
+ */
 export function buildBindingExpression(prop: BoundStudioComponentProperty): Expression {
   return prop.bindingProperties.field === undefined
     ? factory.createIdentifier(prop.bindingProperties.property)
-    : factory.createPropertyAccessExpression(
+    : factory.createPropertyAccessChain(
         factory.createIdentifier(prop.bindingProperties.property),
+        factory.createToken(SyntaxKind.QuestionDotToken),
         prop.bindingProperties.field,
       );
 }
 
 export function buildBindingAttr(prop: BoundStudioComponentProperty, propName: string): JsxAttribute {
   const expr = buildBindingExpression(prop);
-
-  const attr = factory.createJsxAttribute(
-    factory.createIdentifier(propName),
-    factory.createJsxExpression(undefined, expr),
-  );
-  return attr;
+  return factory.createJsxAttribute(factory.createIdentifier(propName), factory.createJsxExpression(undefined, expr));
 }
 
 export function buildBindingWithDefaultExpression(
@@ -113,8 +113,9 @@ export function buildBindingWithDefaultExpression(
   const leftExpr =
     prop.bindingProperties.field === undefined
       ? factory.createIdentifier(prop.bindingProperties.property)
-      : factory.createPropertyAccessExpression(
+      : factory.createPropertyAccessChain(
           factory.createIdentifier(prop.bindingProperties.property),
+          factory.createToken(SyntaxKind.QuestionDotToken),
           prop.bindingProperties.field,
         );
 
@@ -127,11 +128,10 @@ export function buildBindingAttrWithDefault(
   defaultValue: string,
 ): JsxAttribute {
   const binaryExpr = buildBindingWithDefaultExpression(prop, defaultValue);
-  const attr = factory.createJsxAttribute(
+  return factory.createJsxAttribute(
     factory.createIdentifier(propName),
     factory.createJsxExpression(undefined, binaryExpr),
   );
-  return attr;
 }
 
 export function buildFixedJsxExpression(prop: FixedStudioComponentProperty): StringLiteral | JsxExpression {
@@ -309,24 +309,32 @@ export function buildConditionalExpression(prop: ConditionalStudioComponentPrope
   const elseBlock = prop.condition.else;
   const operatorToken = getSyntaxKindToken(operator);
 
-  if (operatorToken !== undefined) {
-    const expr = factory.createJsxExpression(
-      undefined,
-      factory.createConditionalExpression(
+  if (operatorToken === undefined) {
+    return factory.createJsxExpression(undefined, undefined);
+  }
+
+  const propertyAccess = factory.createPropertyAccessChain(
+    factory.createIdentifier(property),
+    factory.createToken(SyntaxKind.QuestionDotToken),
+    factory.createIdentifier(field),
+  );
+
+  return factory.createJsxExpression(
+    undefined,
+    factory.createConditionalExpression(
+      factory.createParenthesizedExpression(
         factory.createBinaryExpression(
-          factory.createPropertyAccessExpression(factory.createIdentifier(property), factory.createIdentifier(field)),
-          operatorToken,
-          getConditionalOperandExpression(operand),
+          propertyAccess,
+          factory.createToken(SyntaxKind.AmpersandAmpersandToken),
+          factory.createBinaryExpression(propertyAccess, operatorToken, getConditionalOperandExpression(operand)),
         ),
-        factory.createToken(SyntaxKind.QuestionToken),
-        resolvePropToExpression(then),
-        factory.createToken(SyntaxKind.ColonToken),
-        resolvePropToExpression(elseBlock),
       ),
-    );
-    return expr;
-  }
-  return factory.createJsxExpression(undefined, undefined);
+      factory.createToken(SyntaxKind.QuestionToken),
+      resolvePropToExpression(then),
+      factory.createToken(SyntaxKind.ColonToken),
+      resolvePropToExpression(elseBlock),
+    ),
+  );
 }
 
 export function buildConditionalAttr(prop: ConditionalStudioComponentProperty, propName: string): JsxAttribute {

diff --git a/packages/test-generator/lib/generators/GenerateTestApp.ts b/packages/test-generator/lib/generators/GenerateTestApp.ts
@@ -19,8 +19,6 @@ new TestGenerator({
   writeToLogger: false,
   writeToDisk: true,
   disabledSchemas: [
-    'ComponentWithConcatenation', // TODO: Support Concatenation E2E Tests
-    'ComponentWithConditional', // TODO: Support Conditional E2E Tests
     'ComponentWithDataBinding', // TODO: Support Data Binding E2E Tests
     'ComponentWithExposedAs', // TODO: Support Custom Props E2E Tests
     'CollectionWithBinding', // TODO: Support Collection Binding E2E Tests

diff --git a/packages/test-generator/test-app-templates/cypress/integration/generated-components-spec.js b/packages/test-generator/test-app-templates/cypress/integration/generated-components-spec.js
@@ -63,20 +63,33 @@ describe('Generated Components', () => {
   });
 
   describe('Conditional Data', () => {
-    // TODO: Write Conditional Cases
+    it('Renders Button disabled when user is not logged in', () => {
+      cy.visit('http://localhost:3000');
+      cy.get('[label="Disabled Conditional Button"]').get('[disabled]');
+    });
+
+    it('Renders May vote when user old enough', () => {
+      cy.visit('http://localhost:3000');
+      cy.get('[label="May Vote Conditional Button"]').get('[prompt="May Vote, cast your vote."]');
+    });
+
+    it('Renders May not vote when user too young', () => {
+      cy.visit('http://localhost:3000');
+      cy.get('[label="May Not Vote Conditional Button"]').get('[prompt="Sorry you cannot vote"]');
+    });
   });
 
+  // TODO: We should be rendering the element as a text child, but concat doesn't seem to support that yet.
   describe('Concatenated Data', () => {
-    // TODO: Get Concatenation Cases Working
-    // it('Renders Button text as a concatenated, bound element', () => {
-    //   cy.visit('http://localhost:3000');
-    //   cy.contains('Harry Callahan')
-    // });
-    //
-    // it('Renders Button text as a concatenated, bound element, with overrides', () => {
-    //   cy.visit('http://localhost:3000');
-    //   cy.contains('Norm Gunderson')
-    // });
+    it('Renders Button text as a concatenated, bound element', () => {
+      cy.visit('http://localhost:3000');
+      cy.get('[label="Harry Callahan"]');
+    });
+
+    it('Renders Button text as a concatenated, bound element, with overrides', () => {
+      cy.visit('http://localhost:3000');
+      cy.get('[label="Norm Gunderson"]');
+    });
   });
 
   describe('Component Variants', () => {

diff --git a/packages/test-generator/test-app-templates/src/App.tsx b/packages/test-generator/test-app-templates/src/App.tsx
@@ -23,6 +23,8 @@ import BasicComponentBox from './ui-components/BasicComponentBox';
 import BasicComponentButton from './ui-components/BasicComponentButton';
 import BasicComponentCard from './ui-components/BasicComponentCard';
 import BasicComponentText from './ui-components/BasicComponentText';
+import ComponentWithConcatenation from './ui-components/ComponentWithConcatenation';
+import ComponentWithConditional from './ui-components/ComponentWithConditional';
 /* eslint-enable import/extensions */
 
 function App() {
@@ -40,51 +42,51 @@ function App() {
       <BoxTest />
       <BoxWithButton />
       <CustomButton />
-      {/* <TextWithDataBinding /> // TODO: add back in with data binding tests /*}
-      {/*
-      TODO: buttonUser Listed as optional prop, but fails when not present
-      <ButtonWithConcatenatedText />
-      <ButtonWithConcatenatedText
-        buttonUser={{
-          firstname: 'Norm',
-          lastname: 'Gunderson',
-          isLoggedIn: true,
-          loggedInColor: 'blue',
-          loggedOutColor: 'red',
-          age: -1,
-        }}
-       />
-      <ButtonWithConditionalState
-        buttonUser={{
-          firstname: 'Disabled',
-          lastname: 'Conditional Button',
-          isLoggedIn: false,
-          loggedInColor: 'blue',
-          loggedOutColor: 'red',
-          age: -1,
-        }}
-       />
-      <ButtonWithConditionalState
-        buttonUser={{
-          firstname: 'May Vote',
-          lastname: 'Conditional Button',
-          age: 19,
-          isLoggedIn: true,
-          loggedInColor: 'blue',
-          loggedOutColor: 'red',
-        }}
-      />
-      <ButtonWithConditionalState
-        buttonUser={{
-          firstname: 'May Not Vote',
-          lastname: 'Conditional Button',
-          age: 16,
-          isLoggedIn: true,
-          loggedInColor: 'blue',
-          loggedOutColor: 'red',
-        }}
-      />
-      */}
+      {/* <TextWithDataBinding /> // TODO: add back in with data binding tests */}
+      <div id="concat-and-conditional">
+        <h2>Concatenation and Conditional Tests</h2>
+        <ComponentWithConcatenation />
+        <ComponentWithConcatenation
+          buttonUser={{
+            firstname: 'Norm',
+            lastname: 'Gunderson',
+            isLoggedIn: true,
+            loggedInColor: 'blue',
+            loggedOutColor: 'red',
+            age: -1,
+          }}
+        />
+        <ComponentWithConditional
+          buttonUser={{
+            firstname: 'Disabled',
+            lastname: 'Conditional Button',
+            isLoggedIn: false,
+            loggedInColor: 'blue',
+            loggedOutColor: 'red',
+            age: -1,
+          }}
+        />
+        <ComponentWithConditional
+          buttonUser={{
+            firstname: 'May Vote',
+            lastname: 'Conditional Button',
+            age: 19,
+            isLoggedIn: true,
+            loggedInColor: 'blue',
+            loggedOutColor: 'red',
+          }}
+        />
+        <ComponentWithConditional
+          buttonUser={{
+            firstname: 'May Not Vote',
+            lastname: 'Conditional Button',
+            age: 16,
+            isLoggedIn: true,
+            loggedInColor: 'blue',
+            loggedOutColor: 'red',
+          }}
+        />
+      </div>
     </>
   );
 }