From 0469607dc3a7c80bfc64da203aae377f067b4f60 Mon Sep 17 00:00:00 2001
From: Nathan
Date: Fri, 17 Sep 2021 18:39:48 +0200
Subject: [PATCH 1/5] feat(metadata): Add metadata component
---
e2e/src/components/atoms/input/index.tsx | 4 +-
.../components/organisms/metadata/index.tsx | 48 +++++++++++++++++++
e2e/src/components/organisms/upload/index.tsx | 2 +-
e2e/src/components/templates/grid/index.tsx | 24 ++++++++--
4 files changed, 71 insertions(+), 7 deletions(-)
create mode 100644 e2e/src/components/organisms/metadata/index.tsx
diff --git a/e2e/src/components/atoms/input/index.tsx b/e2e/src/components/atoms/input/index.tsx
index a90e52f..060d813 100644
--- a/e2e/src/components/atoms/input/index.tsx
+++ b/e2e/src/components/atoms/input/index.tsx
@@ -3,11 +3,11 @@ interface Props
React.InputHTMLAttributes,
HTMLInputElement
> {
- forwardRef: React.LegacyRef;
+ forwardref: React.LegacyRef;
}
const Input = (props: Props) => (
-
+
);
export default Input;
diff --git a/e2e/src/components/organisms/metadata/index.tsx b/e2e/src/components/organisms/metadata/index.tsx
new file mode 100644
index 0000000..caf738c
--- /dev/null
+++ b/e2e/src/components/organisms/metadata/index.tsx
@@ -0,0 +1,48 @@
+import {
+ MouseEventHandler,
+ MutableRefObject,
+ ReactNode,
+ useRef,
+ useState,
+} from 'react';
+import Block from 'components/molecules/block';
+import Input from 'components/atoms/input';
+import Video from 'amplify-video.js/dist';
+
+interface Props {
+ children?: ReactNode;
+ className?: string;
+ title: string;
+ button?: string;
+ onClick?: MouseEventHandler;
+ callback?: any;
+}
+
+const Metadata = (props: Props) => {
+ const inputRef = useRef() as MutableRefObject;
+ const [loading, setLoading] = useState(false);
+
+ const handleSubmit = async () => {
+ if (!inputRef.current.value) return;
+ setLoading(true);
+ const vodAssetVideoId = inputRef.current.value;
+ const { data } = await Video.metadata(vodAssetVideoId);
+ props.callback(data);
+ setLoading(false);
+ };
+
+ return (
+ await handleSubmit()}
+ >
+ {props.children}
+
+
+ );
+};
+
+export default Metadata;
diff --git a/e2e/src/components/organisms/upload/index.tsx b/e2e/src/components/organisms/upload/index.tsx
index 695fbbe..40ccca1 100644
--- a/e2e/src/components/organisms/upload/index.tsx
+++ b/e2e/src/components/organisms/upload/index.tsx
@@ -55,7 +55,7 @@ const Upload = (props: Props) => {
onClick={async () => await handleSubmit()}
>
{props.children}
-
+
);
};
diff --git a/e2e/src/components/templates/grid/index.tsx b/e2e/src/components/templates/grid/index.tsx
index 204e99f..283a66b 100644
--- a/e2e/src/components/templates/grid/index.tsx
+++ b/e2e/src/components/templates/grid/index.tsx
@@ -1,28 +1,44 @@
import { AmplifySignOut } from '@aws-amplify/ui-react';
import classNames from 'classnames';
import Upload from 'components/organisms/upload';
+import Metadata from 'components/organisms/metadata';
import { useState } from 'react';
import './style.scss';
const Grid = () => {
- const [result, setResult] = useState(null);
+ const [result, setResult] = useState(null);
return (
setResult(data)}
- className={classNames('item-left')}
+ callback={(data: any) => setResult({ upload: data, ...result })}
>
Testing Upload method
Video.upload();
- {result ? JSON.stringify(result) : null}
+
+ {result && result.upload ? JSON.stringify(result.upload, null, 2) : null}
+
+
setResult({ metadata: data, ...result })}
+ >
+
+ Testing Metadata method
+
+ Video.metadata();
+
+
+ {result && result.metadata ? JSON.stringify(result.metadata, null, 2) : null}
+
+
);
};
From ec96a5294f03a53453588ea4289d59a196d3c000 Mon Sep 17 00:00:00 2001
From: Nathan
Date: Sat, 18 Sep 2021 00:36:10 +0200
Subject: [PATCH 2/5] fix(data-cy): Fix data-cy with same values
---
e2e/src/components/atoms/button/index.tsx | 6 ++++--
e2e/src/components/molecules/block/index.tsx | 3 ++-
e2e/src/components/organisms/metadata/index.tsx | 1 +
e2e/src/components/organisms/upload/index.tsx | 1 +
4 files changed, 8 insertions(+), 3 deletions(-)
diff --git a/e2e/src/components/atoms/button/index.tsx b/e2e/src/components/atoms/button/index.tsx
index 79da66c..92a90e0 100644
--- a/e2e/src/components/atoms/button/index.tsx
+++ b/e2e/src/components/atoms/button/index.tsx
@@ -28,10 +28,12 @@ type Props = {
children: ReactNode;
className: string;
disabled: boolean;
+ dataCy: string;
};
const Button = (props: Props) => {
- const { type, onClick, children, theme, size, className, disabled } = props;
+ const { type, dataCy, onClick, children, theme, size, className, disabled } =
+ props;
const classProps: string = classnames(
'button',
theme,
@@ -42,7 +44,7 @@ const Button = (props: Props) => {
return (
-
+
{result && result.upload ? JSON.stringify(result.upload, null, 2) : null}
@@ -35,7 +35,7 @@ const Grid = () => {
Video.metadata();
-
+
{result && result.metadata ? JSON.stringify(result.metadata, null, 2) : null}
From 834ccf888614cf614cee5eeabd4b42df8380b479 Mon Sep 17 00:00:00 2001
From: Nathan
Date: Mon, 20 Sep 2021 15:38:53 +0200
Subject: [PATCH 4/5] refactor(*): Exclude screenshots folder and increase
reponse timeout
---
e2e/.gitignore | 2 +
.../integration/upload/01-upload.spec.js | 39 ++++++++++---------
e2e/cypress/support/commands.js | 2 +-
3 files changed, 23 insertions(+), 20 deletions(-)
diff --git a/e2e/.gitignore b/e2e/.gitignore
index 61f0a69..17c11d5 100644
--- a/e2e/.gitignore
+++ b/e2e/.gitignore
@@ -29,4 +29,6 @@ cypress.env.json
cypress/videos/**/*.mp4
+cypress/screenshots/**/*.png
+
cypress/fixtures/upload-response.json
\ No newline at end of file
diff --git a/e2e/cypress/integration/upload/01-upload.spec.js b/e2e/cypress/integration/upload/01-upload.spec.js
index 9cd1c2f..3d691dd 100644
--- a/e2e/cypress/integration/upload/01-upload.spec.js
+++ b/e2e/cypress/integration/upload/01-upload.spec.js
@@ -1,3 +1,4 @@
+import { RESPONSE_FILE_PATH } from '../../utils/constant';
import { aliasMutation } from '../../utils/graphql-test-utils';
describe('File upload', () => {
@@ -15,25 +16,25 @@ describe('File upload', () => {
});
cy.intercept('PUT', '*PutObject').as('s3Put');
- cy.wait(['@createVideoObject', '@createVodAsset', '@s3Put']).spread(
- (createVideoObject, createVodAsset, s3Put) => {
- expect(
- createVideoObject.response.body.data.createVideoObject,
- ).to.not.equal(null);
- expect(createVodAsset.response.body.data.createVodAsset).to.not.equal(
- null,
- );
- expect(s3Put.response.statusCode).to.equal(200);
- cy.wait(1000);
- cy.get('[data-cy=pre-upload]')
- .invoke('html')
- .then((response) => {
- cy.wrap(response).as('response');
- });
- cy.get('@response').then((response) => {
- cy.writeFile(RESPONSE_FILE_PATH, response);
+ cy.wait(['@createVideoObject', '@createVodAsset', '@s3Put'], {
+ responseTimeout: 60000,
+ }).spread((createVideoObject, createVodAsset, s3Put) => {
+ expect(
+ createVideoObject.response.body.data.createVideoObject,
+ ).to.not.equal(null);
+ expect(createVodAsset.response.body.data.createVodAsset).to.not.equal(
+ null,
+ );
+ expect(s3Put.response.statusCode).to.equal(200);
+ cy.wait(1000);
+ cy.get('[data-cy=pre-upload]')
+ .invoke('html')
+ .then((response) => {
+ cy.wrap(response).as('response');
});
- },
- );
+ cy.get('@response').then((response) => {
+ cy.writeFile(RESPONSE_FILE_PATH, response);
+ });
+ });
});
});
diff --git a/e2e/cypress/support/commands.js b/e2e/cypress/support/commands.js
index 4229534..083706c 100644
--- a/e2e/cypress/support/commands.js
+++ b/e2e/cypress/support/commands.js
@@ -26,7 +26,7 @@ console.log(awsconfig);
Auth.configure(awsconfig);
Cypress.Commands.add('signIn', () => {
- cy.then({ timeout: 6000 }, () => Auth.signIn(username, password)).then(
+ cy.then({ timeout: 60000 }, () => Auth.signIn(username, password)).then(
(cognitoUser) => {
const idToken = cognitoUser.signInUserSession.idToken.jwtToken;
const accessToken = cognitoUser.signInUserSession.accessToken.jwtToken;
From 483da91e1118aa3fb1280a4ad452402d47bd9edd Mon Sep 17 00:00:00 2001
From: Nathan
Date: Mon, 20 Sep 2021 15:59:11 +0200
Subject: [PATCH 5/5] refactor(paths): Delete upload folder and move everything
in integration folder
---
e2e/cypress/integration/{upload => }/01-upload.spec.js | 4 ++--
e2e/cypress/integration/{upload => }/02-metadata.spec.js | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
rename e2e/cypress/integration/{upload => }/01-upload.spec.js (90%)
rename e2e/cypress/integration/{upload => }/02-metadata.spec.js (89%)
diff --git a/e2e/cypress/integration/upload/01-upload.spec.js b/e2e/cypress/integration/01-upload.spec.js
similarity index 90%
rename from e2e/cypress/integration/upload/01-upload.spec.js
rename to e2e/cypress/integration/01-upload.spec.js
index 3d691dd..d749b02 100644
--- a/e2e/cypress/integration/upload/01-upload.spec.js
+++ b/e2e/cypress/integration/01-upload.spec.js
@@ -1,5 +1,5 @@
-import { RESPONSE_FILE_PATH } from '../../utils/constant';
-import { aliasMutation } from '../../utils/graphql-test-utils';
+import { RESPONSE_FILE_PATH } from '../utils/constant';
+import { aliasMutation } from '../utils/graphql-test-utils';
describe('File upload', () => {
it('Video.upload method', () => {
diff --git a/e2e/cypress/integration/upload/02-metadata.spec.js b/e2e/cypress/integration/02-metadata.spec.js
similarity index 89%
rename from e2e/cypress/integration/upload/02-metadata.spec.js
rename to e2e/cypress/integration/02-metadata.spec.js
index 6cd15fb..a132053 100644
--- a/e2e/cypress/integration/upload/02-metadata.spec.js
+++ b/e2e/cypress/integration/02-metadata.spec.js
@@ -1,5 +1,5 @@
-import { RESPONSE_FILE_PATH } from '../../utils/constant';
-import { aliasMutation } from '../../utils/graphql-test-utils';
+import { RESPONSE_FILE_PATH } from '../utils/constant';
+import { aliasMutation } from '../utils/graphql-test-utils';
describe('Fetching metadata', () => {
beforeEach(() => {