Compatible with chai-jquery?

[Turbo87]

Is it possible to use chai-jquery and chai-dom at the same time or do they overwrite each other?

[nathanboktae]

I believe they overwrite each other because it gets nonsensical if text has multiple assertion paths. Well it would if chai assertions could be coupled to a type, but it doesn't and rightly so in a dynamic language.

You could fork one project and prefix it's assertions, though. A good regex search and replace or 2 could make that happen.

[Turbo87]

@nathanboktae well, with a proper plugin design it would probably be possible to couple assertions to types, but that doesn't seem to be the case yet...

@keithamus can you tell us if there is anything in the pipeline that would let these two plugin live next to each other?

[keithamus]

This isn't the first time we've seen this issue come up. In fact, we have an issue discussing how plugins can interface with chai, and each other, in a safe way; chaijs/chai#585.

The issue is quite a read, but the TL;DR of it - for this scenario - is that assertions will be able to duck-type on the expected/actual values - and decide to pass on unknown values that don't pass the duck-typing. e.g.:

// chai-jquery's version of .text() would be:
export default {
  assertions: {
    'text': {
      'predicate': [ (actual) => actual instanceof $, (expected) => typeof expected === 'string' ],
      'assert': (actual, expected) => actual.text() === expected
    },
  }
}

// chai-dom's version of .text() would be:
export default {
  assertions: {
    'text': {
      'predicate': [ (actual) => actual instanceof HTMLElement, (expected) => typeof expected === 'string' ],
      'assert': (actual, expected) => actual.textContent === expected
    },
  }
}

Neither plugin knows anything about the other plugins in play (or about chai actually) - but by specifying predicates can "opt-out" of asserting on actual's they cannot reasonably assert on. Chai will then also have a fallback assertions of text which will automatically fail if all the other plugins pass on the actual or expected. Say, maybe something like:

Error: you wrote `expect({foo: 'bar'}).to.have.text('bar')` but no assertions can satisfy this.
The plugins: chai-dom and chai-jquery didn't understand expected value `{foo: 'bar'}`

@nathanboktae I'd love it if you could comment on this issue (chaijs/chai#585) - we're looking for feedback from plugin maintainers to see if what we're doing is right, and hoping to get an active discussion going - so your feedback would be hugely useful! Constructive criticism fully welcome!

[keithamus]

BTW forgot to mention, thanks @Turbo87 for pinging me on this one! Always good to be bought in on issues like this so we in the chai team can see how the community is working. Speaking of which - I'm going to cc @lucasfcosta and @meeber; you don't need to comment here - but it's something to think on 😄

[Turbo87]

I'll close this issue as my question was answered. Thanks @nathanboktae and also thanks @keithamus for looking into this and taking care of Chai!