test: add unit test for EuiStepNumber xxs size

- update snapshots
elastic · Jun 5, 2024 · eee3424 · eee3424
1 parent d002363
commit eee3424
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 43 deletions.
diff --git a/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`EuiStep is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -48,7 +48,7 @@ exports[`EuiStep props headingElement 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -86,7 +86,7 @@ exports[`EuiStep props status complete is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-complete"
+      class="euiStepNumber emotion-euiStepNumber-s-complete-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-complete"
@@ -119,7 +119,7 @@ exports[`EuiStep props status current is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-current"
+      class="euiStepNumber emotion-euiStepNumber-s-current-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -157,7 +157,7 @@ exports[`EuiStep props status danger is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-danger"
+      class="euiStepNumber emotion-euiStepNumber-s-danger-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-danger"
@@ -190,7 +190,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-disabled"
+      class="euiStepNumber emotion-euiStepNumber-s-disabled-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -228,7 +228,7 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-incomplete"
+      class="euiStepNumber emotion-euiStepNumber-s-incomplete-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -266,7 +266,7 @@ exports[`EuiStep props status loading is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-loading"
+      class="euiStepNumber emotion-euiStepNumber-s-loading-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -303,7 +303,7 @@ exports[`EuiStep props status warning is rendered 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s-warning"
+      class="euiStepNumber emotion-euiStepNumber-s-warning-EuiStep"
     >
       <span
         class="euiStepNumber__icon emotion-euiStepNumber__icon-warning"
@@ -336,7 +336,7 @@ exports[`EuiStep props step 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-s"
+      class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"
@@ -374,7 +374,7 @@ exports[`EuiStep props titleSize 1`] = `
     class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
   >
     <span
-      class="euiStepNumber emotion-euiStepNumber-xs"
+      class="euiStepNumber emotion-euiStepNumber-xs-EuiStep"
     >
       <span
         class="emotion-euiScreenReaderOnly"

diff --git a/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -83,6 +83,27 @@ exports[`EuiStepHorizontal props size s is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiStepHorizontal props size xxs is rendered 1`] = `
+<button
+  class="euiStepHorizontal emotion-euiStepHorizontal-enabled"
+  data-step-status="incomplete"
+  title="Step 1 is incomplete"
+>
+  <span
+    class="euiStepNumber euiStepHorizontal__number emotion-euiStepNumber-xxs-incomplete-euiStepHorizontal__number"
+  >
+    <span
+      class="emotion-euiScreenReaderOnly"
+    >
+      Step 1 is incomplete
+    </span>
+  </span>
+  <span
+    class="euiStepHorizontal__title emotion-euiStepHorizontal__title"
+  />
+</button>
+`;
+
 exports[`EuiStepHorizontal props status complete is rendered 1`] = `
 <button
   class="euiStepHorizontal emotion-euiStepHorizontal-enabled"

diff --git a/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/step_number.test.tsx.snap
@@ -18,24 +18,6 @@ exports[`EuiStepNumber is rendered 1`] = `
 </span>
 `;
 
-exports[`EuiStepNumber props has titleSize is rendered 1`] = `
-<span
-  class="euiStepNumber emotion-euiStepNumber-xs"
->
-  <span
-    class="emotion-euiScreenReaderOnly"
-  >
-    Step 1
-  </span>
-  <span
-    aria-hidden="true"
-    class="euiStepNumber__number emotion-euiStepNumber__number"
-  >
-    1
-  </span>
-</span>
-`;
-
 exports[`EuiStepNumber props status complete is rendered 1`] = `
 <span
   class="euiStepNumber emotion-euiStepNumber-s-complete"
@@ -145,3 +127,21 @@ exports[`EuiStepNumber props status warning is rendered 1`] = `
   </span>
 </span>
 `;
+
+exports[`EuiStepNumber props titleSize is rendered 1`] = `
+<span
+  class="euiStepNumber emotion-euiStepNumber-xs"
+>
+  <span
+    class="emotion-euiScreenReaderOnly"
+  >
+    Step 1
+  </span>
+  <span
+    aria-hidden="true"
+    class="euiStepNumber__number emotion-euiStepNumber__number"
+  >
+    1
+  </span>
+</span>
+`;
diff --git a/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap b/packages/eui/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -48,7 +48,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -83,7 +83,7 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s-incomplete"
+        class="euiStepNumber emotion-euiStepNumber-s-incomplete-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -127,7 +127,7 @@ exports[`EuiSteps renders steps 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -162,7 +162,7 @@ exports[`EuiSteps renders steps 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -197,7 +197,7 @@ exports[`EuiSteps renders steps 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s-incomplete"
+        class="euiStepNumber emotion-euiStepNumber-s-incomplete-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -241,7 +241,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -276,7 +276,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s"
+        class="euiStepNumber emotion-euiStepNumber-s-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -311,7 +311,7 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-s-incomplete"
+        class="euiStepNumber emotion-euiStepNumber-s-incomplete-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -355,7 +355,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-xs"
+        class="euiStepNumber emotion-euiStepNumber-xs-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -390,7 +390,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-xs"
+        class="euiStepNumber emotion-euiStepNumber-xs-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"
@@ -425,7 +425,7 @@ exports[`EuiSteps renders steps with titleSize 1`] = `
       class="euiStep__titleWrapper emotion-euiStep__titleWrapper"
     >
       <span
-        class="euiStepNumber emotion-euiStepNumber-xs-incomplete"
+        class="euiStepNumber emotion-euiStepNumber-xs-incomplete-EuiStep"
       >
         <span
           class="emotion-euiScreenReaderOnly"

diff --git a/packages/eui/src/components/steps/step.styles.ts b/packages/eui/src/components/steps/step.styles.ts
@@ -78,7 +78,7 @@ export const euiStepStyles = (euiThemeContext: UseEuiTheme) => {
     // to ensure the connection lines connect properly to the indicators
     xxs: css`
       &:not(:first-of-type) {
-        ${logicalCSS('margin-top', `calc(-1 * ${euiStep.numberXXSOffset})`)};
+        ${logicalCSS('margin-top', `calc(-1 * ${euiStep.numberXXSOffset})`)}
       }
 
       &:not(:last-of-type) {

diff --git a/packages/eui/src/components/steps/step_number.test.tsx b/packages/eui/src/components/steps/step_number.test.tsx
@@ -23,14 +23,26 @@ describe('EuiStepNumber', () => {
   });
 
   describe('props', () => {
-    describe('has titleSize', () => {
+    describe('titleSize', () => {
       it('is rendered', () => {
         const { container } = render(
           <EuiStepNumber titleSize="xs" number={1} />
         );
 
         expect(container.firstChild).toMatchSnapshot();
       });
+
+      describe('xxs', () => {
+        it('renders no visible number', () => {
+          const { container } = render(
+            <EuiStepNumber titleSize="xxs" number={1} />
+          );
+
+          expect(
+            container.querySelector('.euiStepNumber__number')
+          ).not.toBeInTheDocument();
+        });
+      });
     });
 
     describe('status', () => {
@@ -42,6 +54,38 @@ describe('EuiStepNumber', () => {
 
           expect(container.firstChild).toMatchSnapshot();
         });
+
+        if (['complete', 'warning', 'danger'].includes(status)) {
+          it('renders an icon', () => {
+            const { container } = render(
+              <EuiStepNumber titleSize="xxs" number={1} status={status} />
+            );
+
+            expect(
+              container.querySelector('.euiStepNumber__icon')
+            ).toBeInTheDocument();
+          });
+        } else if (status === 'loading') {
+          it('renders a loading spinner', () => {
+            const { container } = render(
+              <EuiStepNumber titleSize="xxs" number={1} status={status} />
+            );
+
+            expect(
+              container.querySelector('.euiStepNumber__loader')
+            ).toBeInTheDocument();
+          });
+        } else {
+          it('does not render an icon', () => {
+            const { container } = render(
+              <EuiStepNumber titleSize="xxs" number={1} status={status} />
+            );
+
+            expect(
+              container.querySelector('.euiStepNumber__icon')
+            ).not.toBeInTheDocument();
+          });
+        }
       });
     });
   });