From cbe17de3b3d565443580817f3098cc27502fc464 Mon Sep 17 00:00:00 2001
From: Scott Nath <github@scottnath.com>
Date: Thu, 26 Oct 2023 22:31:48 -0400
Subject: [PATCH] :white_check_mark: add deep testing to dev.to (#14)

---
 .storybook/preview.js               |   4 +-
 src/devto/helpers/testing.js        |  18 ++-
 src/devto/post/content.js           |  10 +-
 src/devto/post/html.js              |  10 +-
 src/devto/post/post.shared-spec.js  |  47 +++++++
 src/devto/post/post.stories.js      |  58 +++++++-
 src/devto/post/post.test.js         |   8 +-
 src/devto/typedefs.js               |  67 +++++++++
 src/devto/user/content.js           |  68 ++++++----
 src/devto/user/html.js              |   2 +-
 src/devto/user/user.shared-spec.js  |  95 +++++++++++++
 src/devto/user/user.stories.js      |  82 +++++++++--
 src/devto/user/user.test.js         | 204 ++++++++++++++++++++++++++--
 src/github/styles/vars-global.css   |   3 +-
 src/github/user/content.js          |   3 +-
 src/github/user/user.shared-spec.js |   4 +-
 src/github/user/user.test.js        |  10 +-
 src/mastodon/typedefs.js            |  30 ++++
 src/utils/index.js                  |  16 ++-
 19 files changed, 665 insertions(+), 74 deletions(-)
 create mode 100644 src/devto/post/post.shared-spec.js
 create mode 100644 src/devto/typedefs.js
 create mode 100644 src/devto/user/user.shared-spec.js
 create mode 100644 src/mastodon/typedefs.js

diff --git a/.storybook/preview.js b/.storybook/preview.js
index b495817..6f54cf9 100644
--- a/.storybook/preview.js
+++ b/.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, "&quot;")
+global.stringify = stringify;
+global.parseify = parseify;
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {
diff --git a/src/devto/helpers/testing.js b/src/devto/helpers/testing.js
index b5c2976..7b06a4a 100644
--- a/src/devto/helpers/testing.js
+++ b/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,
+  }
 }
\ No newline at end of file
diff --git a/src/devto/post/content.js b/src/devto/post/content.js
index 80474ff..8b3a5fa 100644
--- a/src/devto/post/content.js
+++ b/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;
 }
diff --git a/src/devto/post/html.js b/src/devto/post/html.js
index f3632b6..4fbecd2 100644
--- a/src/devto/post/html.js
+++ b/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>
diff --git a/src/devto/post/post.shared-spec.js b/src/devto/post/post.shared-spec.js
new file mode 100644
index 0000000..d4b73c9
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/src/devto/post/post.stories.js b/src/devto/post/post.stories.js
index b489a64..f8115ea 100644
--- a/src/devto/post/post.stories.js
+++ b/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,10 +26,10 @@ 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 = {
@@ -35,6 +37,19 @@ export const Fetch = {
     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'
   },
-}
\ No newline at end of file
+  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);
+  }
+}
diff --git a/src/devto/post/post.test.js b/src/devto/post/post.test.js
index 05982ff..7244545 100644
--- a/src/devto/post/post.test.js
+++ b/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)
diff --git a/src/devto/typedefs.js b/src/devto/typedefs.js
new file mode 100644
index 0000000..5c0380c
--- /dev/null
+++ b/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.
+ */
+
+
diff --git a/src/devto/user/content.js b/src/devto/user/content.js
index 74c82b6..1bccfef 100644
--- a/src/devto/user/content.js
+++ b/src/devto/user/content.js
@@ -1,5 +1,6 @@
-import { fetchUserPosts, findPost } from '../post/content.js';
+import { fetchUserPosts, findPost, parseFetchedPost } from '../post/content.js';
 import { getApiUrl } from '../helpers/index.js';
+import { parseify } from '../../utils/index.js';
 
 /**
  * Blank base64-encoded png
@@ -55,6 +56,26 @@ export const fetchUser = async (username, id) => {
   return userJson;
 }
 
+/**
+ * Parses a string, which should be a JSON stringified array of DEV post 
+ *  objects
+ * @param {string} postStr - String of ForemPost data
+ * @returns {ForemPost} content for a post
+ * @function
+ * @ignore
+ */
+export const parsePostString = (postStr) => {
+  if (typeof postStr !== 'string') return postStr;
+  let post = {};
+  try {
+    post = parseify(postStr);
+  } catch (error) {
+    console.error(error);
+    return {};
+  }
+  return post;
+}
+
 /**
  * Parse a dev.to (or Forem) user's content. This is a reducer on the endpoint response, 
  *  but generally reduces any object to just the data required for the user component HTML
@@ -75,8 +96,8 @@ export const parseFetchedUser = (user = {}) => {
     joined_at: user.joined_at,
     profile_image: user.profile_image,
     post_count: user.post_count,
-    latest_post: user.latest_post,
-    popular_post: user.popular_post,
+    latest_post: parsePostString(user.latest_post),
+    popular_post: parsePostString(user.popular_post),
   }
   const usr = {};
   // remove `undefined` values
@@ -86,26 +107,6 @@ export const parseFetchedUser = (user = {}) => {
   return usr;
 }
 
-/**
- * Parses a string, which should be a JSON stringified array of DEV post 
- *  objects
- * @param {string} postStr - String of ForemPost data
- * @returns {ForemPost} content for a post
- * @function
- * @ignore
- */
-export const parsePostString = (postStr) => {
-  if (typeof postStr !== 'string') return postStr;
-  let post = {};
-  try {
-    post = JSON.parse(postStr);
-  } catch (error) {
-    console.error(error);
-    return {};
-  }
-  return post;
-}
-
 /**
  * Parses and cleans user content to match what is expected by the user HTML
  * @param {ForemUserHTML} content - a content object representing a dev.to user
@@ -117,10 +118,10 @@ export const cleanUserContent = (content = {}) => {
   content.profile_image = content.profile_image || blankPng;
   content.name = content.name || `@${content.username}`;
   if (content.latest_post) {
-    content.latest_post = parsePostString(content.latest_post);
+    content.latest_post = parseFetchedPost(parsePostString(content.latest_post));
     if (content.popular_post) {
-      content.popular_post = parsePostString(content.popular_post);
-      if (content.popular_post === content.latest_post) {
+      content.popular_post = parseFetchedPost(parsePostString(content.popular_post));
+      if (content.popular_post.url === content.latest_post.url) {
         delete content.popular_post;
       } else {
         content.popular_post.cover_image = content.popular_post.cover_image || blankPng;
@@ -145,12 +146,13 @@ export const generateUserContent = async (content, fetch = false) => {
   let fetched = {};
   if (fetch && fetch !== 'false') {
     fetched = await fetchUser(user.username);
-    if (fetched.error) {
+    if (fetched?.error) {
       if (fetched.error === 'Not Found') {
         return { error: `Fetch Error: User "${content.username}" not found`};
       }
       return { error: `Fetch Error: ${fetched.message}`};
     }
+    fetched = parseFetchedUser(fetched);
     const posts = await fetchUserPosts(user.username);
     if (posts.length) {
       fetched.post_count = posts.length;
@@ -158,6 +160,18 @@ export const generateUserContent = async (content, fetch = false) => {
         fetched.latest_post = findPost(posts, 'latest');
         fetched.popular_post = findPost(posts, 'popular');
       }
+      if (fetched.latest_post && user.latest_post) {
+        user.latest_post = {
+          ...fetched.latest_post,
+          ...user.latest_post,
+        }
+      }
+      if (fetched.popular_post && user.popular_post) {
+        user.popular_post = {
+          ...fetched.popular_post,
+          ...user.popular_post,
+        }
+      }
     }
   }
   return cleanUserContent(Object.assign({}, fetched, user));
diff --git a/src/devto/user/html.js b/src/devto/user/html.js
index 94b4368..a98bdcc 100644
--- a/src/devto/user/html.js
+++ b/src/devto/user/html.js
@@ -32,7 +32,7 @@ function html(content) {
       </header>
       <div part="main">
         ${content.summary ? `<p itemprop="description">${content.summary}</p>` : ''}
-        ${content.joined_at ? `<p>Joined on <time datetime="${formatDate(content.joined_at)}">${content.joined_at}</time></p>` : ''}
+        ${content.joined_at ? `<p>Joined on <time itemprop="startDate" datetime="${formatDate(content.joined_at)}">${content.joined_at}</time></p>` : ''}
         ${content.post_count ? `<p class="post_count">${content.post_count} posts published</p>` : ''}
         ${content.latest_post || content.popular_post ? `
           <dl>
diff --git a/src/devto/user/user.shared-spec.js b/src/devto/user/user.shared-spec.js
new file mode 100644
index 0000000..479af86
--- /dev/null
+++ b/src/devto/user/user.shared-spec.js
@@ -0,0 +1,95 @@
+
+import { expect } from '@storybook/jest';
+import { within as shadowWithin } from 'shadow-dom-testing-library';
+import { formatDate } from "../helpers";
+
+/**
+ * Extract elements from an shadow DOM element
+ */
+export const getElements = async (canvasElement) => {
+  const screen = shadowWithin(canvasElement);
+  const container = await screen.findByShadowLabelText(/dev.to user profile/i);
+  const [mainLink] = await screen.queryAllByShadowRole('link');
+  const [ avatar ] = await screen.queryAllByShadowRole('img');
+  let latest_post = null;
+  let popular_post = null;
+  let postList = null;
+  const terms = await screen.queryAllByShadowRole('term');
+  if (terms.length) {
+    postList = terms[0].parentElement;
+    terms.forEach((term) => {
+      if (term.textContent === 'Latest post') {
+        latest_post = term.nextElementSibling;
+      }
+      if (term.textContent === 'Popular post') {
+        popular_post = term.nextElementSibling;
+      }
+    });
+  }
+  return { 
+    screen,
+    canvasElement,
+    container,
+    error: await container?.querySelector('[itemprop="error"]'),
+    mainLink: mainLink !== undefined ? mainLink : null,
+    avatar,
+    name: await mainLink?.querySelector('[itemprop="name"]'),
+    summary: await container?.querySelector('[itemprop="description"]'),
+    joined_at: await container?.querySelector('[itemprop="startDate"]'),
+    post_count: await container?.querySelector('.post_count'),
+    postList,
+    latest_post,
+    popular_post,
+  };
+}
+
+/**
+ * Ensure elements are present and have the correct content
+ */
+export const ensureElements = async (elements, args) => {
+  await expect(elements.container).toBeInTheDocument();
+  if (args.error) {
+    await expect(elements.mainLink).not.toBeInTheDocument();
+    await expect(elements.error).toBeInTheDocument();
+    await expect(elements.error).toHaveTextContent(args.error);
+    return;
+  }
+
+  await expect(elements.error).not.toBeInTheDocument();
+  await expect(elements.mainLink).toBeInTheDocument();
+  await expect(elements.avatar).toBeInTheDocument();
+  await expect(elements.name).toBeInTheDocument();
+  
+  if (args?.summary) {
+    await expect(elements.summary).toBeInTheDocument();
+    await expect(elements.summary.textContent).toEqual(args.summary);
+  } else {
+    await expect(elements.summary).not.toBeInTheDocument();
+  }
+
+  if (args?.joined_at) {
+    await expect(elements.joined_at).toBeInTheDocument();
+    await expect(elements.joined_at).toHaveAttribute('datetime', formatDate(args.joined_at));
+    await expect(elements.joined_at.textContent).toContain(args.joined_at);
+  } else {
+    await expect(elements.joined_at).not.toBeInTheDocument();
+  }
+  
+  if (args?.post_count) {
+    await expect(elements.post_count).toBeInTheDocument();
+    await expect(elements.post_count.textContent).toContain(`${args.post_count} posts published`);
+  } else {
+    await expect(elements.post_count).not.toBeInTheDocument();
+  }
+  
+  if (args?.latest_post) {
+    await expect(elements.latest_post).toBeInTheDocument();
+  } else {
+    await expect(elements.latest_post).not.toBeInTheDocument();
+  }
+  if (args?.popular_post) {
+    await expect(elements.popular_post).toBeInTheDocument();
+  } else {
+    await expect(elements.popular_post).not.toBeInTheDocument();
+  }
+}
\ No newline at end of file
diff --git a/src/devto/user/user.stories.js b/src/devto/user/user.stories.js
index 2dbf0eb..c490bb2 100644
--- a/src/devto/user/user.stories.js
+++ b/src/devto/user/user.stories.js
@@ -5,6 +5,7 @@ import { parseFetchedPost } from '../post/content';
 import { default as userScottnath } from '../fixtures/generated/user--scottnath.json';
 import { default as postDependabot } from '../fixtures/generated/post--dependabot.json';
 import { default as postBugfix } from '../fixtures/generated/post--bugfix-multi-vite.json';
+import { getElements, ensureElements } from './user.shared-spec';
 
 import './index.js';
 
@@ -26,10 +27,10 @@ export const User = {
   args: {
     ...parseFetchedUser(userScottnath),
   },
-  // 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 UserPosts = {
@@ -37,7 +38,8 @@ export const UserPosts = {
     ...User.args,
     latest_post: stringify(parseFetchedPost(postDependabot)),
     popular_post: stringify(parseFetchedPost(postBugfix)),
-  }
+  },
+  play: User.play,
 }
 
 export const OnlyRequired = {
@@ -45,6 +47,7 @@ export const OnlyRequired = {
     username: userScottnath.username,
     name: userScottnath.name,
   },
+  play: User.play,
 }
 
 export const Fetch = {
@@ -52,6 +55,23 @@ export const Fetch = {
     username: userScottnath.username,
     fetch: true,
   },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...parseFetchedUser(userScottnath),
+      ...args,
+      post_count: 2,
+      latest_post: parseFetchedPost(postDependabot),
+      popular_post: parseFetchedPost(postBugfix),
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
 }
 
 export const FetchWithoutPosts = {
@@ -59,6 +79,23 @@ export const FetchWithoutPosts = {
     username: userScottnath.username,
     fetch: 'no-posts',
   },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...parseFetchedUser(userScottnath),
+      ...args,
+      post_count: 2,
+      latest_post: null,
+      popular_post: null,
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
 }
 
 export const FetchOverides = {
@@ -72,15 +109,36 @@ export const FetchOverides = {
     post_count: 1000000,
     popular_post: stringify({
       title: 'Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow',
-      url: 'http://example.com',
-      cover_image: 'cat-1000-420.jpeg'
+      cover_image: 'cat-1000-420.jpeg',
     }),
     latest_post: stringify({
       title: 'Mess? Make your human blame the dog',
-      url: 'http://example.com',
       cover_image: 'cat-glasses-1000-420.jpeg'
     }),
   },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+
+    const argsAfterFetch = {
+      ...parseFetchedUser(userScottnath),
+      ...args,
+      latest_post: {
+        ...parseFetchedPost(postDependabot),
+        ...parseify(args.latest_post),
+      },
+      popular_post: {
+        ...parseFetchedPost(postBugfix),
+        ...parseify(args.popular_post),
+      },
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
 }
 
 export const FetchError = {
@@ -93,6 +151,14 @@ export const FetchError = {
       generateMockResponse({username: 'not-a-real-user'}, 'users', 404),
     ]
   },
+  play: async ({ args, canvasElement, step }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...args,
+      error: 'Fetch Error: User "not-a-real-user" not found'
+    };
+    await ensureElements(elements, argsAfterFetch);
+  }
 }
 
 export const ContainerCheck = {
diff --git a/src/devto/user/user.test.js b/src/devto/user/user.test.js
index 35a54af..36ad4c4 100644
--- a/src/devto/user/user.test.js
+++ b/src/devto/user/user.test.js
@@ -1,22 +1,27 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert'
 
-import { fetchUser } from './content.js';
+import * as content from './content.js';
+import { parseFetchedPost } from '../post/content.js';
 import { generateMockResponse } from '../helpers/testing.js';
+import { stringify } from '../../utils/index.js';
 
 import { default as userScottnath } from '../fixtures/generated/user--scottnath.json' assert { type: 'json' };
+import { default as postBugfix } from '../fixtures/generated/post--bugfix-multi-vite.json' assert { type: 'json' };
+import { default as postDependabot } from '../fixtures/generated/post--dependabot.json' assert { type: 'json' };
+
 
 describe('fetchUser', () => {
   it('Should accept a user id and return a response', async (t) => {
     const fn = t.mock.method(global, 'fetch');
     const mockRes = {
-      json: () => generateMockResponse(userScottnath, 'users'),
+      json: () => generateMockResponse(userScottnath, 'users').response,
     };
     fn.mock.mockImplementationOnce(() => 
       Promise.resolve(mockRes)
     )
     
-    const res = await fetchUser(null, userScottnath.id);
+    const res = await content.fetchUser(null, userScottnath.id);
     assert.deepEqual(res, userScottnath);
     assert.strictEqual(fn.mock.calls[0].arguments[0], `https://dev.to/api/users/${userScottnath.id}`);
   })
@@ -24,19 +29,19 @@ describe('fetchUser', () => {
     const noId = {...userScottnath, id: undefined};
     const fn = t.mock.method(global, 'fetch');
     const mockRes = {
-      json: () => generateMockResponse(noId, 'users'),
+      json: () => generateMockResponse(noId, 'users').response,
     };
     fn.mock.mockImplementationOnce(() => 
       Promise.resolve(mockRes)
     )
     
-    const res = await fetchUser(noId.username);
+    const res = await content.fetchUser(noId.username);
     assert.deepEqual(res, noId);
     assert.strictEqual(fn.mock.calls[0].arguments[0], `https://dev.to/api/users/by_username?url=${noId.username}`);
   })
   it('Should handle missing user', async (t) => {
       const fn = t.mock.method(global, 'fetch');
-      const mockContent = generateMockResponse({username: 'not-a-real-user'}, 'users', 404);
+      const mockContent = generateMockResponse({username: 'not-a-real-user'}, 'users', 404).response;
       const mockRes = {
         json: () => mockContent,
       };
@@ -44,8 +49,189 @@ describe('fetchUser', () => {
         Promise.resolve(mockRes)
       )
       
-      const res = await fetchUser('not-a-real-user');
-      assert.deepEqual(res.response, mockContent.response);
+      const res = await content.fetchUser('not-a-real-user');
+      assert.deepEqual(res, mockContent);
       assert.strictEqual(fn.mock.calls[0].arguments[0], `https://dev.to/api/users/by_username?url=not-a-real-user`);
   });
-})
\ No newline at end of file
+})
+describe('parseFetchedUser', () => {
+  it('Should parse a user', () => {
+    const testUser = userScottnath;
+    assert.deepEqual(content.parseFetchedUser(testUser), {
+      username: testUser.username,
+      name: testUser.name,
+      summary: testUser.summary,
+      joined_at: testUser.joined_at,
+      profile_image: testUser.profile_image,
+    });
+  })
+  it('Should require a username', () => {
+    const testUser = userScottnath;
+    assert.deepEqual(content.parseFetchedUser({
+      ...testUser,
+      username: ''
+    }), {
+      ...testUser,
+      name: testUser.name,
+      summary: testUser.summary,
+      joined_at: testUser.joined_at,
+      profile_image: testUser.profile_image,
+      username: '',
+      error: 'Username is required',
+    });
+  })
+})
+
+describe('parsePostString', () => {
+  it('Should parse a stringified post', () => {
+    const testString = JSON.stringify(postBugfix);
+    assert.deepEqual(content.parsePostString(testString), postBugfix);
+  });
+  it('Should fail gracefully', () => {
+    assert.deepEqual(content.parsePostString(postBugfix), postBugfix);
+    assert.deepEqual(content.parsePostString('["postBugfix`]'), {});
+  });
+});
+
+describe('cleanUserContent', () => {
+  it('Adjusts for missing items', () => {
+    const cleaned = content.cleanUserContent({username: 'meow'});
+    assert.ok(cleaned.profile_image.includes('data:image/png'));
+    assert.equal(cleaned.name, '@meow');
+    assert.equal(cleaned.latest_post, undefined);
+    assert.equal(cleaned.popular_post, undefined);
+  });
+  it('Parses post strings', () => {
+    const cleaned = content.cleanUserContent({
+      username: 'meow',
+      latest_post: JSON.stringify(parseFetchedPost(postBugfix)),
+      popular_post: JSON.stringify(parseFetchedPost(postDependabot)),
+    });
+    assert.deepEqual(cleaned.latest_post, parseFetchedPost(postBugfix));
+    assert.deepEqual(cleaned.popular_post, parseFetchedPost(postDependabot));
+  })
+  it('Does not allow duplicate posts', () => {
+    const cleaned = content.cleanUserContent({
+      username: 'meow',
+      latest_post: JSON.stringify(parseFetchedPost(postDependabot)),
+      popular_post: JSON.stringify(parseFetchedPost(postDependabot)),
+    });
+    assert.deepEqual(cleaned.latest_post, parseFetchedPost(postDependabot));
+    assert.deepEqual(cleaned.popular_post, undefined);
+  });
+});
+
+describe('generateUserContent', () => {
+  it('Errors on missing content', async () => {
+    const res = await content.generateUserContent();
+    assert.deepEqual(res.error, 'Username is required');
+  });
+  it('Cleans without fetching', async () => {
+    const testUser = userScottnath;
+    const resp = await content.generateUserContent(testUser);
+    assert.deepEqual(resp, {
+      username: testUser.username,
+      name: testUser.name,
+      summary: testUser.summary,
+      joined_at: testUser.joined_at,
+      profile_image: testUser.profile_image,
+    });
+  });
+  it('Fetches and fails', async (t) => {
+    const fn = t.mock.method(global, 'fetch');
+    const mockContent = generateMockResponse({username: 'meow'}, 'users', 404).response;
+    const mockRes = {
+      json: () => mockContent,
+    };
+    fn.mock.mockImplementationOnce(() => 
+      Promise.resolve(mockRes)
+    )
+    
+    const returned = await content.generateUserContent({username: 'meow'}, true);
+    assert.equal(returned.error, 'Fetch Error: User "meow" not found');
+  });
+  it('Fetches and cleans', async (t) => {
+    const postLatest = {
+      ...postDependabot,
+      positive_reactions_count: 10,
+      published_at: '2022-01-02T00:00:00Z'
+    };
+    const postLatestUserDefined = {
+      title: 'meow article 1',
+    };
+    const postPopular = {
+      ...postBugfix,
+      positive_reactions_count: 20,
+      published_at: '1972-01-01T00:00:00Z'
+    };
+    const postPopularUserDefined = {
+      title: 'meow article 2',
+    };
+    const testUser = userScottnath;
+    const expected = {
+      username: testUser.username,
+      name: testUser.name,
+      summary: testUser.summary,
+      joined_at: testUser.joined_at,
+      profile_image: testUser.profile_image,
+      post_count: 2,
+      popular_post: {
+        ...parseFetchedPost(postPopular),
+        ...postPopularUserDefined
+      },
+      latest_post: {
+        ...parseFetchedPost(postLatest),
+        ...postLatestUserDefined
+      },
+    }
+    const fn = t.mock.method(global,'fetch');
+    const mockResUser = {
+      json: () => generateMockResponse(testUser, 'users').response,
+    };
+    const mockResPosts = {
+      json: () => generateMockResponse([postLatest, postPopular], 'articles').response,
+    };
+    fn.mock.mockImplementationOnce(async () => mockResUser, 0)
+    fn.mock.mockImplementationOnce(async () => mockResPosts, 1)
+    
+    const returned = await content.generateUserContent({
+      username: testUser.username,
+      latest_post: stringify(postLatestUserDefined),
+      popular_post: stringify(postPopularUserDefined),
+    }, true);
+    assert.deepEqual(returned, expected);
+  });
+  it('Fetches without posts', async (t) => {
+    const postLatest = {
+      ...postDependabot,
+      positive_reactions_count: 10,
+      published_at: '2022-01-02T00:00:00Z'
+    };
+    const postPopular = {
+      ...postBugfix,
+      positive_reactions_count: 20,
+      published_at: '1972-01-01T00:00:00Z'
+    };
+    const testUser = userScottnath;
+    const expected = {
+      username: testUser.username,
+      name: testUser.name,
+      summary: testUser.summary,
+      joined_at: testUser.joined_at,
+      profile_image: testUser.profile_image,
+      post_count: 2,
+    }
+    const fn = t.mock.method(global,'fetch');
+    const mockResUser = {
+      json: () => generateMockResponse(testUser, 'users').response,
+    };
+    const mockResPosts = {
+      json: () => generateMockResponse([postLatest, postPopular], 'articles').response,
+    };
+    fn.mock.mockImplementationOnce(async () => mockResUser, 0)
+    fn.mock.mockImplementationOnce(async () => mockResPosts, 1)
+    
+    const returned = await content.generateUserContent({username: testUser.username}, 'no-posts');
+    assert.deepEqual(returned, expected);
+  });
+});
\ No newline at end of file
diff --git a/src/github/styles/vars-global.css b/src/github/styles/vars-global.css
index d099a5b..890a579 100644
--- a/src/github/styles/vars-global.css
+++ b/src/github/styles/vars-global.css
@@ -67,7 +67,7 @@ address {
 }
 
 .sr-only {
-  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(0px, 0px, 0px, 0px);
   clip-path: inset(50%);
   height: 1px;
   width: 1px;
@@ -75,6 +75,7 @@ address {
   overflow: hidden;
   padding: 0;
   position: absolute;
+  white-space: nowrap;
 }
 
 section[itemscope],
diff --git a/src/github/user/content.js b/src/github/user/content.js
index 445212c..d48a6e6 100644
--- a/src/github/user/content.js
+++ b/src/github/user/content.js
@@ -1,4 +1,5 @@
 import { generateRepoContent } from '../repository/content.js';
+import { parseify } from '../../utils/index.js';
 
 /** @ignore */
 const githubApi = 'https://api.github.com';
@@ -78,7 +79,7 @@ export const parseReposString = (reposStr, owner) => {
   if (typeof reposStr !== 'string') return reposStr;
   let repos = [];
   try {
-    repos = JSON.parse(reposStr);
+    repos = parseify(reposStr);
   } catch (error) {
     console.error(error);
     return [];
diff --git a/src/github/user/user.shared-spec.js b/src/github/user/user.shared-spec.js
index 1da96e8..132ad61 100644
--- a/src/github/user/user.shared-spec.js
+++ b/src/github/user/user.shared-spec.js
@@ -51,7 +51,7 @@ export const ensureElements = async (elements, args) => {
   await expect(elements.avatar).toBeTruthy();
   await expect(elements.name).toBeTruthy();
   await expect(elements.login).toBeTruthy();
-  console.log(args)
+  
   if (args?.bio) {
     await expect(elements.bio).toBeTruthy();
     await expect(elements.bio).toHaveTextContent(args.bio);
@@ -73,7 +73,7 @@ export const ensureElements = async (elements, args) => {
   if (args?.repos) {
     let reps = [];
     try {
-      reps = JSON.parse(args.repos.replace(/&quot;/g, "\""));
+      reps = parseify(args.repos);
       await expect(elements.repos).toHaveLength(reps.length);
     } catch (error) {
       await expect(elements.repos).toHaveLength(0);
diff --git a/src/github/user/user.test.js b/src/github/user/user.test.js
index 67aa418..9296444 100644
--- a/src/github/user/user.test.js
+++ b/src/github/user/user.test.js
@@ -1,10 +1,10 @@
 import { describe, it } from 'node:test';
 import assert from 'node:assert'
 
+import { stringify } from '../../utils/index.js';
 import { generateMockResponse } from '../helpers/testing.js';
 import { fetchUser, parseFetchedUser, parseReposString, cleanUserContent, generateUserContent } from './content.js';
 import { default as repoFreeCodeCamp } from '../fixtures/generated/repo--freeCodeCamp-freeCodeCamp.json' assert { type: 'json' };
-
 import { default as userScottnath } from '../fixtures/generated/user--scottnath.json' assert { type: 'json' };
 import { default as userSindresorhus } from '../fixtures/generated/user--sindresorhus.json' assert { type: 'json' };
 
@@ -56,7 +56,7 @@ describe('parseFetchedUser', () => {
 describe('parseReposString', () => {
   it('Should parse a string of repos full_names', () => {
     const testRepos = ['meow/purr', 'woof/sniff'];
-    const testString = JSON.stringify(testRepos);
+    const testString = stringify(testRepos);
     const expected = testRepos.map(repo => {
       return {
         full_name: repo,
@@ -67,7 +67,7 @@ describe('parseReposString', () => {
   });
   it('Should parse a string of repos names, adding owner, or fail gracefully', () => {
     const testRepos = ['purr', 'sniff'];
-    const testString = JSON.stringify(testRepos);
+    const testString = stringify(testRepos);
     const expected = testRepos.map(repo => {
       return {
         full_name: `meow/${repo}`,
@@ -97,7 +97,7 @@ describe('cleanUserContent', () => {
   })
   it('Should convert a string of repos to an array', () => {
     const testRepos = ['meow/purr'];
-    const testString = JSON.stringify(testRepos);
+    const testString = stringify(testRepos);
     const expected = testRepos.map(repo => {
       return {
         full_name: repo,
@@ -148,7 +148,7 @@ describe('generateUserContent', () => {
       followers: 0,
       username: userSindresorhus.login,
       login: undefined,
-      repos: JSON.stringify([testRepo.full_name]),
+      repos: stringify([testRepo.full_name]),
     };
     const expected = {
       login: userSindresorhus.login,
diff --git a/src/mastodon/typedefs.js b/src/mastodon/typedefs.js
new file mode 100644
index 0000000..c8d171a
--- /dev/null
+++ b/src/mastodon/typedefs.js
@@ -0,0 +1,30 @@
+
+
+/**
+ * @typedef {Object} MastodonAccount
+ * @property {string} id - The account id.
+ * @property {string} username - The username of the account, not including domain.
+ * @property {string} acct - The Webfinger account URI. Equal to username for local users, or username@domain for remote users.
+ * @property {string} url - The location of the user’s profile page.
+ * @property {string} display_name - The profile’s display name.
+ * @property {string} note - The profile’s bio or description.
+ * @property {string} avatar - An image icon that is shown next to statuses and in the profile.
+ * @property {string} avatar_static - A static version of the avatar. Equal to avatar if its value is a static image; different if avatar is an animated GIF.
+ * @property {string} header - An image banner that is shown above the profile and in profile cards.
+ * @property {string} header_static - A static version of the header. Equal to header if its value is a static image; different if header is an animated GIF.
+ * @property {boolean} locked - Whether the account manually approves follow requests.
+ * @property {Array<Object>} fields - Additional metadata attached to a profile as name-value pairs.
+ * @property {Array<Object>} emojis - Custom emoji entities to be used when rendering the profile.
+ * @property {boolean} bot - Indicates that the account may perform automated actions, may not be monitored, or identifies as a robot.
+ * @property {boolean} group - Indicates that the account represents a Group actor.
+ * @property {?boolean} discoverable - Whether the account has opted into discovery features such as the profile directory.
+ * @property {?boolean} noindex - Whether the local user has opted out of being indexed by search engines.
+ * @property {?MastodonAccount} moved - Indicates that the profile is currently inactive and that its user has moved to a new account.
+ * @property {boolean} suspended - An extra attribute returned only when an account is suspended.
+ * @property {boolean} limited - An extra attribute returned only when an account is silenced. If true, indicates that the account should be hidden behind a warning screen.
+ * @property {string} created_at - When the account was created.
+ * @property {?string} last_status_at - When the most recent status was posted.
+ * @property {number} statuses_count - How many statuses are attached to this account.
+ * @property {number} followers_count - The reported followers of this profile.
+ * @property {number} following_count - The reported follows of this profile.
+ */
diff --git a/src/utils/index.js b/src/utils/index.js
index 2a09c0b..c2aea11 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -30,4 +30,18 @@ export const intToString = (num) => {
   }
 
   return num;
-};
\ No newline at end of file
+};
+
+/**
+ * Stringify an object with quotes escaped
+ * @param {Object} obj 
+ * @returns {string} stringified object with quotes escaped
+ */
+export const stringify = (obj) => JSON.stringify(obj).replace(/"/g, "&quot;")
+
+/**
+ * Parse a stringified object with quotes escaped
+ * @param {string} str 
+ * @returns {Object} parsed object
+ */
+export const parseify = (str) => JSON.parse(str.replace(/&quot;/g, "\""));
\ No newline at end of file