Add cypress command select accordion item

[asirvadAbrahamVarghese]

…de using a path array

Added new cypress command to select accordion item based on the given path to that node.

Implements full tree traversal in a single pass till the target node. Once the first matching node is found, subsequent searches continue from that point onward, avoiding redundant iteration from the beginning.

E.g: cy.selectAccordionItem([/^ManageIQ Region/, 'Tenants', 'My Company']);
As seen below, if the "Tenants" node is found at index 57 and it's not the target node, it will be expanded (if not already). The search for the next node, "My Company", will then begin from index 58 onward.

@miq-bot assign @elsamaryv
@miq-bot add-label cypress
@miq-bot add-label test

[asirvadAbrahamVarghese]

Checkout to this branch and run validate-select-accordion-item.cy.js to see the working

This test - a0a7779 - will be dropped before merge

[Fryguy]

@asirvadAbrahamVarghese Don't worry about it for this PR, but try to keep commit message titles 72 chars or less. This helps avoid the text being elided on GitHub. For example:

(72 chars because on the CLI git log adds a tab character at 8 char width, and 72+8 = 80)

[elsamaryv]

LGTM
@GilbertCherrie Looping you in to take a look as well.

[elsamaryv]

I think there is a typo in this comment

[asirvadAbrahamVarghese]

Updated - be6345

[elsamaryv]

Maybe rename hasAngleRight to isExpanded or something similar ? That would give better clarity about what this flag represents instead of focussing on the icon class used.

[asirvadAbrahamVarghese]

How about isExpandable, since the purpose of the variable is to determine whether the node can be expanded?

[elsamaryv]

That makes sense

[asirvadAbrahamVarghese]

Done - be6345

[elsamaryv]

I believe you meant

Suggested change

	// Click the most child node and terminate
	// Click the last child node and terminate

[asirvadAbrahamVarghese]

Updated - be6345

[jrafanie]

typo: collapse

[asirvadAbrahamVarghese]

Updated - a0a7779

Note: Added this test file just to check how the command works, will drop it before merging., I’ll likely remove these logs too (log1, log2)

[jrafanie]

This function is a bit hard to follow.

These returns feel like guard clauses. Is the indentation correct here?

Would it be easier to read to do:

if (isClickableNode) {
          cy.wrap(currentLiElement).click();
          return;
}
... // rest of non-guard clauses

If we return early in guard clauses, we don't need to worry about if/else as we already returned if the guard clause was true/false.

[asirvadAbrahamVarghese]

These returns feel like guard clauses. Is the indentation correct here?

Pretty sure the indentation is correct, since it's auto-formatted by Prettier 🤔

If we return early in guard clauses, we don't need to worry about if/else as we already returned if the guard clause was true/false

Agreed, changed the sequence - be6345

[jrafanie]

I'm not sure what to name this but it should probably match the command name 'selectAccordionItem". That can be done later. I think we should get this in and see how we use it to help us better understand if the naming or structure could be improved.

[jrafanie]

Note, I'm curious if our other pages will be compatible with the selectors used here and below. As you use this shared command, make note of things that are different as we can change code to be more consistent or make different formats of the same command for different styles of pages that do things differently.

[jrafanie]

Merging, I want to see how this looks as it's used.