Rich text

Configuring Rich Text component

You may provide RichText configuration in your Feature File as with other dialog fields, for example:

Tab name	Field type	Field label	Value
Tab1	rich text	Rich Text	richtext

However, you may not use HTML tags in the value section. Why is that? The reason for this is how richtext component works. If you would type the raw HTML into RichText component, the HTML tags would be escaped and visible as text in the result. The way for manipulating styling etc. is to use RichText controls in the dialog. Bobcat has predefined utilities for doing so. Let's say that we want to bold selected text and assume that this is the step implementation in which we want to do that:

 @Test
  public void richtextTest_makeTextBold() {
    aemRichText.type("xyz");
  }

Now - if we want to make the "xyz" text bold we have to click a button responsible for that in the dialog window. AemRichText class has click() method which takes RtButton as argument. RtButton is an enum with all buttons you can click in the RichText dialog:

• BOLD
• ITALIC
• UNDERLINE
• JUSTIFY_LEFT
• JUSTIFY_CENTER
• JUSTIFY_RIGHT
• MODIFY_LINK
• UNLINK
• ANCHOR
• BULLET_LIST
• NUMBERED_LIST
• OUTDENT
• INDENT
• REMOVE_STYLE

The buttons that interesting us in this case is BOLD. So - let's click it!

aemRichText.click(RtButton.BOLD);

Ok, but this doesn't want to work

While writing Bobcat test you have to put yourself in the position of a real person that would test that and proceed with the same steps as you would do while testing a functionality. So - what we've missed? When we want to make some text bold we need to select it first of course! So let's do that:

aemRichText.selectText(0, 3);

We provide starting and ending index of the text we wan to to select - in this case entire "xyz" word. After that - when we click Bold button - text should be bold.

Ok, but how to check if the text is bold now?

There is a method for that can be useful here - AemRichText#getInnerHTML which returns the HTML of our richtext component - so when we want to check if the "xyz" is bold we need to check it against "<p><b>xyz</b></p>" text.

assertThat(aemRichText.getInnerHTML(), containsString("<p><b>xyz</b></p>"));

What is this <p> tag here for?

RichText component just wraps each line with paragraph tag, that's all.

This is the general way to configure the richtext component in any way you want. The final test implementation can be found below:

 @Test
  public void richtextTest_makeTextBold() {
    aemRichText.type("xyz");
    aemRichText.selectText(0, 3); 
    aemRichText.click(RtButton.BOLD);
    assertThat(aemRichText.getInnerHTML(), containsString("<p><b>xyz</b></p>));
    aemDialog.ok();
  }

For more information about providing component configuration please refer to Storing component configurations tutorial