How to use ShowCase method in storybook-root
Best JavaScript code snippet using storybook-root
randomized_profile.js
Source:randomized_profile.js 
1// ==UserScript==2// @name SteamCommunity/* (randomized_profile)3// @namespace http://tampermonkey.net/4// @version 0.00255// @description alter avatar and profile contents6// @author byteframe7// @match *://steamcommunity.com/*8// @grant unsafeWindow9// @grant GM_xmlhttpRequest10// @connect *11// @require https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js12// ==/UserScript==13// gather edit form, wait till next minute, then set badge style14var edit = null;15unsafeWindow.start_randomized_profile = function() {16 jQuery.get('//steamcommunity.com/my/edit').done(function(response) {17 edit = jQuery(response);18 edit.find("select#showcase_style_5").val(1);19 if (typeof countries !== "undefined" && !countries.length) {20 countries = {21 shuffle_slots: [],22 shuffle_types: [ -1 ],23 slots: [24 jQuery.map(edit.find("select#country option"), function(value) {25 if (country_blacklist.indexOf(value.value) == -1) {26 return value.value;27 }28 })29 ]30 };31 }32 // request wallet balance33 GM_xmlhttpRequest({34 method: "GET",35 url: 'https://store.steampowered.com/account/',36 onload: function(response) {37 money1 = jQuery(response.responseText).find('.accountLabel').map(function() {38 return jQuery(this).text();39 }).get();40 money2 = jQuery(response.responseText).find('.accountData.price').map(function() {41 return jQuery(this).text();42 }).get();43 // gather and inflate official game group array into avatar pool44 if (typeof avatars == "undefined" || !avatars.pool.length) {45 unsafeWindow.console_log('requesting game avatars...');46 avatars = { index: 0, pool: [] };47 jQuery.get('//steamcommunity.com/actions/GameAvatars'48 ).done(function(data) {49 jQuery.map(jQuery(data).find('a[href$=List]'), function(value) {50 if (avatar_blacklist.indexOf(value.href.slice(30, -12)) == -1) {51 for (var j = 1; j <= value.innerHTML.slice(9, -8); j++) {52 avatars.pool.push([value.href.slice(30, -12), j-1]);53 }54 }55 });56 request_avatar_url();57 });58 } else {59 request_avatar_url();60 }61 }62 });63 });64};65// retrieve avatar url and custom data66function request_avatar_url() {67 avatar = pool_elements(avatars, 1, null)[0];68 jQuery.get('//steamcommunity.com/ogg/' + avatar[0] + '/Avatar/List'69 ).fail(function() {70 unsafeWindow.console_log('FAIL, request_avatar_url: ' + avatar[0]);71 setTimeout(request_avatar_url, 3000);72 }).done(function(data) {73 avatar[0] = jQuery(data).find('p.returnLink a')[0].href;74 request_data(function() {75 // select new background and/or shuffle array76 background = pool_elements(backgrounds, 1, null)[0];77 edit.find("#profile_background").attr("value", background.id);78 // alter slotted showcases on the form79 function alter_showcase(showcase = '', callback = '') {80 showcase.selection = [];81 if (showcase.shuffle_slots.length) {82 var to_shuffle = [];83 showcase.shuffle_slots.forEach(function(slot) {84 to_shuffle.push([showcase.slots[slot], showcase.shuffle_types[slot]]);85 });86 shuffle_array(to_shuffle);87 showcase.shuffle_slots.forEach(function(slot, i) {88 showcase.slots[slot] = to_shuffle[i][0];89 showcase.shuffle_types[slot] = to_shuffle[i][1];90 });91 }92 showcase.slots.forEach(function(slot, i) {93 if (slot.length && typeof showcase.shuffle_types[i] !== 'undefined') {94 var element;95 if (showcase.shuffle_types[i] === 0) {96 element = slot[Math.floor(Math.random()*slot.length)];97 } else if (showcase.shuffle_types[i] < 0) {98 if (showcase.shuffle_types[i] == -1) {99 shuffle_array(slot);100 }101 element = slot[Math.abs(showcase.shuffle_types[i])-1];102 showcase.shuffle_types[i]--;103 if (Math.abs(showcase.shuffle_types[i])-1 == slot.length) {104 showcase.shuffle_types[i] = -1;105 }106 } else if (showcase.shuffle_types[i] > 0) {107 element = slot[showcase.shuffle_types[i]-1];108 showcase.shuffle_types[i]++;109 if (showcase.shuffle_types[i]-1 == slot.length) {110 showcase.shuffle_types[i] = 1;111 }112 }113 if ({}.toString.call(element) === '[object Function]') {114 element = element();115 }116 showcase.selection[i] = element;117 callback(i, element);118 }119 });120 }121 if (backgrounds.index % 19 == 0) {122 alter_showcase(persona_name, function(i, element) {123 edit.find("input[name=personaName]").attr("value", element);124 });125 }126 alter_showcase(real_name, function(i, element) {127 edit.find("input[name=real_name]").attr("value", element);128 });129 alter_showcase(summary_text, function(i, element) {130 edit.find("textarea#summary").text(element);131 });132 alter_showcase(trade_text, function(i, element) {133 edit.find("textarea#showcase_4_notes").val(element);134 });135 alter_showcase(information_text, function(i, element) {136 edit.find("#showcase_8_notes").val(element);137 });138 alter_showcase(information_title, function(i, element) {139 edit.find("input[name=rgShowcaseConfig\\[8\\]\\[0\\]\\[title\\]]").attr(140 "value", element);141 });142 alter_showcase(group_primary, function(i, element) {143 edit.find("#primary_group_steamid").attr("value", element.substr(0,18));144 });145 alter_showcase(group_favorite, function(i, element) {146 edit.find("input[name=rgShowcaseConfig\\[9\\]\\[0\\]\\[accountid\\]]").attr(147 "value", element.substr(0,18));148 });149 alter_showcase(game_favorite, function(i, element) {150 edit.find("input[name=rgShowcaseConfig\\[6\\]\\[0\\]\\[appid\\]]").attr(151 "value", element);152 });153 alter_showcase(review, function(i, element) {154 edit.find("input[name=rgShowcaseConfig\\[10\\]\\[0\\]\\[appid\\]]").attr(155 "value", element);156 });157 alter_showcase(badge_favorite, function(i, element) {158 jQuery(edit).find("#favorite_badge_communityitemid").attr(159 "value", element);160 });161 alter_showcase(badge_collector, function(i, element) {162 edit.find("input[name=rgShowcaseConfig\\[5\\]\\[" + i + "\\]\\[appid\\]]").attr(163 "value", element);164 });165 alter_showcase(workshop_favorite, function(i, element) {166 edit.find("input[name=rgShowcaseConfig\\[11\\]\\[0\\]\\[publishedfileid\\]]").attr(167 "value", element);168 });169 alter_showcase(workshop_collector, function(i, element) {170 edit.find("input[name=rgShowcaseConfig\\[12\\]\\[" + i + "\\]\\[publishedfileid\\]]").attr(171 "value", element);172 });173 alter_showcase(guide_favorite, function(i, element) {174 edit.find("input[name=rgShowcaseConfig\\[15\\]\\[0\\]\\[publishedfileid\\]]").attr(175 "value", element);176 });177 alter_showcase(guide_collector, function(i, element) {178 edit.find("input[name=rgShowcaseConfig\\[16\\]\\[" + i + "\\]\\[publishedfileid\\]]").attr(179 "value", element);180 });181 alter_showcase(screenshot, function(i, element) {182 edit.find("input[name=rgShowcaseConfig\\[7\\]\\[" + i + "\\]\\[publishedfileid\\]]").attr(183 "value", element);184 });185 alter_showcase(artwork, function(i, element) {186 edit.find("input[name=rgShowcaseConfig\\[13\\]\\[" + i + "\\]\\[publishedfileid\\]]").attr(187 "value", element);188 });189 alter_showcase(achievement, function(i, element) {190 edit.find("input[name=rgShowcaseConfig\\[17\\]\\[" + i + "\\]\\[appid\\]]").attr(191 "value", element.substr(0, element.indexOf('_')));192 edit.find("input[name=rgShowcaseConfig\\[17\\]\\[" + i + "\\]\\[title\\]]").attr(193 "value", element.substr(element.indexOf('_')+1));194 });195 // request state/city codes for selected country196 var edit_process = {197 url: '//steamcommunity.com/actions/EditProcess?sId=' + g_steamID,198 method: 'POST',199 data: { xml: 1, type: "locationUpdate" }200 };201 alter_showcase(countries, function(i, element) {202 edit_process.data.country = element;203 edit.find("select#country").val(element);204 jQuery.ajax(edit_process).always(function(response) {205 response = jQuery(response).find('state');206 if (response.length > 1) {207 edit_process.data.state = response[Math.floor(Math.random() * (response.length-1)+1)].attributes['key'].value;208 jQuery.ajax(edit_process).always(function(response) {209 response = jQuery(response).find('city');210 if (response.length > 1) {211 edit_process.data.city = response[Math.floor(Math.random() * (response.length-1)+1)].attributes['key'].value;212 }213 });214 }215 });216 });217 // call intermediate function, then till next minute218 profile_intermediate();219 setTimeout(function() {220 // serialize form, add country/state selections and arrange showcases221 var edit_form = edit.find("#editForm").serializeArray(), j = 0, k = -1;222 edit_form.push({name: "state", value: edit_process.data.state});223 edit_form.push({name: "city", value: edit_process.data.city});224 alter_showcase(showcases, function(i, element) {225 for (; j < edit_form.length; j++) {226 if (k == i) {227 edit_form[j-1].value = element;228 break;229 }230 if (typeof edit_form[j].name !== 'undefined' &&231 edit_form[j].name == 'profile_showcase[]') {232 k++;233 }234 }235 });236 // wait then make changes that require post requests237 function SetShowcaseConfig(showcase, slot, data) {238 data.customization_type = showcase;239 data.slot = slot;240 data.sessionid = g_sessionID;241 jQuery.post(get_url() + '/ajaxsetshowcaseconfig',242 data243 ).fail(function(response) {244 unsafeWindow.console_log('ERROR SetShowcaseConfig: ' + data);245 });246 }247 alter_showcase(game_collector, function(i, element) {248 SetShowcaseConfig(2, i, { appid: element});249 });250 function SetItemShowcaseSlot(id, i, element) {251 element = element.split('_');252 SetShowcaseConfig(id, i, {253 appid: element[0],254 item_contextid: element[1],255 item_assetid: element[2]256 });257 }258 alter_showcase(trade_items, function(i, element) {259 SetItemShowcaseSlot(4, i, element);260 });261 alter_showcase(item_showcase, function(i, element) {262 SetItemShowcaseSlot(3, i, element);263 });264 // post avatar change265 (function change_avatar() {266 jQuery.post(avatar[0] + '/selectAvatar', {267 sessionid: g_sessionID,268 selectedAvatar: avatar[1]269 }).fail(function() {270 setTimeout(change_avatar, 5000);271 }).always(function(data) {272 // post modified profile form273 (function post_profile() {274 jQuery.ajax({275 url: get_url() + 'edit',276 type: "POST",277 data: edit_form,278 xhrFields: { withCredentials: true }279 }).fail(function() {280 setTimeout(post_profile, 5000);281 // reload the page when each background was used282 }).done(function(data) {283 unsafeWindow.console_log(backgrounds.index + '|' + background.market_fee_app +284 " / " + avatar[0].slice(32) + ' #' + (avatar[1]+1));285 if (backgrounds.index == backgrounds.pool.length-1) {286 location.reload();287 } else {288 request_avatar_url();289 }290 });291 })();292 });293 })();294 }, (60-new Date().getSeconds())*1000);295 });296 });...
index.js
Source:index.js
1import React from 'react'2 3// import ShowcaseNumOne from '../ShowcaseNumOne';4import ShowcaseNumTwo from '../ShowcaseNumTwo';5import ShowcaseNumThree from '../ShowcaseNumThree';6import ShowcaseNumFour from '../ShowcaseNumFour';7import ShowcaseNumFive from '../ShowcaseNumFive';8import ShowcaseNumSix from '../ShowcaseNumSix';9import ShowcaseNumSeven from '../ShowcaseNumSeven';10import ShowcaseNumEight from '../ShowcaseNumEight';11import ShowcaseNonWebNumOne from '../ShowcaseNonWebNumOne';12import ShowcaseNonWebNumTwo from '../ShowcaseNonWebNumTwo';13import ShowcaseNonWebNumTwoSecond from '../ShowcaseNonWebNumTwoSecond'14import ShowcaseNonWebNumThree from '../ShowcaseNonWebNumThree';15const CompositeShowcase = () => {16 return (17 <div className='flex-row justify-space-around pb-3 justify-center ' > 18 <div className={`col-lg-12 col-md-9 col-sm-6 mb-1 mt-4`}>19 <h2>Portfolio</h2>20 21 <h4>• Web-based Projects</h4>22 <div className="mb-1 flex-row justify-space-between">23 {/* <ShowcaseNumOne></ShowcaseNumOne> */}24 <ShowcaseNumThree></ShowcaseNumThree>25 <ShowcaseNumTwo></ShowcaseNumTwo>26 <ShowcaseNumFour></ShowcaseNumFour>27 <ShowcaseNumFive></ShowcaseNumFive>28 <ShowcaseNumSix></ShowcaseNumSix>29 <ShowcaseNumEight></ShowcaseNumEight>30 <ShowcaseNumSeven></ShowcaseNumSeven>31 </div>32 <h4>• Terminal Command-Line Based Projects</h4>33 <div className="mb-1 flex-row justify-space-between">34 <ShowcaseNonWebNumOne></ShowcaseNonWebNumOne>35 <ShowcaseNonWebNumTwo></ShowcaseNonWebNumTwo>36 <ShowcaseNonWebNumTwoSecond></ShowcaseNonWebNumTwoSecond>37 <ShowcaseNonWebNumThree></ShowcaseNonWebNumThree>38 </div>39 40 {/* <div className={`col-6 col-lg-6 col-md-6 col-sm-3 mb-1 mt-4`}>41 <ShowcaseNumOne></ShowcaseNumOne>42 </div>43 <div className={`col-6 col-lg-6 col-md-6 col-sm-3 mb-3`}>44 <SingleShowcase></SingleShowcase>45 </div> */}46 </div>47 48 </div> 49 ) 50};...
index.jsx
Source:index.jsx
1import React from 'react'2import Video from '../../videos/video2.mp4'3import { ShowcaseContainer, ShowcaseBackground, VideoBackground, ShowcaseContent, ShowcaseH1, ShowcaseP, ShowcaseBtn, ShowcaseBtnLink } from './ShowcaseElements'4const Showcase = () => {5 return (6 <ShowcaseContainer id="about">7 <ShowcaseBackground>8 <VideoBackground autoPlay loop muted src={Video} type='video/mp4'/>9 </ShowcaseBackground>10 <ShowcaseContent>11 <ShowcaseH1>Aeronautical Enginuity</ShowcaseH1>12 <ShowcaseP>13 Simulation of an aircraft object integrated on the website14 </ShowcaseP>15 <ShowcaseBtn>16 <ShowcaseBtnLink to="/model">Open Simulation</ShowcaseBtnLink>17 </ShowcaseBtn>18 </ShowcaseContent>19 </ShowcaseContainer>20 )21}...
Using AI Code Generation
1import { ShowCase } from 'storybook-root-decorator';2import React from 'react';3import { storiesOf } from '@storybook/react';4import { withInfo } from '@storybook/addon-info';5import { withKnobs, text, boolean } from '@storybook/addon-knobs';6import { withA11y } from '@storybook/addon-a11y';7import { withBackgrounds } from '@storybook/addon-backgrounds';8import { withViewport } from '@storybook/addon-viewport';9import { withRootDecorator } from 'storybook-root-decorator';10import Button from './Button';11storiesOf('Button', module)12 .addDecorator(withInfo)13 .addDecorator(withKnobs)14 .addDecorator(withA11y)15 .addDecorator(withBackgrounds)16 .addDecorator(withViewport)17 .addDecorator(withRootDecorator)18 .add('Default', () => <Button text={text('text', 'Hello')} />)19 .add('Disabled', () => <Button text={text('text', 'Hello')} disabled={boolean('disabled', true)} />)20 .add('ShowCase', () => (21 component={22 <Button text={text('text', 'Hello')} />23 <Button text={text('text', 'Hello')} disabled={boolean('disabled', true)} />24 }25 componentProps={{26 }}27 ));28import React from 'react';29import PropTypes from 'prop-types';30import { withInfo } from '@storybook/addon-info';31import { withKnobs, text, boolean } from '@storybook/addon-knobs';32import { withA11y } from '@storybook/addon-a11y';33import { withBackgrounds } from '@storybook/addon-backgrounds';34import { withViewport } from '@storybook/addon-viewport';35import { withRootDecorator } from 'storybook-root-decorator';36import Button from '../Button';37const ShowCase = ({ title, description, component, componentProps }) => (38 <h1>{title}</h1>39 <p>{description}</p>
Using AI Code Generation
1import { ShowCase } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { action } from '@storybook/addon-actions';4import Button from './Button';5storiesOf('Button', module)6 .addDecorator(ShowCase)7 .add('with text', () => (8 <Button onClick={action('clicked')}>Hello Button</Button>9 .add('with some emoji', () => (10 <Button onClick={action('clicked')}>11 ));12import React from 'react';13const Button = ({ onClick, children }) => (14 <button onClick={onClick} type="button">15 {children}16);17export default Button;18import React from 'react';19import { storiesOf } from '@storybook/react';20import { action } from '@storybook/addon-actions';21import Button from './Button';22storiesOf('Button', module)23 .add('with text', () => (24 <Button onClick={action('clicked')}>Hello Button</Button>25 .add('with some emoji', () => (26 <Button onClick={action('clicked')}>27 ));28import React from 'react';29import { shallow } from 'enzyme';30import Button from './Button';31describe('Button', () => {32 it('should render without crashing', () => {33 shallow(<Button />);34 });35});36import React from 'react';37import { mount } from 'enzyme';38import Button from './Button';39describe('Button', () => {40 it('should render without crashing', () => {41 mount(<Button />);42 });43});44import React from 'react';45import { render } from 'enzyme';46import Button from './Button';47describe('Button', () => {48 it('should render without crashing', () => {49 render(<Button />);50 });51});52import React from 'react';53import { render } from 'enzyme';54import Button from './Button';55describe('Button
Using AI Code Generation
1import { ShowCase } from 'storybook-root'2import { storiesOf } from '@storybook/react-native'3import { withKnobs } from '@storybook/addon-knobs'4import { Button } from 'components'5storiesOf('Button', module)6 .addDecorator(withKnobs)7 .add('default', () => (8 component={Button}9 props={{10 onPress: () => console.log('Button Pressed'),11 }}
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
