Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: expose amplfyViewRenderer and update settings for passing (#591)
Browse files Browse the repository at this point in the history
predicates
SwaySway authored Aug 14, 2022
1 parent 1d2c3a8 commit 0e2a763
Showing 18 changed files with 828 additions and 145 deletions.
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>
@@ -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>
@@ -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;
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}
</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;
"
`;
Original file line number Diff line number Diff line change
@@ -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,
Original file line number Diff line number Diff line change
@@ -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();
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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();
Loading

0 comments on commit 0e2a763

Please sign in to comment.