devto stories back on

scottnath · Mar 5, 2024 · 0fcb524 · 0fcb524
1 parent f85bc1f
commit 0fcb524
Show file tree

Hide file tree

Showing 4 changed files with 165 additions and 188 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -11,7 +11,6 @@ const config = {
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
     'storybook-addon-mock',
-    'storybook-addon-fetch-mock',
     '@chromaui/addon-visual-tests',
   ],
   framework: {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -2,7 +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, stringinator, parseify } from '../src/utils';
+import { stringinator, parseify } from '../src/utils';
 import "./storybook.css";
 
 setCustomElementsManifest(customElements);
@@ -15,7 +15,6 @@ global.attrGen = (args) => Object.entries(args)
 .map(([key, value]) => `\n  ${key}="${value}"`)
 .join(' ');
 
-global.stringify = stringify;
 global.stringinator = stringinator;
 global.parseify = parseify;
 
@@ -40,9 +39,6 @@ const preview = {
           return code.replaceAll('&gt;', ">").replaceAll('&lt;', "<")
         }
       }
-    },
-    fetchMock: {
-      mocks: []
     }
   },
 };

diff --git a/src/devto/user/user.stories.js b/src/devto/user/user.stories.js
@@ -33,176 +33,175 @@ export const User = {
   }
 }
 
-// export const UserPosts = {
-//   args: {
-//     ...User.args,
-//     post_count: 222,
-//     latest_post: stringify(parseFetchedPost(postDependabot)),
-//     popular_post: stringify(parseFetchedPost(postBugfix)),
-//   },
-//   // breaks in github-actions CI, unknown why
-//   play: async ({ args, canvasElement }) => {
-//     const elements = await getElements(canvasElement);
-
-//     const argsAfterFetch = {
-//       ...args,
-//       latest_post: parseFetchedPost(postDependabot),
-//       popular_post: parseFetchedPost(postBugfix),
-//     };
-//     await ensureElements(elements, argsAfterFetch);
-//     await ensureScreenRead(elements, argsAfterFetch);
-//   }
-// }
+export const UserPosts = {
+  args: {
+    ...User.args,
+    post_count: 222,
+    latest_post: stringinator(parseFetchedPost(postDependabot)),
+    popular_post: stringinator(parseFetchedPost(postBugfix)),
+  },
+  // breaks in github-actions CI, unknown why
+  play: async ({ args, canvasElement }) => {
+    const elements = await getElements(canvasElement);
 
-// export const OnlyRequired = {
-//   args: {
-//     username: userScottnath.username,
-//     name: userScottnath.name,
-//   },
-//   play: User.play,
-// }
+    const argsAfterFetch = {
+      ...args,
+      latest_post: parseFetchedPost(postDependabot),
+      popular_post: parseFetchedPost(postBugfix),
+    };
+    await ensureElements(elements, argsAfterFetch);
+    await ensureScreenRead(elements, argsAfterFetch);
+  }
+}
 
-// export const Fetch = {
-//   args: {
-//     username: userScottnath.username,
-//     fetch: true,
-//   },
-// }
+export const OnlyRequired = {
+  args: {
+    username: userScottnath.username,
+    name: userScottnath.name,
+  },
+  play: User.play,
+}
 
-// export const FetchMocked = {
-//   args: {
-//     username: userScottnath.username,
-//     fetch: true,
-//   },
-//   parameters: {
-//     mockData: [
-//       generateMockResponse(userScottnath, 'users'),
-//       generateMockResponse([postDependabot, postBugfix], 'articles'),
-//     ]
-//   },
-//   play: async ({ args, canvasElement }) => {
-//     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);
-//     await ensureScreenRead(elements, argsAfterFetch);
-//   }
-// }
+export const Fetch = {
+  args: {
+    username: userScottnath.username,
+    fetch: true,
+  },
+}
 
+export const FetchMocked = {
+  args: {
+    username: userScottnath.username,
+    fetch: true,
+  },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement }) => {
+    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);
+    await ensureScreenRead(elements, argsAfterFetch);
+  }
+}
 
-// export const FetchWithoutPosts = {
-//   args: {
-//     username: userScottnath.username,
-//     fetch: 'no-posts',
-//   },
-//   parameters: {
-//     mockData: [
-//       generateMockResponse(userScottnath, 'users'),
-//       generateMockResponse([postDependabot, postBugfix], 'articles'),
-//     ]
-//   },
-//   play: async ({ args, canvasElement }) => {
-//     const elements = await getElements(canvasElement);
-//     const argsAfterFetch = {
-//       ...parseFetchedUser(userScottnath),
-//       ...args,
-//       post_count: 2,
-//       latest_post: null,
-//       popular_post: null,
-//     };
-//     await ensureElements(elements, argsAfterFetch);
-//     await ensureScreenRead(elements, argsAfterFetch);
-//   }
-// }
+export const FetchWithoutPosts = {
+  args: {
+    username: userScottnath.username,
+    fetch: 'no-posts',
+  },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...parseFetchedUser(userScottnath),
+      ...args,
+      post_count: 2,
+      latest_post: null,
+      popular_post: null,
+    };
+    await ensureElements(elements, argsAfterFetch);
+    await ensureScreenRead(elements, argsAfterFetch);
+  }
+}
 
-// export const FetchOverides = {
-//   args: {
-//     username: userScottnath.username,
-//     fetch: 'true',
-//     name: "Meowy McMeowerstein",
-//     summary: "Spending time purring and sleepin",
-//     profile_image: 'cat-square.jpeg',
-//     joined_at: 'Jan 1, 1979',
-//     post_count: 1000000,
-//     popular_post: stringify({
-//       title: 'Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow',
-//       cover_image: 'cat-1000-420.jpeg',
-//     }),
-//     latest_post: stringify({
-//       title: 'Mess? Make your human blame the dog',
-//       cover_image: 'cat-glasses-1000-420.jpeg'
-//     }),
-//   },
-//   parameters: {
-//     mockData: [
-//       generateMockResponse(userScottnath, 'users'),
-//       generateMockResponse([postDependabot, postBugfix], 'articles'),
-//     ]
-//   },
-//   play: async ({ args, canvasElement }) => {
-//     const elements = await getElements(canvasElement);
+export const FetchOverides = {
+  args: {
+    username: userScottnath.username,
+    fetch: 'true',
+    name: "Meowy McMeowerstein",
+    summary: "Spending time purring and sleepin",
+    profile_image: 'cat-square.jpeg',
+    joined_at: 'Jan 1, 1979',
+    post_count: 1000000,
+    popular_post: stringinator({
+      title: 'Meow meow meow meow meow meow meow meow meow meow meow meow meow meow meow',
+      cover_image: 'cat-1000-420.jpeg',
+    }),
+    latest_post: stringinator({
+      title: 'Mess? Make your human blame the dog',
+      cover_image: 'cat-glasses-1000-420.jpeg'
+    }),
+  },
+  parameters: {
+    mockData: [
+      generateMockResponse(userScottnath, 'users'),
+      generateMockResponse([postDependabot, postBugfix], 'articles'),
+    ]
+  },
+  play: async ({ args, canvasElement }) => {
+    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);
-//     await ensureScreenRead(elements, argsAfterFetch);
-//   }
-// }
+    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);
+    await ensureScreenRead(elements, argsAfterFetch);
+  }
+}
 
-// export const FetchError = {
-//   args: {
-//     username: 'not-a-real-user',
-//     fetch: true,
-//   },
-//   parameters: {
-//     mockData: [
-//       generateMockResponse({username: 'not-a-real-user'}, 'users', 404),
-//     ]
-//   },
-//   play: async ({ args, canvasElement }) => {
-//     const elements = await getElements(canvasElement);
-//     const argsAfterFetch = {
-//       ...args,
-//       error: 'Fetch Error: User "not-a-real-user" not found'
-//     };
-//     await ensureElements(elements, argsAfterFetch);
-//     await ensureScreenRead(elements, argsAfterFetch);
-//   }
-// }
+export const FetchError = {
+  args: {
+    username: 'not-a-real-user',
+    fetch: true,
+  },
+  parameters: {
+    mockData: [
+      generateMockResponse({username: 'not-a-real-user'}, 'users', 404),
+    ]
+  },
+  play: async ({ args, canvasElement }) => {
+    const elements = await getElements(canvasElement);
+    const argsAfterFetch = {
+      ...args,
+      error: 'Fetch Error: User "not-a-real-user" not found'
+    };
+    await ensureElements(elements, argsAfterFetch);
+    await ensureScreenRead(elements, argsAfterFetch);
+  }
+}
 
-// export const ContainerCheck = {
-//   args: {
-//     ...FetchOverides.args,
-//     fetch: false,
-//   },
+export const ContainerCheck = {
+  args: {
+    ...FetchOverides.args,
+    fetch: false,
+  },
 
-//   render: (args) => {
-//     const attributes = attrGen(args);
+  render: (args) => {
+    const attributes = attrGen(args);
 
-//     return `
-//       <div style="display: flex; flex-wrap: wrap; width: 1000px; margin: 1em;">
-//         <devto-user ${attributes} theme="dark" style="flex: 0 0 200px;"></devto-user>
-//         <devto-user ${attributes} theme="light" style="flex: 0 0 200px;"></devto-user>
-//         <devto-user ${attributes} theme="dark" style="flex: 0 0 300px;"></devto-user>
-//         <devto-user ${attributes} theme="light" style="flex: 0 0 300px;"></devto-user>
-//         <devto-user ${attributes} theme="dark" style="flex: 0 0 400px;"></devto-user>
-//         <devto-user ${attributes} theme="light" style="flex: 0 0 400px;"></devto-user>
-//       </div>
-//     `;
-//   }
-// }
+    return `
+      <div style="display: flex; flex-wrap: wrap; width: 1000px; margin: 1em;">
+        <devto-user ${attributes} theme="dark" style="flex: 0 0 200px;"></devto-user>
+        <devto-user ${attributes} theme="light" style="flex: 0 0 200px;"></devto-user>
+        <devto-user ${attributes} theme="dark" style="flex: 0 0 300px;"></devto-user>
+        <devto-user ${attributes} theme="light" style="flex: 0 0 300px;"></devto-user>
+        <devto-user ${attributes} theme="dark" style="flex: 0 0 400px;"></devto-user>
+        <devto-user ${attributes} theme="light" style="flex: 0 0 400px;"></devto-user>
+      </div>
+    `;
+  }
+}