updated tests and storybook

MetaMask · Jan 23, 2025 · 0dc265a · 0dc265a
1 parent da1756c
commit 0dc265a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git a/ui/components/app/permission-connect-header/permission-connect-header.js b/ui/components/app/permission-connect-header/permission-connect-header.js
@@ -75,8 +75,13 @@ const PermissionConnectHeader = ({ requestId, subjectMetadata }) => {
           display={Display.Flex}
           flexDirection={FlexDirection.Column}
           style={{ overflow: 'hidden' }}
+          data-testid="permission-connect-header-origin"
         >
-          <Text ellipsis fontWeight={FontWeight.Medium}>
+          <Text
+            ellipsis
+            data-testid="origin-text"
+            fontWeight={FontWeight.Medium}
+          >
             {origin}
           </Text>
           <Text

diff --git a/ui/components/app/permission-connect-header/permission-connect-header.stories.js b/ui/components/app/permission-connect-header/permission-connect-header.stories.js
@@ -11,27 +11,33 @@ export const DefaultStory = (args) => <PermissionConnectHeader {...args} />;
 DefaultStory.storyName = 'Default';
 
 DefaultStory.args = {
-  title: 'E2E Test Dapp',
-  origin: 'https://metamask.github.io',
-  iconUrl: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  subjectMetaData: {
+    name: 'E2E Test Dapp',
+    origin: 'https://metamask.github.io',
+    iconUrl: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
+  },
 };
 
 export const HeaderWithFallbackIcon = (args) => (
   <PermissionConnectHeader {...args} />
 );
 
 HeaderWithFallbackIcon.args = {
-  title: 'E2E Test Dapp',
-  origin: 'https://metamask.github.io',
-  iconUrl: '',
+  subjectMetaData: {
+    name: 'E2E Test Dapp',
+    origin: 'https://metamask.github.io',
+    iconUrl: '',
+  },
 };
 
 export const HeaderWithFallbackTitle = (args) => (
   <PermissionConnectHeader {...args} />
 );
 
 HeaderWithFallbackTitle.args = {
-  title: 'https://metamask.github.io',
-  origin: 'https://metamask.github.io',
-  iconUrl: '',
+  subjectMetaData: {
+    name: 'https://metamask.github.io',
+    origin: 'https://metamask.github.io',
+    iconUrl: '',
+  },
 };
diff --git a/ui/components/app/permission-connect-header/permission-connect-header.test.js b/ui/components/app/permission-connect-header/permission-connect-header.test.js
@@ -1,47 +1,37 @@
 import React from 'react';
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import { renderWithProvider } from '../../../../test/jest';
 import PermissionConnectHeader from './permission-connect-header';
 
 const STORE_MOCK = configureMockStore()({ metamask: { pendingApprovals: {} } });
 
 describe('Permission Connect Header', () => {
-  const mockOriginData = {
+  const targetSubjectMetadata = {
+    name: 'E2E Test Dapp',
     origin: 'https://metamask.github.io',
     iconUrl: 'https://metamask.github.io/test-dapp/metamask-fox.svg',
   };
-  const expectedTitle = 'github.io';
-  const expectedAltImageText = 'github.io logo';
+  const expectedOrigin = 'https://metamask.github.io';
+  const expectedAltImageText = 'E2E Test Dapp logo';
 
-  it('renders permission connect header', () => {
-    const { getByAltText } = renderWithProvider(
+  it('renders permission connect header with correct origin and icon', () => {
+    renderWithProvider(
       <PermissionConnectHeader
-        origin={mockOriginData.origin}
-        iconUrl={mockOriginData.iconUrl}
+        requestId="12345"
+        subjectMetadata={targetSubjectMetadata}
       />,
       STORE_MOCK,
     );
 
-    expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-    expect(screen.getByText(mockOriginData.origin)).toBeInTheDocument();
-    expect(getByAltText(expectedAltImageText)).toBeInTheDocument();
-
-    const imgTag = getByAltText(expectedAltImageText);
-    expect(imgTag).toHaveAttribute('src', mockOriginData.iconUrl);
-  });
+    const originElements = screen.getAllByText(expectedOrigin);
+    expect(originElements).toHaveLength(2);
 
-  it('renders permission connect header with fallback icon', () => {
-    renderWithProvider(
-      <PermissionConnectHeader
-        origin={mockOriginData.origin}
-        iconUrl={undefined}
-      />,
-      STORE_MOCK,
-    );
+    const imgTag = screen.getByAltText(expectedAltImageText);
+    expect(imgTag).toBeInTheDocument();
+    expect(imgTag).toHaveAttribute('src', targetSubjectMetadata.iconUrl);
 
-    expect(screen.getByText(expectedTitle)).toBeInTheDocument();
-    expect(screen.getByText(mockOriginData.origin)).toBeInTheDocument();
-    expect(screen.getByText(expectedTitle.charAt(0))).toBeInTheDocument();
+    const originElement = screen.getByTestId('origin-text');
+    expect(originElement).toHaveTextContent(expectedOrigin);
   });
 });