From 22d6110c17f63250ae68ddf97a864c306273e440 Mon Sep 17 00:00:00 2001
From: Debra Toranska <dobroslawa.toranska@sage.com>
Date: Mon, 16 Oct 2023 16:53:01 +0100
Subject: [PATCH] test(button-toggle): bring back and amend cypress test for
 rounded

---
 .../button-toggle/button-toggle.cy.tsx        | 34 +++++++++++++++++++
 .../__snapshots__/button-toggle.spec.tsx.snap | 32 +++++++++++++++--
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/cypress/components/button-toggle/button-toggle.cy.tsx b/cypress/components/button-toggle/button-toggle.cy.tsx
index 4c2ac7a99e..8d5c238705 100644
--- a/cypress/components/button-toggle/button-toggle.cy.tsx
+++ b/cypress/components/button-toggle/button-toggle.cy.tsx
@@ -94,6 +94,40 @@ context("Testing Button-Toggle component", () => {
       });
     });
 
+    describe("rounded corners", () => {
+      it("has the expected border-radius styling on a single toggle button", () => {
+        CypressMountWithProviders(
+          <ButtonToggleComponent>Foo</ButtonToggleComponent>
+        );
+
+        buttonToggleButton().each((el) =>
+          expect(el.css("border-radius")).equals("4px")
+        );
+      });
+
+      it("should have the expected border-radius styling when the children have the grouped prop set", () => {
+        CypressMountWithProviders(
+          <stories.ButtonToggleGroupComponentGroupedChildren />
+        );
+
+        buttonToggleButton()
+          .eq(0)
+          .should("have.css", "border-radius", "4px 0px 0px 4px");
+        buttonToggleButton().eq(1).should("have.css", "border-radius", "0px");
+        buttonToggleButton()
+          .eq(2)
+          .should("have.css", "border-radius", "0px 4px 4px 0px");
+      });
+
+      it("should have the expected border-radius styling when children do not have grouped prop set", () => {
+        CypressMountWithProviders(<stories.ButtonToggleGroupComponent />);
+
+        buttonToggleButton().eq(0).should("have.css", "border-radius", "4px");
+        buttonToggleButton().eq(1).should("have.css", "border-radius", "4px");
+        buttonToggleButton().eq(2).should("have.css", "border-radius", "4px");
+      });
+    });
+
     it("should render Button-Toggle with aria-label prop", () => {
       CypressMountWithProviders(
         <ButtonToggleComponent aria-label="cypress-aria" />
diff --git a/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap b/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
index def17dae9e..2fd47bf1a3 100644
--- a/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
+++ b/src/components/button-toggle/__snapshots__/button-toggle.spec.tsx.snap
@@ -28,6 +28,8 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
   border: 1px solid var(--colorsActionMinor500);
   color: var(--colorsActionMinor500);
   border: 1px solid var(--colorsActionMinor500);
+  color: var(--colorsActionMinor500);
+  border: 1px solid var(--colorsActionMinor500);
 }
 
 .c2:focus {
@@ -58,11 +60,11 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
   color: var(--colorsActionMinor500);
 }
 
-.c2 .c4 {
+s .c2 .c4 {
   color: var(--colorsActionMinor500);
 }
 
-.c2 .c4:not([aria-pressed="true"]):not(:disabled):hover {
+s .c2 .c4:not([aria-pressed="true"]):not(:disabled):hover {
   color: var(--colorsActionMinorYang100);
 }
 
@@ -93,6 +95,32 @@ exports[`ButtonToggle General styling renders correctly when grouped 1`] = `
   box-shadow: inset 0px 0px 0px 3px var(--colorsActionMinor500), 0px 0px 0px var(--borderWidth300) var(--colorsSemanticFocus500), 0px 0px 0px var(--borderWidth600) var(--colorsUtilityYin090);
 }
 
+.c2 .c4 {
+  color: var(--colorsActionMinor500);
+}
+
+.c2 .c4:not([aria-pressed="true"]):not(:disabled):hover {
+  color: var(--colorsActionMinorYang100);
+}
+
+.c2:not([aria-pressed="true"]):not(:disabled):hover {
+  color: var(--colorsActionMinorYang100);
+  background-color: var(--colorsActionMinor600);
+}
+
+.c2:not([aria-pressed="true"]):not(:disabled):hover .c4 {
+  color: var(--colorsActionMinorYang100);
+}
+
+.c2:not(:disabled):hover {
+  background-color: var(--colorsActionMinor600);
+  color: var(--colorsActionMinorYang100);
+}
+
+.c2:not(:disabled):hover .c4 {
+  color: var(--colorsActionMinorYang100);
+}
+
 .c3.c3.c3.c3 .c1 {
   border-radius: var(--borderRadius050);
 }