From 5401e8dc24f679254eae18ee50acf1e428be32e0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 23 Sep 2024 18:44:14 -0400
Subject: [PATCH] test(segment-view): split out disabled segment view / content
 test

---
 .../segment-view/test/basic/index.html        | 27 +-----
 .../segment-view/test/disabled/index.html     | 94 +++++++++++++++++++
 2 files changed, 96 insertions(+), 25 deletions(-)
 create mode 100644 core/src/components/segment-view/test/disabled/index.html
diff --git a/core/src/components/segment-view/test/basic/index.html b/core/src/components/segment-view/test/basic/index.html
index c9b28cbc14..43a2d75653 100644
--- a/core/src/components/segment-view/test/basic/index.html
+++ b/core/src/components/segment-view/test/basic/index.html
@@ -96,32 +96,9 @@
           <ion-segment-content id="top">Top</ion-segment-content>
         </ion-segment-view>
 
-        <ion-toolbar>
-          <ion-segment disabled value="reading-list">
-            <ion-segment-button content-id="bookmarks" value="bookmarks">
-              <ion-label>Bookmarks</ion-label>
-            </ion-segment-button>
-            <ion-segment-button content-id="reading-list" value="reading-list">
-              <ion-label>Reading List</ion-label>
-            </ion-segment-button>
-            <ion-segment-button content-id="shared-links" value="shared-links">
-              <ion-label>Shared Links</ion-label>
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
-        <ion-segment-view disabled>
-          <ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
-          <ion-segment-content id="reading-list">Reading List</ion-segment-content>
-          <ion-segment-content id="shared-links">Shared Links</ion-segment-content>
-        </ion-segment-view>
+        <button class="expand" onClick="changeSegmentContent()">Change Segment Content</button>
 
-        <button class="expand" onClick="changeSegmentContent()">
-          Change Segment Content
-        </button>
-
-        <button class="expand" onClick="clearSegmentValue()">
-          Clear Segment Value
-        </button>
+        <button class="expand" onClick="clearSegmentValue()">Clear Segment Value</button>
       </ion-content>
 
       <ion-footer>
diff --git a/core/src/components/segment-view/test/disabled/index.html b/core/src/components/segment-view/test/disabled/index.html
new file mode 100644
index 0000000000..59653cf94e
--- /dev/null
+++ b/core/src/components/segment-view/test/disabled/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Segment View - Disabled</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-segment-view {
+        height: 100px;
+      }
+
+      /**
+       * TODO the :not is required otherwise it
+       * overrides the disabled styles
+       */
+      ion-segment-content:not([disabled]) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      ion-segment-content:nth-of-type(1) {
+        background: lightpink;
+      }
+
+      ion-segment-content:nth-of-type(2) {
+        background: lightblue;
+      }
+
+      ion-segment-content:nth-of-type(3) {
+        background: lightgreen;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Segment View - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-toolbar>
+          <ion-segment value="paid">
+            <ion-segment-button content-id="paid" value="paid">
+              <ion-label>Paid</ion-label>
+            </ion-segment-button>
+            <ion-segment-button disabled content-id="free" value="free">
+              <ion-label>Free</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="top" value="top">
+              <ion-label>Top</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-segment-view>
+          <ion-segment-content id="paid">Paid</ion-segment-content>
+          <ion-segment-content disabled id="free">Free</ion-segment-content>
+          <ion-segment-content id="top">Top</ion-segment-content>
+        </ion-segment-view>
+
+        <ion-toolbar>
+          <ion-segment disabled value="reading-list">
+            <ion-segment-button content-id="bookmarks" value="bookmarks">
+              <ion-label>Bookmarks</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="reading-list" value="reading-list">
+              <ion-label>Reading List</ion-label>
+            </ion-segment-button>
+            <ion-segment-button content-id="shared-links" value="shared-links">
+              <ion-label>Shared Links</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-segment-view disabled>
+          <ion-segment-content id="bookmarks">Bookmarks</ion-segment-content>
+          <ion-segment-content id="reading-list">Reading List</ion-segment-content>
+          <ion-segment-content id="shared-links">Shared Links</ion-segment-content>
+        </ion-segment-view>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
