KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use ClassSelectors method in storybook-root

Best JavaScript code snippet using storybook-root

Answer.js

Source:Answer.js

1var $ = function (selector) {2  /**3   * @desc This array will hold the results to be returned.4   * @type {Array}5   */6  var elements = [];7  /**8   * @desc This array will hold the class names in the selector9   * @type {Array}10   */11  var classSelectors = [];12  /**13   * @desc This array will hold the id names in the selector14   * @type {Array}15   */16  var idSelectors = [];17  /**18   * @desc This variable will be assigned to the tag name in the selector19   * if one exists.20   * @type {String}21   */22  var tagName;23  /**24   * @desc This object holds Regular Expressions for testing selectors.25   * @type {Object}26   */27  var matcher = {28    id: new RegExp('^#'),29    class: new RegExp('^\\.')30  };31  /**32   * @desc Holder for individual selector names within selector argument33   * @type {Array}34   */35  var selectorNames = [];36  /**37   * @desc Push slice of selector into sel_names38   * @param {number} start - Index to start slice39   * @param {number} end - Index to end slice40   */41  function pushName(start, end) {42    selectorNames.push(selector.slice(start, end));43  }44  /**45   * @desc This function converts NodeLists into an Array.46   * @param els47   * @returns {Array}48   */49  function makeArray(els) {50    return Array.prototype.slice.call(els);51  }52  /**53   * @desc This object is meant to hold a library for54   * @type {Object}55   */56  var DOM = {57    search: {58      /**59       * @desc Search DOM by id60       * @param {String} query61       * @returns {HTMLElement}62       */63      id: function(query) {64        return document.getElementById(query);65      },66      /**67       * @desc Search DOM by class68       * @param {String} query69       * @returns {Array}70       */71      class: function(query) {72        return makeArray(document.getElementsByClassName(query));73      },74      /**75       * @desc Search DOM by tag name76       * @param {String} query77       * @returns {Array}78       */79      tag: function(query) {80        return makeArray(document.getElementsByTagName(query));81      }82    }83  };84  /**85   * @desc Index to begin slice. Set to 0 by default.86   * @type {Number}87   */88  var sliceStart = 0;89  /**90   * @desc This variable holds the length of the selector.91   * @type {Number}92   */93  var selectorLength = selector.length;94  /* Iterate through selector searching for classes and ids */95  for (var i = 1; i < selectorLength; i++) {96    if (matcher.id.test(selector[i]) || matcher.class.test(selector[i])) {97      pushName(sliceStart, i);98      sliceStart = i;99    } else if (i == selectorLength - 1) {100      /* Push last selector name in sel_names */101      pushName(sliceStart, i + 1);102    }103  }104  /**105   * Filter selectorNames checking for ids, classes, and tag names.106   */107  while (selectorNames.length > 0) {108    var sel = selectorNames[0];109    if (matcher.class.test(sel)) {110      classSelectors.push(sel.slice(1));111    } else if (matcher.id.test(sel)) {112      idSelectors.push(sel.slice(1));113    } else {114      tagName = selectorNames[0];115    }116    selectorNames.splice(0, 1);117  }118  /**119   * @desc This number represents the length of the idSelectors array.120   * @type {Number}121   */122  idSelectorsLength = idSelectors.length;123  /**124   * @desc This number represents the length of the classSelectors array.125   * @type {Number}126   */127  classSelectorsLength = classSelectors.length;128  /**129   * @desc Return element130   */131  function hasTagName(el) {132    return (tagName && el.tagName.toLowerCase() == tagName);133  }134  function hasClasses(base) {135    var sels = classSelectors.map(function(sel) {136      return (base && base.classList.contains(sel));137    });138    return !(hasClasses.indexOf(false) > -1);139  }140  /**141   * Return empty elements array because one cannot define more than one id142   * to a HTMLElement143   */144  if (idSelectors.length > 1) {145    return elements;146  }147  /**148   * Return result of document.getElementById in array if only one id in149   * selector and no classes or tag name.150   */151  if (idSelectorsLength == 1 && !classSelectorsLength && !tagName) {152    elements.push(DOM.search.id(idSelectors[0]));153    return elements;154  }155  /**156   * If id and tag name in selector, get result of document.getElementById157   * and check that element has tag name158   */159  if (idSelectorsLength == 1 && !!tagName) {160    var base = DOM.search.id(idSelectors[0]);161    if (hasTagName(base)) elements.push(base);162    return elements;163  }164  /**165   * If id and classes in selector, check result of document.getElementById166   * has classes.167   */168  if (idSelectorsLength && classSelectorsLength) {169    var base = DOM.search.id(idSelectors[0]);170    if (hasClasses(base)) elements.push(base);171    return elements172  }173  /**174   * If only one class and no ids, get result of175   * document.getElementsByClassName and filter them, checking if elements176   * has tag name if one was defined in selector.177   */178  if (classSelectorsLength === 1) {179    elements = DOM.search.class(classSelectors[0]).filter(function(el) {180      if (tagName) return hasTagName(el);181      return true;182    });183    return elements;184  }185  /**186   * If more than one class, get result of document.getElementsByClassName187   * and check that these elements have the rest of the classes in selector188   */189  if (classSelectorsLength > 1) {190    elements = DOM.search.class(classSelectors[0]).filter(function(el) {191      if (tagName) return hasClasses(el) && hasTagName(el);192      return hasClasses(el);193    });194    return elements;195  }196  /**197   * If no classes or ids in selector query, return result of198   * document.getElementsByTagName199   */200  if (tagName) elements = DOM.search.tag(tagName);201  return elements;...

selectors.ts

Source:selectors.ts

1import { classSelectors, ErrorsMessages } from "./constants";2import { handleFindElementBySelector, handleFindSeveralElementsBySelector } from "./utils";3const calcContainer = handleFindElementBySelector(4  document , classSelectors.CALCULATOR_CONTAINER, ErrorsMessages.CALCULATOR_CONTAINER_IS_LOST5);6const oneNumber = handleFindElementBySelector(7  calcContainer , classSelectors.ONE, ErrorsMessages.SELECTOR_NOT_FOUND8);9const twoNumber = handleFindElementBySelector(10  calcContainer , classSelectors.TWO, ErrorsMessages.SELECTOR_NOT_FOUND11);12const threeNumber = handleFindElementBySelector(13  calcContainer , classSelectors.THREE, ErrorsMessages.SELECTOR_NOT_FOUND14);15const fourNumber = handleFindElementBySelector(16  calcContainer , classSelectors.FOUR, ErrorsMessages.SELECTOR_NOT_FOUND17);18const fiveNumber = handleFindElementBySelector(19  calcContainer , classSelectors.FIVE, ErrorsMessages.SELECTOR_NOT_FOUND20);21const sixNumber = handleFindElementBySelector(22  calcContainer , classSelectors.SIX, ErrorsMessages.SELECTOR_NOT_FOUND23);24const sevenNumber = handleFindElementBySelector(25  calcContainer , classSelectors.SEVEN, ErrorsMessages.SELECTOR_NOT_FOUND26);27const eightNumber = handleFindElementBySelector(28  calcContainer , classSelectors.EIGHT, ErrorsMessages.SELECTOR_NOT_FOUND29);30const nineNumber = handleFindElementBySelector(31  calcContainer , classSelectors.NINE, ErrorsMessages.SELECTOR_NOT_FOUND32);33const zeroNumber = handleFindElementBySelector(34  calcContainer , classSelectors.ZERO, ErrorsMessages.SELECTOR_NOT_FOUND35);36const dot = handleFindElementBySelector(37  calcContainer , classSelectors.DOT, ErrorsMessages.SELECTOR_NOT_FOUND38);39const buttonC = handleFindElementBySelector(40  calcContainer , classSelectors.BUTTON_C, ErrorsMessages.SELECTOR_NOT_FOUND41);42const plus = handleFindElementBySelector(43  calcContainer , classSelectors.PLUS, ErrorsMessages.SELECTOR_NOT_FOUND44);45const minus = handleFindElementBySelector(46  calcContainer , classSelectors.MINUS, ErrorsMessages.SELECTOR_NOT_FOUND47);48const multiply = handleFindElementBySelector(49  calcContainer , classSelectors.MULTIPLY, ErrorsMessages.SELECTOR_NOT_FOUND50);51const divide = handleFindElementBySelector(52  calcContainer , classSelectors.DIVIDE, ErrorsMessages.SELECTOR_NOT_FOUND53);54const equals = handleFindElementBySelector(55  calcContainer , classSelectors.EQUALS, ErrorsMessages.SELECTOR_NOT_FOUND56);57const screen = handleFindElementBySelector(58  calcContainer , classSelectors.SCREEN, ErrorsMessages.SELECTOR_NOT_FOUND59);60const allButtons = handleFindSeveralElementsBySelector(61  calcContainer , classSelectors.ALL_BUTTONS, ErrorsMessages.SELECTOR_NOT_FOUND62);63const buttons = {64  one: oneNumber,65  two: twoNumber,66  three: threeNumber,67  four: fourNumber,68  five: fiveNumber,69  six: sixNumber,70  seven: sevenNumber,71  eight: eightNumber,72  nine: nineNumber,73  zero: zeroNumber,74  dot: dot,75  c: buttonC,76  plus: plus,77  minus: minus,78  multiply: multiply,79  divide: divide,80  equals: equals,81  allButtons: allButtons82}83export {84  buttons, screen, calcContainer...

component-styles.ts

Source:component-styles.ts

1export function bem(selector: string, element: string = String.EMPTY, modifier: string = String.EMPTY): string2{3    if (!selector)4    {5        return String.EMPTY;6    }7    function validateSelector(8        anySelector: string,9        onTooManyElementError: (elementCount: number, individualSelector: string) => void,10        onTooManyModifierError: (modifierCount: number, individualSelector: string) => void11    )12    {13        anySelector.split(" ").forEach(individualSelector =>14        {15            const elementCount = (individualSelector.match(/__/g) || []).length;16            if (elementCount > 1)17            {18                onTooManyElementError(elementCount, individualSelector);19            }20            const modifierCount = (individualSelector.match(/--/g) || []).length;21            if (modifierCount > 1)22            {23                onTooManyModifierError(modifierCount, individualSelector);24            }25        });26    }27    const [block, ...supportSelectors] = normalizeSelector();28    function normalizeSelector(): string[]29    {30        const classSelectors = selector.split(" ");31        for (let i = 0; i < classSelectors.length; i++)32        {33            validateSelector(34                classSelectors[i],35                elementCount =>36                {37                    throw Error(`Only 1 element is allowed per BEM selector. Got: ${elementCount}, Selector: ${classSelectors[i]}`);38                },39                modifierCount =>40                {41                    throw Error(`Only 1 modifier is allowed per BEM selector. Got: ${modifierCount}, Selector: ${classSelectors[i]}`);42                }43            );44            const [block, modifier] = classSelectors[i].split("--");45            classSelectors[i] = block;46            if (modifier && modifier.length > 0)47            {48                classSelectors[i] += ` ${block}--${modifier}`;49            }50        }51        return [...new Set(classSelectors.join(" ").split(" "))];52    }53    let bemSelector = block;54    if (element)55    {56        bemSelector += `__${element}`;57    }58    if (modifier)59    {60        bemSelector += ` ${bemSelector}--${modifier}`;61    }62    if (!element && supportSelectors && supportSelectors.length > 0)63    {64        bemSelector += ` ${supportSelectors.join(" ")}`;65    }66    validateSelector(67        bemSelector,68        () =>69        {70            throw Error(71                `Attaching element to selector created invalid result. ` +72                `Selector: ${selector}, Element: ${element}, Result: ${bemSelector}`73            );74        },75        () =>76        {77            throw Error(78                `Attaching modifier to selector created invalid result. ` +79                `Selector: ${selector}, Element: ${element}, Modifier: ${modifier}, Result: ${bemSelector}`80            );81        }82    );83    return bemSelector;...

Using AI Code Generation

1import { ClassSelectors } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withInfo } from '@storybook/addon-info';4import { withRootDecorator } from 'storybook-root-decorator';5import { withKnobs, text } from '@storybook/addon-knobs';6const stories = storiesOf('ClassSelectors', module);7const className = 'my-class';8stories.addDecorator(withInfo);9stories.addDecorator(withKnobs);10stories.addDecorator(withRootDecorator);11stories.add('ClassSelectors', () => {12    const title = text('Title', 'My Title');13    const description = text('Description', 'My Description');14    return (15            className={className}16            title={title}17            description={description}18    );19});20import ClassSelectors from './ClassSelectors';21export default ClassSelectors;22import React from 'react';23import PropTypes from 'prop-types';24const ClassSelectors = ({ className, title, description }) => {25    return (26        <div className={className}>27            <h1>{title}</h1>28            <p>{description}</p>29    );30};31ClassSelectors.propTypes = {32};33export default ClassSelectors;34.my-class {35    padding: 20px;36    border: 1px solid #ccc;37}38import React from 'react';39import { shallow } from 'enzyme';40import ClassSelectors from './ClassSelectors';41describe('ClassSelectors', () => {42    it('renders without crashing', () => {43        shallow(<ClassSelectors />);44    });45});

Using AI Code Generation

1import { ClassSelectors } from 'storybook-root-decorator';2const classSelectors = new ClassSelectors();3storiesOf('Test', module)4  .add('Test', () => (5    <div className={classSelectors.add('test', 'test2')}>6      <div className={classSelectors.add('test3', 'test4')}>Test</div>7      <div className={classSelectors.add('test5', 'test6')}>Test</div>8  ));9import { addDecorator } from '@storybook/react';10import { ClassSelectors } from 'storybook-root-decorator';11const classSelectors = new ClassSelectors();12addDecorator(story => (13  <div className={classSelectors.add('test', 'test2')}>14    <div className={classSelectors.add('test3', 'test4')}>Test</div>15    <div className={classSelectors.add('test5', 'test6')}>Test</div>16    {story()}17));18  .test {19    color: red;20  }

Using AI Code Generation

1import { ClassSelectors } from "storybook-root-decorator";2export default {3};4export const test = () => {5    <div class="${ClassSelectors.root}">6      <div class="${ClassSelectors.content}">7        <div class="${ClassSelectors.contentInner}">8  `;9};10import { withRootDecorator } from "storybook-root-decorator";11export const decorators = [withRootDecorator];12import { addons } from "@storybook/addons";13import { themes } from "@storybook/theming";14import { create } from "@storybook/theming/create";15addons.setConfig({16  theme: create({17  }),18});19  .storybook-root-decorator-root {20    background-color: #fff;21  }22  .storybook-root-decorator-root {23    background-color: #fff;24  }

Using AI Code Generation

1import { ClassSelectors } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { ClassSelectors } from 'storybook-root-decorator';4import { ClassSelectors } from 'storybook-root-decorator';5import { ClassSelectors } from 'storybook-root-decorator';6import { ClassSelectors } from 'storybook-root-decorator';7import { ClassSelectors } from 'storybook-root-decorator';8import { ClassSelectors } from 'storybook-root-decorator';9import { ClassSelectors } from 'storybook-root-decorator';10import { ClassSelectors } from 'storybook-root-decorator';11import { ClassSelectors } from 'storybook-root-decorator';

Using AI Code Generation

1import { ClassSelectors } from 'storybook-root-decorator';2const selectors = new ClassSelectors();3const story = () => (4  <div className={selectors('my-class')}>Hello World</div>5);6export default story;7import { configure } from '@storybook/react';8import { ClassSelectors } from 'storybook-root-decorator';9const selectors = new ClassSelectors();10selectors.setRoot(document.getElementById('root'));11configure(() => {12  const req = require.context('../src', true, /\.stories\.js$/);13  req.keys().forEach(req);14}, module);15  window.__STORYBOOK_ADDONS_CHANNEL__ = {16    on: () => {},17    emit: () => {},18    removeListener: () => {},19  };20  window.__STORYBOOK_ADDONS_CHANNEL__ = {21    on: () => {},22    emit: () => {},23    removeListener: () => {},24  };25  window.__STORYBOOK_ADDONS_CHANNEL__ = {26    on: () => {},27    emit: () => {},28    removeListener: () => {},29  };30  window.__STORYBOOK_ADDONS_CHANNEL__ = {31    on: () => {},32    emit: () => {},33    removeListener: () => {},34  };35  window.__STORYBOOK_ADDONS_CHANNEL__ = {36    on: () => {},37    emit: () => {},38    removeListener: () => {},39  };40  window.__STORYBOOK_ADDONS_CHANNEL__ = {

Using AI Code Generation

1const { ClassSelectors } = require('storybook-root-cause');2const { getStoryUrl } = require('@storybook/react');3const { By } = require('selenium-webdriver');4const storyUrl = getStoryUrl('Components|Button', 'Default');5const selectors = new ClassSelectors(storyUrl);6it('should find the button', async () => {7  const button = await selectors.findElement(By.className('button'));8  expect(await button.getText()).toEqual('Button');9});10const path = require('path');11module.exports = (baseConfig, env, config) => {12  config.module.rules.push({13    include: path.resolve(__dirname, '../'),14    loader: require.resolve('babel-loader'),15    options: {16      presets: [require.resolve('babel-preset-react-app')],17      plugins: [require.resolve('babel-plugin-react-docgen')],18    },19  });20  return config;21};22const path = require('path');23module.exports = (baseConfig, env, config) => {24  config.module.rules.push({25    include: path.resolve(__dirname, '../'),26    loader: require.resolve('babel-loader'),27    options: {28      presets: [require.resolve('babel-preset-react-app')],29      plugins: [require.resolve('babel-plugin-react-docgen')],30    },31  });32  return config;33};34const path = require('path');35module.exports = (baseConfig, env, config) => {36  config.module.rules.push({37    include: path.resolve(__dirname, '../'),38    loader: require.resolve('babel-loader'),39    options: {40      presets: [require.resolve('babel-preset-react-app')],41      plugins: [require.resolve('babel-plugin-react-docgen')],42    },43  });44  return config;45};46const path = require('path');47module.exports = (baseConfig, env, config) => {48  config.module.rules.push({49    include: path.resolve(__dirname, '../'),50    loader: require.resolve('babel-loader'),51    options: {52      presets: [require.resolve('babel-preset-react-app')],53      plugins: [require.resolve('babel-plugin-react-docgen')],54    },55  });56  return config;57};

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.