Cypress tests for visual editor

[trendschau]

This is a lot of work and I am not a cypress guru. Help highly appreciated.

[MysterieDev]

Are there specific topics you need adressed using cypress tests

Maybe i can contribute regarding e2e tests with Cypress.

[trendschau]

Yes, auto-testing the visual editor is probably one of the most important task, I started with it but no time right now. Help is much appreciated. Unfortunatley my cypress setup is broken since the last update.

In general these tests did help 2 or 3 times to find bugs, so not super efficient but still helpful :) My tests are not written very good, especially they advice to use special cypress classes to disconnect testing from layout-classes.

One thing is that I plan to migrate the backoffice to Vue and Tachyons CSS, because it is quite clunky right now. Not sure if that should be the first task and then writing tests to avoid doublicate work.

[MysterieDev]

So i guess this is your - kind of - seeding data for testing setup? https://github.com/typemill/typemill/blob/master/cypress/test01-system-setup.spec.js

I would prepare some md files using a php job, im not familiar with php build tools so much. This is kind of comparable to database-seeding. Typemills md files are the db in this case

Personally, i also would try to disconnect classes completely from e2e testing. you can use data-... attributes freely in the html space. For example data-cy-section="test" and just select it with the querySelector('[data-cy-section="test"]') This way - except for cases, where it removes data-attributes - you dont cross paths with any of your application logic.

Lately i've been highly busy but i see if i get your cy setup to work locally in the next few days.

[trendschau]

yes, that is a good idea with the data-attribute!

Exactly, the cypress-folder contains the tests that I have written so far (not sure if that are the latest versions, I will check and update them). I use the mardkown-demo-content that ships with typemill, so I simply extract typemill, setup cypress in the typemill folder and run the tests. So my structure looks like this:

- typemill
  - cache
  - content
  - cypress
    - fixtures
    - integrations
      -> here are the test-files
    - plugins
    - screenshots
    - support
    - videos
  - cypress-examples
  - media
  - node_modules
  - plugins
  - settings
  - system
  - themes

[MysterieDev]

@trendschau just asking, why dont you keep the cypress folder structure as whole into the repository?

[trendschau]

Locally I use a little php-script that creates a lightweight zip-folder without all development files from my development-folder, then it unpacks the zipped version in a separate test-folder and there I test that unpacked version with cypress. It ensures that the lightweight zip-version that I publish on the website is tested and runs correctly.

But you are totally right, I should at least add the whole "cypress" folder to the development version, I will change that.

[MysterieDev]

I'll draft a pr (if I got the privileges) and start setting up some things. I can add that

[MysterieDev]

@trendschau i fixed the cytests in this pr:

https://github.com/typemill/typemill/pull/314

you can try them out. just install cy global and have node 14 or higher

i accidentally commited directly onto develop. Normally with gitflow, this branch should be "protected" and only mergeable with feature branches, maybe you can add that for future collaborators.

[MysterieDev]

@trendschau the second one #315 removes redundancy in the cy setup - and adds the possibility to add seeded settings, etc..

Whats the most important parts needed to be tested in your visual editor?

[trendschau]

thank you very much for contributions, I will add cypress again later if I find more time. Actually autotests did not help too much with finding bugs, so I will add it if bugs become a problem again.