How to use selectField method in backstopjs

Best JavaScript code snippet using backstopjs

mdl-selectfield.js

Source:mdl-selectfield.js

1(function() {2  'use strict';3  /**4   * Class constructor for Select field MDL component.5   * Implements custom MDL component design pattern not defined yet.6   *7   * @constructor8   * @param {HTMLElement} element The element that will be upgraded.9   */10  var MaterialSelectfield = function MaterialSelectfield(element) {11    this.element_ = element;12    // Initialize instance.13    this.init();14  };15  window['MaterialSelectfield'] = MaterialSelectfield;16  MaterialSelectfield.prototype.Constant_ = {17    // None for now18  };19  MaterialSelectfield.prototype.CssClasses_ = {20    LABEL: 'mdl-selectfield__label',21    SELECT: 'mdl-selectfield__select',22    IS_DIRTY: 'is-dirty',23    IS_FOCUSED: 'is-focused',24    IS_DISABLED: 'is-disabled',25    IS_INVALID: 'is-invalid',26    IS_UPGRADED: 'is-upgraded'27  };28  /**29   * Handle focus.30   *31   * @param {Event} event The event that fired.32   * @private33   */34  MaterialSelectfield.prototype.onFocus_ = function(event) {35    this.element_.classList.add(this.CssClasses_.IS_FOCUSED);36  };37  /**38   * Handle lost focus.39   *40   * @param {Event} event The event that fired.41   * @private42   */43  MaterialSelectfield.prototype.onBlur_ = function(event) {44    this.element_.classList.remove(this.CssClasses_.IS_FOCUSED);45  };46  /**47   * Handle reset event from outside.48   *49   * @param {Event} event The event that fired.50   * @private51   */52  MaterialSelectfield.prototype.onReset_ = function(event) {53    this.updateClasses_();54  };55  /**56   * Handle class updates.57   *58   * @private59   */60  MaterialSelectfield.prototype.updateClasses_ = function() {61    this.checkDisabled();62    this.checkValidity();63    this.checkDirty();64  };65  // Public methods.66  /**67   * Check the disabled state and update field accordingly.68   *69   * @public70   */71  MaterialSelectfield.prototype.checkDisabled = function() {72    if (this.select_.disabled) {73      this.element_.classList.add(this.CssClasses_.IS_DISABLED);74    } else {75      this.element_.classList.remove(this.CssClasses_.IS_DISABLED);76    }77  };78  MaterialSelectfield.prototype['checkDisabled'] = MaterialSelectfield.prototype.checkDisabled;79  /**80   * Check the validity state and update field accordingly.81   *82   * @public83   */84  MaterialSelectfield.prototype.checkValidity = function() {85    if (this.select_.validity.valid) {86      this.element_.classList.remove(this.CssClasses_.IS_INVALID);87    } else {88      this.element_.classList.add(this.CssClasses_.IS_INVALID);89    }90  };91  MaterialSelectfield.prototype['checkValidity'] = MaterialSelectfield.prototype.checkValidity;92  /**93   * Check the dirty state and update field accordingly.94   *95   * @public96   */97  MaterialSelectfield.prototype.checkDirty = function() {98    if (this.select_.value && this.select_.value.length > 0) {99      this.element_.classList.add(this.CssClasses_.IS_DIRTY);100    } else {101      this.element_.classList.remove(this.CssClasses_.IS_DIRTY);102    }103  };104  MaterialSelectfield.prototype['checkDirty'] = MaterialSelectfield.prototype.checkDirty;105  /**106   * Enable select field.107   *108   * @public109   */110  MaterialSelectfield.prototype.disable = function() {111    this.select_.disabled = true;112    this.updateClasses_();113  };114  MaterialSelectfield.prototype['disable'] = MaterialSelectfield.prototype.disable;115  /**116   * Enable select field.117   *118   * @public119   */120  MaterialSelectfield.prototype.enable = function() {121    this.select_.disabled = false;122    this.updateClasses_();123  };124  MaterialSelectfield.prototype['enable'] = MaterialSelectfield.prototype.enable;125  /**126   * Update select field value.127   *128   * @param {string} value The value to which to set the control (optional).129   * @public130   */131  MaterialSelectfield.prototype.change = function(value) {132    if (value) {133      this.select_.value = value;134    }135    this.updateClasses_();136  };137  MaterialSelectfield.prototype['change'] = MaterialSelectfield.prototype.change;138  /**139   * Initialize element.140   */141  MaterialSelectfield.prototype.init = function() {142    if (this.element_) {143      this.label_ = this.element_.querySelector('.' + this.CssClasses_.LABEL);144      this.select_ = this.element_.querySelector('.' + this.CssClasses_.SELECT);145      if (this.select_) {146        this.boundUpdateClassesHandler = this.updateClasses_.bind(this);147        this.boundFocusHandler = this.onFocus_.bind(this);148        this.boundBlurHandler = this.onBlur_.bind(this);149        this.boundResetHandler = this.onReset_.bind(this);150        this.select_.addEventListener('change', this.boundUpdateClassesHandler);151        this.select_.addEventListener('focus', this.boundFocusHandler);152        this.select_.addEventListener('blur', this.boundBlurHandler);153        this.select_.addEventListener('reset', this.boundResetHandler);154        var invalid = this.element_.classList155          .contains(this.CssClasses_.IS_INVALID);156        this.updateClasses_();157        this.element_.classList.add(this.CssClasses_.IS_UPGRADED);158        if (invalid) {159          this.element_.classList.add(this.CssClasses_.IS_INVALID);160        }161      }162    }163  };164  /**165   * Downgrade the component166   *167   * @private168   */169  MaterialSelectfield.prototype.mdlDowngrade_ = function() {170    this.select_.removeEventListener('change', this.boundUpdateClassesHandler);171    this.select_.removeEventListener('focus', this.boundFocusHandler);172    this.select_.removeEventListener('blur', this.boundBlurHandler);173    this.select_.removeEventListener('reset', this.boundResetHandler);174  };175  // The component registers itself. It can assume componentHandler is available176  // in the global scope.177  componentHandler.register({178    constructor: MaterialSelectfield,179    classAsString: 'MaterialSelectfield',180    cssClass: 'mdl-js-selectfield',181    widget: true182  });...

script.js

Source:script.js

1(function($){2    $(document).ready(function($){3        var xhr ,timeout;4        $('body').addClass('woocommerce');5        $('.ajaxsearchform').on('submit',function(e){6            e.preventDefault();7        });8        function get_div_id() {9            var div_id = dokanLiveSearch.themeTags[dokanLiveSearch.currentTheme];10            if ( div_id === undefined ) {11                return '#content';12            }13            return div_id;14        }15        $('body').on('keyup', '.dokan-ajax-search-textfield', function(evt){16            evt.preventDefault();17            var self = $(this);18            var nurl = self.closest('form').attr('action');19            var textfield = self.val();20            var selectfield = self.closest('.ajaxsearchform').find('.dokan-ajax-search-category').val();21            var ordershort = $('.woocommerce-ordering .orderby').val();22            if(evt.type != 'change'){23                var charCode = (evt.which) ? evt.which : event.keyCode;24            }25            if (charCode > 64 && charCode < 91 || charCode > 96 && charCode < 123 || charCode > 47 && charCode < 58 || charCode == 8 || charCode == 127 ) {26                for_onkeyup_onchange(evt,self, nurl, textfield, selectfield, ordershort);27            }28        });29        $('body').on('change', '.dokan-ajax-search-category', function(e) {30            e.preventDefault();31            var self = $(this);32            var nurl = self.closest('form').attr('action');33            var textfield = self.closest('.ajaxsearchform').find('.dokan-ajax-search-textfield').val();34            var selectfield = self.val();35            var ordershort = $('.woocommerce-ordering .orderby').val();36            for_onkeyup_onchange(e, self, nurl, textfield, selectfield, ordershort );37        });38        function for_onkeyup_onchange( evt, self, nurl, textfield, selectfield, ordershort ) {39            if ( ! ordershort ){40                ordershort = '';41            }42            if(selectfield == 'All' && evt.type == 'change' && ordershort == 'menu_order'){43                var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product';44                loading_get_request( url, textfield, selectfield );45            } else if(selectfield == 'All' && ordershort == 'menu_order') {46                var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product';47                loading_get_request( url, textfield, selectfield );48            } else if(selectfield == 'All' && ordershort != 'menu_order') {49                var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&orderby='+ordershort;50                loading_get_request( url, textfield, selectfield );51            }else if(selectfield != 'All' && ordershort == 'menu_order'){52                var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&product_cat='+ selectfield;53                loading_get_request( url, textfield, selectfield );54            } else {55                var url = nurl +'?s='+ textfield.replace(/\s/g,"+")+'&post_type=product&product_cat='+ selectfield + '&orderby=' + ordershort;56                loading_get_request( url, textfield, selectfield );57            }58        }59        function loading_get_request( url, textfield, selectfield ){60            var div_id = get_div_id();61            $(div_id).append('<div id="loading"><img src="' + dokanLiveSearch.loading_img + '" atr="Loding..."/></div>');62            $(div_id).css({'opacity':0.3,'position':'relative'});63            $('#loading').show();64            clearTimeout(timeout);65            if(xhr) {66            xhr.abort();67            }68            timeout = setTimeout(function(){69             xhr = get_ajax_request( url, textfield, selectfield );70            },150);71        }72        function get_ajax_request( url, textfield, selectfield ) {73            xhr = $.get(url, function(resp, status) {74                var dom = $(resp).find(get_div_id()).html();75                $('.dokan-ajax-search-textfield').val( textfield );76                $('.dokan-ajax-search-category').val( selectfield );77                $(get_div_id()).html(dom);78                $('#loading').hide();79                $(get_div_id()).css({'opacity':1,'position':'auto'});80                $('.woocommerce-ordering').on('change','.orderby',function(e){81                    e.preventDefault();82                    var self = $(this);83                    var nurl = $('.ajaxsearchform').attr('action');84                    var textfield = $('.dokan-ajax-search-textfield').val();85                    var selectfield = $('.dokan-ajax-search-category').val();86                    var ordershort = self.val();87                    for_onkeyup_onchange(e, self, nurl, textfield, selectfield, ordershort );88                });89            });90            return xhr;91        }92    });...

SelectField.spec.js

Source:SelectField.spec.js

1import React from 'react';2import assert from 'assert';3import { shallow } from 'enzyme';4import { SelectField } from './SelectField';5describe('<SelectField />', () => {6    const defaultProps = {7        source: 'foo',8        choices: [{ id: 0, name: 'hello' }, { id: 1, name: 'world' }],9        translate: x => x,10    };11    it('should return null when the record is not set', () =>12        assert.equal(shallow(<SelectField {...defaultProps} />).html(), null));13    it('should return null when the record has no value for the source', () =>14        assert.equal(15            shallow(<SelectField {...defaultProps} record={{}} />).html(),16            null17        ));18    it('should return null when the record has a value for the source not in the choices', () =>19        assert.equal(20            shallow(21                <SelectField {...defaultProps} record={{ foo: 2 }} />22            ).html(),23            null24        ));25    it('should render the choice', () => {26        const wrapper = shallow(27            <SelectField {...defaultProps} record={{ foo: 0 }} />28        );29        const chipElement = wrapper.find('WithStyles(Typography)');30        assert.equal(chipElement.children().text(), 'hello');31    });32    it('should use custom className', () => {33        const wrapper = shallow(34            <SelectField35                {...defaultProps}36                record={{ foo: 1 }}37                elStyle={{ margin: 1 }}38                className="foo"39            />40        );41        const chipElement = wrapper.find('WithStyles(Typography)');42        assert.deepEqual(chipElement.prop('className'), 'foo');43    });44    it('should handle deep fields', () => {45        const wrapper = shallow(46            <SelectField47                {...defaultProps}48                record={{ foo: { bar: 0 } }}49                source="foo.bar"50            />51        );52        const chipElement = wrapper.find('WithStyles(Typography)');53        assert.equal(chipElement.children().text(), 'hello');54    });55    it('should use optionValue as value identifier', () => {56        const wrapper = shallow(57            <SelectField58                {...defaultProps}59                record={{ foo: 0 }}60                optionValue="foobar"61                choices={[{ foobar: 0, name: 'hello' }]}62            />63        );64        const chipElement = wrapper.find('WithStyles(Typography)');65        assert.equal(chipElement.children().text(), 'hello');66    });67    it('should use optionText with a string value as text identifier', () => {68        const wrapper = shallow(69            <SelectField70                {...defaultProps}71                record={{ foo: 0 }}72                optionText="foobar"73                choices={[{ id: 0, foobar: 'hello' }]}74            />75        );76        const chipElement = wrapper.find('WithStyles(Typography)');77        assert.equal(chipElement.children().text(), 'hello');78    });79    it('should use optionText with a function value as text identifier', () => {80        const wrapper = shallow(81            <SelectField82                {...defaultProps}83                record={{ foo: 0 }}84                optionText={choice => choice.foobar}85                choices={[{ id: 0, foobar: 'hello' }]}86            />87        );88        const chipElement = wrapper.find('WithStyles(Typography)');89        assert.equal(chipElement.children().text(), 'hello');90    });91    it('should use optionText with an element value as text identifier', () => {92        const Foobar = ({ record }) => <span>{record.foobar}</span>;93        const wrapper = shallow(94            <SelectField95                {...defaultProps}96                record={{ foo: 0 }}97                optionText={<Foobar />}98                choices={[{ id: 0, foobar: 'hello' }]}99            />100        );101        const chipElement = wrapper.find('Foobar');102        assert.deepEqual(chipElement.prop('record'), {103            id: 0,104            foobar: 'hello',105        });106    });107    it('should translate the choice by default', () => {108        const wrapper = shallow(109            <SelectField110                {...defaultProps}111                record={{ foo: 0 }}112                translate={x => `**${x}**`}113            />114        );115        const chipElement = wrapper.find('WithStyles(Typography)');116        assert.equal(chipElement.children().text(), '**hello**');117    });118    it('should not translate the choice if translateChoice is false', () => {119        const wrapper = shallow(120            <SelectField121                {...defaultProps}122                record={{ foo: 0 }}123                translate={x => `**${x}**`}124                translateChoice={false}125            />126        );127        const chipElement = wrapper.find('WithStyles(Typography)');128        assert.equal(chipElement.children().text(), 'hello');129    });...

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./clickAndHoverHelper')(page, scenario, vp);3  console.log('SCENARIO > ' + scenario.label);4  if (scenario.selectors) {5    for (const selector of scenario.selectors) {6      await page.waitForSelector(selector);7      await page.select(selector, scenario.selectorValue);8    }9  }10  await page.waitFor(1000);11};

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./clickAndHoverHelper')(page, scenario, vp);3  await page.waitForSelector('select');4  await page.select('select', 'value');5};6module.exports = async (page, scenario, vp) => {7  console.log('SCENARIO > ' + scenario.label);8  if (scenario.clickSelector) {9    await page.waitForSelector(scenario.clickSelector);10    await page.click(scenario.clickSelector);11  }12  if (scenario.hoverSelector) {13    await page.waitForSelector(scenario.hoverSelector);14    await page.hover(scenario.hoverSelector);15  }16  if (scenario.postInteractionWait) {17    await page.waitFor(scenario.postInteractionWait);18  }19};20{21    {22    }23    {24    }25  "paths": {26  },27  "engineOptions": {28  },

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./selectAndSetDate')(page, scenario, vp);3  await require('./selectAndSetDate2')(page, scenario, vp);4  await require('./selectAndSetDate3')(page, scenario, vp);5  await require('./selectAndSetDate4')(page, scenario, vp);6  await require('./selectAndSetDate5')(page, scenario, vp);7  await require('./selectAndSetDate6')(page, scenario, vp);8  await require('./selectAndSetDate7')(page, scenario, vp);9  await require('./selectAndSetDate8')(page, scenario, vp);10  await require('./selectAndSetDate9')(page, scenario, vp);11  await require('./selectAndSetDate10')(page, scenario, vp);12  await require('./selectAndSetDate11')(page, scenario, vp);13  await require('./selectAndSetDate12')(page, scenario, vp);14  await require('./selectAndSetDate13')(page, scenario, vp);15  await require('./selectAndSetDate14')(page, scenario, vp);16  await require('./selectAndSetDate15')(page, scenario, vp);17  await require('./selectAndSetDate16')(page, scenario, vp);18  await require('./selectAndSetDate17')(page, scenario, vp);19  await require('./selectAndSetDate18')(page, scenario, vp);20  await require('./selectAndSetDate19')(page, scenario, vp);21  await require('./selectAndSetDate20')(page, scenario, vp);22  await require('./selectAndSetDate21')(page, scenario, vp);23  await require('./selectAndSetDate22')(page, scenario, vp);24  await require('./selectAndSetDate23')(page, scenario, vp);25  await require('./selectAndSetDate24')(page, scenario, vp);26  await require('./selectAndSetDate25')(page, scenario, vp);27  await require('./selectAndSetDate26')(page, scenario, vp);28  await require('./selectAndSetDate27')(page, scenario, vp);29  await require('./selectAndSetDate28')(page, scenario, vp);30  await require('./selectAndSetDate29')(page, scenario, vp);31  await require('./selectAndSetDate30')(page, scenario, vp);32  await require('./selectAnd

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./clickAndHoverHelper')(page, scenario, vp);3  await page.evaluate(() => {4    document.querySelector('.selectField').click();5  });6};

Using AI Code Generation

1module.exports = async (page, scenario) => {2  const select = await page.$(scenario.selectors[0]);3  await select.select(scenario.selectors[1]);4};5{6    {7    }8}9- **selectors** - Array of CSS selectors to be used to capture a screenshot. (required)10- **selectorExpansion** - Boolean to enable/disable the selector expansion feature. (default: true)11- **readyEvent** - Event to wait for before capturing a screenshot. (default: 'DOMContentLoaded')12- **readySelector** - CSS selector to wait for before capturing a screenshot. (default: null)13- **delay** - Number of milliseconds to wait before capturing a screenshot. (default: 0)14- **misMatchThreshold** - Number between 0 and 100 that specifies the percentage of pixels that can differ before BackstopJS reports a failure. (default: 0.1)15- **requireSameDimensions** - Boolean to require that the reference and test screenshots have the same dimensions. (default: false)16- **viewports** - Array of viewports to capture screenshots of. (required)17- **onReadyScriptTimeout** - The maximum amount of time in milliseconds to wait for onReadyScript to complete. (default: 10000)18- **onReadyScriptWaitForSelectorTimeout** - The maximum amount of time in milliseconds to wait for onReadyScriptWaitForSelector to be present in the DOM. (default: 10000)19- **onReadyScriptWaitForTimeout** - The maximum amount of time in milliseconds to wait for onReadyScript to complete. (default: 10000)

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./clickAndHoverHelper')(page, scenario, vp);3  await page.waitForSelector('#edit-field-geographic-coverage-und-0-value');4  await page.select('#edit-field-geographic-coverage-und-0-value', 'Africa');5  await page.waitFor(500);6};

Using AI Code Generation

1module.exports = async (page, scenario, vp) => {2  await require('./clickAndHoverHelper')(page, scenario, vp);3  await page.evaluate(function () {4    const select = document.querySelector('#edit-field-activity-type-und');5    select.selectedIndex = 1;6    select.dispatchEvent(new Event('change'));7  });8  await require('./clickAndHoverHelper')(page, scenario, vp);9  await page.evaluate(function () {10    const select = document.querySelector('#edit-field-activity-type-und');11    select.selectedIndex = 2;12    select.dispatchEvent(new Event('change'));13  });14  await require('./clickAndHoverHelper')(page, scenario, vp);15  await page.evaluate(function () {16    const select = document.querySelector('#edit-field-activity-type-und');17    select.selectedIndex = 3;18    select.dispatchEvent(new Event('change'));19  });20  await require('./clickAndHoverHelper')(page, scenario, vp);21  await page.evaluate(function () {22    const select = document.querySelector('#edit-field-activity-type-und');23    select.selectedIndex = 4;24    select.dispatchEvent(new Event('change'));25  });26  await require('./clickAndHoverHelper')(page, scenario, vp);27  await page.evaluate(function () {28    const select = document.querySelector('#edit-field-activity-type-und');29    select.selectedIndex = 5;30    select.dispatchEvent(new Event('change'));31  });32  await require('./clickAndHoverHelper')(page, scenario, vp);33  await page.evaluate(function () {34    const select = document.querySelector('#edit-field-activity-type-und');35    select.selectedIndex = 6;36    select.dispatchEvent(new Event('change'));37  });38  await require('./clickAndHoverHelper')(page, scenario, vp);39  await page.evaluate(function () {40    const select = document.querySelector('#edit-field-activity-type-und');41    select.selectedIndex = 7;42    select.dispatchEvent(new Event('change'));43  });44  await require('./clickAndHoverHelper')(page, scenario, vp);45  await page.evaluate(function () {46    const select = document.querySelector('#edit-field-activity-type-und');47    select.selectedIndex = 8;48    select.dispatchEvent(new Event('change'));49  });50};

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.