bitovi / syn

Standalone Synthetic Event Library
https://www.npmjs.com/package/syn
MIT License
444 stars 258 forks source link

Syn 1.0 #183

Open justinbmeyer opened 3 years ago

justinbmeyer commented 3 years ago

I've started developing a syn 1.0. The goals:

  1. Make the syntax easier to use in modern browsers.
  2. Clean up the code
  3. Pave the way for mobile tests (pointer events)

Make the syntax easier to use in modern browsers

Syn is callback-based, this makes it cumbersome to test sequential behaviors:

it("does something after 2 clicks", function(){
  syn.click("foo", function(){
    syn.click("bar", function(){
      // CHECK SOMETHING HERE
    })
  })
})

If syn returned promises, this can get cleaned up quite a bit:

it("does something after 2 clicks", async function(){
  await syn.click("foo");
  await syn.click("bar");
  // CHECK SOMETHING HERE
})

Finally, syn works with element ids, not CSS selectors (CSS selectors were not widely supported when it was first created). I'd like to change that:

it("does something after 2 clicks", async function(){
  await syn.click(".foo");
  await syn.click("#bar");
  // CHECK SOMETHING HERE
})

I think these 2 changes will make syn much easier to use on its own. I'd also like to make syn a single ES module so it can be easily imported into any app.