+ */
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
index f9ab63e99..ced108acf 100644
--- 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
index 890b5d6ff..b5bed4fb3 100644
--- 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
index 0f9b8066a..fa256f4df 100644
--- 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() {
- {/* // TODO: add back in with data binding tests /*}
- {/*
- TODO: buttonUser Listed as optional prop, but fails when not present
-
-
-
-
-
- */}
+ {/* // TODO: add back in with data binding tests */}
+
+
Concatenation and Conditional Tests
+
+
+
+
+
+
);
}