fix: retain selected value style after further customizations (CP: #9) (#12)

Author: taefi

src/main/java/org/vaadin/addons/taefi/component/ToggleButtonGroup.java

@@ -95,6 +95,7 @@ private void init() {
         }
 
         addButtonsToLayout(buttons);
+        updateStyles(getValue(), getValue());
     }
 
     protected void addButtonsToLayout(Button[] buttons) {

src/test/java/org/vaadin/addons/taefi/component/AbstractViewTest.java

@@ -8,6 +8,7 @@
 import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.chrome.ChromeDriver;
+import org.openqa.selenium.support.ui.ExpectedConditions;
 
 import com.vaadin.flow.theme.AbstractTheme;
 import com.vaadin.testbench.ScreenshotOnFailureRule;
@@ -63,6 +64,10 @@ public void setup() throws Exception {
         getDriver().get(getURL(route));
     }
 
+    protected void waitForElementPresent(By by) {
+        this.waitUntil(ExpectedConditions.presenceOfElementLocated(by));
+    }
+
     /**
      * Convenience method for getting the root element of the view based on
      * the selector passed to the constructor.

src/test/java/org/vaadin/addons/taefi/component/ToggleButtonGroupIT.java

@@ -7,6 +7,7 @@
 import com.vaadin.flow.component.orderedlayout.testbench.VerticalLayoutElement;
 import com.vaadin.testbench.TestBenchElement;
 import org.junit.Assert;
+import org.junit.Before;
 import org.junit.Test;
 import org.openqa.selenium.By;
 import org.openqa.selenium.NoSuchElementException;
@@ -19,6 +20,12 @@
 
 public class ToggleButtonGroupIT extends AbstractViewTest {
 
+    @Before
+    public void setup() throws Exception {
+        super.setup();
+        waitForElementPresent(By.ById.id("group120"));
+    }
+
     @Test
     public void group_withLabelAddedToView_groupIsRendered_labelIsRendered() {
         CustomFieldElement group10 = $(CustomFieldElement.class).id("group10");
@@ -33,6 +40,8 @@ public void registeredValueChangeListener_IsCalledAccordingly() {
         LabelElement selectedValueLabel = $(LabelElement.class).id("group10-selected-value");
         Assert.assertEquals("", selectedValueLabel.getText());
 
+        CustomFieldElement group10 = $(CustomFieldElement.class).id("group10");
+        group10.scrollIntoView();
         List<WebElement> groupButtons = getGroupButtons("group10");
 
         WebElement pastaButton = groupButtons.get(0);
@@ -59,6 +68,8 @@ public void registeredValueChangeListener_IsCalledAccordingly() {
     @Test
     public void toggleableGroup_clearsSelection_whenSelectedOptionReClicked() {
         LabelElement selectedValueLabel = $(LabelElement.class).id("group15-selected-value");
+        CustomFieldElement group15 = $(CustomFieldElement.class).id("group15");
+        group15.scrollIntoView();
 
         WebElement burgerButton = getGroupButtons("group15").get(2);
         burgerButton.click();
@@ -81,6 +92,8 @@ public void toggleableGroup_clearsSelection_whenSelectedOptionReClicked() {
     @Test
     public void notToggleableGroup_doesNotClearSelection_whenSelectedOptionReClicked() {
         LabelElement selectedValueLabel = $(LabelElement.class).id("group10-selected-value");
+        CustomFieldElement group10 = $(CustomFieldElement.class).id("group10");
+        group10.scrollIntoView();
 
         WebElement burgerButton = getGroupButtons("group10").get(2);
         burgerButton.click();
@@ -100,6 +113,8 @@ public void notToggleableGroup_doesNotClearSelection_whenSelectedOptionReClicked
     public void notToggleableGroup_valueCanBeCleared_Programmatically() {
         LabelElement selectedValueLabel = $(LabelElement.class).id("group10-selected-value");
         Assert.assertEquals("", selectedValueLabel.getText());
+        CustomFieldElement group10 = $(CustomFieldElement.class).id("group10");
+        group10.scrollIntoView();
 
         WebElement pastaButton = getGroupButtons("group10").get(0);
         pastaButton.click();
@@ -116,7 +131,7 @@ public void notToggleableGroup_valueCanBeCleared_Programmatically() {
     }
 
     @Test
-    public void widthFullGroup_hasWith100PercentStyle() {
+    public void widthFullGroup_hasWidth100PercentStyle() {
         CustomFieldElement group20 = $(CustomFieldElement.class).id("group20");
         Assert.assertTrue(group20.getAttribute("style").contains("width: 100%"));
 
@@ -129,6 +144,7 @@ public void widthFullGroup_hasWith100PercentStyle() {
     @Test
     public void group_withTooltip_tooltipOverlayIsShownWhenFocused() {
         CustomFieldElement group20 = $(CustomFieldElement.class).id("group20");
+        group20.scrollIntoView();
         hoverOn(group20);
         Assert.assertTrue("Tooltip for group with id 'group20' should be visible.", isTooltipVisibleFor(group20));
     }
@@ -192,6 +208,8 @@ public void group_withItemTooltipTextGenerator_showsCorrespondentTooltips() {
 
     @Test
     public void group_withEnabledSetToFalse_hasAllButtonsDisabled() {
+        CustomFieldElement group60 = $(CustomFieldElement.class).id("group60");
+        group60.scrollIntoView();
         List<WebElement> buttons = getGroupButtons("group60");
         buttons.forEach(button -> Assert.assertFalse(isButtonEnabled(button)));
     }
@@ -266,6 +284,26 @@ public void group_withVerticalOrientation_rendersItemsInVerticalLayout() {
                 () -> group100.findElement(By.tagName("vaadin-horizontal-layout")));
     }
 
+    // https://github.com/taefi/toggle-button-group/issues/8
+    @Test
+    public void customizingGroupAfterSetValue_theStylesRemainInTact() {
+        List<WebElement> buttons = getGroupButtons("group120");
+        // customization after setting the value should not affect the selected item's style:
+        Assert.assertEquals("primary", buttons.get(1).getAttribute("theme"));
+        // customizing using setItemTooltipTextGenerator still works:
+        hoverOn(buttons.get(0));
+        Assert.assertEquals("Answer is yes",
+                getTooltipFor(buttons.get(0))
+                        .map(TestBenchElement::getText)
+                        .orElse(""));
+
+        hoverOn(buttons.get(1));
+        Assert.assertEquals("Answer is no",
+                getTooltipFor(buttons.get(1))
+                        .map(TestBenchElement::getText)
+                        .orElse(""));
+    }
+
     private List<WebElement> getGroupButtons(String groupId) {
         CustomFieldElement group = $(CustomFieldElement.class).id(groupId);
         return group.getWrappedElement().findElements(By.tagName("vaadin-button"));

src/test/java/org/vaadin/addons/taefi/component/ToggleButtonGroupView.java

@@ -227,8 +227,20 @@ public ToggleButtonGroupView() {
         });
         group110.setItemLabelGenerator(textAlignment -> "");
 
+        ToggleButtonGroup<Answer> group120 = new ToggleButtonGroup<>();
+        group120.setId("group120");
+        group120.setItems(List.of(Answer.values()));
+        group120.setValue(Answer.NO);
+        // adding the generator last appears to mess with the default selection
+        group120.setItemTooltipTextGenerator(answer ->
+                switch (answer) {
+                    case YES -> "Answer is yes";
+                    case NO -> "Answer is no";
+                    default -> throw new IllegalStateException("Unexpected value");
+                }
+        );
 
-        VerticalLayout halfLayout = new VerticalLayout(line10, line15, group20, group30, line40, line50, group60, group70, group80, line90, group100, group110);
+        VerticalLayout halfLayout = new VerticalLayout(line10, line15, group20, group30, line40, line50, group60, group70, group80, line90, group100, group110, group120);
         halfLayout.setId("parent-layout");
         halfLayout.getStyle().set("width", "50%");
         halfLayout.getStyle().set("border", "solid red 1px");