User Interaction Testing about web-components

[irmerk]

I put in a request to Cypress. If approved, Cypress will provide AP with a plan that allows unlimited test recordings and up to 5 users. All projects we create in the Cypress Dashboard will be public. Data will be retained for 90 days. Our organization will have access to all the features the Cypress Dashboard provides, including parallelization.

CC: @jeromesimeon @DianaLease @dselman @mttrbrts @accordproject/maintainers-ui @accordproject/tsc @accordproject/contributors

[sanketshevkar]

May I start working on this?

[irmerk]

OH! Yeah I don't know why that is, that must've been a mistake on my part sorry about that.

[irmerk]

This approach doesn't strike me as wrong so far, so yeah let's see how this progress goes. Storybook suggesting Cypress is a good sign that it would be a good approach.

[mttrbrts]

@sanketshevkar Let's be pragmatic, the second option works for you, and we have a sample here: https://github.com/accordproject/web-components/blob/master/packages/storybook/cypress/storybook/storybook.spec.js

Let's go with 2.

One downside is that it requires a contributor to run tests for the storybook package when only making changes to an individual component. However, we can probably mitigate that with some test filtering and good docs.

[Cronus1007]

@sanketshevkar Since the issue is very large so lets divide issue.

[Cronus1007]

I've been anyways unassigned from this one. It's an open issue now. I've started with testing headings. If you want you can join in for that or pick up any other part you want.

Okk So I will pick up the Marks part then.

[irmerk]

Yeah maybe this isn't the best way, but I'm thinking call out which one you want to work on and we can put your name next to it in the original post. So I'll put @sanketshevkar on headings and @Cronus1007 on marks.

[sanketshevkar]

@irmerk I'm not able to find the code for this test.

[irmerk]

@sanketshevkar none of these tests currently exist. The Issue is for creating them.

[sanketshevkar]

@sanketshevkar none of these tests currently exist. The Issue is for creating them.

No problem, the checkbox was checked, that's why I thought so.

[sanketshevkar]

I'm writing the interaction tests using cypress. The storybook documentation also suggested using enzyme or cypress for interaction testing. Also setting up enzyme within storyshots was a bit complicated so decided to use cypress which is working fine. I did some dummy tests with the web-components storybook and seemed to workout, I'll share the video by tomorrow. Just wanted to know whether this approach would be right?

[sanketshevkar]

https://www.loom.com/share/b128d0a885694420bf4d55edda57ab73
Video for cypress test.

1. Places cursor inside the paragraph:

This is text. This is italic text. This is bold text. This is a link. This is inline code.

2. Changes it to Header 2.
3. Undo
4. Redo

[sanketshevkar]

@irmerk what is the difference between

Selecting a paragraph and changing to header 1, 2, 3

Switching paragraph to header 1, 2, 3

[irmerk]

Very cool. I haven't used Cypress before. It looks like we'll want to set up an OSS plan with them (instructions) and implement this in GitHub Actions for this repo.

These two you mentioned may end up being the same. In my mind I wanted to distinguish the difference between highlighting an entire paragraph with the cursor, placing the cursor inside the paragraph, highlighting a word, and highlighting the paragraph with a triple click.

[irmerk]

I think just continue on @sanketshevkar, I'm opening another Issue to track setting up Cypress for this repo.

[sanketshevkar]

@irmerk That sounds great. Should I create a pr for cypress setup and then start working on the tests?

[irmerk]

What would that involve @sanketshevkar?

[sanketshevkar]

Basically has two parts:

1. Setting up cypress on your local machine.
2. Setting up cypress within your project, which is a simple npm install command, update scripts in package.json, after running the test for the first time it sets up a cypress folder with some sample tests. I'll delete the example tests within the cypress folder and create a file for markdown-editor test.

[irmerk]

Yeah I think that works

[sanketshevkar]

@irmerk I've made a pull request with the cypress setup.

[Cronus1007]

@irmerk @sanketshevkar Cypress testing only deals with the automated testing software for e2e whereas there is a need to lay down the setup for unit testing as well.

[irmerk]

What do you propose @Cronus1007?

[Cronus1007]

@irmerk The Jest will be the best open source tool for unit testing of React Web Apps but I highly prefer a combined mocha and chai for the testing of js applications. Plus can start the work for cypress once #282 gets merged.

[mttrbrts]

We should follow the precedent set in ui-concerto that uses Jest and react-testing-library for unit tests.

[Cronus1007]

This issue will track the tests which need to be implemented in order to increase stability of this codebase. Please feel free to add suggestions.

Hotkeys in markdown-editor have not been added i guess.

[irmerk]

Now that #282 is finished, this Issue becomes a lot more accessible. I'm going to mark it as unassigned because this is probably the single most important Issue in this repo currently and I want to leave it open for as many people to work on it as possible.

[sanketshevkar]

Now that #282 is finished, this Issue becomes a lot more accessible. I'm going to mark it as unassigned because this is probably the single most important Issue in this repo currently and I want to leave it open for as many people to work on it as possible.

Works for me 👍.

[sanketshevkar]

@irmerk I wanted to discuss the structure of the tests. Basically, there are two ways we can do it:

1. mount the component and test the interactions.
2. load the storybook using the localhost url and test the component interactions.

The first one is suggested by cypress docs and the second one by storybook docs, which one would be preferable?
I've tried using the second method and it was working.

[sanketshevkar]

@sanketshevkar Let's be pragmatic, the second option works for you, and we have a sample here: https://github.com/accordproject/web-components/blob/master/packages/storybook/cypress/storybook/storybook.spec.js

Let's go with 2.

One downside is that it requires a contributor to run tests for the storybook package when only making changes to an individual component. However, we can probably mitigate that with some test filtering and good docs.

Okay, that sounds cool. I'll move ahead with this.

[sanketshevkar]

@sanketshevkar Since the issue is very large so lets divide issue.

I've been anyways unassigned from this one. It's an open issue now. I've started with testing headings. If you want you can join in for that or pick up any other part you want.

[sanketshevkar]

@mttrbrts @irmerk is this still needed/open? If yes, I can pick this up again 😄