Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: expose amplfyViewRenderer and update settings for passing #591

Merged
merged 1 commit into from
Aug 14, 2022
Merged

fix: expose amplfyViewRenderer and update settings for passing #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
300 changes: 298 additions & 2 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-views.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`amplify view renderer tests should generate a non-datastore table element 1`] = `
exports[`amplify table renderer tests should generate a non-datastore table element 1`] = `
"<Table>
{!disableHeaders && (
<TableHead>
Expand Down Expand Up @@ -32,7 +32,7 @@ exports[`amplify view renderer tests should generate a non-datastore table eleme
"
`;

exports[`amplify view renderer tests should generate a table element 1`] = `
exports[`amplify table renderer tests should generate a table element 1`] = `
"<Table>
{!disableHeaders && (
<TableHead>
Expand Down Expand Up @@ -79,3 +79,299 @@ exports[`amplify view renderer tests should generate a table element 1`] = `
</Table>;
"
`;

exports[`amplify view renderer tests should call util file if rendered 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import { formatter } from \\"./utils\\";
import {
createDataStorePredicate,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection } from \\"@aws-amplify/datastore\\";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from \\"@aws-amplify/ui-react\\";
export default function MyPostTable(props) {
const {
items: itemsProps,
predicateOverride,
formatOverride,
highlightOnHover,
onRowClick,
disableHeaders,
...rest
} = props;
const postFilter = {
and: [
{ field: \\"username\\", operand: \\"Guy\\", operator: \\"notContains\\" },
{ field: \\"createdAt\\", operand: \\"25\\", operator: \\"contains\\" },
],
};
const postPredicate = createDataStorePredicate(postFilter);
const postPagination = { sort: (s) => s.username(SortDirection.ASCENDING) };
const MyPostTableDataStore = useDataStoreBinding({
type: \\"collection\\",
model: Post,
criteria: predicateOverride || postPredicate,
pagination: postPagination,
}).items;
const items = itemsProp !== undefined ? itemsProp : MyPostTableDataStore;
letsbelopez marked this conversation as resolved.
Show resolved Hide resolved
return (
<Table>
{!disableHeaders && (
<TableHead>
<TableRow>
<TableCell as=\\"th\\">id</TableCell>
<TableCell as=\\"th\\">caption</TableCell>
<TableCell as=\\"th\\">username</TableCell>
<TableCell as=\\"th\\">post_url</TableCell>
<TableCell as=\\"th\\">profile_url</TableCell>
<TableCell as=\\"th\\">status</TableCell>
<TableCell as=\\"th\\">createdAt</TableCell>
<TableCell as=\\"th\\">updatedAt</TableCell>
</TableRow>
</TableHead>
)}
<TableBody>
{items.map((item, index) => (
<TableRow onClick={onRowClick ? () => onRowClick(item, index) : null}>
<TableCell>{format?.id ? format.id(item?.id) : item?.id}</TableCell>
<TableCell>
{format?.caption ? format.caption(item?.caption) : item?.caption}
</TableCell>
<TableCell>
{format?.username
? format.username(item?.username)
: item?.username}
</TableCell>
<TableCell>
{format?.post_url
? format.post_url(item?.post_url)
: item?.post_url}
</TableCell>
<TableCell>
{format?.profile_url
? format.profile_url(item?.profile_url)
: item?.profile_url}
</TableCell>
<TableCell>
{format?.status ? format.status(item?.status) : item?.status}
</TableCell>
<TableCell>
{format?.createdAt
? format.createdAt(item?.createdAt)
: formatter(item?.createdAt, {
type: \\"DateTimeFormat\\",
format: {
dateTimeFormat: {
dateFormat: \\"MM/DD/YYYY\\",
timeFormat: \\"locale\\",
},
},
})}
</TableCell>
<TableCell>
{format?.updatedAt
? format.updatedAt(item?.updatedAt)
: item?.updatedAt}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
"
`;

exports[`amplify view renderer tests should call util file if rendered 2`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
export declare type MyPostTableProps = React.PropsWithChildren<{
overrides?: EscapeHatchProps | undefined | null;
}>;
export default function MyPostTable(props: MyPostTableProps): React.ReactElement;
"
`;

exports[`amplify view renderer tests should render view with custom datastore 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from \\"@aws-amplify/ui-react\\";
export default function CustomTable(props) {
const {
items,
formatOverride,
highlightOnHover,
onRowClick,
disableHeaders,
...rest
} = props;
return (
<Table>
{!disableHeaders && (
<TableHead>
<TableRow>
<TableCell as=\\"th\\">name</TableCell>
<TableCell as=\\"th\\">age</TableCell>
<TableCell as=\\"th\\">address</TableCell>
<TableCell as=\\"th\\">birthday</TableCell>
</TableRow>
</TableHead>
)}
<TableBody>
{items.map((item, index) => (
<TableRow onClick={onRowClick ? () => onRowClick(item, index) : null}>
<TableCell>
{format?.name ? format.name(item?.name) : item?.name}
</TableCell>
<TableCell>
{format?.age ? format.age(item?.age) : item?.age}
</TableCell>
<TableCell>
{format?.address ? format.address(item?.address) : item?.address}
</TableCell>
<TableCell>
{format?.birthday
? format.birthday(item?.birthday)
: item?.birthday}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
"
`;

exports[`amplify view renderer tests should render view with custom datastore 2`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
export declare type CustomTableProps = React.PropsWithChildren<{
overrides?: EscapeHatchProps | undefined | null;
}>;
export default function CustomTable(props: CustomTableProps): React.ReactElement;
"
`;

exports[`amplify view renderer tests should render view with passed in predicate and sort 1`] = `
"/* eslint-disable */
import * as React from \\"react\\";
import {
createDataStorePredicate,
useDataStoreBinding,
} from \\"@aws-amplify/ui-react/internal\\";
import { SortDirection } from \\"@aws-amplify/datastore\\";
import {
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from \\"@aws-amplify/ui-react\\";
export default function MyPostTable(props) {
const {
items: itemsProps,
predicateOverride,
formatOverride,
highlightOnHover,
onRowClick,
disableHeaders,
...rest
} = props;
const postFilter = {
and: [
{ field: \\"username\\", operand: \\"username0\\", operator: \\"notContains\\" },
{ field: \\"createdAt\\", operand: \\"2022\\", operator: \\"contains\\" },
],
};
const postPredicate = createDataStorePredicate(postFilter);
const postPagination = { sort: (s) => s.username(SortDirection.ASCENDING) };
const MyPostTableDataStore = useDataStoreBinding({
type: \\"collection\\",
model: Post,
criteria: predicateOverride || postPredicate,
pagination: postPagination,
}).items;
const items = itemsProp !== undefined ? itemsProp : MyPostTableDataStore;
return (
<Table>
{!disableHeaders && (
<TableHead>
<TableRow>
<TableCell as=\\"th\\">id</TableCell>
<TableCell as=\\"th\\">caption</TableCell>
<TableCell as=\\"th\\">username</TableCell>
<TableCell as=\\"th\\">post_url</TableCell>
<TableCell as=\\"th\\">profile_url</TableCell>
<TableCell as=\\"th\\">status</TableCell>
<TableCell as=\\"th\\">createdAt</TableCell>
<TableCell as=\\"th\\">updatedAt</TableCell>
</TableRow>
</TableHead>
)}
<TableBody>
{items.map((item, index) => (
<TableRow onClick={onRowClick ? () => onRowClick(item, index) : null}>
<TableCell>{format?.id ? format.id(item?.id) : item?.id}</TableCell>
<TableCell>
{format?.caption ? format.caption(item?.caption) : item?.caption}
</TableCell>
<TableCell>
{format?.username
? format.username(item?.username)
: item?.username}
</TableCell>
<TableCell>
{format?.post_url
? format.post_url(item?.post_url)
: item?.post_url}
</TableCell>
<TableCell>
{format?.profile_url
? format.profile_url(item?.profile_url)
: item?.profile_url}
</TableCell>
<TableCell>
{format?.status ? format.status(item?.status) : item?.status}
</TableCell>
<TableCell>
{format?.createdAt
? format.createdAt(item?.createdAt)
: item?.createdAt}
letsbelopez marked this conversation as resolved.
Show resolved Hide resolved
</TableCell>
<TableCell>
{format?.updatedAt
? format.updatedAt(item?.updatedAt)
: item?.updatedAt}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
"
`;

exports[`amplify view renderer tests should render view with passed in predicate and sort 2`] = `
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
export declare type MyPostTableProps = React.PropsWithChildren<{
overrides?: EscapeHatchProps | undefined | null;
}>;
export default function MyPostTable(props: MyPostTableProps): React.ReactElement;
"
`;
18 changes: 18 additions & 0 deletions packages/codegen-ui-react/lib/__tests__/__utils__/amplify-renderer-generator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,24 @@ export const generateWithAmplifyFormRenderer = (
return renderer.renderComponent();
};

export const renderWithAmplifyViewRenderer = (
viewJsonFile: string,
dataSchemaJsonFile: string | undefined,
renderConfig: ReactRenderConfig = defaultCLIRenderConfig,
): { componentText: string; declaration?: string } => {
let dataSchema: GenericDataSchema | undefined;
if (dataSchemaJsonFile) {
const dataStoreSchema = loadSchemaFromJSONFile<Schema>(dataSchemaJsonFile);
dataSchema = getGenericFromDataStore(dataStoreSchema);
}
const rendererFactory = new StudioTemplateRendererFactory(
(view: StudioView) => new AmplifyViewRenderer(view, dataSchema, renderConfig),
);

const renderer = rendererFactory.buildRenderer(loadSchemaFromJSONFile<StudioView>(viewJsonFile));
return renderer.renderComponent();
};

export const renderTableJsxElement = (
tableFilePath: string,
dataSchemaFilePath: string | undefined,
Expand Down
32 changes: 30 additions & 2 deletions packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react-views.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
import { renderTableJsxElement } from './__utils__';
import { renderTableJsxElement, renderWithAmplifyViewRenderer } from './__utils__';

describe('amplify view renderer tests', () => {
describe('amplify table renderer tests', () => {
test('should generate a table element', () => {
const tableElement = renderTableJsxElement('views/table-from-datastore', 'datastore/person', 'test-table.ts');
expect(tableElement).toMatchSnapshot();
Expand All @@ -26,3 +26,31 @@ describe('amplify view renderer tests', () => {
expect(tableElement).toMatchSnapshot();
});
});

describe('amplify view renderer tests', () => {
test('should render view with passed in predicate and sort', () => {
const { componentText, declaration } = renderWithAmplifyViewRenderer(
'views/post-table-datastore',
'datastore/post-ds',
);
expect(componentText).toContain('useDataStoreBinding');
expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});
test('should render view with custom datastore', () => {
const { componentText, declaration } = renderWithAmplifyViewRenderer('views/table-from-custom-json', undefined);
expect(componentText).not.toContain('useDataStoreBinding');
expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});

test('should call util file if rendered', () => {
const { componentText, declaration } = renderWithAmplifyViewRenderer(
'views/post-table-custom-format',
'datastore/post-ds',
);
expect(componentText.replace(/\\/g, '')).toContain(`import { formatter } from "./utils"`);
expect(componentText).toMatchSnapshot();
expect(declaration).toMatchSnapshot();
});
});
2 changes: 1 addition & 1 deletion packages/codegen-ui-react/lib/amplify-ui-renderers/amplify-view-renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export class AmplifyViewRenderer extends ReactViewTemplateRenderer {
case Primitive.Table:
return new ReactTableRenderer(
this.viewComponent,
this.viewDefinition!,
this.viewDefinition,
this.viewMetadata,
this.importCollection,
).renderElement();
Expand Down
Loading