Skip to content

Commit 9ac3ab8

Browse files
esauerbocalebpollman
esauerbo
authored and
calebpollman
committed
chore(gen2-storage): add StorageImage examples and e2e tests (aws-amplify#5185)
1 parent 5e6acbb commit 9ac3ab8

File tree

15 files changed

+292
-8
lines changed

15 files changed

+292
-8
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ docs/public/previews
1010

1111
# We have mock exports in the following locations
1212
!examples/angular/src/pages/ui/components/*/*/aws-exports.js
13+
!examples/next/pages/ui/components/*/*/*/*/aws-exports.js
1314
!examples/next/pages/ui/components/*/*/*/aws-exports.js
1415
!examples/next/pages/ui/components/*/*/aws-exports.js
1516
!examples/next/pages/ui/hooks/*/*/aws-exports.js

‎examples/next/pages/ui/components/storage/storage-image/error/index.page.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -11,35 +11,33 @@ Amplify.configure(awsExports);
1111

1212
export function StorageImageExample() {
1313
const [isLoaded, setIsLoaded] = React.useState(false);
14+
const [errorText, setErrorText] = React.useState('');
1415

1516
const onLoad = () => {
1617
setIsLoaded(true);
18+
setErrorText('');
1719
};
1820

1921
return (
2022
<>
2123
<StorageImage
22-
alt="private cat"
24+
alt="error cat"
2325
imgKey="this-image-does-not-exist.jpeg"
2426
fallbackSrc="https://placekitten.com/g/200/300"
2527
accessLevel="guest"
2628
onLoad={onLoad}
2729
onStorageGetError={(error) => {
28-
console.log('onStorageGetError');
29-
console.log(error);
30-
}}
31-
onError={(error) => {
32-
console.log('onError');
33-
console.log(error);
30+
setErrorText(`Error getting image: ${error.message}`);
3431
}}
3532
/>
3633
{isLoaded ? (
3734
<Text>The image is loaded.</Text>
3835
) : (
3936
<Loader testId="Loader" />
4037
)}
38+
<Text>{errorText}</Text>
4139
<StorageImage
42-
alt="private cat"
40+
alt="error cat"
4341
imgKey="this-image-does-not-exist-2.jpeg"
4442
fallbackSrc="https://placekitten.com/g/200/300"
4543
accessLevel="guest"

‎examples/next/pages/ui/components/storage/storage-image/with-path/error/aws-exports.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/storage/file-uploader/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/storage/storage-image/with-path/error/index.page.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import * as React from 'react';
2+
3+
import { Amplify } from 'aws-amplify';
4+
import { Text, Loader } from '@aws-amplify/ui-react';
5+
import { StorageImage } from '@aws-amplify/ui-react-storage';
6+
7+
import '@aws-amplify/ui-react/styles.css';
8+
import awsExports from './aws-exports';
9+
10+
Amplify.configure(awsExports);
11+
12+
export function StorageImageExample() {
13+
const [isLoaded, setIsLoaded] = React.useState(false);
14+
const [errorText, setErrorText] = React.useState('');
15+
16+
const onLoad = () => {
17+
setIsLoaded(true);
18+
setErrorText('');
19+
};
20+
21+
return (
22+
<>
23+
<StorageImage
24+
alt="error cat"
25+
path="guest/this-image-does-not-exist.jpeg"
26+
onLoad={onLoad}
27+
onGetUrlError={(error) => {
28+
setErrorText(`Error getting image: ${error.message}`);
29+
}}
30+
fallbackSrc="https://placekitten.com/g/200/300"
31+
/>
32+
{isLoaded ? (
33+
<Text>The image is loaded.</Text>
34+
) : (
35+
<Loader testId="Loader" />
36+
)}
37+
<Text>{errorText}</Text>
38+
</>
39+
);
40+
}
41+
export default StorageImageExample;

‎examples/next/pages/ui/components/storage/storage-image/with-path/private-access-level/aws-exports.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/storage/file-uploader/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/storage/storage-image/with-path/private-access-level/index.page.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
3+
import { Amplify } from 'aws-amplify';
4+
import { fetchAuthSession } from 'aws-amplify/auth';
5+
import {
6+
Button,
7+
Text,
8+
Loader,
9+
useAuthenticator,
10+
withAuthenticator,
11+
} from '@aws-amplify/ui-react';
12+
import { StorageImage } from '@aws-amplify/ui-react-storage';
13+
import '@aws-amplify/ui-react/styles.css';
14+
import awsExports from './aws-exports';
15+
16+
Amplify.configure(awsExports);
17+
18+
export function StorageImageExample() {
19+
const [isFirstImgLoaded, setIsFirstImgLoaded] = React.useState(false);
20+
const [isSecondImgLoaded, setIsSecondImgLoaded] = React.useState(false);
21+
const [identityId, setIdentityId] = React.useState<string>();
22+
const { signOut } = useAuthenticator((context) => [context.signOut]);
23+
24+
React.useEffect(() => {
25+
const fetchIdentityId = async () => {
26+
const { identityId } = await fetchAuthSession();
27+
console.log(identityId);
28+
setIdentityId(identityId);
29+
};
30+
31+
fetchIdentityId();
32+
}, []);
33+
34+
return (
35+
<>
36+
<StorageImage
37+
alt="private cat 1"
38+
path={({ identityId }) => `private/${identityId}/private-e2e.jpeg`}
39+
onLoad={() => setIsFirstImgLoaded(true)}
40+
/>
41+
{isFirstImgLoaded ? (
42+
<Text>The first private image is loaded.</Text>
43+
) : (
44+
<Loader testId="Loader1" />
45+
)}
46+
{identityId && (
47+
<StorageImage
48+
alt="private cat 2"
49+
path={`private/${identityId}/private-e2e.jpeg`}
50+
onLoad={() => setIsSecondImgLoaded(true)}
51+
/>
52+
)}
53+
{isSecondImgLoaded ? (
54+
<Text>The second private image is loaded.</Text>
55+
) : (
56+
<Loader testId="Loader2" />
57+
)}
58+
<Button onClick={signOut}>Sign out</Button>
59+
</>
60+
);
61+
}
62+
export default withAuthenticator(StorageImageExample);

‎examples/next/pages/ui/components/storage/storage-image/with-path/protected-access-level/aws-exports.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/storage/file-uploader/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/storage/storage-image/with-path/protected-access-level/index.page.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
3+
import { Amplify } from 'aws-amplify';
4+
import { fetchAuthSession } from 'aws-amplify/auth';
5+
import {
6+
Button,
7+
Text,
8+
Loader,
9+
useAuthenticator,
10+
withAuthenticator,
11+
} from '@aws-amplify/ui-react';
12+
import { StorageImage } from '@aws-amplify/ui-react-storage';
13+
import '@aws-amplify/ui-react/styles.css';
14+
import awsExports from './aws-exports';
15+
16+
Amplify.configure(awsExports);
17+
18+
export function StorageImageExample() {
19+
const [isFirstImgLoaded, setIsFirstImgLoaded] = React.useState(false);
20+
const [isSecondImgLoaded, setIsSecondImgLoaded] = React.useState(false);
21+
const [identityId, setIdentityId] = React.useState<string>();
22+
const { signOut } = useAuthenticator((context) => [context.signOut]);
23+
24+
React.useEffect(() => {
25+
const fetchIdentityId = async () => {
26+
const { identityId } = await fetchAuthSession();
27+
console.log(identityId);
28+
setIdentityId(identityId);
29+
};
30+
31+
fetchIdentityId();
32+
}, []);
33+
34+
return (
35+
<>
36+
<StorageImage
37+
alt="protected cat 1"
38+
path={({ identityId }) => `protected/${identityId}/protected-e2e.jpeg`}
39+
onLoad={() => setIsFirstImgLoaded(true)}
40+
/>
41+
{isFirstImgLoaded ? (
42+
<Text>The first protected image is loaded.</Text>
43+
) : (
44+
<Loader testId="Loader1" />
45+
)}
46+
{identityId && (
47+
<StorageImage
48+
alt="protected cat 2"
49+
path={`protected/${identityId}/protected-e2e.jpeg`}
50+
onLoad={() => setIsSecondImgLoaded(true)}
51+
/>
52+
)}
53+
{isSecondImgLoaded ? (
54+
<Text>The second protected image is loaded.</Text>
55+
) : (
56+
<Loader testId="Loader2" />
57+
)}
58+
<Button onClick={signOut}>Sign out</Button>
59+
</>
60+
);
61+
}
62+
export default withAuthenticator(StorageImageExample);

‎examples/next/pages/ui/components/storage/storage-image/with-path/public-access-level/aws-exports.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import awsExports from '@environments/storage/file-uploader/src/aws-exports';
2+
export default awsExports;

‎examples/next/pages/ui/components/storage/storage-image/with-path/public-access-level/index.page.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as React from 'react';
2+
3+
import { Amplify } from 'aws-amplify';
4+
import { Text, Loader } from '@aws-amplify/ui-react';
5+
import { StorageImage } from '@aws-amplify/ui-react-storage';
6+
import '@aws-amplify/ui-react/styles.css';
7+
import awsExports from './aws-exports';
8+
9+
Amplify.configure(awsExports);
10+
11+
export function StorageImageExample() {
12+
const [isFirstImgLoaded, setIsFirstImgLoaded] = React.useState(false);
13+
const [isSecondImgLoaded, setIsSecondImgLoaded] = React.useState(false);
14+
15+
return (
16+
<>
17+
<StorageImage
18+
alt="public cat 1"
19+
path="public/public-e2e.jpeg"
20+
onLoad={() => setIsFirstImgLoaded(true)}
21+
/>
22+
{isFirstImgLoaded ? (
23+
<Text>The first public image is loaded.</Text>
24+
) : (
25+
<Loader testId="Loader1" />
26+
)}
27+
<StorageImage
28+
alt="public cat 2"
29+
path={() => 'public/public-e2e.jpeg'}
30+
onLoad={() => setIsSecondImgLoaded(true)}
31+
/>
32+
{isSecondImgLoaded ? (
33+
<Text>The second public image is loaded.</Text>
34+
) : (
35+
<Loader testId="Loader2" />
36+
)}
37+
</>
38+
);
39+
}
40+
export default StorageImageExample;

‎packages/e2e/features/ui/components/storage/storage-image/load-image-with-error.feature

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Feature: Load an image from S3 with error
2+
3+
Background:
4+
Given I'm running the example "ui/components/storage/storage-image/error"
5+
6+
@react
7+
Scenario: I load an image with error
8+
I see "Loader" element
9+
Then I see "Error getting image:"

‎packages/e2e/features/ui/components/storage/storage-image/with-path/load-image-with-error.feature

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Feature: Load an image from S3 with error
2+
3+
Background:
4+
Given I'm running the example "ui/components/storage/storage-image/with-path/error"
5+
6+
@react
7+
Scenario: I load an image with error
8+
I see "Loader" element
9+
Then I see "Error getting image:"

‎packages/e2e/features/ui/components/storage/storage-image/with-path/load-private-image-from-s3.feature

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Feature: Load an image from S3 with private access level settings
2+
3+
Background:
4+
Given I'm running the example "ui/components/storage/storage-image/with-path/private-access-level"
5+
6+
@react
7+
Scenario: I successfully load a private image
8+
When I type my "email" with status "CONFIRMED"
9+
Then I type my password
10+
Then I click the "Sign in" button
11+
Then I see "Loader1" element
12+
Then I see "Loader2" element
13+
Then I see the "private cat 1" image
14+
Then I see the "private cat 2" image
15+
Then I see "The first private image is loaded."
16+
Then I see "The second private image is loaded."
17+
Then I see "Sign out"
18+
Then I click "Sign out"
19+
Then I see "Sign in"
20+

‎packages/e2e/features/ui/components/storage/storage-image/with-path/load-protected-image-from-s3.feature

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Feature: Load an image from S3 with protected access level settings
2+
3+
Background:
4+
Given I'm running the example "ui/components/storage/storage-image/with-path/protected-access-level"
5+
6+
@react
7+
Scenario: I successfully load a protected image
8+
When I type my "email" with status "CONFIRMED"
9+
Then I type my password
10+
Then I click the "Sign in" button
11+
Then I see "Loader1" element
12+
Then I see "Loader2" element
13+
Then I see the "protected cat 1" image
14+
Then I see the "protected cat 2" image
15+
Then I see "The first protected image is loaded."
16+
Then I see "The second protected image is loaded."
17+
Then I see "Sign out"
18+
Then I click "Sign out"
19+
Then I see "Sign in"
20+

‎packages/e2e/features/ui/components/storage/storage-image/with-path/load-public-image-from-s3.feature

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Feature: Load an image from S3 with public access level settings
2+
3+
Background:
4+
Given I'm running the example "ui/components/storage/storage-image/with-path/public-access-level"
5+
6+
@react
7+
Scenario: I successfully load a public image
8+
Then I see "Loader1" element
9+
Then I see "Loader2" element
10+
Then I see the "public cat 1" image
11+
Then I see the "public cat 2" image
12+
Then I see "The first public image is loaded."
13+
Then I see "The second public image is loaded."
14+

0 commit comments

Comments
 (0)