Testing text on vcf-nav-item with child items

Question

I'm developing tests with Vaadin TestBench and I'm having difficulties with a particular scenario. For the given generated HTML (adapted from a vaadin/vcf-nav GitHub repository example):

<vcf-nav collapsible>
  <span slot="label">Main menu</span>

  <vcf-nav-item id="dashboard" path="/dashboard">
    <vaadin-icon icon="vaadin:chart" slot="prefix"></vaadin-icon>
    Dashboard
    <span theme="badge primary" slot="suffix" aria-label="(2 new items)">2</span>
  </vcf-nav-item>

  <vcf-nav-item id="parent">
    <vaadin-icon icon="vaadin:folder-open" slot="prefix"></vaadin-icon>
    Parent

    <vcf-nav-item id="child1" path="/child1" slot="children">
      Child 1
    </vcf-nav-item>

    <vcf-nav-item id="child2" path="/child2" slot="children">
      Child 2
    </vcf-nav-item>
  </vcf-nav-item>
</vcf-nav>

When testing a simple vcf-nav-item the getText() method returns the expected result. Ex:.

AppNavItemElement menuItem = $(MainLayoutElement.class).first()
                .$(ScrollerElement.class).first()
                .$(AppNavItemElement.class).id("dashboard");
Assert.assertEquals("Dashboard", menuItem.getText());

The problem occurs on a vcf-nav-item with child items, in which case the gettext methods returns a concatenation of the parent text and all the children: "ParentChild 1Child 2".

AppNavItemElement menuItem = $(MainLayoutElement.class).first()
                .$(ScrollerElement.class).first()
                .$(AppNavItemElement.class).id("parent");
Assert.assertEquals("Parent", menuItem.getText());

I created a custom AppNavItemElement class with an override to the getText() method as follow:

import com.vaadin.testbench.TestBenchElement;
import com.vaadin.testbench.elementsbase.Element;

@Element("vcf-nav-item")
public class AppNavItemElement extends TestBenchElement {

    @Override
    public String getText() {
        return this.getPropertyString("textContent");
    }
}

I would consider using the official SideNav component instead of vcf-nav, as SideNav has its own TestBench element: https://github.com/vaadin/flow-components/tree/main/vaadin-side-nav-flow-parent/vaadin-side-nav-testbench/src/main/java/com/vaadin/flow/component/sidenav/testbench — ollitietavainen, Aug 25 '23 at 11:40
Hi, @ollitietavainen, thanks for the feedback. We looked into it, but it mentions "This is a preview release of the Side Navigation component". Will this be the official component moving forward from one from Vaadin Component Factory we're using? — Rolando Isidoro, Aug 28 '23 at 11:28
@ollitietavainen, I followed your link to the vaadin-side-nav-testbench repository, which exists since version 24.1.0. We're using the latest 24.1.7 and somehow the class isn't available. As a workaround, we worked it out by adding the direct dependency to our project pom.xml. Being a preview release, are we missing something and need to do any additional step like the activate the feature flag (https://vaadin.com/docs/latest/components/side-nav#feature-flag) to use it on Testbench? — Rolando Isidoro, Sep 01 '23 at 12:47

Testing text on vcf-nav-item with child items

0 Answers0