fix(test): update overflow component mocks

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.test.tsx

@@ -35,7 +35,7 @@ afterEach(() => {
 })
 
 describe('SortDropdown', () => {
-  it('renders long option labels in the truncatable span between both icons', () => {
+  it('renders long option labels in the overflow span between both icons', () => {
     act(() => {
       root.render(
         <SortDropdown
@@ -63,7 +63,8 @@ describe('SortDropdown', () => {
     const label = item?.querySelector('span')
     expect(label).not.toBeNull()
     expect(label).toHaveTextContent(LONG_COLUMN_LABEL)
-    expect(label).toHaveClass('min-w-0', 'block', 'truncate')
+    expect(label).toHaveClass('min-w-0', 'block', 'overflow-hidden', 'text-clip')
+    expect(label).not.toHaveClass('truncate')
     expect(item?.querySelector('[data-testid="column-icon"]')).not.toBeNull()
     expect(item?.querySelectorAll('svg')).toHaveLength(2)
   })

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.test.tsx

@@ -60,6 +60,9 @@ vi.mock('@sim/emcn', () => ({
   DropdownMenuContent: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
   DropdownMenuItem: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
   DropdownMenuTrigger: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
+  OverflowText: ({ label, children }: { label: string; children?: ReactNode }) => (
+    <span>{children ?? label}</span>
+  ),
   Tooltip: {
     Root: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
     Trigger: ({ children }: { children?: ReactNode }) => <div>{children}</div>,

apps/sim/app/workspace/[workspaceId]/settings/components/billing/billing.test.tsx

@@ -48,6 +48,9 @@ vi.mock('@sim/emcn', () => ({
   Label: ({ children, htmlFor }: { children: ReactNode; htmlFor?: string }) => (
     <label htmlFor={htmlFor}>{children}</label>
   ),
+  OverflowText: ({ label, children }: { label: string; children?: ReactNode }) => (
+    <span>{children ?? label}</span>
+  ),
   Switch: ({
     checked,
     disabled,

apps/sim/app/workspace/[workspaceId]/settings/components/browser/components/passwords-view/passwords-view.test.tsx

@@ -34,6 +34,9 @@ vi.mock('@sim/emcn', () => ({
       </div>
     ) : null,
   Key: () => <span />,
+  OverflowText: ({ label, children }: { label: string; children?: ReactNode }) => (
+    <span>{children ?? label}</span>
+  ),
   Plus: () => <span />,
   toast: mockToast,
 }))