fix getVendorTitle util

packages/article-skeleton/fixtures/full-article-content.js

@@ -179,6 +179,23 @@ export default [
     },
     children: []
   },
+  {
+    name: "interactive",
+    attributes: {
+      id: "79c66dbd-2e9c-4dee-9677-53e7ed94418e",
+      display: "primary",
+      url:
+        "https://components.timesdev.tools/lib2/times-embed-1.2.0/times-embed-iframe-max.html",
+      element: {
+        value: "times-embed-iframe-max",
+        attributes: {
+          src: "https%3A%2F%2Fwww.tiktok.com%2Fembed%2F7277615534731005217",
+          ratio: "r1-1"
+        }
+      }
+    },
+    children: []
+  },
   {
     children: [
       {

packages/article-skeleton/src/article-body/article-body.js

@@ -275,7 +275,7 @@ const renderers = ({
         return (
           <InteractiveContainer key={key} fullWidth={display === "fullwidth"}>
             <SocialMediaEmbed
-              url={src}
+              url={isTikTok ? decodeURIComponent(src) : src}
               vendorName={(isYoutube && "youtube") || (isTikTok && "tiktok")}
               id={id}
             />

packages/ts-components/src/components/social-embed/helpers/__tests__/getVendorTitle.test.ts

@@ -1,29 +1,23 @@
 import { getVendorTitle } from '../getVendorTitle';
+import { socialMediaVendors } from '../socialMediaVendors';
 
 describe('getVendorTitle', () => {
-  const mockSocialMediaVendors = {
-    facebook: 'FacebookID',
-    instagram: 'InstagramID'
-  };
-
-  it('should return "X (Twitter)" if the title is "twitter"', () => {
-    const result = getVendorTitle('twitter', mockSocialMediaVendors);
-    expect(result).toBe('X (Twitter)');
+  it('should return the correct title for twitter', () => {
+    const title = getVendorTitle('twitter', socialMediaVendors);
+    expect(title).toBe('X (Twitter)');
   });
 
-  it('should return the id from socialMediaVendors if the title exists', () => {
-    const result = getVendorTitle('facebook', mockSocialMediaVendors);
-    expect(result).toBe('FacebookID');
+  it('should return the correct title for youtube', () => {
+    const title = getVendorTitle('youtube', socialMediaVendors);
+    expect(title).toBe('Youtube');
   });
 
-  // it('should return the title if it does not exist in socialMediaVendors', () => {
-  //   const result = getVendorTitle('linkedin', mockSocialMediaVendors);
-  //   expect(result).toBe('linkedin');
-  // });
+  it('should return the correct title for tiktok', () => {
+    const title = getVendorTitle('tiktok', socialMediaVendors);
+    expect(title).toBe('Tiktok');
+  });
 
-  // it('should return the title if socialMediaVendors has no id for the given title', () => {
-  //   const mockVendorsWithoutId = { pinterest: {} };
-  //   const result = getVendorTitle('pinterest', mockVendorsWithoutId);
-  //   expect(result).toBe('pinterest');
-  // });
+  it('should throw an error if the title does not exist in socialMediaVendors', () => {
+    expect(() => getVendorTitle('nonexistent', socialMediaVendors)).toThrow();
+  });
 });

packages/ts-components/src/components/social-embed/helpers/getVendorTitle.ts

@@ -2,8 +2,5 @@ export const getVendorTitle = (
   title: string,
   socialMediaVendors: any
 ): string => {
-  if (title === 'twitter') {
-    return 'X (Twitter)';
-  }
-  return socialMediaVendors[title];
+  return socialMediaVendors[title].title;
 };

packages/ts-components/src/components/social-embed/helpers/socialMediaVendors.ts

@@ -1,7 +1,15 @@
 export const socialMediaVendors: {
-  [key: string]: { id: string; status: string };
+  [key: string]: { id: string; status: string; title: string };
 } = {
-  twitter: { id: '5fab0c31a22863611c5f8764', status: 'pending' },
-  youtube: { id: '5e7ac3fae30e7d1bc1ebf5e8', status: 'pending' },
-  tiktok: { id: '5e7f6927b8e05c4e491e7380', status: 'pending' }
+  twitter: {
+    id: '5fab0c31a22863611c5f8764',
+    status: 'pending',
+    title: 'X (Twitter)'
+  },
+  youtube: {
+    id: '5e7ac3fae30e7d1bc1ebf5e8',
+    status: 'pending',
+    title: 'Youtube'
+  },
+  tiktok: { id: '5e7f6927b8e05c4e491e7380', status: 'pending', title: 'Tiktok' }
 };