Added end to end tests framework and initial basic tests.

[kolarski]

Congratulation on the great project!

I really like the project and all the functionality that supports. It was something I was looking for a long time!

I wanted to help fix few of the outstanding issues for my use case, specifically: https://github.com/dipson88/treeselectjs/issues/73

But I noticed that you don't have any tests and I didn't want to change things without tests can that confirm I didn't break any existing functionality. And also I believe having such test will make refactoring much more easier and nice and it will increase the project stability.

I saw the discussion about tests here: https://github.com/dipson88/treeselectjs/issues/55 and saw that you were open to integration of Cypress so I went ahead and added it.

Here is overview of what I did:

1. Added dev dependency: "cypress": "^13.15.0",
2. Added 3 new commands to package.json
   • "test:e2e" - this will start the server (npm run dev) with the demo page and run the tests in CLI environment (you can use this in CI or github actions or in your terminal)
   • "cy:run" - it will run the test and open the Cypress UI (You need to manually start the server with the demo beforehand)
   • "cy:open" - it will just open the Cypress UI (You need to manually start the server with the demo beforehand)
3. Added cypress/support/commands.ts - instead of writing tests with CSS selectors I've defined commands that can be reused in the tests like: "open", "close", "selectItem", "unselectItem", etc
4. Added basic tests in: cypress/e2e/basic.cy.ts and when using the already defined commands in the previous step the tests can be written in nice language like this:

   it('Can successfully uncheck nested element', () => {
   cy.openTreeselectList(selector) // default: i['West End'] and i['France']
   cy.unselectItem(selector, [i['England'], i['London'], i['West End']]) // Full path to the item
   cy.shouldHaveExactSelectedItems(selector, [i['France']])
   })

   which describes the functionality of the selector with minimal dependency of the implementation.

I believe with not more than 20 commands we can describe every action a user can take with the select and then we can describe the expected behavior in very nice agnostic way and that way we can document the current functionality so any further refactoring and changes will guarantee that the works flows still work.

Let me know if this is something you want to do and I can simplify/improve the basic commands and add document and test for specific behaviors.

Cheers, Alex

[dipson88]

Hi, @kolarski It's a great job from you!!! I appreciate this!

But we have one small problem here. A couple of weeks ago I started to write tests as well. I added JestTests and Init a couple of tests in Cypress (I don't have much expertise in Cypress). We need to understand how we can unite 2 approaches into one. I've created a PR with this branch so that you can see my changes - https://github.com/dipson88/treeselectjs/pull/112. Maybe you have an idea of what we can do

[dipson88]

The base tests were added here - https://github.com/dipson88/treeselectjs/pull/112. Feel free to improve my solution or add more tests.