Transfer: 'pickedoptions' data test prop targets the wrong element?

[martinkrulltott]

The Transfer component takes a dataTest prop and adds it to various parts of the DOM tree, which is very helpful when testing. However the pickedoptions seems to be sitting 1 level to high in the tree, which means it contains an arbitrary div instead of the children.
Arguably, to target the options on the right side, I could either chain a find on the right side (to not get the left side options), like cy.get(rightSideTargetGoesHere).find(optionTargetGoesHere), where the right side target could be the ´pickedoptions´, but I might as well use the ´rightside´ prop that sits one level up, so ´pickedoptions´ doesn't add anything useful here.
Or the second option, which is where ´pickedoptions´ could really shine, by just doing a cy.get("[data-test='...-pickedoptions']") and look at the direct children. But I can't, because of a <div class="content-container"> that sits in the way of the children 😢

As seen in the screenshot below:

Could pickedoptions be moved down to direct parent of the children instead?

[varl]

Am I correct in that you are trying to get all the picked transfer options?

Internally there are a few ways we do this that I can refer to to see if they could work in your case.

The "find-/getWithDataTest" functions are used to get the picked options in internal tests like so:

• https://github.com/dhis2/ui/blob/3516d9b1b32e73c74b83592b19f8aa0bd908f42e/packages/widgets/src/Transfer/features/reorder-with-buttons/index.js#L25
• https://github.com/dhis2/ui/blob/3516d9b1b32e73c74b83592b19f8aa0bd908f42e/packages/widgets/src/Transfer/features/add_remove-highlighted-options/index.js#L10
• https://github.com/dhis2/ui/blob/3516d9b1b32e73c74b83592b19f8aa0bd908f42e/packages/widgets/src/Transfer/features/add_remove-highlighted-options/index.js#L14-L15

That would get you the children. If you don't want to use the helper functions for the shorthand, the longhand to get the children would be: [data-test="data-dimension-transfer-pickedoptions"] [data-test="data-dimension-transfer-transferoption"]

As demonstrated here: https://github.com/dhis2/ui/blob/3516d9b1b32e73c74b83592b19f8aa0bd908f42e/packages/widgets/src/Transfer/features/disabled-transfer-buttons/index.js#L42-L44

Do any of these techniques solve your problem?

[Mohammer5]

I would suggest using @varl's solution.

---

The reason for the data-test "weirdness" is because we've added the intersection detector later on, which required an additional wrapper around the options. I guess it would've made sense to add the data-test value to the actual container although the proposed solution above seems more stable to me, so regardless of whether we want to change this or not, I'd still recomment @varl's solution.

[martinkrulltott]

Thanks for the answers. [data-test="...-pickedoptions"] [data-test="...-transferoption"] works. Just worth noticing that the children have to be targeted explicitly like this and cannot be targeted implicitly through the use of the parent only. For that pickedoptions would have to be moved. But there's no immediate need for this from my side anyway (explicit is fine), just worth noting for external users.

[varl]

@martinkrulltott alright, good that it works for you right now.

I agree that if I targeted something named pickedoptions I expect to get a list of the picked options, not another container. Changing it would be a breaking change, but a backwards compatible change would be to add e.g. -pickedoptions-items to the container of the children.

I added an issue for further discussion on changes: https://jira.dhis2.org/browse/LIBS-118

[amcgee]

I created a proposal to formalize our dataTest concept and approach, feedback welcome:

#224