Feature/test upload

frontend/submission/components/forms/AddAttachmentButton.tsx

@@ -8,13 +8,15 @@ import {ID, useArmoredDatastore, useTokenStore} from '../../state'
 type AddAttachementButtonProps = {
   onUploadsAdded?: (id: { id: ID, fileName: string, fileType: string }[]) => void,
   label?: string,
+  path: string,
   uploadCount?: number
   ids?: ID[]
 }
 
 const AddAttachmentButton = ({
   onUploadsAdded,
   label,
+  path,
   uploadCount = 0,
   ids = [],
   ...inputProps
@@ -55,7 +57,7 @@ const AddAttachmentButton = ({
         : t('attachment.add_document')
       }
     </Button>
-    <input {...inputProps} type="file" ref={inputEl} style={{ display: 'none' }}
+    <input {...inputProps} id={`${path}-file-input`} type="file" ref={inputEl} style={{ display: 'none' }}
        onChange={onInputChange}
     />
   </>

frontend/submission/components/forms/AttachmentsList.tsx

@@ -66,6 +66,7 @@ const AttachmentEntry = ({ id, description, onChangeDescription, blob, status, o
     </ListItemAvatar>
     <ListItemText
       primary={<TextField
+        id={`attachment-description-${blob.name}`}
         variant='outlined'
         sx={{ width: '100%' }}
         label={t('attachment.description', { name: blob.name })}

frontend/submission/components/renderer/UploadRenderer.tsx

@@ -69,7 +69,7 @@ const UploadRenderer = ({data, handleChange, path, label, schema, visible}: Uplo
 
   return <Hidden xsUp={!visible}>
     <Box style={{marginTop: '1em'}}>
-      <AddAttachmentButton ids={uploads.map(({ id }) => id)} onUploadsAdded={handleAddUploads} multiple={isArray} label={label} uploadCount={ownAttachmentStates.length}/>
+      <AddAttachmentButton ids={uploads.map(({ id }) => id)} onUploadsAdded={handleAddUploads} multiple={isArray} label={label} path={path} uploadCount={ownAttachmentStates.length}/>
       <AttachmentsList
         attachmentStates={ownAttachmentStates}
         descriptions={uploads}

frontend/submission/cypress/integration/5-attachment/attachments.spec.js

@@ -0,0 +1,76 @@
+const gotoNextPage = () => {
+  // wait for {formData} to hit the state
+  cy.wait(300)
+
+  cy.get('button[title="proceed to next step"]').click()
+}
+
+describe('Minimal test, to check the setup before testing details', () => {
+  it('Click through wizard and fill some of the forms', () => {
+    cy.visit('/?token=demoToken')
+    cy.log('In case of a dev build it might take some time to jit compile…')
+    cy.log('The next test might fail, when the id is taken by another property with the same name. This sometimes happens with the combination of jsonforms and next dev builds.')
+    cy.get('[data-testid="SendIcon"]').click()
+    gotoNextPage()
+    /** TODO We need proper test selectors from jsonforms inputs.
+     *  - selectors should be stable in next dev builds
+     *  - selectors should be uniq when properties are reused at different places or we always need select the parent component (form) first
+     **/
+    cy.get('input[id="#/properties/passportExisting-input"]', {timeout: 30000})
+      .click()
+    cy.wait(300)
+    cy.get('input[id="passportAttachment-file-input"]', {timeout: 30000})
+      .attachFile('passport.jpg')
+    cy.get('input[id="#/properties/tazkiraExisting-input"]', {timeout: 30000})
+      .click()
+    cy.wait(300)
+    cy.get('input[id="tazkiraAttachment-file-input"]', {timeout: 30000})
+      .attachFile('tazkira.jpg')
+    cy.wait(300)
+
+    cy.get('input[id="attachment-description-tazkira.jpg"]', {timeout: 30000})
+      .type('This is my Tazkira')
+    cy.wait(300)
+
+    gotoNextPage()
+    cy.get('textarea[id="#/properties/risksCV-input"]')
+      .type('risks…')
+  })
+
+  it('Submit the formData', () => {
+    // TODO we need selectors for navigating to a wizard step (without reloading the page)
+    gotoNextPage()
+    gotoNextPage()
+    gotoNextPage()
+    gotoNextPage()
+    cy.get('main').contains('Almost done')
+
+    cy.get('button[title="submit"]').first().click()
+    cy.get('main').contains('Successfully submitted')
+  })
+
+  it('Decrypt formData', () => {
+    // TODO we should use a separate keyring
+    let formData
+    cy.exec('(cd ../../backend/data/upload/demoToken/; gpg --decrypt --passphrase "test" "$(ls -t formData* | head -n1)")')
+      .then($result => {
+	const formData_ = JSON.parse($result.stdout)
+        formData = formData_
+        expect(formData).to.have.any.keys('general')
+        expect(formData.general).to.have.any.keys('passportAttachment')
+        expect(formData.general.passportAttachment.uploadStatus).to.equal(200)
+        expect(formData.general.passportAttachment.fileType).to.equal('image/jpeg')
+        expect(formData.general).to.have.any.keys('tazkiraAttachment')
+        expect(formData.general.tazkiraAttachment.uploadStatus).to.equal(200)
+        expect(formData.general.tazkiraAttachment.fileType).to.equal('image/jpeg')
+        expect(formData.general.tazkiraAttachment.description).to.equal('This is my Tazkira')
+        expect(formData).to.have.any.keys('risks')
+        expect(formData.risks).to.have.any.keys('risksCV')
+        expect(formData.risks.risksCV).to.equal('risks…')
+      }).then(() =>
+        cy.exec(`(cd ../../backend/data/upload/demoToken/; gpg --decrypt --passphrase "test" attachment_${formData.general.passportAttachment.id}_*.gpg) | cmp - cypress/fixtures/passport.jpg`)
+      ).then(() =>
+        cy.exec(`(cd ../../backend/data/upload/demoToken/; gpg --decrypt --passphrase "test" attachment_${formData.general.tazkiraAttachment.id}_*.gpg) | cmp - cypress/fixtures/tazkira.jpg`)
+      )
+  })
+})

frontend/submission/cypress/support/commands.js

@@ -23,3 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import 'cypress-file-upload'

frontend/submission/nix/package.json

@@ -46,6 +46,7 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/uuid": "^8.3.4",
+    "cypress-file-upload": "^5.0.8",
     "eslint": "^8.12.0",
     "next-remove-imports": "^1.0.6",
     "typescript": "^4.6.3"

frontend/submission/nix/yarn.nix

@@ -1233,6 +1233,14 @@
         sha1 = "d66700c5eacfac1940deb4e3ee5642792d85cd33";
       };
     }
+    {
+      name = "cypress_file_upload___cypress_file_upload_5.0.8.tgz";
+      path = fetchurl {
+        name = "cypress_file_upload___cypress_file_upload_5.0.8.tgz";
+        url  = "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz";
+        sha1 = "d8824cbeaab798e44be8009769f9a6c9daa1b4a1";
+      };
+    }
     {
       name = "dayjs___dayjs_1.10.6.tgz";
       path = fetchurl {

frontend/submission/yarn.lock

@@ -1134,6 +1134,11 @@ csstype@^3.0.11, csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
   integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
 
+cypress-file-upload@^5.0.8:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/cypress-file-upload/-/cypress-file-upload-5.0.8.tgz#d8824cbeaab798e44be8009769f9a6c9daa1b4a1"
+  integrity sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==
+
 dayjs@1.10.6:
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.6.tgz#288b2aa82f2d8418a6c9d4df5898c0737ad02a63"