Editing a component

Since we have our component inserted into parsys, we can edit it. In order to do that we need to open a dialog window first. Now, let's edit this component by providing our custom value for Header Text property in the dialog window. We need to obtain AemDialog of this component at first.

AemDialog dialog = sectionHeaderComponent.getDialog();
dialog.open();

Now we need to access the Header Text dialog field and edit it. We can use a SectionHeaderComponent#getHeaderText() method. How does it work? In the Section Header Component class, there is a following field defined:

@DialogField(label = "Header Text")
private AemTextField headerText;

The @DialogField annotation searches for the dialog field with provided label. Please note that dialog window has to be opened when using it. Section Header component in the sidekick The next two lines are responsible for providing a test value and saving it:

title.setValue(TEST_VALUE);
dialog.ok();

When we click OK button on the dialog window, the page is being reloaded. We need to wait until it fully reloads and get our component once again:

//wait until page reloads after modifying the component
assertTrue(summerBlockbusterHitsPage.isDisplayed());
sectionHeaderComponent = parsys.getFirstComponentOfType(SectionHeaderComponent.class);

The last thing in this test case is an assertion - we are comparing the component's displayed value with our expected value. The SectionHeaderComponent has the following field defined

@FindBy(xpath = "./*/span")
private WebElement sectionText;
...

public String getText() {
	return sectionText.getText();
}

It holds the value of span element contained by this component. This is the element where our header text value is present Section Header component in the sidekick So this simple line in our test method is checking whether our component shows what we expect:

assertThat(sectionHeaderComponent.getText(), is(TEST_VALUE));

This is the final test case implementation:

    @Test
    public void testAddingAndEditingSectionHeader() {
        SectionHeaderComponent sectionHeaderComponent = parsys.insertComponent(SectionHeaderComponent.class);
        AemDialog dialog = sectionHeaderComponent.getDialog();
        dialog.open();
        AemTextField title = sectionHeaderComponent.getHeaderText();
        title.setValue(TEST_VALUE);
        dialog.ok();

        //wait until page reloads after modifying the component
        assertTrue(summerBlockbusterHitsPage.isDisplayed());
        sectionHeaderComponent = parsys.getFirstComponentOfType(SectionHeaderComponent.class);

        assertThat(sectionHeaderComponent.getText(), is(TEST_VALUE));
    }