How to use ButtonsFilter method in backstopjs
Best JavaScript code snippet using backstopjs
our-coffee.js
Source:our-coffee.js 
1import {Component} from 'react'2import Links from '../links-block/links'3import Decor from '../decor/decor'4import CoffeeShopCard from '../coffee-shop-card/coffee-shop-card'5import './our-coffee.css'6class OurCoffee extends Component {7 constructor(props) {8 super(props)9 this.state = {10 typingFilter: '',11 buttonsFilter: [], 12 clickedCardId: 113 }14 }15 onTypingFilter = (e) => {16 this.setState(() => {17 return {18 typingFilter: e.target.value19 }20 })21 }22 searchUpdate = (items, filter) => {23 if(filter === '') {24 return items25 } else {26 return items.filter(item => item.name.indexOf(filter) > -1)27 }28 }29 toggleActive = (e) => {30 e.target.classList.toggle('active')31 const country = e.target.dataset.country32 if(e.target.classList.contains('active')) {33 this.setState(() => {34 return {35 buttonsFilter: [...this.state.buttonsFilter, country]36 }37 })38 } else {39 this.setState(({buttonsFilter}) => {40 const i = buttonsFilter.indexOf(country)41 return {42 buttonsFilter: buttonsFilter.filter((item, index) => index !== i)43 }44 })45 }46 }47 filterUpdate = (items) => {48 if(this.state.buttonsFilter.length === 0) {49 return items50 }51 const newArr = []52 for (const item of items) {53 for (const el of this.state.buttonsFilter) {54 if(item.country === el) {55 newArr.push(item)56 }57 }58 }59 return newArr60 }61 onShowCard = (id) => {62 this.setState({63 clickedCardId: id64 });65 }66 backToCoffeeShop = () => {67 this.setState({68 clickedCardId: null69 })70 }71 render () {72 const {typingFilter, clickedCardId} = this.state73 const {data} = this.props74 const cards = this.searchUpdate(this.filterUpdate(data), typingFilter).map(item => {75 const {id, ...itemProps} = item76 return <CoffeeShopCard key={id} {...itemProps} onShowCard={() => this.onShowCard(id)}/>77 })78 const clickedCard = this.props.data.find(item => item.id === clickedCardId)79 return (80 <>81 <header className='our-coffee__header' >82 <div className='our-coffee__header__links'>83 <Links color={'white'}/>84 </div>85 <h1 className='our-coffee__header__title'>Our Coffee</h1>86 </header>87 {clickedCardId ? 88 <main>89 <section className='coffee-card__info'>90 <div className='coffee-card__info__wrapper'>91 <div className='coffee-card__info__img'>92 <img src="./images/coffee-card.png" alt="coffee" />93 </div>94 <div className='coffee-card__info__data'>95 <h2 className='coffee-card__info__name'>About it</h2>96 <Decor color={'black'}/>97 <p className='coffee-card__info__country'><b>Country:</b> {clickedCard.country}</p>98 <p className='coffee-card__info__description'><b>Description: </b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>99 <p className='coffee-card__info__price'>Price: {clickedCard.price}$</p>100 </div>101 </div>102 </section>103 <div className='coffee-card__backBtn' onClick={this.backToCoffeeShop}>Back</div>104 </main> : 105 <main>106 <section className='our-coffee__info'>107 <div className="our-coffee__info__img">108 <img src="/images/about-coffee_girl.png" alt="girl" />109 </div>110 <div className='our-coffee__info__block'>111 <h2 className='our-coffee__info__title'>About our beans</h2>112 <Decor color={'black'}/>113 <p className='our-coffee__info__description'>Extremity sweetness difficult behaviour he of. On <br /> disposal of as landlord horrible.</p>114 <p className='our-coffee__info__description'>Afraid at highly months do things on at. Situation <br /> recommend objection do intention <br /> so questions. <br /> As greatly removed calling pleased improve an. <br /> Last ask him cold feel <br /> met spot shy want. Children me laughing we <br /> prospect answered followed. At it went <br /> is song that held help face.</p>115 </div>116 </section>117 <div className="line-block"></div>118 <section className='coffee-shop'>119 <div className="coffee-shop__search">120 <div className='coffee-shop__search__text'>121 <label>Looking for</label>122 <input type="text" placeholder='start typing here...' onChange={this.onTypingFilter}/>123 </div>124 <div className="coffee-shop__search__filters-block">125 <label>Or filter</label>126 <div className='coffee-shop__search__filters'>127 <button className='coffee-shop__search__filter' onClick={this.toggleActive} data-country='Brazil'>Brazil</button>128 <button className='coffee-shop__search__filter' onClick={this.toggleActive} data-country='Kenya'>Kenya</button>129 <button className='coffee-shop__search__filter' onClick={this.toggleActive} data-country='Columbia'>Columbia</button>130 </div>131 </div>132 </div>133 <div className='coffee-shop__cards'>134 {cards}135 </div>136 </section>137 </main>138 }139 <footer className='our-coffee__footer'>140 <div className='our-coffee__footer__links'>141 <Links color={'black'}/>142 </div>143 <Decor color={'black'}/>144 </footer>145 </>146 )147 }148}...
Pokedex.test.js
Source:Pokedex.test.js
1import React from 'react';2import { screen } from '@testing-library/react';3import userEvent from '@testing-library/user-event';4import renderWithRouter from '../renderWithRouter';5import App from '../App';6describe('Teste o componente <Pokedex.js />', () => {7 it('Teste se página contém um heading h2 com o texto Encountered pokémons.', () => {8 renderWithRouter(<App />);9 const headingH2 = screen.getByRole('heading', {10 name: /encountered pokémons/i,11 level: 2,12 });13 expect(headingH2).toBeInTheDocument();14 });15 it('Exibir o próximo Pokémon da lista quando o botão Próximo pokémon é clicado', () => {16 renderWithRouter(<App />);17 const proxPokemon = screen.getByRole('button', {18 name: /Próximo pokémon/i,19 });20 userEvent.click(proxPokemon);21 const namePokemon = screen.getByTestId('pokemon-name');22 expect(namePokemon).toHaveTextContent('Charmander');23 userEvent.click(proxPokemon);24 const nextPokemon = screen.getByTestId('pokemon-name');25 expect(nextPokemon).toHaveTextContent('Caterpie');26 });27 it('Teste se a Pokédex tem os botões de filtro.', () => {28 renderWithRouter(<App />);29 const typePokemon = screen.getByRole('button', {30 name: /electric/i,31 });32 userEvent.click(typePokemon);33 const typePokemonFilter = screen.getByTestId('pokemon-type');34 expect(typePokemonFilter).toHaveTextContent('Electric');35 });36 it('Teste se a Pokédex contém um botão para resetar o filtro', () => {37 renderWithRouter(<App />);38 const buttonReset = screen.getByRole('button', {39 name: /all/i,40 });41 userEvent.click(buttonReset);42 const PokemonReset = screen.getByTestId('pokemon-type');43 expect(PokemonReset).toHaveTextContent('Electric');44 });45 it('Teste se é criado, um botão de filtro para cada tipo de Pokémon', () => {46 renderWithRouter(<App />);47 const buttonsFilter = screen.getAllByTestId('pokemon-type-button');48 expect(buttonsFilter[0]).toHaveTextContent('Electric');49 expect(buttonsFilter[1]).toHaveTextContent('Fire');50 expect(buttonsFilter[2]).toHaveTextContent('Bug');51 expect(buttonsFilter[3]).toHaveTextContent('Poison');52 expect(buttonsFilter[4]).toHaveTextContent('Psychic');53 expect(buttonsFilter[5]).toHaveTextContent('Normal');54 expect(buttonsFilter[6]).toHaveTextContent('Dragon');55 });...
FiltersDom.js
Source:FiltersDom.js
1import React from 'react';2import styles from './Filters.module.scss';3import Dropdown from '../Dropdown/Dropdown';4import FilterCurrent from '../FilterCurrent/FilterCurrent';5export const FiltersDom = ({ buttonsFilter, dropdowns, isMobile }) => {6 if (!isMobile) {7 return (8 <div className={styles.wrapper}>9 <div className={styles.title}>10 ФилÑÑÑÑ:11 </div>12 <div className={styles.currentFilters}>13 <FilterCurrent />14 </div>15 <div className={styles.dropdownsWrap}>16 {17 dropdowns.map((dropdown, j) => {18 if (!buttonsFilter[dropdown.type]) return <div key={j}></div>19 return (20 <div className={styles.dropdown} key={j}>21 <Dropdown dropdown={dropdown} items={buttonsFilter[dropdown.type]} />22 </div>23 )24 })25 }26 </div>27 </div>28 )29 } else if (isMobile) {30 return (31 <div className={styles.wrapper}>32 <div className={styles.dropdownsMobile}>33 <div className={styles.dropdownsWrap}>34 {35 dropdowns.map((dropdown, j) => {36 const dropdownType = dropdown.type;37 if (!buttonsFilter[dropdownType]) return <div key={j}></div>38 return (39 <div className={styles.dropdown} key={j}>40 <Dropdown dropdown={dropdown} items={buttonsFilter[dropdown.type]} />41 </div>42 )43 })44 }45 </div>46 {<div className={styles.currentFilters}>47 <FilterCurrent />48 </div>}49 </div>50 </div>51 )52 }...
Using AI Code Generation
1module.exports = async (page, scenario) => {2 const hoverSelector = scenario.hoverSelector;3 const clickSelector = scenario.clickSelector;4 const delay = scenario.delay || 0;5 const misMatchThreshold = scenario.misMatchThreshold || 0.1;6 const requireSameDimensions = scenario.requireSameDimensions || true;7 const hideSelectors = scenario.hideSelectors || [];8 const removeSelectors = scenario.removeSelectors || [];9 const hoverSelectors = scenario.hoverSelectors || [];10 const clickSelectors = scenario.clickSelectors || [];
Using AI Code Generation
1module.exports = async (page, scenario) => {2 const hoverSelector = scenario.hoverSelector;3 const clickSelector = scenario.clickSelector;4 const keyPress = scenario.keyPress;5 const postInteractionWaitSelector = scenario.postInteractionWaitSelector;6 const postInteractionWaitSelectorTimeout = scenario.postInteractionWaitSelectorTimeout;7 const postInteractionWaitTimeout = scenario.postInteractionWaitTimeout;8 const postInteractionWaitSelectorTimeoutSelector = scenario.postInteractionWaitSelectorTimeoutSelector;9 const postInteractionWaitSelectorTimeoutSelectorTimeout = scenario.postInteractionWaitSelectorTimeoutSelectorTimeout;10 const postInteractionWaitSelectorTimeoutSelectorTimeoutSelector = scenario.postInteractionWaitSelectorTimeoutSelectorTimeoutSelector;11 const postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeout = scenario.postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeout;12 const postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeoutSelector = scenario.postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeoutSelector;13 const postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeoutSelectorTimeout = scenario.postInteractionWaitSelectorTimeoutSelectorTimeoutSelectorTimeoutSelectorTimeout;14 if (hoverSelector) {15 await page.waitForSelector(hoverSelector);16 await page.hover(hoverSelector);17 }18 if (clickSelector) {19 await page.waitForSelector(clickSelector);20 await page.click(clickSelector);21 }22 if (keyPress) {23 await page.keyboard.press(keyPress);24 }25 if (postInteractionWait) {26 await page.waitFor(postInteractionWait);27 }28 if (postInteractionWaitSelector) {29 await page.waitForSelector(postInteractionWaitSelector, { timeout: postInteractionWaitTimeout || 30000 });30 }31 if (postInteractionWaitSelectorTimeout) {32 await page.waitForSelector(postInteractionWaitSelectorTimeout, { timeout: postInteractionWaitSelectorTimeoutTimeout || 30000 });33 }34 if (postInteractionWaitSelectorTimeoutSelector) {35 await page.waitForSelector(postInteractionWaitSelectorTimeoutSelector, { timeout: postInteractionWaitSelectorTimeoutSelectorTimeout || 30000 });36 }37 if (postInteractionWaitSelectorTimeoutSelectorTimeout) {38 await page.waitForSelector(postInteractionWaitSelectorTimeoutSelectorTimeout, { timeout: postInteractionWaitSelectorTimeoutSelectorTimeoutTimeout || 30000 });39 }40 if (postInteractionWaitSelectorTimeoutSelectorTimeoutSelector) {41 await page.waitForSelector(postInteractionWaitSelectorTimeoutSelectorTimeoutSelector, {
Using AI Code Generation
1module.exports = async (page, scenario) => {2 const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;3 const clickSelector = scenario.clickSelectors || scenario.clickSelector;4 const keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;5 const keyPress = scenario.keyPress;6 const scrollToSelector = scenario.scrollToSelector;7 const postInteractionWaitSelector = scenario.postInteractionWaitSelector;8 const selectSelector = scenario.selectSelector;9 const selectSelectorOption = scenario.selectSelectorOption;10 const clickSelectorButton = scenario.clickSelectorButton;11 const clickSelectorButtonOption = scenario.clickSelectorButtonOption;12 const clickSelectorButtonOption2 = scenario.clickSelectorButtonOption2;13 const clickSelectorButtonOption3 = scenario.clickSelectorButtonOption3;14 const clickSelectorButtonOption4 = scenario.clickSelectorButtonOption4;15 const clickSelectorButtonOption5 = scenario.clickSelectorButtonOption5;16 const clickSelectorButtonOption6 = scenario.clickSelectorButtonOption6;17 const clickSelectorButtonOption7 = scenario.clickSelectorButtonOption7;18 const clickSelectorButtonOption8 = scenario.clickSelectorButtonOption8;19 const clickSelectorButtonOption9 = scenario.clickSelectorButtonOption9;20 const clickSelectorButtonOption10 = scenario.clickSelectorButtonOption10;21 const clickSelectorButtonOption11 = scenario.clickSelectorButtonOption11;22 const clickSelectorButtonOption12 = scenario.clickSelectorButtonOption12;23 const clickSelectorButtonOption13 = scenario.clickSelectorButtonOption13;24 const clickSelectorButtonOption14 = scenario.clickSelectorButtonOption14;25 const clickSelectorButtonOption15 = scenario.clickSelectorButtonOption15;26 const clickSelectorButtonOption16 = scenario.clickSelectorButtonOption16;27 const clickSelectorButtonOption17 = scenario.clickSelectorButtonOption17;28 const clickSelectorButtonOption18 = scenario.clickSelectorButtonOption18;29 const clickSelectorButtonOption19 = scenario.clickSelectorButtonOption19;30 const clickSelectorButtonOption20 = scenario.clickSelectorButtonOption20;31 const clickSelectorButtonOption21 = scenario.clickSelectorButtonOption21;32 const clickSelectorButtonOption22 = scenario.clickSelectorButtonOption22;33 const clickSelectorButtonOption23 = scenario.clickSelectorButtonOption23;34 const clickSelectorButtonOption24 = scenario.clickSelectorButtonOption24;
Using AI Code Generation
1module.exports = async (page, scenario) => {2 const hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;3 const clickSelector = scenario.clickSelectors || scenario.clickSelector;4 if (hoverSelector) {5 await page.waitForSelector(hoverSelector);6 await page.hover(hoverSelector);7 }8 if (clickSelector) {9 await page.waitForSelector(clickSelector);10 await page.click(clickSelector);11 }12 if (postInteractionWait) {13 await page.waitFor(postInteractionWait);14 }15};
Using AI Code Generation
1module.exports = async (page, scenario, vp) => {2 await require('./clickAndHoverHelper')(page, scenario);3 const readySelector = 'body';4 await page.waitForSelector(readySelector);5 await page.waitFor(1000);6 await page.evaluate(() => {7 const selector = 'body';8 const el = document.querySelector(selector);9 el.style.backgroundColor = 'white';10 });11 const buttons = 'button';12 await page.waitForSelector(buttons);13 await page.evaluate(() => {14 const buttons = document.querySelectorAll('button');15 buttons.forEach((button) => {16 button.click();17 });18 });19};
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 backstopjs 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?
