✅ add deep testing to dev.to (#14)

Author: scottnath

.storybook/preview.js

@@ -2,6 +2,7 @@ import { setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import { globalTypesPrimer, decoratorsPrimer } from './primer-preview';
 import { viewports } from './viewports';
+import { stringify, parseify } from '../src/utils';
 import "./storybook.css";
 
 setCustomElementsManifest(customElements);
@@ -14,7 +15,8 @@ global.attrGen = (args) => Object.entries(args)
 .map(([key, value]) => `\n  ${key}="${value}"`)
 .join(' ');
 
-global.stringify = (obj) => JSON.stringify(obj).replace(/"/g, """)
+global.stringify = stringify;
+global.parseify = parseify;
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {

src/devto/helpers/testing.js

@@ -20,6 +20,8 @@ export const generateMockResponse = (content, type='article', status=200) => {
   if (type === 'article') {
     // calls /articleS/:id (adds 's' to type)
     url += `${type}s/${content.id}`;
+  } else if (type === 'articles') {
+    url += `${type}/latest?per_page=1000&username=fake`;
   } else if (type === 'users') {
     if (!content.id) {
       url += `${type}/by_username?url=${content.username}`;
@@ -30,9 +32,21 @@ export const generateMockResponse = (content, type='article', status=200) => {
 
   if (status === 404) {
     return {
+      url,
+      method: 'GET',
       status: 404,
-      error: "Not Found"
+      delay: 0,
+      response: {
+        status: 404,
+        error: "Not Found"
+      },
     }
   }
-  return content
+  return {
+    url,
+    method: 'GET',
+    status: 200,
+    delay: 0,
+    response: content,
+  }
 }

src/devto/post/content.js

@@ -28,9 +28,10 @@ import { getApiUrl } from '../helpers/index.js';
  * @ignore
  */
 export const fetchPost = async (id) => {
-  const response = await fetch(`${getApiUrl()}/articles/${id}`, {
+  const options = {
     cache: 'no-cache',
-  });
+  };
+  const response = await fetch(`${getApiUrl()}/articles/${id}`, options);
   const repoJson = await response.json();
   return repoJson;
 }
@@ -42,9 +43,10 @@ export const fetchPost = async (id) => {
  * @ignore
  */
 export const fetchUserPosts = async (username) => {
-  const articles = await fetch(`${getApiUrl()}/articles/latest?per_page=1000&username=${username?.toLowerCase()}`, {
+  const options = {
     cache: 'no-cache',
-  });
+  };
+  const articles = await fetch(`${getApiUrl()}/articles/latest?per_page=1000&username=${username?.toLowerCase()}`, options);
   const articlesJson = await articles.json();
   return articlesJson;
 }

src/devto/post/html.js

@@ -7,12 +7,16 @@
  * @memberof DEVUtils.post
  */
 function html(content) {
-  if (content.error || !content.url || !content.title) {
-    return '';
+  if (content.error) {
+    return `
+      <div aria-label="dev.to article" class="post" itemscope itemtype="http://schema.org/Action">
+        <p itemprop="error">${content.error}</p>
+      </div>
+    `
   }
 
   return `
-    <span class="post" itemscope itemtype="http://schema.org/Article">
+    <span aria-label="dev.to article" class="post" itemscope itemtype="http://schema.org/Article">
       <a href="${content.url}" itemprop="url" aria-label="read post ${content.title}">
         <img src="${content.cover_image}" itemprop="image" alt="Cover image for post ${content.title}" />
         <span itemprop="name">${content.title}</span>

src/devto/post/post.shared-spec.js

@@ -0,0 +1,47 @@
+import { expect } from '@storybook/jest';
+import { within as shadowWithin } from 'shadow-dom-testing-library';
+
+/**
+ * Extract elements from an shadow DOM element
+ */
+export const getElements = async (canvasElement) => {
+  const screen = shadowWithin(canvasElement);
+  const container = await screen.findByShadowLabelText(/dev.to article/i);
+  const link = await screen.queryByShadowRole('link');
+  const image = await screen.queryByShadowRole('img');
+  const title = await container?.querySelector('[itemprop="name"]');
+  return { 
+    screen,
+    canvasElement,
+    container,
+    link,
+    image,
+    title,
+    error: await container?.querySelector('[itemprop="error"]'),
+  };
+}
+
+/**
+ * Ensure elements are present and have the correct content
+ */
+export const ensureElements = async (elements, args) => {
+  await expect(elements.container).toBeTruthy();
+
+  if (args.fetch && !args.id) {
+    await expect(elements.link).toBeFalsy();
+    await expect(elements.container).toHaveTextContent('Post ID is required to fetch post content');
+  }
+  if (args.error) {
+    await expect(elements.link).toBeFalsy();
+    await expect(elements.error).toBeTruthy();
+    await expect(elements.error).toHaveTextContent(args.error);
+    return;
+  }
+
+  await expect(elements.link).toBeTruthy();
+  await expect(elements.link).toHaveAttribute('href', args.url);
+  await expect(elements.title).toBeTruthy();
+  await expect(elements.title).toHaveTextContent(args.title);
+  await expect(elements.image).toBeTruthy();
+  await expect(elements.image).toHaveAttribute('src', args.cover_image);
+}

src/devto/post/post.stories.js

@@ -4,6 +4,8 @@ import { parseFetchedPost } from './content';
 import { default as postDependabot } from '../fixtures/generated/post--dependabot.json';
 import { default as postProfileComponents } from '../fixtures/generated/post--profile-components.json';
 
+import { getElements, ensureElements } from './post.shared-spec';
+
 import './index.js';
 
 export default {
@@ -24,17 +26,30 @@ export const Post = {
   args: {
     ...parseFetchedPost(postDependabot),
   },
-  // play: async ({ args, canvasElement, step }) => {
-  //   const elements = await getElements(canvasElement);
-  //   await ensureElements(elements, args);
-  // }
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    await ensureElements(elements, args);
+  }
 }
 
 export const Fetch = {
   args: {
     id: postProfileComponents.id,
     fetch: true,
   },
+  parameters: {
+    mockData: [
+      generateMockResponse(postProfileComponents, 'article'),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...parseFetchedPost(postProfileComponents),
+      ...args,
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
 }
 
 export const FetchOverides = {
@@ -43,4 +58,37 @@ export const FetchOverides = {
       title: 'Mess? Make your human blame the dog',
       cover_image: 'cat-glasses-1000-420.jpeg'
   },
-}
+  parameters: {
+    mockData: [
+      generateMockResponse(postProfileComponents, 'article'),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...parseFetchedPost(postProfileComponents),
+      ...args,
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
+}
+
+export const FetchError = {
+  args: {
+    id: 'not-a-real-id',
+    fetch: true,
+  },
+  parameters: {
+    mockData: [
+      generateMockResponse({id: 'not-a-real-id'}, 'article', 404),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...args,
+      error: `Fetch Error: Post "${args.id}" not found`,
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
+}

src/devto/post/post.test.js

@@ -12,7 +12,7 @@ describe('fetchPost', () => {
   it('Should accept a post id and return a response', async (t) => {
     const fn = t.mock.method(global, 'fetch');
     const mockRes = {
-      json: () => generateMockResponse(postDependabot, 'article'),
+      json: () => generateMockResponse(postDependabot, 'article').response,
     };
     fn.mock.mockImplementationOnce(() => 
       Promise.resolve(mockRes)
@@ -27,7 +27,7 @@ describe('fetchUserPosts', () => {
   it('Should accept a username and return a response', async (t) => {
     const fn = t.mock.method(global, 'fetch');
     const mockRes = {
-      json: () => generateMockResponse([postDependabot, postBugfix], 'articles'),
+      json: () => generateMockResponse([postDependabot, postBugfix], 'articles').response,
     };
     fn.mock.mockImplementationOnce(() =>
       Promise.resolve(mockRes)
@@ -121,7 +121,7 @@ describe('generatePostContent', () => {
     const fn = t.mock.method(global, 'fetch');
     const mockContent = generateMockResponse(testObj, 'article', 404);
     const mockRes = {
-      json: () => mockContent,
+      json: () => mockContent.response,
     };
     fn.mock.mockImplementationOnce(() => 
       Promise.resolve(mockRes)
@@ -140,7 +140,7 @@ describe('generatePostContent', () => {
     }
     const fn = t.mock.method(global, 'fetch');
     const mockRes = {
-      json: () => testPost,
+      json: () => generateMockResponse(testPost, 'article').response,
     };
     fn.mock.mockImplementationOnce(() => 
       Promise.resolve(mockRes)

src/devto/typedefs.js

@@ -0,0 +1,67 @@
+
+
+/**
+ * @see https://developers.forem.com/api/v0#tag/users/operation/getUser
+ * @typedef {Object} DevToUser
+ * @property {string} type_of - The type of the object, in this case "user".
+ * @property {number} id - The unique identifier of the user.
+ * @property {string} username - The username of the user.
+ * @property {string} name - The name of the user.
+ * @property {string} summary - A brief summary or bio of the user.
+ * @property {string} twitter_username - The user's Twitter username.
+ * @property {string} github_username - The user's GitHub username.
+ * @property {?string} website_url - The user's personal website URL or null if not provided.
+ * @property {string} location - The user's location.
+ * @property {string} joined_at - The date the user joined, formatted as a string.
+ * @property {string} profile_image - The URL to the user's profile image.
+ */
+
+/**
+ * @see https://developers.forem.com/api/v1#tag/articles/operation/getArticles
+ * @typedef {Object} DevToArticle
+ * @property {string} type_of - The type of the object, in this case "article".
+ * @property {number} id - The unique identifier of the article.
+ * @property {string} title - The title of the article.
+ * @property {string} description - A brief description of the article.
+ * @property {string} readable_publish_date - The human-readable publish date.
+ * @property {string} slug - The article's slug.
+ * @property {string} path - The relative path to the article.
+ * @property {string} url - The full URL to the article.
+ * @property {number} comments_count - The number of comments on the article.
+ * @property {number} public_reactions_count - The number of public reactions to the article.
+ * @property {?number} collection_id - The collection ID if the article belongs to a collection.
+ * @property {string} published_timestamp - The timestamp when the article was published.
+ * @property {number} positive_reactions_count - The number of positive reactions to the article.
+ * @property {string} cover_image - The URL to the article's cover image.
+ * @property {string} social_image - The URL to the article's social image.
+ * @property {string} canonical_url - The canonical URL of the article.
+ * @property {string} created_at - The timestamp when the article was created.
+ * @property {?string} edited_at - The timestamp when the article was last edited.
+ * @property {?string} crossposted_at - The timestamp when the article was crossposted.
+ * @property {string} published_at - The timestamp when the article was published.
+ * @property {string} last_comment_at - The timestamp of the last comment on the article.
+ * @property {number} reading_time_minutes - The estimated reading time in minutes.
+ * @property {Array<string>} tag_list - List of tags associated with the article.
+ * @property {string} tags - Comma-separated string of tags.
+ * @property {DevToUser} user - The user who wrote the article.
+ * @property {DevToOrganization} organization - The organization associated with the article.
+ * @property {DevToFlareTag} flare_tag - The flare tag associated with the article.
+ */
+
+/**
+ * @typedef {Object} DevToOrganization
+ * @property {string} name - The name of the organization.
+ * @property {string} username - The username of the organization.
+ * @property {string} slug - The slug of the organization.
+ * @property {string} profile_image - The URL to the organization's profile image.
+ * @property {string} profile_image_90 - The URL to the 90x90 version of the organization's profile image.
+ */
+
+/**
+ * @typedef {Object} DevToFlareTag
+ * @property {string} name - The name of the flare tag.
+ * @property {string} bg_color_hex - The background color of the flare tag in HEX format.
+ * @property {string} text_color_hex - The text color of the flare tag in HEX format.
+ */
+
+