feat: Add data-test attribute to picker item remove button #273

[dbranley]

Closes #273

The PR fulfills these requirements: (check all the apply)

• [x] It's submitted to the main branch.
• [x] When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• [x] When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• [x] If changes were made to ui folder, unit tests (make test) still pass.
• [x] New/updated tests are included

As explained in the issue, the picker data-test attribute is missing from the DOM once the max_choices defined for the FluentUI TagPicker component is reached. With the change in this PR, a new data-test attribute is added to the remove button for the choices selected in the picker. This allows a Cypress test to locate the picker remove button with the data-test attribute and click it. Since the max_choices is no longer satisfied, the input element with the picker data-test attribute is added back to the DOM.

This was accomplished by using removeButtonIconProps on TagPicker to add a new data_test attribute that includes the picker name prefixed with remove_. The code in ui/src/picker.tsx looks like this:

removeButtonIconProps={{ ...removeButtonIconProps, 'data-test' : 'remove_'+m.name } as Fluent.IIconProps}

There are 2 new test cases in picker.test.tsx. First is to confirm that the picker data-test attribute is unavailable when max_choices is met. The other is to confirm that the new data-test attribute for the remove button can be located and clicked, which returns the original picker data-test attribute back in DOM.

I ran all the ui tests and confirmed they passed. Here is a screen shot for that:

Lastly, I also created a new Cypress test to confirm this would work. To support this, I modified the picker_selection.py example so that it defined a max_choices of 3. This allows the Cypress test to use an existing example. I noticed that there are no Python test definitions for Cypress in the repository, so I wasn't sure what to do with the test. Here is the test, you can see it is very simple:

from h2o_wave import cypress

@cypress('Use picker and reach maximum number of choices')
def test_picker(cy):
    cy.visit('/demo')
    cy.locate('picker').type('Ham').type('{enter}')
    cy.locate('picker').should('not.exist')
    cy.locate('remove_picker').should('exist').first().click()
    cy.locate('picker').should('exist').type('Beans').type('{enter}')
    cy.locate('picker').should('not.exist')

Here is video showing the Cypress test in action: https://github.com/h2oai/wave/assets/61979454/6cf63b01-1b8e-461d-a1b6-4b019c65e4cf

[dbranley]

Thanks @mturoci for all your great feedback! I've responded to each of your observations and pushed another commit with the changes. Let me know what you think!

And for reference, here's the updated Cypress test snipit with video:

from h2o_wave import cypress

@cypress('Remove picker selections')
def test_picker(cy):
    cy.visit('/demo')
    cy.locate('remove_picker').should('exist').first().click()
    cy.locate('remove_picker').should('exist').first().click()
    cy.locate('remove_picker').should('not.exist')
    cy.locate('picker').type('Ham').type('{enter}')
    cy.locate('remove_picker').should('exist')

https://github.com/h2oai/wave/assets/61979454/26780351-3f65-4af1-8a9e-6e47b889c2de