diff --git a/.storybook/preview.js b/.storybook/preview.js index 9315412..527a851 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -16,7 +16,7 @@ global.attrGen = (args) => Object.entries(args) .join(' '); global.stringify = stringify; -global.stringinator = stringinator; +// global.stringinator = stringinator; global.parseify = parseify; /** @type { import('@storybook/web-components').Preview } */ diff --git a/src/github/user/user.stories.js b/src/github/user/user.stories.js index fbd6ce2..c54181b 100644 --- a/src/github/user/user.stories.js +++ b/src/github/user/user.stories.js @@ -5,6 +5,7 @@ import { parseFetchedRepo } from '../repository/content.js'; import { getElements, ensureElements, ensureScreenRead } from './user.shared-spec'; import { primerThemes } from '../../../.storybook/primer-preview.js'; import { within as shadowWithin } from 'shadow-dom-testing-library'; +import { stringinator } from '../../utils/index.js'; import './index.js'; export default { @@ -37,19 +38,19 @@ export default { }, }; -export const User = { - args: parseFetchedUser(userScottnath), - play: async ({ args, canvasElement, step }) => { - console.log('USER = elms', canvasElement.closest('body').innerHTML) - const elements = await getElements(canvasElement); - await ensureElements(elements, args); - await ensureScreenRead(elements, args); - } -} +// export const User = { +// args: parseFetchedUser(userScottnath), +// play: async ({ args, canvasElement, step }) => { +// console.log('USER = elms', canvasElement.closest('body').innerHTML) +// const elements = await getElements(canvasElement); +// await ensureElements(elements, args); +// await ensureScreenRead(elements, args); +// } +// } export const UserRepos = { args: { - ...User.args, + ...parseFetchedUser(userScottnath), name: 'Scoot Nerth', repos2: stringinator([parseFetchedRepo(repoProfileComponents), parseFetchedRepo(repoStorydocker)]), }, @@ -61,184 +62,184 @@ export const UserRepos = { } } -export const PopularUser = { - args: parseFetchedUser(userSindresorhus), - play: User.play, -} - -export const OnlyRequired = { - args: { - login: userScottnath.login, - name: userScottnath.name, - }, - play: User.play, -} - -export const Fetch = { - args: { - login: userScottnath.login, - fetch: true, - }, - parameters: { - fetchMock: { - mocks: [ - { - response: generateMockResponse(userScottnath, 'users'), - } - ] - } - }, - play: async ({ args, canvasElement, step }) => { - const elements = await getElements(canvasElement); - const argsAfterFetch = { - ...parseFetchedUser({...userScottnath}), - ...args, - }; - await ensureElements(elements, argsAfterFetch); - await ensureScreenRead(elements, argsAfterFetch); - } -}; +// export const PopularUser = { +// args: parseFetchedUser(userSindresorhus), +// play: User.play, +// } -export const FetchOverides = { - args: { - login: userScottnath.login, - fetch: true, - name: "Meowy McMeowerstein", - bio: "Spending time purring and sleepin", - avatar_url: 'cat-square.jpeg', - followers: "500000", - following: "2980", - repos: stringify([{"full_name":"scottnath/profile-components","description":"Cool thing, does stuff","language":"HTML"}]) - }, - parameters: { - mockData: [ - generateMockResponse(userScottnath, 'users'), - ] - }, - play: async ({ args, canvasElement, step }) => { - const elements = await getElements(canvasElement); - const argsAfterFetch = { - ...parseFetchedUser({...userScottnath}), - ...args, - }; - await ensureElements(elements, argsAfterFetch); - await ensureScreenRead(elements, argsAfterFetch); - } -} +// export const OnlyRequired = { +// args: { +// login: userScottnath.login, +// name: userScottnath.name, +// }, +// play: User.play, +// } -export const ReposFetch = { - args: { - login: userScottnath.login, - fetch: true, - repos: stringify([repoProfileComponents.name, repoStorydocker.full_name]), - }, - parameters: { - fetchMock: { - mocks: [ - { - response: generateMockResponse(userScottnath, 'users'), - }, - { - response: generateMockResponse(repoProfileComponents, 'repos'), - }, - { - response: generateMockResponse(repoStorydocker, 'repos'), - } - ] - } - // mockData: [ - // generateMockResponse(userScottnath, 'users'), - // generateMockResponse(repoProfileComponents, 'repos'), - // generateMockResponse(repoStorydocker, 'repos'), - // ] - }, - play: async ({ args, canvasElement, step }) => { - const elements = await getElements(canvasElement); - console.log('ReposFetchReposFetch = elms', elements.container.innerHTML) - const argsAfterFetch = { - ...parseFetchedUser({...userScottnath}), - ...args, - repos: stringify([repoProfileComponents, repoStorydocker]), - repositories: [parseFetchedRepo(repoProfileComponents), parseFetchedRepo(repoStorydocker)] - }; - console.log('argsAfterFetch', argsAfterFetch) - await ensureElements(elements, argsAfterFetch); - await ensureScreenRead(elements, argsAfterFetch); - } -} +// export const Fetch = { +// args: { +// login: userScottnath.login, +// fetch: true, +// }, +// parameters: { +// fetchMock: { +// mocks: [ +// { +// response: generateMockResponse(userScottnath, 'users'), +// } +// ] +// } +// }, +// play: async ({ args, canvasElement, step }) => { +// const elements = await getElements(canvasElement); +// const argsAfterFetch = { +// ...parseFetchedUser({...userScottnath}), +// ...args, +// }; +// await ensureElements(elements, argsAfterFetch); +// await ensureScreenRead(elements, argsAfterFetch); +// } +// }; -// export const FetchError = { +// export const FetchOverides = { // args: { -// login: 'not-a-real-user', +// login: userScottnath.login, // fetch: true, +// name: "Meowy McMeowerstein", +// bio: "Spending time purring and sleepin", +// avatar_url: 'cat-square.jpeg', +// followers: "500000", +// following: "2980", +// repos: stringify([{"full_name":"scottnath/profile-components","description":"Cool thing, does stuff","language":"HTML"}]) // }, // parameters: { // mockData: [ -// generateMockResponse({login: 'not-a-real-user'}, 'users', 404), +// generateMockResponse(userScottnath, 'users'), // ] // }, // play: async ({ args, canvasElement, step }) => { // const elements = await getElements(canvasElement); // const argsAfterFetch = { +// ...parseFetchedUser({...userScottnath}), // ...args, -// error: `User "${args.login}" not found`, // }; // await ensureElements(elements, argsAfterFetch); +// await ensureScreenRead(elements, argsAfterFetch); // } -// }; +// } -// export const ContainerCheck = { +// export const ReposFetch = { // args: { -// ...FetchOverides.args, -// theme: 'light_high_contrast' +// login: userScottnath.login, +// fetch: true, +// repos: stringify([repoProfileComponents.name, repoStorydocker.full_name]), // }, -// render: (args) => { -// const attributes = attrGen(args); - -// return ` -//
-// -// -// -//
-// `; +// parameters: { +// fetchMock: { +// mocks: [ +// { +// response: generateMockResponse(userScottnath, 'users'), +// }, +// { +// response: generateMockResponse(repoProfileComponents, 'repos'), +// }, +// { +// response: generateMockResponse(repoStorydocker, 'repos'), +// } +// ] +// } +// // mockData: [ +// // generateMockResponse(userScottnath, 'users'), +// // generateMockResponse(repoProfileComponents, 'repos'), +// // generateMockResponse(repoStorydocker, 'repos'), +// // ] +// }, +// play: async ({ args, canvasElement, step }) => { +// const elements = await getElements(canvasElement); +// console.log('ReposFetchReposFetch = elms', elements.container.innerHTML) +// const argsAfterFetch = { +// ...parseFetchedUser({...userScottnath}), +// ...args, +// repos: stringify([repoProfileComponents, repoStorydocker]), +// repositories: [parseFetchedRepo(repoProfileComponents), parseFetchedRepo(repoStorydocker)] +// }; +// console.log('argsAfterFetch', argsAfterFetch) +// await ensureElements(elements, argsAfterFetch); +// await ensureScreenRead(elements, argsAfterFetch); // } // } -// const themesRender = (args) => { -// const attributes = attrGen(args); +// // export const FetchError = { +// // args: { +// // login: 'not-a-real-user', +// // fetch: true, +// // }, +// // parameters: { +// // mockData: [ +// // generateMockResponse({login: 'not-a-real-user'}, 'users', 404), +// // ] +// // }, +// // play: async ({ args, canvasElement, step }) => { +// // const elements = await getElements(canvasElement); +// // const argsAfterFetch = { +// // ...args, +// // error: `User "${args.login}" not found`, +// // }; +// // await ensureElements(elements, argsAfterFetch); +// // } +// // }; -// return ` -//
-// ${primerThemes.map((theme) => { -// return ` -// -// `; -// }).join('')} -// ${primerThemes.map((theme) => { -// return ` -// -// `; -// }).join('')} -// ${primerThemes.map((theme) => { -// return ` -// -// `; -// }).join('')} -//
-// `; -// } +// // export const ContainerCheck = { +// // args: { +// // ...FetchOverides.args, +// // theme: 'light_high_contrast' +// // }, +// // render: (args) => { +// // const attributes = attrGen(args); + +// // return ` +// //
+// // +// // +// // +// //
+// // `; +// // } +// // } -// export const Themes = { -// args: { -// ...ReposFetch.args, -// }, -// render: themesRender, -// } +// // const themesRender = (args) => { +// // const attributes = attrGen(args); -// export const ThemesWithOverrides = { -// args: { -// ...FetchOverides.args, -// }, -// render: themesRender, -// } \ No newline at end of file +// // return ` +// //
+// // ${primerThemes.map((theme) => { +// // return ` +// // +// // `; +// // }).join('')} +// // ${primerThemes.map((theme) => { +// // return ` +// // +// // `; +// // }).join('')} +// // ${primerThemes.map((theme) => { +// // return ` +// // +// // `; +// // }).join('')} +// //
+// // `; +// // } + +// // export const Themes = { +// // args: { +// // ...ReposFetch.args, +// // }, +// // render: themesRender, +// // } + +// // export const ThemesWithOverrides = { +// // args: { +// // ...FetchOverides.args, +// // }, +// // render: themesRender, +// // } \ No newline at end of file