fix(fuselage): SidebarItemV2 visual regressions (#1742)

Author: dougfabris

.changeset/few-bikes-refuse.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): SidebarItemV2 visual regressions

packages/fuselage/src/components/Sidebar/SidebarItem.spec.tsx

@@ -0,0 +1,29 @@
+import { composeStories } from '@storybook/react-webpack5';
+import { axe } from 'jest-axe';
+
+import { render } from '../../testing';
+
+import * as stories from './SidebarItem.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+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();
+  },
+);

packages/fuselage/src/components/Sidebar/Item.stories.tsx renamed to packages/fuselage/src/components/Sidebar/SidebarItem.stories.tsx

@@ -30,6 +30,20 @@ export default {
   },
 } satisfies Meta<typeof SidebarItem>;
 
+const sidebarItemActions = (
+  <SidebarItemActions>
+    <SidebarItemAction aria-label='accept' secondary success icon='phone' />
+    <SidebarItemAction
+      aria-label='cancel'
+      secondary
+      danger
+      icon='circle-cross'
+    />
+    <SidebarItemAction aria-label='delete' secondary info icon='trash' />
+    <SidebarItemAction aria-label='accept' secondary icon='phone' />
+  </SidebarItemActions>
+);
+
 export const Default: StoryFn<typeof SidebarItem> = () => (
   <>
     <SidebarItem>
@@ -50,14 +64,7 @@ export const Default: StoryFn<typeof SidebarItem> = () => (
           </SidebarItemTitle>
         </SidebarItemWrapper>
       </SidebarItemContent>
-      <SidebarItemContainer>
-        <SidebarItemActions>
-          <SidebarItemAction secondary success icon='phone' />
-          <SidebarItemAction secondary danger icon='circle-cross' />
-          <SidebarItemAction secondary info icon='trash' />
-          <SidebarItemAction secondary icon='phone' />
-        </SidebarItemActions>
-      </SidebarItemContainer>
+      <SidebarItemContainer>{sidebarItemActions}</SidebarItemContainer>
     </SidebarItem>
 
     <SidebarItem highlighted is='a'>
@@ -75,14 +82,7 @@ export const Default: StoryFn<typeof SidebarItem> = () => (
           <SidebarItemTitle>highlighted</SidebarItemTitle>
         </SidebarItemWrapper>
       </SidebarItemContent>
-      <SidebarItemContainer>
-        <SidebarItemActions>
-          <SidebarItemAction secondary success icon='phone' />
-          <SidebarItemAction secondary danger icon='circle-cross' />
-          <SidebarItemAction secondary info icon='trash' />
-          <SidebarItemAction secondary icon='phone' />
-        </SidebarItemActions>
-      </SidebarItemContainer>
+      <SidebarItemContainer />
     </SidebarItem>
     <SidebarItem selected is='a'>
       <SidebarItemAvatar>
@@ -102,14 +102,7 @@ export const Default: StoryFn<typeof SidebarItem> = () => (
           </SidebarItemTitle>
         </SidebarItemWrapper>
       </SidebarItemContent>
-      <SidebarItemContainer>
-        <SidebarItemActions>
-          <SidebarItemAction secondary success icon='phone' />
-          <SidebarItemAction secondary danger icon='circle-cross' />
-          <SidebarItemAction secondary info icon='trash' />
-          <SidebarItemAction secondary icon='phone' />
-        </SidebarItemActions>
-      </SidebarItemContainer>
+      <SidebarItemContainer>{sidebarItemActions}</SidebarItemContainer>
     </SidebarItem>
     <SidebarItem is='a'>
       <SidebarItemAvatar>
@@ -140,12 +133,7 @@ export const Default: StoryFn<typeof SidebarItem> = () => (
         </SidebarItemContent>
       </SidebarItemContent>
       <SidebarItemContainer>
-        <SidebarItemActions>
-          <SidebarItemAction secondary success icon='phone' />
-          <SidebarItemAction secondary danger icon='circle-cross' />
-          <SidebarItemAction secondary info icon='trash' />
-          <SidebarItemAction secondary icon='phone' />
-        </SidebarItemActions>
+        <SidebarItemContainer>{sidebarItemActions}</SidebarItemContainer>
       </SidebarItemContainer>
     </SidebarItem>
   </>