diff options
-rw-r--r-- | components/Ranking/RankingList.stories.js | 10 | ||||
-rw-r--r-- | tests/unit/__snapshots__/storybook.test.js.snap | 589 |
2 files changed, 585 insertions, 14 deletions
diff --git a/components/Ranking/RankingList.stories.js b/components/Ranking/RankingList.stories.js index c7b287d..830dd6a 100644 --- a/components/Ranking/RankingList.stories.js +++ b/components/Ranking/RankingList.stories.js @@ -6,7 +6,10 @@ import RankingList from './RankingList' import { rankingEntry } from './RankingEntry.stories' const rankingList = { - scores: Array(3).fill(rankingEntry) + scores: Array.from(Array(3).keys()).map(i => ({ + ...rankingEntry, + troop: `Troop${i}` + })) } storiesOf('Ranking/RankingList', module) @@ -15,6 +18,9 @@ storiesOf('Ranking/RankingList', module) return { components: { RankingList }, template: `<ranking-list :scores="scores" />`, - data: () => rankingList + data: () => { + console.log(rankingList) + return rankingList + } } }) diff --git a/tests/unit/__snapshots__/storybook.test.js.snap b/tests/unit/__snapshots__/storybook.test.js.snap index 606044b..6bd34f6 100644 --- a/tests/unit/__snapshots__/storybook.test.js.snap +++ b/tests/unit/__snapshots__/storybook.test.js.snap @@ -1,27 +1,592 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots ChroniclePost default 1`] = ` +exports[`Storyshots Buttons/PlainButton default 1`] = ` <div - class="post" + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <button + class="button" + > + Plain Button + </button> +</div> +`; + +exports[`Storyshots Facebook/FacebookFeed default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <section + class="feed" + > + <h1> + Zobacz co się dzieje! + </h1> + + <a + class="button" + href="https://facebook.com/19pdhpuszcza" + rel="noopener" + target="_blank" + > + <div + class="button-container" + > + <img + alt="Find us on Facebook" + class="image" + src="/assets/social/find_us_fb.png" + /> + </div> + </a> + </section> +</div> +`; + +exports[`Storyshots Facebook/FacebookFindUsButton default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" > <a - href="/kronika/2019/20/11/test" + class="button" + href="https://facebook.com/19pdhpuszcza" + rel="noopener" + target="_blank" + > + <div + class="button-container" + > + <img + alt="Find us on Facebook" + class="image" + src="/assets/social/find_us_fb.png" + /> + </div> + </a> +</div> +`; + +exports[`Storyshots JoinUs default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <section + class="joinus" > <div - class="post-container" + class="heading" > - <h4 - class="post-title" + <div + class="title" > - Test ChroniclePost - </h4> + <div + class="text" + > + Rozpocznij swoją harcerską przygodę! + </div> + </div> - <p - class="post-description" + <button + class="button" + > + Dołącz do nas + </button> + </div> + </section> +</div> +`; + +exports[`Storyshots NavLink default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <li + class="navlink" + > + <nuxt-link + class="link" + to="/test" + > + Test + </nuxt-link> + </li> +</div> +`; + +exports[`Storyshots Posts/PostLink default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" > - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> +</div> +`; + +exports[`Storyshots Posts/PurePostList default 1`] = ` +<div + class="post-list" +> + <!----> + + <div + class="post-list-container" + > + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" + > + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" + > + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" + > + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" + > + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> + <div + class="post-link" + > + <a + href="/kronika/2019/20/11/test" + > + <div + class="post-container" + > + <h4 + class="post-title" + > + Test PostLink + </h4> + + <p + class="post-description" + > + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar non ex non sagittis. Quisque in enim tellus. Aliquam consequat mi id sapien congue, sit amet vulputate tortor viverra. Donec.... + </p> + </div> + </a> + </div> + </div> +</div> +`; + +exports[`Storyshots Posts/PurePostList loading 1`] = ` +<div + class="post-list" +> + <div + class="post-list-container" + > + <div + class="loading-post" + /> + <div + class="loading-post" + /> + <div + class="loading-post" + /> + <div + class="loading-post" + /> + </div> + + <!----> +</div> +`; + +exports[`Storyshots Posts/PurePostList no posts 1`] = ` +<div + class="post-list" +> + <!----> + + <div + class="post-list-container" + /> +</div> +`; + +exports[`Storyshots Ranking/RankingEntry default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <li + class="ranking-entry" + > + <div + class="ranking-entry__troop" + > + Test + </div> + + <div + class="ranking-entry__points" + > + 32 + </div> + </li> +</div> +`; + +exports[`Storyshots Ranking/RankingFirstEntry default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <li + class="ranking-first-entry" + > + <img + class="crown" + src="/assets/crown.svg" + /> + + <div + class="ranking-first-entry__troop" + > + Test + </div> + + <div + class="ranking-first-entry__points" + > + 32 + </div> + </li> +</div> +`; + +exports[`Storyshots Ranking/RankingList default 1`] = ` +<div + style="height: 100vh; display: flex; align-items: center; justify-content: center;" +> + <ol + class="ranking-list" + > + <li + class="ranking-first-entry" + > + <img + class="crown" + src="/assets/crown.svg" + /> + + <div + class="ranking-first-entry__troop" + > + Test + </div> + + <div + class="ranking-first-entry__points" + > + 32 + </div> + </li> + + <li + class="ranking-entry" + > + <div + class="ranking-entry__troop" + > + Test + </div> + + <div + class="ranking-entry__points" + > + 32 + </div> + </li> + <li + class="ranking-entry" + > + <div + class="ranking-entry__troop" + > + Test + </div> + + <div + class="ranking-entry__points" + > + 32 + </div> + </li> + </ol> +</div> +`; + +exports[`Storyshots TheFooter default 1`] = ` +<div + style="display: flex; flex-direction: column; min-height: 100vh;" +> + <div + style="flex: 1;" + /> + <div + class="footer" + style="background-color: rgb(80, 123, 52);" + > + <div + class="map" + > + <div + class="routes" + > + <nuxt-link + to="/" + > + Strona główna + </nuxt-link> + <nuxt-link + to="/download" + > + Do pobrania + </nuxt-link> + <nuxt-link + to="/kontakt" + > + Kontakt + </nuxt-link> + <nuxt-link + to="/kronika" + > + Kronika + </nuxt-link> + </div> + + <div + class="routes" + /> + </div> + + <div + class="space" + /> + + <div + class="author" + > + <p> + 19 Poznańska Drużyna Harcerzy Puszcza </p> + + <div + class="social" + > + <a + href="https://github.com/19pdh/" + rel="”noopener”" + target="_blank" + > + <img + alt="Github" + class="icon" + src="/assets/social/github.png" + /> + </a> + + <a + href="https://www.facebook.com/19pdhpuszcza/" + rel="”noopener”" + target="_blank" + > + <img + alt="Facebook" + class="icon" + src="/assets/social/facebook.png" + /> + </a> + </div> </div> - </a> + </div> +</div> +`; + +exports[`Storyshots TheHeader default 1`] = ` +<div + style="display: flex; flex-direction: column; min-height: 100vh;" +> + <nav + class="navbar" + > + <div + class="title" + > + <img + alt="ZHR" + class="logo" + src="/assets/krajka-logo.svg" + /> + + <nuxt-link + class="title-name margin" + to="/" + > + 19 PDH Puszcza + </nuxt-link> + </div> + + <div + class="space" + /> + + <button + class="menu-toggler" + > + Menu + </button> + + <ul + class="links" + > + <li + class="navlink" + > + <nuxt-link + class="link" + to="/" + > + Strona główna + </nuxt-link> + </li> + <li + class="navlink" + > + <nuxt-link + class="link" + to="/download" + > + Do pobrania + </nuxt-link> + </li> + <li + class="navlink" + > + <nuxt-link + class="link" + to="/kontakt" + > + Kontakt + </nuxt-link> + </li> + <li + class="navlink" + > + <nuxt-link + class="link" + to="/kronika" + > + Kronika + </nuxt-link> + </li> + </ul> + </nav> + <div + style="flex: 1;" + /> </div> `; |