test(ExpenseFlow): Add E2E for edit expense

Betree · Betree · commit d456cb0a8a87 · 2020-04-24T18:25:57.000+02:00
diff --git a/components/CollectiveTypePicker.js b/components/CollectiveTypePicker.js
@@ -38,7 +38,15 @@ const CollectiveTypePicker = ({ types, onChange }) => {
   return (
     <Container display="flex" background="white" justifyContent="space-between">
       {types.map(type => (
-        <StyledButton key={type} flex={buttonFlex} px={2} py={4} borderRadius={8} onClick={() => onChange(type)}>
+        <StyledButton
+          key={type}
+          flex={buttonFlex}
+          px={2}
+          py={4}
+          borderRadius={8}
+          onClick={() => onChange(type)}
+          data-cy={`collective-type-picker-${type}`}
+        >
           <Box mb={2}>{getTypeIcon(type)}</Box>
           <Span fontSize="Caption">{formatCollectiveType(formatMessage, type)}</Span>
         </StyledButton>
diff --git a/components/CreateCollectiveMiniForm.js b/components/CreateCollectiveMiniForm.js
@@ -206,7 +206,7 @@ const CreateCollectiveMiniForm = ({ type, onCancel, onSuccess, addLoggedInUserAs
         const { values, handleSubmit, errors, touched, isSubmitting } = formik;
 
         return (
-          <Form>
+          <Form data-cy="create-collective-mini-form">
             <H5 fontWeight={600}>{CreateNewMessages[type] ? formatMessage(CreateNewMessages[type]) : null}</H5>
             <Box mt={3}>
               {(isUser || isOrganization) && (
diff --git a/components/StyledDropzone.js b/components/StyledDropzone.js
@@ -101,6 +101,7 @@ const StyledDropzone = ({
   accept,
   minSize,
   maxSize,
+  name,
   error,
   value,
   isMulti,
@@ -156,7 +157,7 @@ const StyledDropzone = ({
       size={size}
       error={error}
     >
-      <input {...getInputProps()} />
+      <input name={name} {...getInputProps()} />
       {isLoading || isUploading ? (
         <Container
           position="relative"
@@ -230,6 +231,8 @@ const StyledDropzone = ({
 StyledDropzone.propTypes = {
   /** Called back with the uploaded files on success */
   onSuccess: PropTypes.func,
+  /** Name for the input */
+  name: PropTypes.string,
   /** Called back with the rejectd files */
   onReject: PropTypes.func,
   /** Content to show inside the dropzone. Defaults to message "Drag and drop one or..." */
diff --git a/components/TemporaryNotification.js b/components/TemporaryNotification.js
@@ -48,12 +48,13 @@ const TemporaryNotification = ({ children, position, onDismiss }) => {
   }
 
   return (
-    <Notification position={position}>
+    <Notification position={position} data-cy="temporary-notification">
       <Box mr="auto" />
       <Box>{children}</Box>
       <Box ml="auto">
         <DismissButton
           ml={2}
+          data-cy="dismiss-temporary-notification-btn"
           onClick={() => {
             setDismissed(true);
             if (onDismiss) {
diff --git a/components/expenses/ExpenseAdminActions.js b/components/expenses/ExpenseAdminActions.js
@@ -80,7 +80,7 @@ const ExpenseAdminActions = ({ expense, collective, permissions, onError, onEdit
         </ButtonLabel>
       </ButtonWithLabel>
       {permissions?.canEdit && (
-        <ButtonWithLabel onClick={onEdit} disabled={isDisabled}>
+        <ButtonWithLabel onClick={onEdit} disabled={isDisabled} data-cy="edit-expense-btn">
           <IconEdit size={16} />
           <ButtonLabel>
             <FormattedMessage id="Edit" defaultMessage="Edit" />
diff --git a/components/expenses/ExpenseForm.js b/components/expenses/ExpenseForm.js
@@ -220,7 +220,13 @@ const ExpenseFormBody = ({ formik, payoutProfiles, collective, autoFocusTitle, o
                 {formatMessage(isReceipt ? msg.step1 : msg.step1Invoice)}
               </Span>
               <StyledHr flex="1" borderColor="black.300" mx={2} />
-              <StyledButton buttonSize="tiny" type="button" onClick={() => addNewExpenseItem(formik)} minWidth={135}>
+              <StyledButton
+                buttonSize="tiny"
+                type="button"
+                onClick={() => addNewExpenseItem(formik)}
+                minWidth={135}
+                data-cy="expense-add-item-btn"
+              >
                 +&nbsp;{formatMessage(isReceipt ? msg.addNewReceipt : msg.addNewItem)}
               </StyledButton>
             </Flex>
@@ -259,6 +265,7 @@ const ExpenseFormBody = ({ formik, payoutProfiles, collective, autoFocusTitle, o
                               inputId={id}
                               collectives={payoutProfiles}
                               getDefaultOptions={build => values.payee && build(values.payee)}
+                              data-cy="select-expense-payee"
                               onChange={({ value }) => {
                                 formik.setFieldValue('payee', value);
                                 formik.setFieldValue('payoutMethod', null);
diff --git a/components/expenses/ExpenseItemForm.js b/components/expenses/ExpenseItemForm.js
@@ -106,6 +106,8 @@ const ExpenseItemForm = ({ attachment, errors, onRemove, currency, requireFile,
                 >
                   <StyledDropzone
                     {...attachmentDropzoneParams}
+                    data-cy={`${field.name}-dropzone`}
+                    name={field.name}
                     isMulti={false}
                     error={meta.error}
                     onSuccess={url => form.setFieldValue(field.name, url)}
diff --git a/test/cypress/integration/27-expenses.test.js b/test/cypress/integration/27-expenses.test.js
@@ -1,4 +1,5 @@
 import 'cypress-file-upload';
+import { randomEmail } from '../support/faker';
 const random = Math.round(Math.random() * 100000);
 const expenseDescription = `New expense ${random}`;
 
@@ -47,7 +48,7 @@ describe('New expense flow', () => {
       cy.getByDataCy('expense-create-help').should('not.exist');
     });
 
-    it('submits new expense ', () => {
+    it('submits new expense then edit it', () => {
       cy.getByDataCy('radio-expense-type-RECEIPT').click();
       cy.get('input[name="description"]').type('Brussels January team retreat');
 
@@ -92,8 +93,55 @@ describe('New expense flow', () => {
       cy.getByDataCy('expense-summary-items').should('contain', 'Fancy restaurant');
       cy.getByDataCy('expense-summary-items').should('contain', 'Potatoes for the giant raclette');
 
+      // Submit!
       cy.getByDataCy('submit-expense-btn').click();
+      cy.contains('[data-cy="temporary-notification"]', 'Expense submited!');
       cy.contains('[data-cy="expense-page-content"]', 'Brussels January team retreat');
+      cy.getByDataCy('dismiss-temporary-notification-btn').click();
+      cy.getByDataCy('temporary-notification').should('not.exist');
+
+      // Start editing
+      cy.getByDataCy('edit-expense-btn').click();
+      cy.get('input[name="description"]').type(' edited');
+      cy.get('input[name="items[0].description"]').type(' but not too expensive');
+      cy.get('input[name="items[0].amount"]').type('{selectall}111');
+      // Add new item
+      cy.getByDataCy('expense-add-item-btn').click();
+      cy.get('input[name="items[2].description"]').type('Some more delicious stuff');
+      cy.get('input[name="items[2].amount"]').type('{selectall}34');
+      cy.fixture('images/receipt.jpg').then(fileContent => {
+        cy.getByDataCy('items[2].url-dropzone').upload(
+          [{ fileContent, fileName: `receipt2.jpg`, mimeType: 'image/jpeg' }],
+          { subjectType: 'drag-n-drop' },
+        );
+      });
+      // Change payee - use a new organization
+      cy.getByDataCy('select-expense-payee').click();
+      cy.getByDataCy('collective-type-picker-ORGANIZATION').click();
+      cy.getByDataCy('create-collective-mini-form').then($form => {
+        cy.wrap($form).find('input[name="members[0].member.email"]').type(randomEmail());
+        cy.wrap($form).find('input[name="members[0].member.name"]').type('Jack');
+        cy.wrap($form).find('input[name="name"]').type('PayeeOrg');
+        cy.wrap($form).find('button[type="submit"]').click();
+      });
+      cy.getByDataCy('create-collective-mini-form').should('not.exist'); // Wait for form to be submitted
+      cy.getByDataCy('payout-method-select').click();
+      cy.contains('[data-cy="select-option"]', 'New PayPal account').click();
+      cy.get('input[name="payoutMethod.data.email"]').type('paypal-test-2@opencollective.com');
+      cy.getByDataCy('expense-summary-btn').click();
+      cy.getByDataCy('submit-expense-btn').click();
+      cy.getByDataCy('submit-expense-btn').should('not.exist'); // wait for form to be submitted
+
+      // Check final expense page
+      cy.contains('[data-cy="expense-page-content"]', 'Brussels January team retreat edited');
+      cy.getByDataCy('expense-summary-payee').should('contain', 'PayeeOrg');
+      cy.getByDataCy('expense-summary-host').should('contain', 'Open Source Collective org');
+      cy.getByDataCy('expense-summary-payout-method-data').should('contain', 'paypal-test-2@opencollective.com');
+      cy.getByDataCy('expense-summary-payout-method-type').should('contain', 'PayPal');
+      cy.getByDataCy('expense-items-total-amount').should('contain', '$237.50 USD');
+      cy.getByDataCy('expense-summary-items').should('contain', 'Fancy restaurant');
+      cy.getByDataCy('expense-summary-items').should('contain', 'Potatoes for the giant raclette');
+      cy.getByDataCy('expense-summary-items').should('contain', 'Some more delicious stuff');
     });
 
     // This can happen if you start with an invoice then switch to receipts

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,8 @@ const ExpenseItemForm = ({ attachment, errors, onRemove, currency, requireFile,`
`106`	`106`	`>`
`107`	`107`	`<StyledDropzone`
`108`	`108`	`{...attachmentDropzoneParams}`
	`109`	+ data-cy={`${field.name}-dropzone`}
	`110`	`+ name={field.name}`
`109`	`111`	`isMulti={false}`
`110`	`112`	`error={meta.error}`
`111`	`113`	`onSuccess={url => form.setFieldValue(field.name, url)}`