Snapshot tests

packages/ui/lib/components/PromotedArtist/index.tsx

@@ -73,7 +73,7 @@ const PromotedArtist: React.FC<PromotedArtistProps> = ({
         }}
       />
       <img
-        src={blobMaskShadow}
+        src={blobMaskShadow as unknown as string}
         className={styles.mask_shadow}
       />
     </div>

packages/ui/test/__snapshots__/promotedArtist.test.tsx.snap

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`(Snapshot) PromotedArtist (name and description) should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="promoted_artist"
+    style="background-image: url(https://via.placeholder.com/600x250);"
+  >
+    <div
+      class="promoted_artist_info"
+    >
+      <div
+        class="name"
+      >
+        Test artist
+      </div>
+      <div
+        class="description"
+      >
+        Test description
+      </div>
+      <div
+        class="spacer"
+      />
+      <div
+        class="button_row"
+      >
+        <button
+          class="ui pink circular button nuclear button promoted_artist_button"
+        >
+          <i
+            aria-hidden="true"
+            class="itunes note icon"
+          />
+          Check out
+        </button>
+        <a
+          class="ui button nuclear button text promoted_artist_button"
+          href="https://nuclear.js.org"
+          rel="noopener noreferrer"
+          role="button"
+          target="_blank"
+        >
+          <i
+            aria-hidden="true"
+            class="external icon"
+          />
+          External link
+        </a>
+      </div>
+    </div>
+    <div
+      class="promoted_artist_image"
+    >
+      <img
+        class="image"
+        src="https://via.placeholder.com/300"
+        style="mask-image: url(test-file-stub);"
+      />
+      <img
+        class="mask_shadow"
+        src="test-file-stub"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`(Snapshot) PromotedArtist (name only) should render correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="promoted_artist"
+  >
+    <div
+      class="promoted_artist_info"
+    >
+      <div
+        class="name"
+      >
+        Test artist
+      </div>
+      <div
+        class="spacer"
+      />
+      <div
+        class="button_row"
+      >
+        <button
+          class="ui pink circular button nuclear button promoted_artist_button"
+        >
+          <i
+            aria-hidden="true"
+            class="itunes note icon"
+          />
+          Check out
+        </button>
+        <a
+          class="ui button nuclear button text promoted_artist_button"
+          href="https://nuclear.js.org"
+          rel="noopener noreferrer"
+          role="button"
+          target="_blank"
+        >
+          <i
+            aria-hidden="true"
+            class="external icon"
+          />
+          External link
+        </a>
+      </div>
+    </div>
+    <div
+      class="promoted_artist_image"
+    >
+      <img
+        class="image"
+        src="https://via.placeholder.com/300"
+        style="mask-image: url(test-file-stub);"
+      />
+      <img
+        class="mask_shadow"
+        src="test-file-stub"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/ui/test/promotedArtist.test.tsx

@@ -0,0 +1,22 @@
+import { PromotedArtist } from '../lib';
+import { makeSnapshotTest } from './helpers';
+
+makeSnapshotTest(
+  PromotedArtist, {
+    name: 'Test artist',
+    imageUrl: 'https://via.placeholder.com/300',
+    externalUrl: 'https://nuclear.js.org',
+    onListenClick: () => {}
+  }, '(Snapshot) PromotedArtist (name only)'
+);
+
+makeSnapshotTest(
+  PromotedArtist, {
+    name: 'Test artist',
+    description: 'Test description',
+    imageUrl: 'https://via.placeholder.com/300',
+    backgroundImageUrl: 'https://via.placeholder.com/600x250',
+    externalUrl: 'https://nuclear.js.org',
+    onListenClick: () => {}
+  }, '(Snapshot) PromotedArtist (name and description)'
+);