chore: add publication tests (heyxyz#2099)

apps/web/package.json

@@ -59,7 +59,7 @@
     "remark-breaks": "^3.0.2",
     "remark-linkify-regex": "^1.2.1",
     "strip-markdown": "^5.0.0",
-    "tlds": "^1.237.0",
+    "tlds": "^1.238.0",
     "utils": "*",
     "uuid": "^9.0.0",
     "wagmi": "^0.12.2",

apps/web/src/components/Publication/PublicationStats.tsx

@@ -39,12 +39,16 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
     <div className="lt-text-gray-500 flex flex-wrap items-center gap-6 py-3 text-sm sm:gap-8">
       {mirrorCount > 0 && (
         <>
-          <span>
+          <span data-testid={`publication-${publication.id}-comment-stats`}>
             <Trans>
               <b className="text-black dark:text-white">{nFormatter(commentsCount)}</b> Comments
             </Trans>
           </span>
-          <button type="button" onClick={() => setShowMirrorsModal(true)}>
+          <button
+            type="button"
+            onClick={() => setShowMirrorsModal(true)}
+            data-testid={`publication-${publication.id}-mirror-stats`}
+          >
             <Trans>
               <b className="text-black dark:text-white">{nFormatter(mirrorCount)}</b> Mirrors
             </Trans>
@@ -61,7 +65,11 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
       )}
       {!hideLikesCount && reactionCount > 0 && (
         <>
-          <button type="button" onClick={() => setShowLikesModal(true)}>
+          <button
+            type="button"
+            onClick={() => setShowLikesModal(true)}
+            data-testid={`publication-${publication.id}-like-stats`}
+          >
             <Trans>
               <b className="text-black dark:text-white">{nFormatter(reactionCount)}</b> Likes
             </Trans>
@@ -78,7 +86,11 @@ const PublicationStats: FC<PublicationStatsProps> = ({ publication }) => {
       )}
       {collectCount > 0 && (
         <>
-          <button type="button" onClick={() => setShowCollectorsModal(true)}>
+          <button
+            type="button"
+            onClick={() => setShowCollectorsModal(true)}
+            data-testid={`publication-${publication.id}-collect-stats`}
+          >
             <Trans>
               <b className="text-black dark:text-white">{nFormatter(collectCount)}</b> Collects
             </Trans>

apps/web/src/components/Shared/Attachments.tsx

@@ -139,6 +139,7 @@ const Attachments: FC<AttachmentsProps> = ({
                   }}
                   src={isNew ? url : imageProxy(url, ATTACHMENT)}
                   alt={isNew ? url : imageProxy(url, ATTACHMENT)}
+                  data-testid={`attachment-image-${url}`}
                 />
               )}
               {isNew && !hideDelete && (

apps/web/src/components/Shared/Audio/CoverImage.tsx

@@ -52,7 +52,8 @@ const CoverImage: FC<CoverImageProps> = ({ isNew = false, cover, setCover, image
           src={cover ? imageProxy(getIPFSLink(cover), ATTACHMENT) : cover}
           className="h-24 w-24 rounded-xl object-cover md:h-40 md:w-40 md:rounded-none"
           draggable={false}
-          alt="cover"
+          alt={`attachment-audio-cover-${cover}`}
+          data-testid={`attachment-audio-cover-${cover}`}
           ref={imageRef}
         />
       </button>

apps/web/src/components/Shared/Audio/index.tsx

@@ -62,7 +62,10 @@ const Audio: FC<AudioProps> = ({ src, isNew = false, publication, txn, expandCov
   };
 
   return (
-    <div className="bg-brand-500 overflow-hidden rounded-xl border px-3.5 pt-3.5 dark:border-gray-700 md:p-0">
+    <div
+      className="bg-brand-500 overflow-hidden rounded-xl border px-3.5 pt-3.5 dark:border-gray-700 md:p-0"
+      data-testid={`attachment-audio-${src}`}
+    >
       <div className="flex flex-wrap md:flex-nowrap md:space-x-2">
         <CoverImage
           isNew={isNew && !txn}

apps/web/src/components/Shared/IFramely/Embed.tsx

@@ -15,7 +15,7 @@ interface EmbedProps {
 
 const Embed: FC<EmbedProps> = ({ og }) => {
   return (
-    <div className="mt-4 text-sm sm:w-4/6">
+    <div className="mt-4 text-sm sm:w-4/6" data-testid={`normal-oembed-${og.url}`}>
       <Link
         href={og.url}
         onClick={(event) => {

apps/web/src/components/Shared/IFramely/Player.tsx

@@ -7,7 +7,7 @@ interface PlayerProps {
 
 const Player: FC<PlayerProps> = ({ og }) => {
   return (
-    <div className="mt-4 w-5/6 text-sm">
+    <div className="mt-4 w-5/6 text-sm" data-testid={`rich-oembed-${og.url}`}>
       <div className="iframely-player" dangerouslySetInnerHTML={{ __html: og.html }} />
     </div>
   );

apps/web/src/components/Shared/Modal/Collectors.tsx

@@ -62,7 +62,7 @@ const Collectors: FC<CollectorsProps> = ({ publicationId }) => {
   }
 
   return (
-    <div className="max-h-[80vh] overflow-y-auto">
+    <div className="max-h-[80vh] overflow-y-auto" data-testid="collectors-modal">
       <ErrorMessage className="m-5" title={t`Failed to load collectors`} error={error} />
       <div className="divide-y dark:divide-gray-700">
         {profiles?.map((wallet, index) => (

apps/web/src/components/Shared/Modal/Likes.tsx

@@ -57,7 +57,7 @@ const Likes: FC<LikesProps> = ({ publicationId }) => {
   }
 
   return (
-    <div className="max-h-[80vh] overflow-y-auto">
+    <div className="max-h-[80vh] overflow-y-auto" data-testid="likes-modal">
       <ErrorMessage className="m-5" title={t`Failed to load likes`} error={error} />
       <div className="divide-y dark:divide-gray-700">
         {profiles?.map((like, index) => (

apps/web/src/components/Shared/Modal/Mirrors.tsx

@@ -61,7 +61,7 @@ const Mirrors: FC<MirrorsProps> = ({ publicationId }) => {
   }
 
   return (
-    <div className="max-h-[80vh] overflow-y-auto">
+    <div className="max-h-[80vh] overflow-y-auto" data-testid="mirrors-modal">
       <ErrorMessage className="m-5" title={t`Failed to load mirrors`} error={error} />
       <div className="divide-y dark:divide-gray-700">
         {profiles?.map((profile, index) => (

apps/web/src/components/Shared/Video.tsx

@@ -13,7 +13,7 @@ interface VideoProps {
 
 const Video: FC<VideoProps> = ({ src, poster }) => {
   return (
-    <div className="rounded-lg">
+    <div className="rounded-lg" data-testid={`attachment-video-${src}`}>
       <Plyr
         source={{
           type: 'video',

apps/web/src/components/UI/LightBox.tsx

@@ -53,6 +53,7 @@ export const LightBox: FC<LightBoxProps> = ({ show, url, onClose }) => {
                   target="_blank"
                   rel="noopener noreferrer"
                   onClick={stopEventPropagation}
+                  data-testid="lightbox-open-original"
                 >
                   <Trans>Open original</Trans>
                 </a>

tests/scripts/apps/web/publication.spec.ts

@@ -1,12 +1,16 @@
 import { expect, test } from '@playwright/test';
-import { APP_NAME } from 'data/constants';
+import { APP_NAME, ATTACHMENT, IPFS_GATEWAY, USER_CONTENT_URL } from 'data/constants';
 import { WEB_BASE_URL } from 'test/constants';
 
 test.describe('Publication', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x01`);
   });
 
+  test('should have publication title', async ({ page }) => {
+    await expect(page).toHaveTitle(`Post by @yoginth • ${APP_NAME}`);
+  });
+
   test('should have publication', async ({ page }) => {
     const publication = page.getByTestId('publication-0x0d-0x01');
     await expect(publication).toBeVisible();
@@ -42,24 +46,98 @@ test.describe('Publication', () => {
       await expect(publication).toContainText('May 18, 2022');
     });
   });
+
+  test.describe('Publication stats', async () => {
+    test('should have comment stats', async ({ page }) => {
+      const publicationCommentStats = page.getByTestId('publication-0x0d-0x01-comment-stats');
+      await expect(publicationCommentStats).toContainText('Comments');
+    });
+
+    test('should have mirror stats', async ({ page }) => {
+      const publicationMirrorStats = page.getByTestId('publication-0x0d-0x01-mirror-stats');
+      await expect(publicationMirrorStats).toContainText('Mirror');
+
+      // click mirror stats and check if it opens mirror modal
+      await publicationMirrorStats.click();
+      const mirrorsModal = page.getByTestId('mirrors-modal');
+      await expect(mirrorsModal).toBeVisible();
+    });
+
+    test('should have like stats', async ({ page }) => {
+      const publicationLikeStats = page.getByTestId('publication-0x0d-0x01-like-stats');
+      await expect(publicationLikeStats).toContainText('Likes');
+
+      // click like stats and check if it opens likes modal
+      await publicationLikeStats.click();
+      const likesModal = page.getByTestId('likes-modal');
+      await expect(likesModal).toBeVisible();
+    });
+
+    test('should have collect stats', async ({ page }) => {
+      const publicationCollectStats = page.getByTestId('publication-0x0d-0x01-collect-stats');
+      await expect(publicationCollectStats).toContainText('Collects');
+
+      // click collect stats and check if it opens collectors modal
+      await publicationCollectStats.click();
+      const collectorsModal = page.getByTestId('collectors-modal');
+      await expect(collectorsModal).toBeVisible();
+    });
+  });
 });
 
-test.describe('Post', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x01`);
+test.describe('Publication attachments', () => {
+  test('should have publication image', async ({ page }) => {
+    await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x037d`);
+
+    const imageURL = `${IPFS_GATEWAY}bafybeihztcpkzhzc3fddsc66r22hzsztja6blflygurlft7lmc4l44pnre`;
+    const publicationImage = page.getByTestId(`attachment-image-${imageURL}`);
+    await expect(publicationImage).toBeVisible();
+
+    // click image and check if it opens image lightbox and original image
+    await publicationImage.click();
+    const lightboxOpenOriginal = page.getByTestId('lightbox-open-original');
+    await lightboxOpenOriginal.click();
+    const newPage = await page.waitForEvent('popup');
+    await expect(newPage.url()).toBe(imageURL + '/');
   });
 
-  test('should have post title', async ({ page }) => {
-    await expect(page).toHaveTitle(`Post by @yoginth • ${APP_NAME}`);
+  test('should have publication video', async ({ page }) => {
+    await page.goto(`${WEB_BASE_URL}/posts/0x01-0x01`);
+
+    const videoURL = 'https://lens.infura-ipfs.io/ipfs/QmSPijepBo81hDLZ54qg3bKC2DpV9VFdaDJ81Y2viPHCRZ';
+    const publicationVideo = page.getByTestId(`attachment-video-${videoURL}`);
+    await expect(publicationVideo).toBeVisible();
   });
-});
 
-test.describe('Comment', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x037a`);
+  test('should have publication audio', async ({ page }) => {
+    await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x01ec`);
+
+    const audioURL = `${IPFS_GATEWAY}bafybeihabco35vpefrlgzx3rvxccfx4th6ti5ktidw2tf5vjmnmjwx5ki4`;
+    const coverURL = `${IPFS_GATEWAY}bafkreibljzow3cbr4kirujjc5ldxbcykgahjuwuc5zmfledisq4sizwhyq`;
+    const publicationAudio = page.getByTestId(`attachment-audio-${audioURL}`);
+    await expect(publicationAudio).toBeVisible();
+
+    // check if audio cover image is visible
+    const publicationAudioCover = page.getByTestId(`attachment-audio-cover-${coverURL}`);
+    await expect(publicationAudioCover).toHaveAttribute(
+      'src',
+      `${USER_CONTENT_URL}/${ATTACHMENT}/${coverURL}`
+    );
   });
 
-  test('should have comment title', async ({ page }) => {
-    await expect(page).toHaveTitle(`Comment by @yoginth • ${APP_NAME}`);
+  test.describe('Publication oembed', () => {
+    test('should have normal oembed', async ({ page }) => {
+      await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x0375`);
+
+      const publicationOembed = page.getByTestId('normal-oembed-https://testflight.apple.com/join/U9YkOlOy');
+      await expect(publicationOembed).toBeVisible();
+    });
+
+    test('should have rich oembed', async ({ page }) => {
+      await page.goto(`${WEB_BASE_URL}/posts/0x0d-0x02fb`);
+
+      const publicationOembed = page.getByTestId('rich-oembed-https://lenstube.xyz/watch/0x24-0xe8');
+      await expect(publicationOembed).toBeVisible();
+    });
   });
 });

tests/scripts/packages/utils/getAvatar.spec.ts

@@ -1,10 +1,9 @@
 import { expect, test } from '@playwright/test';
-import { USER_CONTENT_URL } from 'data/constants';
+import { IPFS_GATEWAY, USER_CONTENT_URL } from 'data/constants';
 import getAvatar from 'utils/getAvatar';
 
 test.describe('getAvatar', () => {
-  const ipfsLink =
-    'https://gateway.ipfscdn.io/ipfs/bafkreianwlir2groq5l52zdnikon4rtgjcostjosaadbbfekgpzhaprmri';
+  const ipfsLink = `${IPFS_GATEWAY}bafkreianwlir2groq5l52zdnikon4rtgjcostjosaadbbfekgpzhaprmri`;
 
   test('should return original avatar url if no CDN is set and not on skip list', () => {
     const profile = { picture: { original: { url: ipfsLink } } };

yarn.lock

@@ -6009,9 +6009,9 @@ camelcase@^6.0.0:
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
 caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001467"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001467.tgz#1afc9c16ed61f50dd87139da87ca43a3e0051c77"
-  integrity sha512-cEdN/5e+RPikvl9AHm4uuLXxeCNq8rFsQ+lPHTfe/OtypP3WwnVVbjn+6uBV7PaFL6xUFzTh+sSCOz1rKhcO+Q==
+  version "1.0.30001468"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001468.tgz#0101837c6a4e38e6331104c33dcfb3bdf367a4b7"
+  integrity sha512-zgAo8D5kbOyUcRAgSmgyuvBkjrGk5CGYG5TYgFdpQv+ywcyEpo1LOWoG8YmoflGnh+V+UsNuKYedsoYs0hzV5A==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -6403,9 +6403,9 @@ cosmiconfig@^7.0.0:
     yaml "^1.10.0"
 
 cosmiconfig@^8.0.0:
-  version "8.1.2"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.2.tgz#3a9af12d5663d041cd2ab448e9a0e62035ea902a"
-  integrity sha512-rmpUFKMZiawLfug8sP4NbpBSOpWftZB6UACOLEiNbnRAYM1TzgQuTWlMYFRuPgmoTCkcOxSMwQJQpJmiXv/eHw==
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.3.tgz#0e614a118fcc2d9e5afc2f87d53cd09931015689"
+  integrity sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==
   dependencies:
     import-fresh "^3.2.1"
     js-yaml "^4.1.0"
@@ -11061,9 +11061,9 @@ set-blocking@^2.0.0:
   integrity sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
 
 set-cookie-parser@^2.4.8:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.1.tgz#ddd3e9a566b0e8e0862aca974a6ac0e01349430b"
-  integrity sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz#131921e50f62ff1a66a461d7d62d7b21d5d15a51"
+  integrity sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==
 
 set-harmonic-interval@^1.0.1:
   version "1.0.1"
@@ -11612,10 +11612,10 @@ title-case@^3.0.3:
   dependencies:
     tslib "^2.0.3"
 
-tlds@^1.237.0:
-  version "1.237.0"
-  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.237.0.tgz#71e5ca558878a046bc9e253db7a1f2b602ce1a2d"
-  integrity sha512-4IA6zR7jQop4pEdziQaptOgkIwnnZ537fXM3MKAzOXjXLjiHm77SA3/E0nXWJGSVRnKcn/JxDJmwTqyPgQ+ozg==
+tlds@^1.238.0:
+  version "1.238.0"
+  resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.238.0.tgz#ffe7c19c8940c35b497cda187a6927f9450325a4"
+  integrity sha512-lFPF9pZFhLrPodaJ0wt9QIN0l8jOxqmUezGZnm7BfkDSVd9q667oVIJukLVzhF+4oW7uDlrLlfJrL5yu9RWwew==
 
 tmp-promise@^3.0.2:
   version "3.0.3"