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

Author: taefi

package.json

@@ -246,9 +246,9 @@
     "@polymer/polymer": "$@polymer/polymer",
     "@vaadin/vaadin-themable-mixin": "$@vaadin/vaadin-themable-mixin",
     "date-fns": "$date-fns",
-    "@vaadin/cookie-consent": "$@vaadin/cookie-consent",
     "@vaadin/a11y-base": "$@vaadin/a11y-base",
     "@vaadin/side-nav": "$@vaadin/side-nav",
-    "mobile-drag-drop": "$mobile-drag-drop"
+    "mobile-drag-drop": "$mobile-drag-drop",
+    "@vaadin/cookie-consent": "$@vaadin/cookie-consent"
   }
 }

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;
@@ -20,6 +21,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");
@@ -34,6 +41,8 @@ public void registeredValueChangeListener_IsCalledAccordingly() {
         NativeLabelElement selectedValueLabel = $(NativeLabelElement.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);
@@ -60,6 +69,8 @@ public void registeredValueChangeListener_IsCalledAccordingly() {
     @Test
     public void toggleableGroup_clearsSelection_whenSelectedOptionReClicked() {
         NativeLabelElement selectedValueLabel = $(NativeLabelElement.class).id("group15-selected-value");
+        CustomFieldElement group15 = $(CustomFieldElement.class).id("group15");
+        group15.scrollIntoView();
 
         WebElement burgerButton = getGroupButtons("group15").get(2);
         burgerButton.click();
@@ -82,6 +93,8 @@ public void toggleableGroup_clearsSelection_whenSelectedOptionReClicked() {
     @Test
     public void notToggleableGroup_doesNotClearSelection_whenSelectedOptionReClicked() {
         NativeLabelElement selectedValueLabel = $(NativeLabelElement.class).id("group10-selected-value");
+        CustomFieldElement group10 = $(CustomFieldElement.class).id("group10");
+        group10.scrollIntoView();
 
         WebElement burgerButton = getGroupButtons("group10").get(2);
         burgerButton.click();
@@ -101,6 +114,8 @@ public void notToggleableGroup_doesNotClearSelection_whenSelectedOptionReClicked
     public void notToggleableGroup_valueCanBeCleared_Programmatically() {
         NativeLabelElement selectedValueLabel = $(NativeLabelElement.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();
@@ -130,6 +145,7 @@ public void widthFullGroup_hasWidth100PercentStyle() {
     @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));
     }
@@ -193,6 +209,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)));
     }
@@ -267,6 +285,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");