Structure tests - smbc-digital/form-builder GitHub Wiki

Structure tests

Table of contents

How to run structure tests locally

  • cd into tests/structure-tests
  • Run npm i or npm install
  • In a separate terminal, run formbuilder with dotnet run
    • You can run formbuilder in IIS through Visual Studio, if you do you need to change the baseUrl value in cypress.json
  • Run npm run start. This should open a browser with the list of Cypress tests
  • To run all the tests, click on Run ** integration specs in the upper right hand corner
  • Each test will run and show you pass/fail information

Common reasons for failure

  • If your test returns a 500 when navigating to the form page, it's likely there is a Property missing from the form json or your BaseUrl Property does not match your test url
  • The snapshot is different
    • Before you generate a new snapshot, make sure that the DOM structure change is expected behaviour

Adding a new structure test

  • Add your test json to the main dsl folder in formbuilder, and make sure it's prefixed with ui- so it doesn't get included in the git ignore
  • Create a new folder in the integration folder, and inside that create an index.js file
  • In the index.js file you write your tests
    • describe is the name of the group of tests, this should be the name of the Component being tested and the same as the name of the folder
    • it is the name of the test, this should be descriptive of the configuration or page of the Component being tested
  • Run the test and this should update the snapshot.js file with the current DOM

Updating a snapshot

  • Once you are sure that a snapshot.js should be updated, remove the key value pair (eg "1": "\n <fieldset aria-describedby=...") from the corresponding snapshot test DOM in the base snapshot.js
  • Run the test and this should update the snapshot.js file with the new DOM