Skip to content

Commit b24f2fc

Browse files
authored
chore(e2e): Integration tests for useDataStore hook (#3110)
1 parent 4b2dbeb commit b24f2fc

File tree

15 files changed

+498
-1
lines changed

15 files changed

+498
-1
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ aws-exports.ts
99
# We have mock exports in the following locations
1010
!examples/angular/src/pages/ui/components/*/*/aws-exports.js
1111
!examples/next/pages/ui/components/*/*/aws-exports.js
12+
!examples/next/pages/ui/hooks/*/*/aws-exports.js
1213
!examples/vue/src/pages/ui/components/*/*/aws-exports.js
1314
!examples/react-native/src/features/*/*/aws-exports.js
1415

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Button } from '@aws-amplify/ui-react';
2+
import { useAuthSignOutAction } from '@aws-amplify/ui-react/internal';
3+
4+
export const AuthSignOutButton = ({ children }) => {
5+
const authSignOutAction = useAuthSignOutAction({ global: true });
6+
return <Button onClick={authSignOutAction}>{children}</Button>;
7+
};
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/datastore/action-hooks/src/aws-exports';
2+
export default awsExports;
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
import {
3+
createDataStorePredicate,
4+
useDataStoreBinding,
5+
} from '@aws-amplify/ui-react/internal';
6+
import { Button, Collection, Flex } from '@aws-amplify/ui-react';
7+
8+
import { User, UserPreference } from '../models';
9+
import { colorFilterPredicate, userFilterPredicate } from '../utils';
10+
11+
const userFilter = createDataStorePredicate(userFilterPredicate);
12+
const colorFilter = createDataStorePredicate(colorFilterPredicate);
13+
14+
const CollectionAndRecord = () => {
15+
const usersDataStore = useDataStoreBinding({
16+
criteria: userFilter,
17+
model: User,
18+
type: 'collection',
19+
}).items;
20+
21+
const colorDataStore = useDataStoreBinding({
22+
type: 'collection',
23+
model: UserPreference,
24+
criteria: colorFilter,
25+
}).items[0];
26+
27+
return (
28+
<Flex>
29+
<Collection type="list" isPaginated={true} items={usersDataStore ?? []}>
30+
{(item: User, index) => (
31+
<Button
32+
key={index}
33+
data-testid="filtered-item"
34+
backgroundColor={colorDataStore?.favoriteColor}
35+
>
36+
{item.firstName ?? 'Test'}
37+
</Button>
38+
)}
39+
</Collection>
40+
</Flex>
41+
);
42+
};
43+
44+
export default CollectionAndRecord;
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Amplify, DataStore } from 'aws-amplify';
2+
import { Authenticator } from '@aws-amplify/ui-react';
3+
import * as React from 'react';
4+
import '@aws-amplify/ui-react/styles.css';
5+
6+
import { AuthSignOutButton } from '../AuthActions';
7+
import awsExports from '../aws-exports';
8+
import CollectionAndRecord from './CollectionAndRecord';
9+
import { initializeTestData } from '../utils';
10+
11+
Amplify.configure({
12+
...awsExports,
13+
aws_appsync_graphqlEndpoint: 'https://fake-appsync-endpoint/graphql',
14+
});
15+
16+
export default function App() {
17+
const [isInitialized, setIsInitialized] = React.useState(false);
18+
const initializeStarted = React.useRef(false);
19+
20+
React.useEffect(() => {
21+
const initializeTestUserData = async () => {
22+
if (initializeStarted.current) {
23+
return;
24+
}
25+
await DataStore.clear();
26+
await initializeTestData();
27+
setIsInitialized(true);
28+
};
29+
30+
initializeTestUserData();
31+
initializeStarted.current = true;
32+
}, []);
33+
34+
if (!isInitialized) {
35+
return null;
36+
}
37+
38+
return (
39+
<Authenticator>
40+
{({ user }) => (
41+
<main>
42+
<h1>Hello {user.username}</h1>
43+
<AuthSignOutButton>Sign out</AuthSignOutButton>
44+
<CollectionAndRecord />
45+
</main>
46+
)}
47+
</Authenticator>
48+
);
49+
}

examples/next/pages/ui/hooks/useDataStore/models/index.d.ts

Lines changed: 52 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// @ts-check
2+
import { initSchema } from '@aws-amplify/datastore';
3+
import { schema } from './schema';
4+
5+
const { UserPreference, User } = initSchema(schema);
6+
7+
export { UserPreference, User };

examples/next/pages/ui/hooks/useDataStore/models/schema.d.ts

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/*
2+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License").
5+
You may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
export const schema = {
17+
codegenVersion: '3.2.0',
18+
models: {
19+
UserPreference: {
20+
name: 'UserPreference',
21+
fields: {
22+
id: {
23+
name: 'id',
24+
isArray: false,
25+
type: 'ID',
26+
isRequired: true,
27+
attributes: [],
28+
},
29+
favoriteColor: {
30+
name: 'favoriteColor',
31+
isArray: false,
32+
type: 'String',
33+
isRequired: false,
34+
attributes: [],
35+
},
36+
createdAt: {
37+
name: 'createdAt',
38+
isArray: false,
39+
type: 'AWSDateTime',
40+
isRequired: false,
41+
attributes: [],
42+
isReadOnly: true,
43+
},
44+
updatedAt: {
45+
name: 'updatedAt',
46+
isArray: false,
47+
type: 'AWSDateTime',
48+
isRequired: false,
49+
attributes: [],
50+
isReadOnly: true,
51+
},
52+
},
53+
syncable: true,
54+
pluralName: 'UserPreferences',
55+
attributes: [
56+
{
57+
type: 'model',
58+
properties: {},
59+
},
60+
{
61+
type: 'auth',
62+
properties: {
63+
rules: [
64+
{
65+
allow: 'public',
66+
operations: ['create', 'update', 'delete', 'read'],
67+
},
68+
],
69+
},
70+
},
71+
],
72+
},
73+
User: {
74+
name: 'User',
75+
fields: {
76+
id: {
77+
name: 'id',
78+
isArray: false,
79+
type: 'ID',
80+
isRequired: true,
81+
attributes: [],
82+
},
83+
firstName: {
84+
name: 'firstName',
85+
isArray: false,
86+
type: 'String',
87+
isRequired: false,
88+
attributes: [],
89+
},
90+
lastName: {
91+
name: 'lastName',
92+
isArray: false,
93+
type: 'String',
94+
isRequired: false,
95+
attributes: [],
96+
},
97+
age: {
98+
name: 'age',
99+
isArray: false,
100+
type: 'Int',
101+
isRequired: false,
102+
attributes: [],
103+
},
104+
isLoggedIn: {
105+
name: 'isLoggedIn',
106+
isArray: false,
107+
type: 'Boolean',
108+
isRequired: false,
109+
attributes: [],
110+
},
111+
loggedInColor: {
112+
name: 'loggedInColor',
113+
isArray: false,
114+
type: 'String',
115+
isRequired: false,
116+
attributes: [],
117+
},
118+
loggedOutColor: {
119+
name: 'loggedOutColor',
120+
isArray: false,
121+
type: 'String',
122+
isRequired: false,
123+
attributes: [],
124+
},
125+
createdAt: {
126+
name: 'createdAt',
127+
isArray: false,
128+
type: 'AWSDateTime',
129+
isRequired: false,
130+
attributes: [],
131+
isReadOnly: true,
132+
},
133+
updatedAt: {
134+
name: 'updatedAt',
135+
isArray: false,
136+
type: 'AWSDateTime',
137+
isRequired: false,
138+
attributes: [],
139+
isReadOnly: true,
140+
},
141+
},
142+
syncable: true,
143+
pluralName: 'Users',
144+
attributes: [
145+
{
146+
type: 'model',
147+
properties: {},
148+
},
149+
{
150+
type: 'auth',
151+
properties: {
152+
rules: [
153+
{
154+
allow: 'public',
155+
operations: ['create', 'update', 'delete', 'read'],
156+
},
157+
],
158+
},
159+
},
160+
],
161+
},
162+
},
163+
version: 'f6252c821249b6b1abda9fb24481c5a4',
164+
};
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import {
3+
createDataStorePredicate,
4+
useDataStoreBinding,
5+
} from '@aws-amplify/ui-react/internal';
6+
import { SortDirection, SortPredicate } from '@aws-amplify/datastore';
7+
import { Collection, Flex, Text } from '@aws-amplify/ui-react';
8+
9+
import { User } from '../models';
10+
import { userFilterPredicate } from '../utils';
11+
12+
const userFilter = createDataStorePredicate(userFilterPredicate);
13+
const userPagination = {
14+
sort: (s: SortPredicate<User>) => s.lastName(SortDirection.ASCENDING),
15+
};
16+
17+
const CollectionWithSort = () => {
18+
const usersDataStore = useDataStoreBinding({
19+
type: 'collection',
20+
model: User,
21+
criteria: userFilter,
22+
pagination: userPagination,
23+
}).items;
24+
25+
return (
26+
<Flex>
27+
<Collection type="list" isPaginated={true} items={usersDataStore ?? []}>
28+
{(item: User, index) => (
29+
<Text key={index} data-testid="sorted-item">
30+
{item.lastName ?? 'Test'}
31+
</Text>
32+
)}
33+
</Collection>
34+
</Flex>
35+
);
36+
};
37+
38+
export default CollectionWithSort;

0 commit comments

Comments
 (0)