move orcid link render function to misc components module [URO-208]

kbase · May 18, 2024 · decebf5 · decebf5
1 parent 5a5d41f
commit decebf5
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 69 deletions.
diff --git a/src/features/orcidlink/HomeLinked/LinkInfo.tsx b/src/features/orcidlink/HomeLinked/LinkInfo.tsx
@@ -4,7 +4,7 @@ import {
 } from '../../../common/api/orcidLinkCommon';
 import {
   renderCreditName,
-  renderORCIDIcon,
+  renderORCIDId,
   renderRealname,
 } from '../common/misc';
 import Scopes from '../common/Scopes';
@@ -21,30 +21,12 @@ export default function LinkInfo({
   profile,
   orcidSiteURL,
 }: LinkInfoProps) {
-  function renderORCIDId() {
-    return (
-      <a
-        href={`${orcidSiteURL}/${linkRecord.orcid_auth.orcid}`}
-        target="_blank"
-        rel="noreferrer"
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-        }}
-      >
-        {renderORCIDIcon()}
-        {orcidSiteURL}/{linkRecord.orcid_auth.orcid}
-      </a>
-    );
-  }
-
   return (
     <div>
       <div className={styles['prop-table']}>
         <div>
           <div>ORCID iD</div>
-          <div>{renderORCIDId()}</div>
+          <div>{renderORCIDId(orcidSiteURL, linkRecord.orcid_auth.orcid)}</div>
         </div>
         <div>
           <div>Name on Account</div>

diff --git a/src/features/orcidlink/common/misc.test.tsx b/src/features/orcidlink/common/misc.test.tsx
@@ -1,71 +1,86 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import 'core-js/stable/structured-clone';
 import { ORCIDProfile } from '../../../common/api/orcidLinkCommon';
 import { PROFILE_1 } from '../test/data';
-import { renderCreditName, renderRealname } from './misc';
+import { renderCreditName, renderORCIDId, renderRealname } from './misc';
 
-describe('The common module renderORCIDIcon function', () => {
-  it('renders correct', () => {
-    expect(true).toBe(true);
-  });
-});
+describe('The miscellaneous shared components module', () => {
+  describe('the renderRealName render function ', () => {
+    it('renders correctly if not private', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
 
-describe('The common module renderRealName function', () => {
-  it('renders correctly if not private', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+      const { container } = render(renderRealname(profile));
 
-    const { container } = render(renderRealname(profile));
+      expect(container).toHaveTextContent('Foo Bar');
+    });
 
-    expect(container).toHaveTextContent('Foo Bar');
-  });
+    it('renders just the first name if no last name', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      profile.nameGroup.fields!.lastName = null;
+
+      const { container } = render(renderRealname(profile));
+
+      expect(container).toHaveTextContent('Foo');
+    });
 
-  it('renders just the first name if no last name', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    profile.nameGroup.fields!.lastName = null;
+    it('renders a special string if it is private', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+      profile.nameGroup.private = true;
 
-    const { container } = render(renderRealname(profile));
+      const { container } = render(renderRealname(profile));
 
-    expect(container).toHaveTextContent('Foo');
+      expect(container).toHaveTextContent('private');
+    });
   });
 
-  it('renders a special string if it is private', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
-    profile.nameGroup.private = true;
+  describe('The renderCreditName render function', () => {
+    it('renders correctly if not private', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
 
-    const { container } = render(renderRealname(profile));
+      const { container } = render(renderCreditName(profile));
 
-    expect(container).toHaveTextContent('private');
-  });
-});
+      expect(container).toHaveTextContent('Foo B. Bar');
+    });
 
-describe('The common module renderCreditName function', () => {
-  it('renders correctly if not private', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+    it('renders a special string if it is private', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
 
-    const { container } = render(renderCreditName(profile));
+      profile.nameGroup.private = true;
 
-    expect(container).toHaveTextContent('Foo B. Bar');
-  });
+      const { container } = render(renderCreditName(profile));
 
-  it('renders a special string if it is private', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+      expect(container).toHaveTextContent('private');
+    });
 
-    profile.nameGroup.private = true;
+    it('renders a "not available" string if it is absent', () => {
+      const profile = structuredClone<ORCIDProfile>(PROFILE_1);
 
-    const { container } = render(renderCreditName(profile));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      profile.nameGroup.fields!.creditName = null;
 
-    expect(container).toHaveTextContent('private');
+      const { container } = render(renderCreditName(profile));
+
+      expect(container).toHaveTextContent('n/a');
+    });
   });
 
-  it('renders a "not available" string if it is absent', () => {
-    const profile = structuredClone<ORCIDProfile>(PROFILE_1);
+  describe('The renderORCIDId render function', () => {
+    it('renders an orcid id link', async () => {
+      const baseURL = 'http://example.com';
+      const orcidId = 'abc123';
+      const expectedURL = `${baseURL}/${orcidId}`;
+
+      const { container } = render(renderORCIDId(baseURL, orcidId));
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    profile.nameGroup.fields!.creditName = null;
+      expect(container).toHaveTextContent(orcidId);
 
-    const { container } = render(renderCreditName(profile));
+      const link = await screen.findByText(expectedURL);
+      expect(link).toHaveAttribute('href', expectedURL);
 
-    expect(container).toHaveTextContent('n/a');
+      const image = await screen.findByAltText('ORCID Icon');
+      expect(image).toBeVisible();
+      expect(image.getAttribute('src')).toContain('ORCID-iD_icon-vector.svg');
+    });
   });
 });
diff --git a/src/features/orcidlink/common/misc.tsx b/src/features/orcidlink/common/misc.tsx
@@ -26,11 +26,11 @@ export function renderORCIDIcon() {
   );
 }
 
-export function privateField() {
+function renderPrivateField() {
   return <Typography fontStyle="italic">private</Typography>;
 }
 
-export function naField() {
+function renderNA() {
   return (
     <Typography fontStyle="italic" variant="body1">
       n/a
@@ -41,7 +41,7 @@ export function naField() {
 export function renderRealname(profile: ORCIDProfile) {
   // Name is the one stored from the original linking, may have changed.
   if (profile.nameGroup.private) {
-    return privateField();
+    return renderPrivateField();
   }
 
   const { firstName, lastName } = profile.nameGroup.fields;
@@ -65,15 +65,15 @@ export function renderRealname(profile: ORCIDProfile) {
  */
 export function renderCreditName(profile: ORCIDProfile) {
   if (profile.nameGroup.private) {
-    return privateField();
+    return renderPrivateField();
   }
   if (!profile.nameGroup.fields.creditName) {
-    return naField();
+    return renderNA();
   }
   return <Typography>{profile.nameGroup.fields.creditName}</Typography>;
 }
 
-export function renderLoading(title: string, description: string) {
+function renderLoading(title: string, description: string) {
   return (
     <div className={styles.loading}>
       <Alert icon={<CircularProgress size="1rem" />}>
@@ -93,3 +93,28 @@ export function renderLoadingOverlay(open: boolean) {
     </Modal>
   );
 }
+
+/**
+ * Creates a link to an ORCID profile in the form recommended by ORCID.
+ *
+ * @param orcidSiteURL A URL to an ORCID public site that hosts orcid profiles
+ * @param orcidId An ORCID iD
+ * @returns An anchor component linking to the given ORCID iD
+ */
+export function renderORCIDId(orcidSiteURL: string, orcidId: string) {
+  return (
+    <a
+      href={`${orcidSiteURL}/${orcidId}`}
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      {renderORCIDIcon()}
+      {orcidSiteURL}/{orcidId}
+    </a>
+  );
+}