fix: clean up test noise (#830)

## 📝 Changes

- cleans up test noise
- uses correct alignment prop on Stepper
- silences console errors on tests that throw

clean test output:

<img width="992" alt="image"
src="https://github.com/EasyPost/easy-ui/assets/752942/7dea4a6a-010c-4326-a0ec-69a3d13ae521">

## ✅ Checklist

- [x] Unit tests are written and passing
- [x] Changeset is added

.changeset/heavy-crabs-hunt.md

@@ -0,0 +1,5 @@
+---
+"@easypost/easy-ui": patch
+---
+
+fix(Stepper): use correct alignment prop on Stack component

easy-ui-react/src/SearchNav/SearchNav.test.tsx

@@ -5,7 +5,11 @@ import Help from "@easypost/easy-ui-icons/Help";
 import Brightness5 from "@easypost/easy-ui-icons/Brightness5";
 import React from "react";
 import { vi } from "vitest";
-import { mockGetComputedStyle, render } from "../utilities/test";
+import {
+  mockGetComputedStyle,
+  render,
+  silenceConsoleError,
+} from "../utilities/test";
 import { SearchNav } from "./SearchNav";
 
 describe("<SearchNav />", () => {
@@ -27,9 +31,11 @@ describe("<SearchNav />", () => {
   });
 
   it("should throw an error when SearchNav.LogoGroup is missing", () => {
+    const restoreConsoleError = silenceConsoleError();
     expect(() => render(getSearchNavWithoutLogoGroup())).toThrow(
       "SearchNav must contain SearchNav.LogoGroup.",
     );
+    restoreConsoleError();
   });
 
   it("should support rendering SearchNav.Logo", () => {
@@ -38,9 +44,11 @@ describe("<SearchNav />", () => {
   });
 
   it("should throw an error when SearchNav.Logo is missing", () => {
+    const restoreConsoleError = silenceConsoleError();
     expect(() => render(getSearchNavWithoutLogo())).toThrow(
       "SearchNav.LogoGroup must contain SearchNav.Logo.",
     );
+    restoreConsoleError();
   });
 
   it("should support rendering Search.Title with appropriate styles", () => {
@@ -93,9 +101,11 @@ describe("<SearchNav />", () => {
   });
 
   it("should throw an error when more than one SearchNav.PrimaryCTAItem is provided", () => {
+    const restoreConsoleError = silenceConsoleError();
     expect(() => render(getSearchNavWithMultiplePrimaryCTAItems())).toThrow(
       "SearchNav.CTAGroup can support at most one SearchNav.PrimaryCTAItem.",
     );
+    restoreConsoleError();
   });
 });
 

easy-ui-react/src/Stepper/Stepper.tsx

@@ -30,11 +30,11 @@ export type StepperProps = {
 };
 
 /**
-* The `<Stepper />` component is used to indicate progress as the user goes 
+* The `<Stepper />` component is used to indicate progress as the user goes
 * through a multi-step process.
 *
 * @remarks
-* A common use-case for this component is to guide a user through a large 
+* A common use-case for this component is to guide a user through a large
 * form where parts of the form can be separated into logical steps.
 *
 * @example
@@ -116,6 +116,9 @@ export function Stepper(props: StepperProps) {
   const totalSteps = Children.toArray(children).filter(Boolean).length;
   const isVertical = orientation === "vertical";
   const Component = isVertical ? VerticalStack : HorizontalStack;
+  const alignProp = isVertical
+    ? ({ inlineAlign: "start" } as const)
+    : ({ blockAlign: "center" } as const);
 
   const context = useMemo(() => {
     return {
@@ -129,7 +132,7 @@ export function Stepper(props: StepperProps) {
   return (
     <InternalStepperContext.Provider value={context}>
       <Component
-        blockAlign="center"
+        {...alignProp}
         gap={isVertical ? "0.5" : undefined}
         data-testid="root"
       >

easy-ui-react/src/utilities/test.ts

@@ -83,3 +83,10 @@ export function mockMatchMedia({
     window.matchMedia = originalMatchMedia;
   };
 }
+
+export function silenceConsoleError() {
+  const mock = vi.spyOn(console, "error").mockImplementation(() => vi.fn());
+  return () => {
+    mock.mockRestore();
+  };
+}