Add assertions to '.select()' doc

[jennifer-shehane]

See cypress-io/cypress-example-kitchensink#23

[ootsuka]

Hi Jennifer, I am a newbie to open source and wondering if I can work on this issue? If yes where's a good place to start?

[jennifer-shehane]

Hey @ootsuka, the document that needs to be updated can be found here: https://github.com/cypress-io/cypress-documentation/blob/develop/source/api/commands/select.md which is the source for this page: https://docs.cypress.io/api/commands/select.html

I think we just wanted the current Examples updated to include assertions like instead of this:

cy.get('select').select('apples')

It would show this:

cy.get('select').select('apples')
  .should('have.value', '456')

[ootsuka]

Thank you. I am trying to include the assertions but I am having trouble with

cy.get('.action-select-multiple')
        .select(['apples', 'oranges', 'bananas'])

Do you mind share how you would do the assertion for this one?

[jennifer-shehane]

@ootsuka This one definitely is trickier!

The value of a select with multiple options selected will be an array of the option's values.

So, we'll need to pull out the value first using .invoke() so that we can make a better comparison with just the array.

We'll also need to use the deep.equal assertion since comparing arrays equality is tricky (see https://github.com/chaijs/deep-eql for more on how that works).

cy.get('.action-select-multiple')
  .select(['apples', 'oranges', 'bananas']).invoke('val')
  .should('deep.equal', ['456', '457', '458'])

[ootsuka]

Yes. I was trying to go for the deep equal but could not get the value cause I did not know the invoke(‘val’).
Thanks a ton!

[brian-mann]

The question you have to ask yourself is why add an assertion after doing a .select([]). If it's because you have application logic that may modify the value - then this is a good test.

However, if you aren't modifying anything, then you don't need an assertion because you can assume Cypress is doing the right thing. If you tell Cypress to select something that's an invalid value - it will already throw an error. So if the .select() resolves, then you know it's correct.

[jennifer-shehane]

@brian-mann This isn't really a terribly useful real use case, it's more of a good place to outline how to assert on select values, because people were having a hard time writing the assertions.

Although, I generally test things like this because of how my onChange logic is written. Sometimes you can literally type or select, but the value is still borked.

[brian-mann]

Right if you are modifying the value then it makes sense to add an assertion that the right stuff was selected.

I'm pretty sure you can just do .select(['foo', 'bar', 'baz']).should('have.value', ['foo', 'bar', 'baz']) without needing to yield the value and use deep.eq but haven't tried it.

[jennifer-shehane]

No, you can't just write .select(['foo', 'bar', 'baz']).should('have.value', ['foo', 'bar', 'baz']), this is not using the proper equality operator for comparison.

[brian-mann]

We control the have.value assertion right here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/chai_jquery.coffee#L130

Instead of the expression: actual is value we could instead use _.isEqual(actual, value).

Doing it that way ends up being the same thing as deep.eq since array's and objects are deeply compared instead of by reference. That would enable you to use arrays and objects for have.value

[ootsuka]

@brian-mann I think that's a good idea. @jennifer-shehane do you think it's the right way to do it?

[richdouglasevans]

Can this issue be closed?