feat: add type information to variants, and add e2e tests for variant…

… rendering
aws-amplify · Oct 26, 2021 · 6ce2ac9 · 6ce2ac9
1 parent 910baeb
commit 6ce2ac9
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 6 deletions.
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
@@ -705,6 +705,7 @@ import {
   Button,
   ButtonProps,
   EscapeHatchProps,
+  Variant,
   getOverrideProps,
   getOverridesFromVariants,
 } from \\"@aws-amplify/ui-react\\";
@@ -719,7 +720,7 @@ export default function CustomButton(
   props: CustomButtonProps
 ): React.ReactElement {
   const { overrides: overridesProp, ...rest } = props;
-  const variants = [
+  const variants: Variant[] = [
     {
       variantValues: { variant: \\"primary\\" },
       overrides: { Button: { fontSize: \\"12px\\" } },

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
@@ -580,7 +580,9 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
           factory.createVariableDeclaration(
             factory.createIdentifier('variants'),
             undefined,
-            undefined,
+            factory.createArrayTypeNode(
+              factory.createTypeReferenceNode(factory.createIdentifier('Variant'), undefined),
+            ),
             jsonToLiteral(variants as json),
           ),
         ],
@@ -596,6 +598,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   private buildOverridesDeclaration(hasVariants: boolean): VariableStatement {
     if (hasVariants) {
       this.importCollection.addImport('@aws-amplify/ui-react', 'getOverridesFromVariants');
+      this.importCollection.addImport('@aws-amplify/ui-react', 'Variant');
     }
 
     return factory.createVariableStatement(

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
@@ -89,7 +89,12 @@ describe('Generated Components', () => {
   });
 
   describe('Component Variants', () => {
-    // TODO: Write Variant Cases
+    it('Renders Button disabled when user is not logged in', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#variants').get('#variant1').should('have.css', 'font-size', '12px');
+      cy.get('#variants').get('#variant2').should('have.css', 'font-size', '40px');
+      cy.get('#variants').get('#variant3').should('have.css', 'width', '500px');
+    });
   });
 
   describe('Data Binding', () => {

diff --git a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
@@ -104,6 +104,12 @@ export default function ComponentTests() {
           }}
         />
       </div>
+      <div id="variants">
+        <h2>Variants</h2>
+        <ComponentWithVariant id="variant1" variant="primary" />
+        <ComponentWithVariant id="variant2" variant="secondary" />
+        <ComponentWithVariant id="variant3" variant="primary" size="large" />
+      </div>
     </AmplifyProvider>
   );
 }
diff --git a/packages/test-generator/lib/components/componentWithVariant.json b/packages/test-generator/lib/components/componentWithVariant.json
@@ -31,10 +31,20 @@
       },
       "overrides": {
         "Button": {
-          "width": "500"
+          "width": "500px"
         }
       }
     }
   ],
-  "bindingProperties": {}
+  "children": [
+    {
+      "componentType": "String",
+      "name": "String",
+      "properties": {
+        "value": {
+          "value": "ComponentWithVariant"
+        }
+      }
+    }
+  ]
 }
diff --git a/packages/test-generator/lib/generators/GenerateTestApp.ts b/packages/test-generator/lib/generators/GenerateTestApp.ts
@@ -23,7 +23,6 @@ new NodeTestGenerator({
     'ComponentWithExposedAs', // TODO: Support Custom Props E2E Tests
     'CollectionWithBinding', // TODO: Support Collection Binding E2E Tests
     'CollectionWithSort', // TODO: Support Collection Sorting E2E Tests
-    'ComponentWithVariant', // TODO: Support Variant E2E Tests
     'ComponentWithActionSignOut', // TODO: Support Auth Action E2E Tests
     'ComponentWithActionNavigation', // TODO: Support Navigation Action E2E Tests
   ],