From d02df0c8e8d932be6fe96dbcd762572126770a21 Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Tue, 9 Jan 2024 19:34:01 -0300
Subject: [PATCH] Remove wrapping `describe` calls in tests

---
 .../fuselage-toastbar/src/ToastBar.spec.tsx   |   6 +-
 .../components/Accordion/Accordion.spec.tsx   |  16 +-
 .../AnimatedVisibility/AnimatedVisibility.tsx |   6 +-
 .../AutoComplete/AutoComplete.spec.tsx        |  32 ++-
 .../__snapshots__/AutoComplete.spec.tsx.snap  |  10 +-
 .../src/components/Avatar/Avatar.spec.tsx     |  32 ++-
 .../Avatar/__snapshots__/Avatar.spec.tsx.snap |   8 +-
 .../src/components/Badge/Badge.spec.tsx       |  80 +++---
 .../src/components/Banner/Banner.spec.tsx     |  22 +-
 .../fuselage/src/components/Box/Box.spec.tsx  | 242 +++++++++---------
 .../src/components/Button/Button.spec.tsx     |  50 +---
 .../src/components/Button/IconButton.spec.tsx |  37 +++
 .../ButtonGroup/ButtonGroup.spec.tsx          |  16 +-
 .../src/components/Callout/Callout.spec.tsx   |  32 ++-
 .../__snapshots__/Callout.spec.tsx.snap       |  14 +-
 .../src/components/Card/Card.spec.tsx         |  32 ++-
 .../Card/__snapshots__/Card.spec.tsx.snap     |  22 +-
 .../src/components/CardGrid/CardGrid.spec.tsx |  32 ++-
 .../__snapshots__/CardGrid.spec.tsx.snap      |   2 +-
 .../components/CardGroup/CardGroup.spec.tsx   |  32 ++-
 .../__snapshots__/CardGroup.spec.tsx.snap     |  10 +-
 .../src/components/CheckBox/CheckBox.spec.tsx |  92 ++++---
 .../__snapshots__/CheckBox.spec.tsx.snap      |  12 +-
 .../src/components/Chevron/Chevron.spec.tsx   |   6 +-
 .../src/components/Chip/Chip.spec.tsx         |   6 +-
 .../CodeSnippet/CodeSnippet.spec.tsx          |  58 ++---
 .../src/components/Divider/Divider.spec.tsx   |   6 +-
 .../src/components/Dropdown/Dropdown.spec.tsx |  34 ++-
 .../components/EmailInput/EmailInput.spec.tsx |   6 +-
 .../src/components/Field/Field.spec.tsx       |  32 ++-
 .../Field/__snapshots__/Field.spec.tsx.snap   |  10 +-
 .../components/FieldGroup/FieldGroup.spec.tsx |   6 +-
 .../src/components/Flex/Flex.spec.tsx         |  15 +-
 .../components/FramedIcon/FramedIcon.spec.tsx |  32 ++-
 .../__snapshots__/FramedIcon.spec.tsx.snap    |  10 +-
 .../src/components/Grid/Grid.spec.tsx         |  14 +-
 .../src/components/Icon/Icon.spec.tsx         |   8 +-
 .../src/components/InputBox/InputBox.spec.tsx |  15 +-
 .../src/components/InputBox/InputBox.tsx      |   7 +-
 .../src/components/Label/Label.spec.tsx       |  32 ++-
 .../Label/__snapshots__/Label.spec.tsx.snap   |  10 +-
 .../src/components/Margins/Margins.spec.tsx   |  24 +-
 .../src/components/Menu/Menu.spec.tsx         |  48 ++--
 .../src/components/Message/Message.spec.tsx   |   6 +-
 .../src/components/Modal/Modal.spec.tsx       |  32 ++-
 .../Modal/__snapshots__/Modal.spec.tsx.snap   |  16 +-
 .../MultiSelect/MultiSelect.spec.tsx          |   6 +-
 .../NumberInput/NumberInput.spec.tsx          |   8 +-
 .../src/components/Options/Options.spec.tsx   |   6 +-
 .../components/Pagination/Pagination.spec.tsx |   8 +-
 .../PasswordInput/PasswordInput.spec.tsx      |   8 +-
 .../ProgressBar/ProgressBar.spec.tsx          |   8 +-
 .../RadioButton/RadioButton.spec.tsx          |   4 +-
 .../__snapshots__/RadioButton.spec.tsx.snap   |   8 +-
 .../SearchInput/SearchInput.spec.tsx          |   6 +-
 .../src/components/Select/Select.spec.tsx     |   6 +-
 .../src/components/Sidebar/Sidebar.spec.tsx   |   6 +-
 .../src/components/Skeleton/Skeleton.spec.tsx |   6 +-
 .../src/components/Slider/Slider.spec.tsx     |  72 +++---
 .../src/components/States/States.spec.tsx     |   6 +-
 .../StatusBullet/StatusBullet.spec.tsx        |   6 +-
 .../src/components/Table/Table.spec.tsx       |  86 +++----
 .../src/components/Tabs/Tabs.spec.tsx         |   6 +-
 .../fuselage/src/components/Tag/Tag.spec.tsx  |   6 +-
 .../TelephoneInput/TelephoneInput.spec.tsx    |   6 +-
 .../TextAreaInput/TextAreaInput.spec.tsx      |   6 +-
 .../components/TextInput/TextInput.spec.tsx   |   6 +-
 .../src/components/Throbber/Throbber.spec.tsx |   6 +-
 .../src/components/Tile/Tile.spec.tsx         |   6 +-
 .../src/components/ToastBar/ToastBar.spec.tsx |  16 +-
 .../ToggleSwitch/ToggleSwitch.spec.tsx        |  32 ++-
 .../__snapshots__/ToggleSwitch.spec.tsx.snap  |   8 +-
 .../src/components/Tooltip/Tooltip.spec.tsx   |  31 ++-
 .../src/components/UrlInput/UrlInput.spec.tsx |   6 +-
 74 files changed, 776 insertions(+), 879 deletions(-)
 create mode 100644 packages/fuselage/src/components/Button/IconButton.spec.tsx

diff --git a/packages/fuselage-toastbar/src/ToastBar.spec.tsx b/packages/fuselage-toastbar/src/ToastBar.spec.tsx
index bc83157c79..e07498865d 100644
--- a/packages/fuselage-toastbar/src/ToastBar.spec.tsx
+++ b/packages/fuselage-toastbar/src/ToastBar.spec.tsx
@@ -5,8 +5,6 @@ import * as stories from './stories';
 
 const { ToastBarWithData } = composeStories(stories);
 
-describe('[ToastBarWithData Component]', () => {
-  it('renders without crashing', () => {
-    render(<ToastBarWithData />);
-  });
+it('renders without crashing', () => {
+  render(<ToastBarWithData />);
 });
diff --git a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
index d4150fee4b..c785ff8ac3 100644
--- a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
+++ b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
@@ -7,15 +7,13 @@ import * as stories from './Accordion.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Accordion Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
 
-  it('should have no a11y violations', async () => {
-    const { container } = render(<Default />);
+it('should have no a11y violations', async () => {
+  const { container } = render(<Default />);
 
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
 });
diff --git a/packages/fuselage/src/components/AnimatedVisibility/AnimatedVisibility.tsx b/packages/fuselage/src/components/AnimatedVisibility/AnimatedVisibility.tsx
index 4bead7e05f..2fbe1eea43 100644
--- a/packages/fuselage/src/components/AnimatedVisibility/AnimatedVisibility.tsx
+++ b/packages/fuselage/src/components/AnimatedVisibility/AnimatedVisibility.tsx
@@ -52,7 +52,11 @@ const AnimatedVisibility = (props: AnimatedVisibilityProps) => {
 
   const className = useStyle(
     css`
-      animation-duration: 230ms;
+      ${process.env.NODE_ENV !== 'test'
+        ? css`
+            animation-duration: 230ms;
+          `
+        : ''}
 
       ${visibility === Visibility.HIDING &&
       css`
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
index 61d95ddecd..518070ccdd 100644
--- a/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
+++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.spec.tsx
@@ -13,22 +13,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
 
 withResizeObserverMock();
 
-describe('[AutoComplete Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap b/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
index 90d8c62f97..d1433d8342 100644
--- a/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
+++ b/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
+exports[`renders CustomItem without crashing 1`] = `
 <body>
   <div>
     <div
@@ -31,7 +31,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
 </body>
 `;
 
-exports[`[AutoComplete Rendering] renders CustomSelected without crashing 1`] = `
+exports[`renders CustomSelected without crashing 1`] = `
 <body>
   <div>
     <div
@@ -129,7 +129,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
 </body>
 `;
 
-exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <div
@@ -160,7 +160,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
+exports[`renders Multiple without crashing 1`] = `
 <body>
   <div>
     <div
@@ -227,7 +227,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
 </body>
 `;
 
-exports[`[AutoComplete Rendering] renders MultipleCustomSelected without crashing 1`] = `
+exports[`renders MultipleCustomSelected without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/Avatar/Avatar.spec.tsx b/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
index fa476440af..9b1eb5c91f 100644
--- a/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
+++ b/packages/fuselage/src/components/Avatar/Avatar.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[Avatar Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Avatar/__snapshots__/Avatar.spec.tsx.snap b/packages/fuselage/src/components/Avatar/__snapshots__/Avatar.spec.tsx.snap
index 0cac450d08..9bccac089c 100644
--- a/packages/fuselage/src/components/Avatar/__snapshots__/Avatar.spec.tsx.snap
+++ b/packages/fuselage/src/components/Avatar/__snapshots__/Avatar.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Avatar Component] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <div
@@ -124,7 +124,7 @@ exports[`[Avatar Component] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[Avatar Component] renders Rounded without crashing 1`] = `
+exports[`renders Rounded without crashing 1`] = `
 <body>
   <div>
     <div
@@ -248,7 +248,7 @@ exports[`[Avatar Component] renders Rounded without crashing 1`] = `
 </body>
 `;
 
-exports[`[Avatar Component] renders Stack without crashing 1`] = `
+exports[`renders Stack without crashing 1`] = `
 <body>
   <div>
     <div
@@ -570,7 +570,7 @@ exports[`[Avatar Component] renders Stack without crashing 1`] = `
 </body>
 `;
 
-exports[`[Avatar Component] renders StackRounded without crashing 1`] = `
+exports[`renders StackRounded without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/Badge/Badge.spec.tsx b/packages/fuselage/src/components/Badge/Badge.spec.tsx
index 3fa237bfc2..faa7eac468 100644
--- a/packages/fuselage/src/components/Badge/Badge.spec.tsx
+++ b/packages/fuselage/src/components/Badge/Badge.spec.tsx
@@ -8,51 +8,49 @@ import * as stories from './Badge.stories';
 const { Default, Primary, Secondary, Danger, Warning, Disabled } =
   composeStories(stories);
 
-describe('[Badge Component]', () => {
-  describe('Story renders without crashing', () => {
-    it('Default', () => {
-      render(<Default />);
-    });
-    it('Primary', () => {
-      render(<Primary />);
-    });
-    it('Secondary', () => {
-      render(<Secondary />);
-    });
-    it('Danger', () => {
-      render(<Danger />);
-    });
-    it('Warning', () => {
-      render(<Warning />);
-    });
-    it('Disabled', () => {
-      render(<Disabled />);
-    });
+describe('Story renders without crashing', () => {
+  it('Default', () => {
+    render(<Default />);
   });
-
-  it('should display children', () => {
-    render(<Badge>Children</Badge>);
-    screen.getByText('Children');
+  it('Primary', () => {
+    render(<Primary />);
   });
-
-  it('should have class according to variant', () => {
-    const { container } = render(<Badge variant='primary' />);
-    expect(container.querySelector('.rcx-badge--primary')).toBeInTheDocument();
+  it('Secondary', () => {
+    render(<Secondary />);
   });
-
-  it('should have class passed as property', () => {
-    const { container } = render(<Badge className='test-class' />);
-    expect(container.querySelector('.test-class')).toBeInTheDocument();
+  it('Danger', () => {
+    render(<Danger />);
   });
-
-  it('should show title when hovered', () => {
-    const { container } = render(<Badge title='test-title' />);
-    const badgeTitle = container.querySelector('span');
-    expect(badgeTitle?.getAttribute('title')).toEqual('test-title');
+  it('Warning', () => {
+    render(<Warning />);
   });
-
-  it('should have disabled class if it has the disabled property', () => {
-    const { container } = render(<Badge disabled />);
-    expect(container.querySelector('.rcx-badge--disabled')).toBeInTheDocument();
+  it('Disabled', () => {
+    render(<Disabled />);
   });
 });
+
+it('should display children', () => {
+  render(<Badge>Children</Badge>);
+  screen.getByText('Children');
+});
+
+it('should have class according to variant', () => {
+  const { container } = render(<Badge variant='primary' />);
+  expect(container.querySelector('.rcx-badge--primary')).toBeInTheDocument();
+});
+
+it('should have class passed as property', () => {
+  const { container } = render(<Badge className='test-class' />);
+  expect(container.querySelector('.test-class')).toBeInTheDocument();
+});
+
+it('should show title when hovered', () => {
+  const { container } = render(<Badge title='test-title' />);
+  const badgeTitle = container.querySelector('span');
+  expect(badgeTitle?.getAttribute('title')).toEqual('test-title');
+});
+
+it('should have disabled class if it has the disabled property', () => {
+  const { container } = render(<Badge disabled />);
+  expect(container.querySelector('.rcx-badge--disabled')).toBeInTheDocument();
+});
diff --git a/packages/fuselage/src/components/Banner/Banner.spec.tsx b/packages/fuselage/src/components/Banner/Banner.spec.tsx
index 5c4cccd715..c763c6e712 100644
--- a/packages/fuselage/src/components/Banner/Banner.spec.tsx
+++ b/packages/fuselage/src/components/Banner/Banner.spec.tsx
@@ -6,17 +6,15 @@ import Banner from './Banner';
 
 withResizeObserverMock();
 
-describe('[Banner Component]', () => {
-  it('renders without crashing', () => {
-    render(<Banner />);
-  });
+it('renders without crashing', () => {
+  render(<Banner />);
+});
 
-  it('renders with link', () => {
-    render(<Banner link='https://rocket.chat' linkText='More info' />);
-    expect(
-      screen.getByRole('link', {
-        name: /more info/i,
-      })
-    ).toBeInTheDocument();
-  });
+it('renders with link', () => {
+  render(<Banner link='https://rocket.chat' linkText='More info' />);
+  expect(
+    screen.getByRole('link', {
+      name: /more info/i,
+    })
+  ).toBeInTheDocument();
 });
diff --git a/packages/fuselage/src/components/Box/Box.spec.tsx b/packages/fuselage/src/components/Box/Box.spec.tsx
index 4baf545bb1..503b6a64cf 100644
--- a/packages/fuselage/src/components/Box/Box.spec.tsx
+++ b/packages/fuselage/src/components/Box/Box.spec.tsx
@@ -4,144 +4,142 @@ import React from 'react';
 
 import Box from '.';
 
-describe('[Box Component]', () => {
-  it('renders without crashing', () => {
-    render(<Box />);
-  });
+it('renders without crashing', () => {
+  render(<Box />);
+});
 
-  describe('className prop', () => {
-    it('accepts a string in className prop', () => {
-      const { container } = render(<Box className='fuselage' />);
+describe('className prop', () => {
+  it('accepts a string in className prop', () => {
+    const { container } = render(<Box className='fuselage' />);
 
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toBeInstanceOf(HTMLDivElement);
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveClass('fuselage');
-    });
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toBeInstanceOf(HTMLDivElement);
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveClass('fuselage');
+  });
 
-    it('accepts a css tagged template string in className prop', () => {
-      const { container } = render(
-        <Box
-          className={css`
-            width: 10em;
-          `}
-        />
-      );
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveCssInJsClass();
-      expect(container.firstElementChild).toHaveStyle({
-        width: '10em',
-      });
+  it('accepts a css tagged template string in className prop', () => {
+    const { container } = render(
+      <Box
+        className={css`
+          width: 10em;
+        `}
+      />
+    );
+
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveCssInJsClass();
+    expect(container.firstElementChild).toHaveStyle({
+      width: '10em',
     });
+  });
 
-    it('accepts an empty array in className prop', () => {
-      const { container } = render(<Box className={[]} />);
+  it('accepts an empty array in className prop', () => {
+    const { container } = render(<Box className={[]} />);
 
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-    });
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+  });
 
-    it('accepts an array of values in className prop', () => {
-      const { container } = render(
-        <Box
-          className={[
-            'fuselage',
-            css`
-              width: 10em;
-            `,
-          ]}
-        />
-      );
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveClass('fuselage');
-      expect(container.firstElementChild).toHaveCssInJsClass();
-      expect(container.firstElementChild).toHaveStyle({
-        width: '10em',
-      });
+  it('accepts an array of values in className prop', () => {
+    const { container } = render(
+      <Box
+        className={[
+          'fuselage',
+          css`
+            width: 10em;
+          `,
+        ]}
+      />
+    );
+
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveClass('fuselage');
+    expect(container.firstElementChild).toHaveCssInJsClass();
+    expect(container.firstElementChild).toHaveStyle({
+      width: '10em',
     });
+  });
 
-    it('attaches rcx-* props into className', () => {
-      const { container } = render(
-        <Box rcx-test-a rcx-test-b={false} rcx-test-c={true} rcx-test='d' />
-      );
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveClass('rcx-test-a');
-      expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
-      expect(container.firstElementChild).toHaveClass('rcx-test-c');
-      expect(container.firstElementChild).toHaveClass('rcx-test-d');
-    });
+  it('attaches rcx-* props into className', () => {
+    const { container } = render(
+      <Box rcx-test-a rcx-test-b={false} rcx-test-c={true} rcx-test='d' />
+    );
+
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveClass('rcx-test-a');
+    expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
+    expect(container.firstElementChild).toHaveClass('rcx-test-c');
+    expect(container.firstElementChild).toHaveClass('rcx-test-d');
+  });
 
-    it('merges rcx-* props and an empty array into className', () => {
-      const { container } = render(
-        <Box
-          className={[]}
-          rcx-test-a
-          rcx-test-b={false}
-          rcx-test-c={true}
-          rcx-test='d'
-        />
-      );
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveClass('rcx-test-a');
-      expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
-      expect(container.firstElementChild).toHaveClass('rcx-test-c');
-      expect(container.firstElementChild).toHaveClass('rcx-test-d');
-    });
+  it('merges rcx-* props and an empty array into className', () => {
+    const { container } = render(
+      <Box
+        className={[]}
+        rcx-test-a
+        rcx-test-b={false}
+        rcx-test-c={true}
+        rcx-test='d'
+      />
+    );
+
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveClass('rcx-test-a');
+    expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
+    expect(container.firstElementChild).toHaveClass('rcx-test-c');
+    expect(container.firstElementChild).toHaveClass('rcx-test-d');
+  });
 
-    it('merges rcx-* props and an array of values into className', () => {
-      const { container } = render(
-        <Box
-          className={[
-            'fuselage',
-            css`
-              width: 10em;
-            `,
-          ]}
-          rcx-test-a
-          rcx-test-b={false}
-          rcx-test-c={true}
-          rcx-test='d'
-        />
-      );
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
-      expect(container.firstElementChild).toHaveClass('rcx-box');
-      expect(container.firstElementChild).toHaveClass('rcx-test-a');
-      expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
-      expect(container.firstElementChild).toHaveClass('rcx-test-c');
-      expect(container.firstElementChild).toHaveClass('rcx-test-d');
-      expect(container.firstElementChild).toHaveClass('fuselage');
-      expect(container.firstElementChild).toHaveCssInJsClass();
-      expect(container.firstElementChild).toHaveStyle({
-        width: '10em',
-      });
+  it('merges rcx-* props and an array of values into className', () => {
+    const { container } = render(
+      <Box
+        className={[
+          'fuselage',
+          css`
+            width: 10em;
+          `,
+        ]}
+        rcx-test-a
+        rcx-test-b={false}
+        rcx-test-c={true}
+        rcx-test='d'
+      />
+    );
+
+    expect(container.firstElementChild).toHaveProperty('tagName', 'DIV');
+    expect(container.firstElementChild).toHaveClass('rcx-box');
+    expect(container.firstElementChild).toHaveClass('rcx-test-a');
+    expect(container.firstElementChild).not.toHaveClass('rcx-test-b');
+    expect(container.firstElementChild).toHaveClass('rcx-test-c');
+    expect(container.firstElementChild).toHaveClass('rcx-test-d');
+    expect(container.firstElementChild).toHaveClass('fuselage');
+    expect(container.firstElementChild).toHaveCssInJsClass();
+    expect(container.firstElementChild).toHaveStyle({
+      width: '10em',
     });
   });
+});
 
-  describe('is props', () => {
-    it('accepts a instrinsic HTML element', () => {
-      const { container } = render(<Box is='span' />);
-
-      expect(container.firstElementChild).toHaveProperty('tagName', 'SPAN');
-    });
+describe('is props', () => {
+  it('accepts a instrinsic HTML element', () => {
+    const { container } = render(<Box is='span' />);
 
-    it('accepts a instrinsic SVG element', () => {
-      const { container } = render(<Box is='path' />, {
-        wrapper: ({ children }) => <svg children={children} />,
-      });
+    expect(container.firstElementChild).toHaveProperty('tagName', 'SPAN');
+  });
 
-      expect(container.firstElementChild?.firstElementChild).toHaveProperty(
-        'tagName',
-        'path' // tagName is lowercase for SVG elements
-      );
+  it('accepts a instrinsic SVG element', () => {
+    const { container } = render(<Box is='path' />, {
+      wrapper: ({ children }) => <svg children={children} />,
     });
+
+    expect(container.firstElementChild?.firstElementChild).toHaveProperty(
+      'tagName',
+      'path' // tagName is lowercase for SVG elements
+    );
   });
 });
diff --git a/packages/fuselage/src/components/Button/Button.spec.tsx b/packages/fuselage/src/components/Button/Button.spec.tsx
index 3e838464c6..640d043aff 100644
--- a/packages/fuselage/src/components/Button/Button.spec.tsx
+++ b/packages/fuselage/src/components/Button/Button.spec.tsx
@@ -4,52 +4,20 @@ import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Button.stories';
-import * as iconButtonStories from './IconButton.stories';
 
 const { Default, AsIconButton } = composeStories(stories);
-const { _IconButton, _IconButtonInfo, _IconButtonSuccess } =
-  composeStories(iconButtonStories);
 
-describe('[Button Component]', () => {
-  it('renders Button without crashing', () => {
-    render(<Default />);
-  });
-
-  it('renders ActionButton without crashing', () => {
-    render(<AsIconButton />);
-  });
-
-  it('should have no a11y violations', async () => {
-    const { container } = render(<Default />);
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+it('renders Button without crashing', () => {
+  render(<Default />);
 });
 
-describe('[IconButton Component]', () => {
-  it('renders IconButton without crashing', () => {
-    render(<AsIconButton />);
-  });
-
-  it('IconButton default should have no a11y violations', async () => {
-    const { container } = render(<_IconButton />);
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('IconButtonInfo should have no a11y violations', async () => {
-    const { container } = render(<_IconButtonInfo />);
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+it('renders ActionButton without crashing', () => {
+  render(<AsIconButton />);
+});
 
-  it('IconButtonSuccess should have no a11y violations', async () => {
-    const { container } = render(<_IconButtonSuccess />);
+it('should have no a11y violations', async () => {
+  const { container } = render(<Default />);
 
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
 });
diff --git a/packages/fuselage/src/components/Button/IconButton.spec.tsx b/packages/fuselage/src/components/Button/IconButton.spec.tsx
new file mode 100644
index 0000000000..2472280374
--- /dev/null
+++ b/packages/fuselage/src/components/Button/IconButton.spec.tsx
@@ -0,0 +1,37 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import React from 'react';
+
+import * as stories from './Button.stories';
+import * as iconButtonStories from './IconButton.stories';
+
+const { AsIconButton } = composeStories(stories);
+
+const { _IconButton, _IconButtonInfo, _IconButtonSuccess } =
+  composeStories(iconButtonStories);
+
+it('renders IconButton without crashing', () => {
+  render(<AsIconButton />);
+});
+
+it('IconButton default should have no a11y violations', async () => {
+  const { container } = render(<_IconButton />);
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+it('IconButtonInfo should have no a11y violations', async () => {
+  const { container } = render(<_IconButtonInfo />);
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
+
+it('IconButtonSuccess should have no a11y violations', async () => {
+  const { container } = render(<_IconButtonSuccess />);
+
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
index 477afec4df..6ac9da0950 100644
--- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
+++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
@@ -7,15 +7,13 @@ import * as stories from './ButtonGroup.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[ButtonGroup Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
 
-  it('should have no a11y violations', async () => {
-    const { container } = render(<Default />);
+it('should have no a11y violations', async () => {
+  const { container } = render(<Default />);
 
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
 });
diff --git a/packages/fuselage/src/components/Callout/Callout.spec.tsx b/packages/fuselage/src/components/Callout/Callout.spec.tsx
index 1833d692c7..273d5d7921 100644
--- a/packages/fuselage/src/components/Callout/Callout.spec.tsx
+++ b/packages/fuselage/src/components/Callout/Callout.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[CheckBox Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
index ac7449ea89..cb34d8a6f4 100644
--- a/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
+++ b/packages/fuselage/src/components/Callout/__snapshots__/Callout.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = `
+exports[`renders CustomIcon without crashing 1`] = `
 <body>
   <div>
     <section
@@ -31,7 +31,7 @@ exports[`[CheckBox Rendering] renders CustomIcon without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Danger without crashing 1`] = `
+exports[`renders Danger without crashing 1`] = `
 <body>
   <div>
     <section
@@ -62,7 +62,7 @@ exports[`[CheckBox Rendering] renders Danger without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <section
@@ -93,7 +93,7 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Info without crashing 1`] = `
+exports[`renders Info without crashing 1`] = `
 <body>
   <div>
     <section
@@ -124,7 +124,7 @@ exports[`[CheckBox Rendering] renders Info without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Success without crashing 1`] = `
+exports[`renders Success without crashing 1`] = `
 <body>
   <div>
     <section
@@ -155,7 +155,7 @@ exports[`[CheckBox Rendering] renders Success without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Warning without crashing 1`] = `
+exports[`renders Warning without crashing 1`] = `
 <body>
   <div>
     <section
@@ -186,7 +186,7 @@ exports[`[CheckBox Rendering] renders Warning without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders WithDescriptionOnly without crashing 1`] = `
+exports[`renders WithDescriptionOnly without crashing 1`] = `
 <body>
   <div>
     <section
diff --git a/packages/fuselage/src/components/Card/Card.spec.tsx b/packages/fuselage/src/components/Card/Card.spec.tsx
index d0fd74ad6c..243e396349 100644
--- a/packages/fuselage/src/components/Card/Card.spec.tsx
+++ b/packages/fuselage/src/components/Card/Card.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[Card Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Card/__snapshots__/Card.spec.tsx.snap b/packages/fuselage/src/components/Card/__snapshots__/Card.spec.tsx.snap
index 0341f8fb64..d8b87e40b4 100644
--- a/packages/fuselage/src/components/Card/__snapshots__/Card.spec.tsx.snap
+++ b/packages/fuselage/src/components/Card/__snapshots__/Card.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Card Rendering] renders Clickable without crashing 1`] = `
+exports[`renders Clickable without crashing 1`] = `
 <body>
   <div>
     <div
@@ -99,7 +99,7 @@ exports[`[Card Rendering] renders Clickable without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders Hero without crashing 1`] = `
+exports[`renders Hero without crashing 1`] = `
 <body>
   <div>
     <div
@@ -134,7 +134,7 @@ exports[`[Card Rendering] renders Hero without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders Horizontal without crashing 1`] = `
+exports[`renders Horizontal without crashing 1`] = `
 <body>
   <div>
     <div
@@ -237,7 +237,7 @@ exports[`[Card Rendering] renders Horizontal without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders HorizontalCustom without crashing 1`] = `
+exports[`renders HorizontalCustom without crashing 1`] = `
 <body>
   <div>
     <div
@@ -320,7 +320,7 @@ exports[`[Card Rendering] renders HorizontalCustom without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders HorizontalNoAction without crashing 1`] = `
+exports[`renders HorizontalNoAction without crashing 1`] = `
 <body>
   <div>
     <div
@@ -355,7 +355,7 @@ exports[`[Card Rendering] renders HorizontalNoAction without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders HorizontalNoIcon without crashing 1`] = `
+exports[`renders HorizontalNoIcon without crashing 1`] = `
 <body>
   <div>
     <div
@@ -420,7 +420,7 @@ exports[`[Card Rendering] renders HorizontalNoIcon without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders Title h4 without crashing 1`] = `
+exports[`renders Title h4 without crashing 1`] = `
 <body>
   <div>
     <div
@@ -445,7 +445,7 @@ exports[`[Card Rendering] renders Title h4 without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders Title h5 without crashing 1`] = `
+exports[`renders Title h5 without crashing 1`] = `
 <body>
   <div>
     <div
@@ -470,7 +470,7 @@ exports[`[Card Rendering] renders Title h5 without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders Vertical without crashing 1`] = `
+exports[`renders Vertical without crashing 1`] = `
 <body>
   <div>
     <div
@@ -541,7 +541,7 @@ exports[`[Card Rendering] renders Vertical without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders VerticalCustom without crashing 1`] = `
+exports[`renders VerticalCustom without crashing 1`] = `
 <body>
   <div>
     <div
@@ -686,7 +686,7 @@ exports[`[Card Rendering] renders VerticalCustom without crashing 1`] = `
 </body>
 `;
 
-exports[`[Card Rendering] renders VerticalNoIcon without crashing 1`] = `
+exports[`renders VerticalNoIcon without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx b/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
index 076f3f1963..2431fea901 100644
--- a/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
+++ b/packages/fuselage/src/components/CardGrid/CardGrid.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[CardGrid Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/CardGrid/__snapshots__/CardGrid.spec.tsx.snap b/packages/fuselage/src/components/CardGrid/__snapshots__/CardGrid.spec.tsx.snap
index b586d279c1..40535d8667 100644
--- a/packages/fuselage/src/components/CardGrid/__snapshots__/CardGrid.spec.tsx.snap
+++ b/packages/fuselage/src/components/CardGrid/__snapshots__/CardGrid.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[CardGrid Rendering] renders _CardGrid without crashing 1`] = `
+exports[`renders _CardGrid without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx b/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
index f3e5f32db7..d4ccab39d6 100644
--- a/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
+++ b/packages/fuselage/src/components/CardGroup/CardGroup.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[CardGroup Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/CardGroup/__snapshots__/CardGroup.spec.tsx.snap b/packages/fuselage/src/components/CardGroup/__snapshots__/CardGroup.spec.tsx.snap
index bbbeab3bf8..a2ed0c07a7 100644
--- a/packages/fuselage/src/components/CardGroup/__snapshots__/CardGroup.spec.tsx.snap
+++ b/packages/fuselage/src/components/CardGroup/__snapshots__/CardGroup.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[CardGroup Rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <div
@@ -588,7 +588,7 @@ exports[`[CardGroup Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[CardGroup Rendering] renders VerticalWithHorizontalCard without crashing 1`] = `
+exports[`renders VerticalWithHorizontalCard without crashing 1`] = `
 <body>
   <div>
     <div
@@ -1104,7 +1104,7 @@ exports[`[CardGroup Rendering] renders VerticalWithHorizontalCard without crashi
 </body>
 `;
 
-exports[`[CardGroup Rendering] renders Wrap without crashing 1`] = `
+exports[`renders Wrap without crashing 1`] = `
 <body>
   <div>
     <div
@@ -1692,7 +1692,7 @@ exports[`[CardGroup Rendering] renders Wrap without crashing 1`] = `
 </body>
 `;
 
-exports[`[CardGroup Rendering] renders WrapAlignCenter without crashing 1`] = `
+exports[`renders WrapAlignCenter without crashing 1`] = `
 <body>
   <div>
     <div
@@ -2280,7 +2280,7 @@ exports[`[CardGroup Rendering] renders WrapAlignCenter without crashing 1`] = `
 </body>
 `;
 
-exports[`[CardGroup Rendering] renders WrapStretch without crashing 1`] = `
+exports[`renders WrapStretch without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
index f747c29e54..78a240fafb 100644
--- a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
+++ b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
@@ -13,55 +13,51 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[CheckBox Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
-
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
+
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
+
+it('changes style of element as checkbox is checked', () => {
+  const { container } = render(<Default />);
+  const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
+  fireEvent.click(checkbox);
+  expect(checkbox.checked).toEqual(true);
+});
+it('changes style of element as checkbox is checked/unchecked', () => {
+  const { container } = render(<Default />);
+  const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
+  fireEvent.click(checkbox);
+  fireEvent.click(checkbox);
+  expect(checkbox.checked).toEqual(false);
+});
+it('displays checkbox indeterminate correctly', () => {
+  const { container } = render(<Indeterminate />);
+  const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
+  expect(checkbox.indeterminate).toEqual(true);
 });
 
-describe('[CheckBox Interacting]', () => {
-  it('changes style of element as checkbox is checked', () => {
-    const { container } = render(<Default />);
-    const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toEqual(true);
-  });
-  it('changes style of element as checkbox is checked/unchecked', () => {
-    const { container } = render(<Default />);
-    const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
-    fireEvent.click(checkbox);
-    fireEvent.click(checkbox);
-    expect(checkbox.checked).toEqual(false);
-  });
-  it('displays checkbox indeterminate correctly', () => {
-    const { container } = render(<Indeterminate />);
-    const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
-    expect(checkbox.indeterminate).toEqual(true);
-  });
-
-  it('displays checkbox with defaultChecked value correctly', () => {
-    const { container } = render(<DefaultChecked />);
-    const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
-    expect(checkbox.defaultChecked).toEqual(true);
-  });
+it('displays checkbox with defaultChecked value correctly', () => {
+  const { container } = render(<DefaultChecked />);
+  const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
+  expect(checkbox.defaultChecked).toEqual(true);
+});
 
-  it('displays checkbox disabled correctly', () => {
-    const { container } = render(<Disabled />);
-    const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
-    expect(checkbox.disabled).toEqual(true);
-  });
+it('displays checkbox disabled correctly', () => {
+  const { container } = render(<Disabled />);
+  const checkbox = getByRole(container, 'checkbox') as HTMLInputElement;
+  expect(checkbox.disabled).toEqual(true);
 });
diff --git a/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
index 7593d88771..17dd5f91d4 100644
--- a/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
+++ b/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[CheckBox Rendering] renders Checked without crashing 1`] = `
+exports[`renders Checked without crashing 1`] = `
 <body>
   <div>
     <label
@@ -21,7 +21,7 @@ exports[`[CheckBox Rendering] renders Checked without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <label
@@ -41,7 +41,7 @@ exports[`[CheckBox Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders DefaultChecked without crashing 1`] = `
+exports[`renders DefaultChecked without crashing 1`] = `
 <body>
   <div>
     <label
@@ -62,7 +62,7 @@ exports[`[CheckBox Rendering] renders DefaultChecked without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Disabled without crashing 1`] = `
+exports[`renders Disabled without crashing 1`] = `
 <body>
   <div>
     <label
@@ -83,7 +83,7 @@ exports[`[CheckBox Rendering] renders Disabled without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders Indeterminate without crashing 1`] = `
+exports[`renders Indeterminate without crashing 1`] = `
 <body>
   <div>
     <label
@@ -103,7 +103,7 @@ exports[`[CheckBox Rendering] renders Indeterminate without crashing 1`] = `
 </body>
 `;
 
-exports[`[CheckBox Rendering] renders States without crashing 1`] = `
+exports[`renders States without crashing 1`] = `
 <body>
   <div>
     <table
diff --git a/packages/fuselage/src/components/Chevron/Chevron.spec.tsx b/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
index eeadd3d612..a3e59b269c 100644
--- a/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
+++ b/packages/fuselage/src/components/Chevron/Chevron.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Chevron.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Chevron Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Chip/Chip.spec.tsx b/packages/fuselage/src/components/Chip/Chip.spec.tsx
index 731bd9f941..533cc21a08 100644
--- a/packages/fuselage/src/components/Chip/Chip.spec.tsx
+++ b/packages/fuselage/src/components/Chip/Chip.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Chip.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Chevron Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
index 536bd7aa05..62dc704682 100644
--- a/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
+++ b/packages/fuselage/src/components/CodeSnippet/CodeSnippet.spec.tsx
@@ -7,41 +7,39 @@ import * as stories from './CodeSnippet.stories';
 const { Default, CopyButton, CustomButtonName, LoadingCode } =
   composeStories(stories);
 
-describe('[CodeSnippet Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
 
-  it('should display children', () => {
-    render(<Default>Children</Default>);
-    screen.getByText('Children');
-  });
+it('should display children', () => {
+  render(<Default>Children</Default>);
+  screen.getByText('Children');
+});
 
-  describe('Button behavior', () => {
-    let onClickSpy: ReturnType<typeof jest.fn>;
-    beforeEach(() => {
-      onClickSpy = jest.fn();
-      render(<CopyButton onClick={onClickSpy} />);
-    });
-
-    it('should display button, when component receives onClick property', () => {
-      screen.getByRole('button');
-    });
-
-    it('should call onClick function when button is clicked', () => {
-      const button = screen.getByRole('button');
-      button.click();
-      expect(onClickSpy).toHaveBeenCalled();
-    });
+describe('Button behavior', () => {
+  let onClickSpy: ReturnType<typeof jest.fn>;
+  beforeEach(() => {
+    onClickSpy = jest.fn();
+    render(<CopyButton onClick={onClickSpy} />);
   });
 
-  it('should change button name, when buttonText property is passed', () => {
-    render(<CustomButtonName buttonText='custom-name' />);
-    screen.getByText('custom-name');
+  it('should display button, when component receives onClick property', () => {
+    screen.getByRole('button');
   });
 
-  it('should display skeleton, when there is no children', () => {
-    const { container } = render(<LoadingCode />);
-    expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument();
+  it('should call onClick function when button is clicked', () => {
+    const button = screen.getByRole('button');
+    button.click();
+    expect(onClickSpy).toHaveBeenCalled();
   });
 });
+
+it('should change button name, when buttonText property is passed', () => {
+  render(<CustomButtonName buttonText='custom-name' />);
+  screen.getByText('custom-name');
+});
+
+it('should display skeleton, when there is no children', () => {
+  const { container } = render(<LoadingCode />);
+  expect(container.querySelector('.rcx-skeleton')).toBeInTheDocument();
+});
diff --git a/packages/fuselage/src/components/Divider/Divider.spec.tsx b/packages/fuselage/src/components/Divider/Divider.spec.tsx
index db455d5390..2d497abdf2 100644
--- a/packages/fuselage/src/components/Divider/Divider.spec.tsx
+++ b/packages/fuselage/src/components/Divider/Divider.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Divider.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Divider Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx b/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
index bf7b52022b..ac5f8ec4ec 100644
--- a/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
+++ b/packages/fuselage/src/components/Dropdown/Dropdown.spec.tsx
@@ -7,25 +7,23 @@ import * as stories from './Dropdown.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Dropdown Component]', () => {
-  const dropdownOption = screen.queryByText('Example 1');
+const dropdownOption = screen.queryByText('Example 1');
 
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
 
-  it('should show dropdown when anchor is clicked once', async () => {
-    const { getByTestId } = render(<Default {...Default.args} />);
-    const anchor = getByTestId('dropdown-anchor');
-    await userEvent.click(anchor);
-    expect(await screen.findByTestId('dropdown')).toBeInTheDocument();
-  });
+it('should show dropdown when anchor is clicked once', async () => {
+  const { getByTestId } = render(<Default {...Default.args} />);
+  const anchor = getByTestId('dropdown-anchor');
+  await userEvent.click(anchor);
+  expect(await screen.findByTestId('dropdown')).toBeInTheDocument();
+});
 
-  it('should hide dropdown when anchor is clicked twice', async () => {
-    const { getByTestId } = render(<Default {...Default.args} />);
-    const anchor = getByTestId('dropdown-anchor');
-    await userEvent.click(anchor);
-    await userEvent.click(anchor);
-    expect(dropdownOption).toBeNull();
-  });
+it('should hide dropdown when anchor is clicked twice', async () => {
+  const { getByTestId } = render(<Default {...Default.args} />);
+  const anchor = getByTestId('dropdown-anchor');
+  await userEvent.click(anchor);
+  await userEvent.click(anchor);
+  expect(dropdownOption).toBeNull();
 });
diff --git a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
index fb1bd27aa1..9c2d664465 100644
--- a/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
+++ b/packages/fuselage/src/components/EmailInput/EmailInput.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './EmailInput.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[EmailInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Field/Field.spec.tsx b/packages/fuselage/src/components/Field/Field.spec.tsx
index 57d8bf0668..3179536bca 100644
--- a/packages/fuselage/src/components/Field/Field.spec.tsx
+++ b/packages/fuselage/src/components/Field/Field.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[Field Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap b/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap
index 349be5fe35..14c4e60f73 100644
--- a/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap
+++ b/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Field Component] renders WithCheckbox without crashing 1`] = `
+exports[`renders WithCheckbox without crashing 1`] = `
 <body>
   <div>
     <div
@@ -84,7 +84,7 @@ exports[`[Field Component] renders WithCheckbox without crashing 1`] = `
 </body>
 `;
 
-exports[`[Field Component] renders WithRadioButton without crashing 1`] = `
+exports[`renders WithRadioButton without crashing 1`] = `
 <body>
   <div>
     <div
@@ -168,7 +168,7 @@ exports[`[Field Component] renders WithRadioButton without crashing 1`] = `
 </body>
 `;
 
-exports[`[Field Component] renders WithTextArea without crashing 1`] = `
+exports[`renders WithTextArea without crashing 1`] = `
 <body>
   <div>
     <div
@@ -245,7 +245,7 @@ exports[`[Field Component] renders WithTextArea without crashing 1`] = `
 </body>
 `;
 
-exports[`[Field Component] renders WithTextInput without crashing 1`] = `
+exports[`renders WithTextInput without crashing 1`] = `
 <body>
   <div>
     <div
@@ -322,7 +322,7 @@ exports[`[Field Component] renders WithTextInput without crashing 1`] = `
 </body>
 `;
 
-exports[`[Field Component] renders WithToggleSwitch without crashing 1`] = `
+exports[`renders WithToggleSwitch without crashing 1`] = `
 <body>
   <div>
     <div
diff --git a/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx b/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
index 4ed1d2dd02..382130e2aa 100644
--- a/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
+++ b/packages/fuselage/src/components/FieldGroup/FieldGroup.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './FieldGroup.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[FieldGroup Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Flex/Flex.spec.tsx b/packages/fuselage/src/components/Flex/Flex.spec.tsx
index 97873aceb0..e6e4cee7b2 100644
--- a/packages/fuselage/src/components/Flex/Flex.spec.tsx
+++ b/packages/fuselage/src/components/Flex/Flex.spec.tsx
@@ -1,14 +1,13 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import Flex from '.';
+import FlexContainer from './FlexContainer';
+import FlexItem from './FlexItem';
 
-describe('[Flex Component]', () => {
-  it('renders Flex.Container without crashing', () => {
-    render(<Flex.Container />);
-  });
+it('renders Flex.Container without crashing', () => {
+  render(<FlexContainer />);
+});
 
-  it('renders Flex.Item without crashing', () => {
-    render(<Flex.Item />);
-  });
+it('renders Flex.Item without crashing', () => {
+  render(<FlexItem />);
 });
diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
index 80b4ae3eb0..75e11cb47d 100644
--- a/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[FramedIcon rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/FramedIcon/__snapshots__/FramedIcon.spec.tsx.snap b/packages/fuselage/src/components/FramedIcon/__snapshots__/FramedIcon.spec.tsx.snap
index 9c0a45cd81..0ef98447c5 100644
--- a/packages/fuselage/src/components/FramedIcon/__snapshots__/FramedIcon.spec.tsx.snap
+++ b/packages/fuselage/src/components/FramedIcon/__snapshots__/FramedIcon.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[FramedIcon rendering] renders Danger without crashing 1`] = `
+exports[`renders Danger without crashing 1`] = `
 <body>
   <div>
     <i
@@ -13,7 +13,7 @@ exports[`[FramedIcon rendering] renders Danger without crashing 1`] = `
 </body>
 `;
 
-exports[`[FramedIcon rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <i
@@ -26,7 +26,7 @@ exports[`[FramedIcon rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[FramedIcon rendering] renders Info without crashing 1`] = `
+exports[`renders Info without crashing 1`] = `
 <body>
   <div>
     <i
@@ -39,7 +39,7 @@ exports[`[FramedIcon rendering] renders Info without crashing 1`] = `
 </body>
 `;
 
-exports[`[FramedIcon rendering] renders Success without crashing 1`] = `
+exports[`renders Success without crashing 1`] = `
 <body>
   <div>
     <i
@@ -52,7 +52,7 @@ exports[`[FramedIcon rendering] renders Success without crashing 1`] = `
 </body>
 `;
 
-exports[`[FramedIcon rendering] renders Warning without crashing 1`] = `
+exports[`renders Warning without crashing 1`] = `
 <body>
   <div>
     <i
diff --git a/packages/fuselage/src/components/Grid/Grid.spec.tsx b/packages/fuselage/src/components/Grid/Grid.spec.tsx
index bb88e15c89..258c682f77 100644
--- a/packages/fuselage/src/components/Grid/Grid.spec.tsx
+++ b/packages/fuselage/src/components/Grid/Grid.spec.tsx
@@ -1,14 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Grid } from '.';
+import { Grid } from './Grid';
 
-describe('[Grid Component]', () => {
-  it('renders Grid without crashing', () => {
-    render(<Grid />);
-  });
+it('renders Grid without crashing', () => {
+  render(<Grid />);
+});
 
-  it('renders Grid.Item without crashing', () => {
-    render(<Grid.Item />);
-  });
+it('renders Grid.Item without crashing', () => {
+  render(<Grid.Item />);
 });
diff --git a/packages/fuselage/src/components/Icon/Icon.spec.tsx b/packages/fuselage/src/components/Icon/Icon.spec.tsx
index cc1bac36ce..d130a63112 100644
--- a/packages/fuselage/src/components/Icon/Icon.spec.tsx
+++ b/packages/fuselage/src/components/Icon/Icon.spec.tsx
@@ -1,10 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Icon } from '.';
+import { Icon } from './Icon';
 
-describe('[Icon Component]', () => {
-  it('renders without crashing', () => {
-    render(<Icon name='chat' />);
-  });
+it('renders without crashing', () => {
+  render(<Icon name='chat' />);
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
index fa45915f2b..2b37f88fa8 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.spec.tsx
@@ -1,14 +1,13 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { InputBox } from '.';
+import { InputBox } from './InputBox';
+import { InputBoxSkeleton } from './InputBoxSkeleton';
 
-describe('[InputBox Component]', () => {
-  it('renders InputBox without crashing', () => {
-    render(<InputBox type='text' />);
-  });
+it('renders InputBox without crashing', () => {
+  render(<InputBox type='text' />);
+});
 
-  it('renders InputBox.Skeleton without crashing', () => {
-    render(<InputBox.Skeleton />);
-  });
+it('renders InputBoxSkeleton without crashing', () => {
+  render(<InputBoxSkeleton />);
 });
diff --git a/packages/fuselage/src/components/InputBox/InputBox.tsx b/packages/fuselage/src/components/InputBox/InputBox.tsx
index dc3b3cb010..8654014302 100644
--- a/packages/fuselage/src/components/InputBox/InputBox.tsx
+++ b/packages/fuselage/src/components/InputBox/InputBox.tsx
@@ -8,11 +8,12 @@ import type {
 } from 'react';
 import React, { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
 
-import type { InputBoxSkeleton } from '.';
-import { Input, Wrapper } from '.';
 import { Addon } from './Addon';
+import { Input } from './Input';
+import type { InputBoxSkeleton } from './InputBoxSkeleton';
 import type { Option } from './Option';
 import type { Placeholder } from './Placeholder';
+import { Wrapper } from './Wrapper';
 import type Box from '../Box';
 import { Icon } from '../Icon';
 
@@ -92,7 +93,7 @@ export const InputBox = forwardRef(function InputBox(
         !innerRef.current.checkValidity()
       );
     }
-  }, []);
+  }, [addon]);
 
   const handleChange = useCallback(
     (event) => {
diff --git a/packages/fuselage/src/components/Label/Label.spec.tsx b/packages/fuselage/src/components/Label/Label.spec.tsx
index 9d47bc7817..5fb132ceca 100644
--- a/packages/fuselage/src/components/Label/Label.spec.tsx
+++ b/packages/fuselage/src/components/Label/Label.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[Label Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap b/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap
index 047f398334..f4531d5b86 100644
--- a/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap
+++ b/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Label Component] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <label
@@ -12,7 +12,7 @@ exports[`[Label Component] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[Label Component] renders Disabled without crashing 1`] = `
+exports[`renders Disabled without crashing 1`] = `
 <body>
   <div>
     <label
@@ -24,7 +24,7 @@ exports[`[Label Component] renders Disabled without crashing 1`] = `
 </body>
 `;
 
-exports[`[Label Component] renders Info without crashing 1`] = `
+exports[`renders Info without crashing 1`] = `
 <body>
   <div>
     <label
@@ -52,7 +52,7 @@ exports[`[Label Component] renders Info without crashing 1`] = `
 </body>
 `;
 
-exports[`[Label Component] renders InfoRequired without crashing 1`] = `
+exports[`renders InfoRequired without crashing 1`] = `
 <body>
   <div>
     <label
@@ -86,7 +86,7 @@ exports[`[Label Component] renders InfoRequired without crashing 1`] = `
 </body>
 `;
 
-exports[`[Label Component] renders Required without crashing 1`] = `
+exports[`renders Required without crashing 1`] = `
 <body>
   <div>
     <label
diff --git a/packages/fuselage/src/components/Margins/Margins.spec.tsx b/packages/fuselage/src/components/Margins/Margins.spec.tsx
index 644bffda61..fec180786e 100644
--- a/packages/fuselage/src/components/Margins/Margins.spec.tsx
+++ b/packages/fuselage/src/components/Margins/Margins.spec.tsx
@@ -1,20 +1,18 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import Margins from '.';
+import { Margins } from './Margins';
 
-describe('[Margins Component]', () => {
-  it('renders without crashing', () => {
-    render(<Margins />);
-  });
+it('renders without crashing', () => {
+  render(<Margins />);
+});
 
-  it('patches non-`Box` children', () => {
-    const { container } = render(
-      <Margins all='10px'>
-        <div />
-      </Margins>
-    );
+it('patches non-`Box` children', () => {
+  const { container } = render(
+    <Margins all='10px'>
+      <div />
+    </Margins>
+  );
 
-    expect(container.firstElementChild).toHaveCssInJsClass();
-  });
+  expect(container.firstElementChild).toHaveCssInJsClass();
 });
diff --git a/packages/fuselage/src/components/Menu/Menu.spec.tsx b/packages/fuselage/src/components/Menu/Menu.spec.tsx
index fbd96e9bdf..7105a9e628 100644
--- a/packages/fuselage/src/components/Menu/Menu.spec.tsx
+++ b/packages/fuselage/src/components/Menu/Menu.spec.tsx
@@ -10,33 +10,29 @@ withResizeObserverMock();
 
 const { Simple } = composeStories(stories);
 
-describe('[Menu Component]', () => {
-  const menuOption = screen.queryByText('Make Admin');
-
-  it('should renders without crashing', () => {
-    render(<Simple {...Simple.args} />);
-  });
+it('should renders without crashing', () => {
+  render(<Simple {...Simple.args} />);
+});
 
-  it('should open options when click', async () => {
-    const { getByTestId } = render(<Simple {...Simple.args} />);
-    const button = getByTestId('menu');
-    await userEvent.click(button);
-    expect(await screen.findByText('Make Admin')).toBeInTheDocument();
-  });
+it('should open options when click', async () => {
+  const { getByTestId } = render(<Simple {...Simple.args} />);
+  const button = getByTestId('menu');
+  await userEvent.click(button);
+  expect(await screen.findByText('Make Admin')).toBeInTheDocument();
+});
 
-  it('should have no options when click twice', async () => {
-    const { getByTestId } = render(<Simple {...Simple.args} />);
-    const button = getByTestId('menu');
-    await userEvent.click(button);
-    await userEvent.click(button);
-    expect(menuOption).toBeNull();
-  });
+it('should have no options when click twice', async () => {
+  const { getByTestId } = render(<Simple {...Simple.args} />);
+  const button = getByTestId('menu');
+  await userEvent.click(button);
+  await userEvent.click(button);
+  expect(screen.queryByText('Make Admin')).not.toBeInTheDocument();
+});
 
-  it('should have no options when click on menu and then elsewhere', async () => {
-    const { getByTestId } = render(<Simple {...Simple.args} />);
-    const button = getByTestId('menu');
-    await userEvent.click(button);
-    await userEvent.click(document.body);
-    expect(menuOption).toBeNull();
-  });
+it('should have no options when click on menu and then elsewhere', async () => {
+  const { getByTestId } = render(<Simple {...Simple.args} />);
+  const button = getByTestId('menu');
+  await userEvent.click(button);
+  await userEvent.click(document.body);
+  expect(screen.queryByText('Make Admin')).not.toBeInTheDocument();
 });
diff --git a/packages/fuselage/src/components/Message/Message.spec.tsx b/packages/fuselage/src/components/Message/Message.spec.tsx
index 1c98e10fef..93871eb75f 100644
--- a/packages/fuselage/src/components/Message/Message.spec.tsx
+++ b/packages/fuselage/src/components/Message/Message.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Messages.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Message Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Modal/Modal.spec.tsx b/packages/fuselage/src/components/Modal/Modal.spec.tsx
index bfecd135c2..e6808b97a5 100644
--- a/packages/fuselage/src/components/Modal/Modal.spec.tsx
+++ b/packages/fuselage/src/components/Modal/Modal.spec.tsx
@@ -10,22 +10,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[Modal Component]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap
index bcda1fcc7a..40b99c5363 100644
--- a/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/packages/fuselage/src/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
+exports[`renders _WithAnnotation without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -87,7 +87,7 @@ exports[`[Modal Component] renders _WithAnnotation without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithForm without crashing 1`] = `
+exports[`renders _WithForm without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -192,7 +192,7 @@ exports[`[Modal Component] renders _WithForm without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
+exports[`renders _WithHeroImage without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -282,7 +282,7 @@ exports[`[Modal Component] renders _WithHeroImage without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
+exports[`renders _WithIcon without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -374,7 +374,7 @@ exports[`[Modal Component] renders _WithIcon without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
+exports[`renders _WithIconAndTagline without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -471,7 +471,7 @@ exports[`[Modal Component] renders _WithIconAndTagline without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
+exports[`renders _WithTagline without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -558,7 +558,7 @@ exports[`[Modal Component] renders _WithTagline without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
+exports[`renders _WithThumb without crashing 1`] = `
 <body>
   <div>
     <dialog
@@ -652,7 +652,7 @@ exports[`[Modal Component] renders _WithThumb without crashing 1`] = `
 </body>
 `;
 
-exports[`[Modal Component] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <dialog
diff --git a/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx b/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
index 68692508e4..9d9b6a5186 100644
--- a/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
+++ b/packages/fuselage/src/components/MultiSelect/MultiSelect.spec.tsx
@@ -9,8 +9,6 @@ const { Default } = composeStories(stories);
 
 withResizeObserverMock();
 
-describe('[MultiSelect Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
index 88264ab948..a5e52c73a2 100644
--- a/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
+++ b/packages/fuselage/src/components/NumberInput/NumberInput.spec.tsx
@@ -1,10 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { NumberInput } from '.';
+import { NumberInput } from './NumberInput';
 
-describe('[NumberInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<NumberInput />);
-  });
+it('renders without crashing', () => {
+  render(<NumberInput />);
 });
diff --git a/packages/fuselage/src/components/Options/Options.spec.tsx b/packages/fuselage/src/components/Options/Options.spec.tsx
index 89f13a7258..34b9ec77f4 100644
--- a/packages/fuselage/src/components/Options/Options.spec.tsx
+++ b/packages/fuselage/src/components/Options/Options.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Options.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Message Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Pagination/Pagination.spec.tsx b/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
index 5602903eac..ccb83fc960 100644
--- a/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
+++ b/packages/fuselage/src/components/Pagination/Pagination.spec.tsx
@@ -1,10 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Pagination } from '.';
+import { Pagination } from './Pagination';
 
-describe('[Pagination Component]', () => {
-  it('renders without crashing', () => {
-    render(<Pagination count={0} />);
-  });
+it('renders without crashing', () => {
+  render(<Pagination count={0} />);
 });
diff --git a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
index d33439159b..29ddd829d3 100644
--- a/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
+++ b/packages/fuselage/src/components/PasswordInput/PasswordInput.spec.tsx
@@ -1,10 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import PasswordInput from '.';
+import PasswordInput from './PasswordInput';
 
-describe('[PasswordInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<PasswordInput />);
-  });
+it('renders without crashing', () => {
+  render(<PasswordInput />);
 });
diff --git a/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx b/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
index 3650c392f7..30e62281d2 100644
--- a/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
+++ b/packages/fuselage/src/components/ProgressBar/ProgressBar.spec.tsx
@@ -1,10 +1,8 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { ProgressBar } from '../..';
+import { ProgressBar } from './ProgressBar';
 
-describe('[ProgressBar Component]', () => {
-  it('renders without crashing', () => {
-    render(<ProgressBar percentage={0} />);
-  });
+it('renders without crashing', () => {
+  render(<ProgressBar percentage={0} />);
 });
diff --git a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
index f7081397d4..98daa7cbc7 100644
--- a/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
+++ b/packages/fuselage/src/components/RadioButton/RadioButton.spec.tsx
@@ -12,7 +12,7 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
 
 const { Default, Checked, Disabled } = composeStories(stories);
 
-describe('[RadioButton Rendering]', () => {
+describe('on rendering', () => {
   test.each(testCases)(
     `renders %s without crashing`,
     async (_storyname, Story) => {
@@ -32,7 +32,7 @@ describe('[RadioButton Rendering]', () => {
   );
 });
 
-describe('[RadioButton Interacting]', () => {
+describe('on interacting', () => {
   it('changes style of element as radio button is checked', () => {
     const { container } = render(<Default />);
     const radioButton = container.querySelector(
diff --git a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
index 21c4d681f1..2d1c68a531 100644
--- a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
+++ b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[RadioButton Rendering] renders Checked without crashing 1`] = `
+exports[`on rendering renders Checked without crashing 1`] = `
 <body>
   <div>
     <label
@@ -21,7 +21,7 @@ exports[`[RadioButton Rendering] renders Checked without crashing 1`] = `
 </body>
 `;
 
-exports[`[RadioButton Rendering] renders Default without crashing 1`] = `
+exports[`on rendering renders Default without crashing 1`] = `
 <body>
   <div>
     <label
@@ -41,7 +41,7 @@ exports[`[RadioButton Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[RadioButton Rendering] renders Disabled without crashing 1`] = `
+exports[`on rendering renders Disabled without crashing 1`] = `
 <body>
   <div>
     <label
@@ -62,7 +62,7 @@ exports[`[RadioButton Rendering] renders Disabled without crashing 1`] = `
 </body>
 `;
 
-exports[`[RadioButton Rendering] renders States without crashing 1`] = `
+exports[`on rendering renders States without crashing 1`] = `
 <body>
   <div>
     <table
diff --git a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
index f514dd320f..909cf12b5b 100644
--- a/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
+++ b/packages/fuselage/src/components/SearchInput/SearchInput.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { SearchInput } from '.';
 
-describe('[SearchInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<SearchInput />);
-  });
+it('renders without crashing', () => {
+  render(<SearchInput />);
 });
diff --git a/packages/fuselage/src/components/Select/Select.spec.tsx b/packages/fuselage/src/components/Select/Select.spec.tsx
index 5f57450d4e..15662fc21e 100644
--- a/packages/fuselage/src/components/Select/Select.spec.tsx
+++ b/packages/fuselage/src/components/Select/Select.spec.tsx
@@ -9,8 +9,6 @@ const { Default } = composeStories(stories);
 
 withResizeObserverMock();
 
-describe('[Select Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default {...Default.args} />);
-  });
+it('renders without crashing', () => {
+  render(<Default {...Default.args} />);
 });
diff --git a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
index 1cc8b39300..3ba09d900f 100644
--- a/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
+++ b/packages/fuselage/src/components/Sidebar/Sidebar.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Sidebar.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Throbber Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx b/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
index 3a21595388..29ec7559da 100644
--- a/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
+++ b/packages/fuselage/src/components/Skeleton/Skeleton.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { Skeleton } from '.';
 
-describe('[Skeleton Component]', () => {
-  it('renders without crashing', () => {
-    render(<Skeleton />);
-  });
+it('renders without crashing', () => {
+  render(<Skeleton />);
 });
diff --git a/packages/fuselage/src/components/Slider/Slider.spec.tsx b/packages/fuselage/src/components/Slider/Slider.spec.tsx
index 3af6ec7259..f820eca548 100644
--- a/packages/fuselage/src/components/Slider/Slider.spec.tsx
+++ b/packages/fuselage/src/components/Slider/Slider.spec.tsx
@@ -8,41 +8,39 @@ import * as stories from './Slider.stories';
 const { Default, WithLabel, MultiThumb, WithDefaultValue } =
   composeStories(stories);
 
-describe('[Slider Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
-
-  it('should display the label when passed', () => {
-    render(<WithLabel />);
-    const label = screen.queryByText('Range');
-    expect(label).toBeInTheDocument();
-    expect(label?.textContent).toBe('Range');
-  });
-
-  it('should output the defaultValue when passed', () => {
-    render(<WithDefaultValue />);
-    const output = screen.queryByTestId('slider-output');
-    expect(output?.textContent).toBe('25');
-  });
-
-  it('should have two thumbs when multiThumb prop is true', () => {
-    render(<MultiThumb />);
-    const thumbs = screen.queryAllByRole('slider');
-    expect(thumbs.length).toBe(2);
-  });
-
-  it("should update Thumb's position when Thumb is clicked and dragged", () => {
-    render(<Default />);
-
-    const slider = screen.getByRole<HTMLFormElement>('slider');
-
-    slider.focus();
-    fireEvent.keyDown(slider, { key: 'ArrowRight' });
-    fireEvent.keyDown(slider, { key: 'ArrowRight' });
-    fireEvent.keyDown(slider, { key: 'ArrowRight' });
-    fireEvent.keyDown(slider, { key: 'ArrowRight' });
-
-    expect(slider.value).toBe('4');
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
+
+it('should display the label when passed', () => {
+  render(<WithLabel />);
+  const label = screen.queryByText('Range');
+  expect(label).toBeInTheDocument();
+  expect(label?.textContent).toBe('Range');
+});
+
+it('should output the defaultValue when passed', () => {
+  render(<WithDefaultValue />);
+  const output = screen.queryByTestId('slider-output');
+  expect(output?.textContent).toBe('25');
+});
+
+it('should have two thumbs when multiThumb prop is true', () => {
+  render(<MultiThumb />);
+  const thumbs = screen.queryAllByRole('slider');
+  expect(thumbs.length).toBe(2);
+});
+
+it("should update Thumb's position when Thumb is clicked and dragged", () => {
+  render(<Default />);
+
+  const slider = screen.getByRole<HTMLFormElement>('slider');
+
+  slider.focus();
+  fireEvent.keyDown(slider, { key: 'ArrowRight' });
+  fireEvent.keyDown(slider, { key: 'ArrowRight' });
+  fireEvent.keyDown(slider, { key: 'ArrowRight' });
+  fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+  expect(slider.value).toBe('4');
 });
diff --git a/packages/fuselage/src/components/States/States.spec.tsx b/packages/fuselage/src/components/States/States.spec.tsx
index 4be5dd9927..530b25be81 100644
--- a/packages/fuselage/src/components/States/States.spec.tsx
+++ b/packages/fuselage/src/components/States/States.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { States } from '.';
 
-describe('[States Component]', () => {
-  it('renders without crashing', () => {
-    render(<States />);
-  });
+it('renders without crashing', () => {
+  render(<States />);
 });
diff --git a/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx b/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
index cfabc74ca9..51d7bfd461 100644
--- a/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
+++ b/packages/fuselage/src/components/StatusBullet/StatusBullet.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { StatusBullet } from '.';
 
-describe('[StatusBullet Component]', () => {
-  it('renders without crashing', () => {
-    render(<StatusBullet />);
-  });
+it('renders without crashing', () => {
+  render(<StatusBullet />);
 });
diff --git a/packages/fuselage/src/components/Table/Table.spec.tsx b/packages/fuselage/src/components/Table/Table.spec.tsx
index 873dc800f0..6b62230b8b 100644
--- a/packages/fuselage/src/components/Table/Table.spec.tsx
+++ b/packages/fuselage/src/components/Table/Table.spec.tsx
@@ -8,62 +8,60 @@ import * as stories from './Table.stories';
 
 const { Default, Selected } = composeStories(stories);
 
-describe('[Table Component]', () => {
-  it('renders Table without crashing', () => {
-    render(<Table />);
-  });
+it('renders Table without crashing', () => {
+  render(<Table />);
+});
 
-  it('renders TableRow without crashing', () => {
-    render(<TableRow />, {
-      wrapper: ({ children }) => (
-        <table>
-          <tbody>{children}</tbody>
-        </table>
-      ),
-    });
+it('renders TableRow without crashing', () => {
+  render(<TableRow />, {
+    wrapper: ({ children }) => (
+      <table>
+        <tbody>{children}</tbody>
+      </table>
+    ),
   });
+});
 
-  it('renders TableHead without crashing', () => {
-    render(<TableHead />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
+it('renders TableHead without crashing', () => {
+  render(<TableHead />, {
+    wrapper: ({ children }) => <table>{children}</table>,
   });
+});
 
-  it('renders TableBody without crashing', () => {
-    render(<TableBody />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
+it('renders TableBody without crashing', () => {
+  render(<TableBody />, {
+    wrapper: ({ children }) => <table>{children}</table>,
   });
+});
 
-  it('renders TableFoot without crashing', () => {
-    render(<TableFoot />, {
-      wrapper: ({ children }) => <table>{children}</table>,
-    });
+it('renders TableFoot without crashing', () => {
+  render(<TableFoot />, {
+    wrapper: ({ children }) => <table>{children}</table>,
   });
+});
 
-  it('renders TableCell without crashing', () => {
-    render(<TableCell />, {
-      wrapper: ({ children }) => (
-        <table>
-          <tbody>
-            <tr>{children}</tr>
-          </tbody>
-        </table>
-      ),
-    });
+it('renders TableCell without crashing', () => {
+  render(<TableCell />, {
+    wrapper: ({ children }) => (
+      <table>
+        <tbody>
+          <tr>{children}</tr>
+        </tbody>
+      </table>
+    ),
   });
+});
 
-  it('should have no a11y violations on Default story', async () => {
-    const { container: defaultContainer } = render(<Default />);
+it('should have no a11y violations on Default story', async () => {
+  const { container: defaultContainer } = render(<Default />);
 
-    const defaultResults = await axe(defaultContainer);
-    expect(defaultResults).toHaveNoViolations();
-  });
+  const defaultResults = await axe(defaultContainer);
+  expect(defaultResults).toHaveNoViolations();
+});
 
-  it('should have no a11y violations on Selected story', async () => {
-    const { container: selectedContainer } = render(<Selected />);
+it('should have no a11y violations on Selected story', async () => {
+  const { container: selectedContainer } = render(<Selected />);
 
-    const selectedResults = await axe(selectedContainer);
-    expect(selectedResults).toHaveNoViolations();
-  });
+  const selectedResults = await axe(selectedContainer);
+  expect(selectedResults).toHaveNoViolations();
 });
diff --git a/packages/fuselage/src/components/Tabs/Tabs.spec.tsx b/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
index b0bf129cdc..8aa75a3c3c 100644
--- a/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
+++ b/packages/fuselage/src/components/Tabs/Tabs.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { Tabs } from '.';
 
-describe('[Tabs Component]', () => {
-  it('renders without crashing', () => {
-    render(<Tabs />);
-  });
+it('renders without crashing', () => {
+  render(<Tabs />);
 });
diff --git a/packages/fuselage/src/components/Tag/Tag.spec.tsx b/packages/fuselage/src/components/Tag/Tag.spec.tsx
index c5b04641f0..7aaa0deb3a 100644
--- a/packages/fuselage/src/components/Tag/Tag.spec.tsx
+++ b/packages/fuselage/src/components/Tag/Tag.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { Tag } from '.';
 
-describe('[Tag Component]', () => {
-  it('renders without crashing', () => {
-    render(<Tag />);
-  });
+it('renders without crashing', () => {
+  render(<Tag />);
 });
diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
index 7d5cbe55af..35c17b2cae 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { TelephoneInput } from '.';
 
-describe('[TelephoneInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<TelephoneInput />);
-  });
+it('renders without crashing', () => {
+  render(<TelephoneInput />);
 });
diff --git a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
index 38f5a388f5..db53512dcb 100644
--- a/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
+++ b/packages/fuselage/src/components/TextAreaInput/TextAreaInput.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { TextAreaInput } from '.';
 
-describe('[TextAreaInput]', () => {
-  it('renders without crashing', () => {
-    render(<TextAreaInput />);
-  });
+it('renders without crashing', () => {
+  render(<TextAreaInput />);
 });
diff --git a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
index bc9d399891..5a691a55b6 100644
--- a/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
+++ b/packages/fuselage/src/components/TextInput/TextInput.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import { TextInput } from '.';
 
-describe('[TextInput]', () => {
-  it('renders without crashing', () => {
-    render(<TextInput />);
-  });
+it('renders without crashing', () => {
+  render(<TextInput />);
 });
diff --git a/packages/fuselage/src/components/Throbber/Throbber.spec.tsx b/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
index 00b42119bb..cfe0f354fc 100644
--- a/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
+++ b/packages/fuselage/src/components/Throbber/Throbber.spec.tsx
@@ -6,8 +6,6 @@ import * as stories from './Throbber.stories';
 
 const { Default } = composeStories(stories);
 
-describe('[Throbber Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+it('renders without crashing', () => {
+  render(<Default />);
 });
diff --git a/packages/fuselage/src/components/Tile/Tile.spec.tsx b/packages/fuselage/src/components/Tile/Tile.spec.tsx
index 7c9af6c110..e9a36c62aa 100644
--- a/packages/fuselage/src/components/Tile/Tile.spec.tsx
+++ b/packages/fuselage/src/components/Tile/Tile.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import Tile from '.';
 
-describe('[Tile Component]', () => {
-  it('renders without crashing', () => {
-    render(<Tile />);
-  });
+it('renders without crashing', () => {
+  render(<Tile />);
 });
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
index 8fd9218621..77ace8ba1c 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
@@ -4,15 +4,13 @@ import React from 'react';
 
 import { ToastBar } from '.';
 
-describe('[ToastBar Component]', () => {
-  it('renders without crashing', () => {
-    render(<ToastBar />);
-  });
+it('renders without crashing', () => {
+  render(<ToastBar />);
+});
 
-  it('should have no a11y violations', async () => {
-    const { container } = render(<ToastBar />);
+it('should have no a11y violations', async () => {
+  const { container } = render(<ToastBar />);
 
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
 });
diff --git a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
index ef2e8c0990..7d5f90fddd 100644
--- a/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
+++ b/packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.spec.tsx
@@ -12,22 +12,20 @@ const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story,
 ]);
 
-describe('[ToggleSwitch Rendering]', () => {
-  test.each(testCases)(
-    `renders %s without crashing`,
-    async (_storyname, Story) => {
-      const tree = render(<Story />);
-      expect(tree.baseElement).toMatchSnapshot();
-    }
-  );
+test.each(testCases)(
+  `renders %s without crashing`,
+  async (_storyname, Story) => {
+    const tree = render(<Story />);
+    expect(tree.baseElement).toMatchSnapshot();
+  }
+);
 
-  test.each(testCases)(
-    '%s should have no a11y violations',
-    async (_storyname, Story) => {
-      const { container } = render(<Story />);
+test.each(testCases)(
+  '%s should have no a11y violations',
+  async (_storyname, Story) => {
+    const { container } = render(<Story />);
 
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    }
-  );
-});
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  }
+);
diff --git a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
index 17b4fe0e2f..2bd50fcd6d 100644
--- a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
+++ b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`[ToggleSwitch Rendering] renders Checked without crashing 1`] = `
+exports[`renders Checked without crashing 1`] = `
 <body>
   <div>
     <label
@@ -21,7 +21,7 @@ exports[`[ToggleSwitch Rendering] renders Checked without crashing 1`] = `
 </body>
 `;
 
-exports[`[ToggleSwitch Rendering] renders Default without crashing 1`] = `
+exports[`renders Default without crashing 1`] = `
 <body>
   <div>
     <label
@@ -41,7 +41,7 @@ exports[`[ToggleSwitch Rendering] renders Default without crashing 1`] = `
 </body>
 `;
 
-exports[`[ToggleSwitch Rendering] renders Disabled without crashing 1`] = `
+exports[`renders Disabled without crashing 1`] = `
 <body>
   <div>
     <label
@@ -62,7 +62,7 @@ exports[`[ToggleSwitch Rendering] renders Disabled without crashing 1`] = `
 </body>
 `;
 
-exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
+exports[`renders States without crashing 1`] = `
 <body>
   <div>
     <table
diff --git a/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx b/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
index d0611eee6c..f84bdf1704 100644
--- a/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
+++ b/packages/fuselage/src/components/Tooltip/Tooltip.spec.tsx
@@ -5,22 +5,21 @@ import * as stories from './Tooltip.stories';
 
 const { Default, LightTooltip } = stories;
 
-describe('[Tooltip Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
-  it('renders text content correctly', () => {
-    const { container } = render(<Default />);
-    expect(container.firstChild).toHaveTextContent('An example tooltip');
-  });
+it('renders without crashing', () => {
+  render(<Default />);
+});
+it('renders text content correctly', () => {
+  const { container } = render(<Default />);
+  expect(container.firstChild).toHaveTextContent('An example tooltip');
+});
+it('has the correct class', () => {
+  const { container } = render(<Default />);
+  expect(container.firstChild).toHaveClass('rcx-tooltip--dark');
+});
+
+describe('Light Tooltip', () => {
   it('has the correct class', () => {
-    const { container } = render(<Default />);
-    expect(container.firstChild).toHaveClass('rcx-tooltip--dark');
-  });
-  describe('Light Tooltip', () => {
-    it('has the correct class', () => {
-      const { container } = render(<LightTooltip />);
-      expect(container.firstChild).toHaveClass('rcx-tooltip--light');
-    });
+    const { container } = render(<LightTooltip />);
+    expect(container.firstChild).toHaveClass('rcx-tooltip--light');
   });
 });
diff --git a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
index c86b8a6572..d885060613 100644
--- a/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
+++ b/packages/fuselage/src/components/UrlInput/UrlInput.spec.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 
 import UrlInput from '.';
 
-describe('[UrlInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<UrlInput />);
-  });
+it('renders without crashing', () => {
+  render(<UrlInput />);
 });