Fix handling of callouts in block switch

Fixes gh-46

Co-authored-by: Phillip Webb <pwebb@vmware.com>

Author: wilkinsona

src/main/js/site/tabs.js

@@ -59,9 +59,9 @@
   function createTab(blockElement, tabsElement) {
     const title = blockElement.querySelector(".title").textContent;
     const content = blockElement.querySelectorAll(".content").item(0);
-    const colist = blockElement.querySelector(".colist");
+    const colist = nextSibling(blockElement, ".colist");
     if (colist) {
-      content.append();
+      content.append(colist);
     }
     const tabElement = createElementFromHtml(
       '<div class="tab">' + title + "</div>"
@@ -72,6 +72,16 @@
     return { tabElement: tabElement, content: content };
   }
 
+  function nextSibling(element, selector) {
+    var sibling = element.nextElementSibling;
+    while (sibling) {
+      if (sibling.matches(selector)) {
+        return sibling;
+      }
+      sibling = sibling.nextElementSibling;
+    }
+  }
+
   function createElementFromHtml(html) {
     const template = document.createElement("template");
     template.innerHTML = html;

src/test/asciidoc/singleSwitchWithCallouts.adoc

@@ -0,0 +1,13 @@
+[source,indent=0,role="primary"]
+.Alpha
+----
+Alpha 1 <1>
+----
+<1> Alpha callout
+
+[source,indent=0,role="secondary"]
+.Bravo
+----
+Bravo 1 <1>
+----
+<1> Bravo callout

src/test/java/io/spring/asciidoctor/backend/integrationtest/TabIntegrationTests.java

@@ -30,6 +30,7 @@
 import org.junit.jupiter.api.extension.ExtendWith;
 import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
+import org.openqa.selenium.logging.LogType;
 import org.openqa.selenium.remote.RemoteWebDriver;
 import org.testcontainers.junit.jupiter.Container;
 import org.testcontainers.junit.jupiter.Testcontainers;
@@ -79,6 +80,19 @@ void multipleTabsWithDifferentOptionsAreCreated(@Source("multipleTabsDifferentOp
 				.hasDisplayedContentContaining("Charlie 1");
 	}
 
+	@Test
+	void givenASingleTabWithCalloutsWhenUnselectedItemIsClickedThenItBecomesSelectedAndItsCalloutsBecomeVisible(
+			@Source("singleSwitchWithCallouts.adoc") ConvertedHtml html) throws IOException {
+		RemoteWebDriver driver = html.inWebBrowser(this.chrome);
+		assertThat(driver.manage().logs().get(LogType.BROWSER)).isEmpty();
+		List<WebElement> listings = driver.findElementsByCssSelector(".listingblock.primary");
+		assertThat(listings).hasSize(1);
+		assertThatTabs(listings.get(0)).hasSelected("Alpha").hasUnselected("Bravo")
+				.hasDisplayedContentContaining("Alpha 1").hasDisplayedCalloutListContaining("Alpha callout")
+				.uponClicking("Bravo").hasSelected("Bravo").hasUnselected("Alpha")
+				.hasDisplayedCalloutListContaining("Bravo callout");
+	}
+
 	@Test
 	void givenASingleTabWhenUnselectedItemIsClickedThenItBecomesSelected(@Source("singleTab.adoc") ConvertedHtml html)
 			throws IOException {
@@ -163,6 +177,15 @@ TabsAssert hasDisplayedContentContaining(String contained) {
 			return this;
 		}
 
+		TabsAssert hasDisplayedCalloutListContaining(String contained) {
+			WebElement content = this.actual.findElement(By.cssSelector(".content:not(.hidden)"))
+					.findElement(By.cssSelector(".colist"));
+			assertThat(content.isDisplayed()).isTrue();
+			assertThat(content.getText()).contains(contained);
+			return this;
+
+		}
+
 		TabsAssert uponClicking(String item) {
 			List<WebElement> unselected = this.actual.findElements(By.cssSelector(".tab:not(.selected)"));
 			Optional<WebElement> match = unselected.stream().filter((element) -> element.getText().equals(item))

src/test/resources/io/spring/asciidoctor/backend/integrationtest/singleSwitchWithCallouts.adoc

@@ -0,0 +1,13 @@
+[source,indent=0,role="primary"]
+.Alpha
+----
+Alpha 1 <1>
+----
+<1> Alpha callout
+
+[source,indent=0,role="secondary"]
+.Bravo
+----
+Bravo 1 <1>
+----
+<1> Bravo callout