cypress: minimal testcase with decryption #17

Author: johannesloetzsch

frontend/submission/components/forms/FinalControlStep.tsx

@@ -3,9 +3,10 @@ import {Box, Divider, Paper, Typography} from '@mui/material'
 import {blue, green, grey} from '@mui/material/colors'
 import React, {useState} from 'react'
 import {useTranslation} from 'react-i18next'
-import {resources} from '../../i18n'
-import {useTokenStore, useSubmittedStore} from '../../state'
+
 import {useIs_TranslatorQuery} from '../../api/generates'
+import {resources} from '../../i18n'
+import {useSubmittedStore,useTokenStore} from '../../state'
 import FormTranslationHelper from './FormTranslationHelper'
 import SubmitFormButton from './SubmitFormButton'
 

frontend/submission/components/forms/LocalizedJsonForms.tsx

@@ -11,11 +11,11 @@ import {Divider} from '@mui/material'
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {useTranslation} from 'react-i18next'
 
+import {useIs_TranslatorQuery} from '../../api/generates'
 import {formNamespace} from '../../i18n'
 import {jsonSchema2TranslationJsonSchema} from '../../schema/utils'
 import {LocalizedFormTranslation} from '../../schema/utils/types'
 import {useTokenStore, useTranslationState} from '../../state'
-import {useIs_TranslatorQuery} from '../../api/generates'
 import MaterialListWithDetailRenderer from '../renderer/MaterialListWithDetailRenderer'
 import UploadRenderer from '../renderer/UploadRenderer'
 import FormTranslationHelper from './FormTranslationHelper'

frontend/submission/components/forms/SubmitFormButton.tsx

@@ -41,6 +41,7 @@ const SubmitFormButton = ({}: SubmitFormButtonProps) => {
     variant='contained'
     disabled={isLoading}
     onClick={() => {mutate()}}
+    title='submit'
   >{
     submitted ? t('submitted') : t('submit')
   }</Button>

frontend/submission/cypress/integration/1-core/minimal.spec.js

@@ -1,17 +1,37 @@
-describe('Minimal test before testing details', () => {
-  it('Click through wizard and submit the form', () => {
+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')
-    // TODO can we change the property name to something namespaced by the form?
+    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.')
+    /** 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/firstName-input"]', {timeout: 30000})
       .type('Max')
 
-    cy.log('Visit wizards last form step before submission')
-    cy.visit('/?token=demoToken&step=3')
     cy.get('button[title="proceed to next step"]').click()
+    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)
+    cy.get('button[title="proceed to next step"]').click()
+    cy.get('button[title="proceed to next step"]').click()
+    cy.get('button[title="proceed to next step"]').click()
     cy.get('main').contains('Almost done')
-    // TODO we need proper selectors for the submit buttons
+
+    cy.get('button[title="submit"]').first().click()
+    cy.get('main').contains('Successfully submitted')
+  })
+
+  it('Decrypt formData', () => {
+    cy.log('We expect, the test key is imported (gpg --import backend/data/keys/test.sec.gpg)')  // TODO we should use a separate keyring
+    cy.exec('(cd ../../backend/data/upload/demoToken/; gpg --decrypt --passphrase "test" "$(ls -t formData* | head -n1)")')
+      .then($result => {
+	const formData = JSON.parse($result.stdout)
+	cy.log(formData)
+      })
   })
 })