Best JavaScript code snippet using storybook-root
cam-widget-search.spec.js
Source:cam-widget-search.spec.js
1/*2 * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH3 * under one or more contributor license agreements. See the NOTICE file4 * distributed with this work for additional information regarding copyright5 * ownership. Camunda licenses this file to you under the Apache License,6 * Version 2.0; you may not use this file except in compliance with the License.7 * You may obtain a copy of the License at8 *9 * http://www.apache.org/licenses/LICENSE-2.010 *11 * Unless required by applicable law or agreed to in writing, software12 * distributed under the License is distributed on an "AS IS" BASIS,13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.14 * See the License for the specific language governing permissions and15 * limitations under the License.16 */17/* jshint node: true, unused: false */18/* global __dirname: false, describe: false, before: false, beforeEach: false, it: false,19 browser: false, element: false, expect: false, by: false, protractor: false */20'use strict';21var path = require('path');22var projectRoot = path.resolve(__dirname, '../../../../');23var pkg = require(path.join(projectRoot, 'package.json'));24var pageUrl = 'http://localhost:' + pkg.gruntConfig.connectPort +25 '/lib/widgets/search/test/cam-widget-search.spec.html';26var page = require('./cam-widget-search.page.js');27function parseQS(str) {28 return (function(a) {29 if (a === '') return {};30 var b = {};31 for (var i = 0; i < a.length; ++i) {32 var p = a[i].split('=');33 if (p.length != 2) continue;34 b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, ' '));35 }36 return b;37 })(str.split('&'));38}39function clearPills(example) {40 if (!example) return;41 example.node.all(by.css('.remove-search')).then(function(els) {42 els.forEach(function(el) {43 el.click();44 });45 });46}47describe('Search Widget', function() {48 beforeEach(function() {49 browser.get(pageUrl +'#example1');50 });51 // this is a problem encounter on IE1152 it('should not show a dropdown at initialization', function() {53 expect(page.example('example1').inputDropdown().isDisplayed()).to.eventually.eql(false);54 });55 it('should show dropdown on click', function() {56 page.example('example1').searchInput().click();57 expect(page.example('example1').inputDropdown().isDisplayed()).to.eventually.eql(true);58 });59 it('should create search pill on select in dropdown', function() {60 page.example('example1').searchInput().click();61 page.example('example1').inputDropdownOption(2).click();62 expect(page.example('example1').searchPills().count()).to.eventually.eql(1);63 });64 it('should focus the value input of a newly created search pill', function() {65 page.example('example1').searchInput().click();66 page.example('example1').inputDropdownOption(0).click();67 expect(page.example('example1').searchPill(0).valueField().inputField().isPresent()).to.eventually.eql(true);68 browser.driver.switchTo().activeElement().getAttribute('ng-model').then(function(val) {69 expect(page.example('example1').searchPill(0).valueField().inputField().getAttribute('ng-model')).to.eventually.eql(val);70 });71 });72 it('should focus the value input of a newly created search pill', function() {73 page.example('example1').searchInput().click();74 page.example('example1').inputDropdownOption(2).click();75 expect(page.example('example1').searchPill(0).nameField().inputField().isPresent()).to.eventually.eql(true);76 browser.driver.switchTo().activeElement().getAttribute('ng-model').then(function(val) {77 expect(page.example('example1').searchPill(0).nameField().inputField().getAttribute('ng-model')).to.eventually.eql(val);78 });79 });80 it('should select the next invalid search pill on enter', function() {81 page.example('example1').searchInput().click();82 page.example('example1').inputDropdownOption(0).click();83 page.example('example1').searchInput().click();84 page.example('example1').inputDropdownOption(0).click();85 page.example('example1').searchPill(1).valueField().type('nowValid', protractor.Key.ENTER);86 expect(page.example('example1').searchPill(0).valueField().inputField().isPresent()).to.eventually.eql(true);87 browser.driver.switchTo().activeElement().getAttribute('ng-model').then(function(val) {88 expect(page.example('example1').searchPill(0).valueField().inputField().getAttribute('ng-model')).to.eventually.eql(val);89 });90 });91 it('should return valid and all searches', function() {92 page.example('example1').searchInput().click();93 page.example('example1').inputDropdownOption(0).click();94 page.example('example1').searchInput().click();95 page.example('example1').inputDropdownOption(0).click();96 page.example('example1').searchPill(1).valueField().type('nowValid', protractor.Key.ENTER);97 expect(page.example('example1').allSearchesCount()).to.eventually.eql('2');98 expect(page.example('example1').validSearchesCount()).to.eventually.eql('1');99 });100 it('should store valid searches in the URL', function() {101 page.example('example1').searchInput().click();102 page.example('example1').inputDropdownOption(0).click();103 page.example('example1').searchPill(0).valueField().type('nowValid', protractor.Key.ENTER);104 browser.getCurrentUrl().then(function(url) {105 browser.get(url);106 expect(page.example('example1').searchPills().count()).to.eventually.eql(1);107 });108 });109 it('should adjust searches on changes in the URL', function() {110 page.example('example1').searchInput().click();111 page.example('example1').inputDropdownOption(0).click();112 page.example('example1').searchPill(0).valueField().type('nowValid', protractor.Key.ENTER);113 browser.getCurrentUrl().then(function(url) {114 expect(url).to.contain('nowValid');115 var location = url.substr(url.indexOf('#') + 2);116 location = location.replace('nowValid', 'anotherString');117 browser.setLocation(location).then(function() {118 expect(page.example('example1').searchPill(0).valueField().text()).to.eventually.eql('anotherString');119 });120 });121 });122 it('should retail invalid searches when adjusting searches on changes in the URL', function() {123 page.example('example1').searchInput().click();124 page.example('example1').inputDropdownOption(0).click();125 page.example('example1').searchPill(0).valueField().type('nowValid', protractor.Key.ENTER);126 page.example('example1').searchInput().click();127 page.example('example1').inputDropdownOption(0).click();128 browser.getCurrentUrl().then(function(url) {129 expect(url).to.contain('nowValid');130 var location = url.substr(url.indexOf('#') + 2);131 location = location.replace('nowValid', 'anotherString');132 browser.setLocation(location).then(function() {133 expect(page.example('example1').searchPills().count()).to.eventually.eql(2);134 });135 });136 });137 it('should use default type', function() {138 var input = 'I am ignoring the typeahead';139 page.example('example1').searchInput().click();140 page.example('example1').searchInput().sendKeys(input, protractor.Key.ENTER);141 expect(page.example('example1').searchPill(0).typeField().text()).to.eventually.eql('Predefined Operators');142 expect(page.example('example1').searchPill(0).valueField().text()).to.eventually.eql(input);143 });144 it('should display operators depending on value type', function() {145 page.example('example1').searchInput().click();146 page.example('example1').inputDropdownOption(2).click();147 var pill = page.example('example1').searchPill(0);148 // boolean149 pill.valueField().click();150 pill.valueField().type('true', protractor.Key.ENTER);151 expect(pill.operatorField().isPresent()).to.eventually.eql(true);152 expect(pill.operatorField().text()).to.eventually.eql('=');153 // number154 pill.valueField().click();155 pill.valueField().type('4', protractor.Key.ENTER);156 pill.operatorField().click();157 expect(pill.operatorField().dropdownOptionCount()).to.eventually.eql(4);158 // undefined159 pill.valueField().click();160 pill.valueField().clear().type(protractor.Key.ENTER);161 pill.operatorField().click();162 expect(pill.operatorField().dropdownOptionCount()).to.eventually.eql(2);163 });164 it('should store valid searches for multiple widget instances', function() {165 page.example('example1').searchInput().click();166 page.example('example1').inputDropdownOption(0).click();167 page.example('example1').searchPill(0).valueField().type('nowValidSearch1', protractor.Key.ENTER);168 page.example('example2').searchInput().click();169 page.example('example2').inputDropdownOption(0).click();170 page.example('example2').searchPill(0).valueField().type('nowValidSearch2', protractor.Key.ENTER);171 browser.getCurrentUrl().then(function(url) {172 browser.get(url);173 expect(page.example('example1').searchPill(0).valueField().text()).to.eventually.eql('nowValidSearch1');174 expect(page.example('example2').searchPill(0).valueField().text()).to.eventually.eql('nowValidSearch2');175 });176 });177 it('should add a valid search pill with type basic', function() {178 page.example('example1').searchInput().click();179 page.example('example1').inputDropdownOption(3).click();180 expect(page.example('example1').validSearchesCount()).to.eventually.eql('1');181 });182 describe('Groups', function() {183 it('should show all available groups initially', function() {184 page.example('example2').searchInput().click();185 expect(page.example('example2').inputDropdownOptionCount()).to.eventually.eql(3);186 });187 it('should show only matching options in the input dropdown', function() {188 page.example('example2').searchInput().click();189 page.example('example2').inputDropdownOption(0).click();190 page.example('example2').searchInput().click();191 expect(page.example('example2').inputDropdownOption(0).getText()).to.eventually.eql('A');192 expect(page.example('example2').inputDropdownOption(1).getText()).to.eventually.eql('C');193 });194 it('should allow type change of existing search pill only within valid group', function() {195 page.example('example2').searchInput().click();196 page.example('example2').inputDropdownOption(1).click();197 page.example('example2').searchPill(0).typeField().click();198 expect(page.example('example2').searchPill(0).typeField().dropdownOption(0).getText()).to.eventually.eql('B');199 expect(page.example('example2').searchPill(0).typeField().dropdownOption(1).getText()).to.eventually.eql('C');200 });201 it('should update allowed groups', function() {202 page.example('example2').searchInput().click();203 page.example('example2').inputDropdownOption(1).click();204 page.example('example2').searchPill(0).typeField().click();205 expect(page.example('example2').searchPill(0).typeField().dropdownOptionCount()).to.eventually.eql(2);206 page.example('example2').searchPill(0).typeField().dropdownOption(1).click();207 page.example('example2').searchPill(0).typeField().click();208 expect(page.example('example2').searchPill(0).typeField().dropdownOptionCount()).to.eventually.eql(3);209 page.example('example2').searchPill(0).typeField().dropdownOption(0).click();210 page.example('example2').searchPill(0).typeField().click();211 expect(page.example('example2').searchPill(0).typeField().dropdownOptionCount()).to.eventually.eql(2);212 });213 });214 describe('local persitence', function() {215 it('is not accessible when the widget does not have search pill and no record can be found', function() {216 expect(page.example('example1').storageDropdownButton().isEnabled()).to.eventually.eql(false);217 });218 it('is accessible when the widget has at least 1 search pill', function() {219 var example = page.example('example1');220 example.searchInput().click();221 example.inputDropdownOption(3).click();222 expect(example.storageDropdownButton().isEnabled()).to.eventually.eql(true);223 example.searchPill(0).removeButton().click();224 expect(example.storageDropdownButton().isEnabled()).to.eventually.eql(false);225 });226 it('allows to save a set of search criteria', function() {227 browser.executeScript('localStorage.removeItem("camunda")');228 var example = page.example('example1');229 example.searchInput().click();230 example.inputDropdownOption(0).click();231 var pill = example.searchPill(0);232 pill.valueField().type('something', protractor.Key.ENTER);233 example.searchInput().click();234 example.inputDropdownOption(3).click();235 example.storageDropdownButton().click();236 expect(example.storageDropdownMenu().isDisplayed()).to.eventually.eql(true);237 var input = example.storageDropdownInput();238 var btn = example.storageDropdownInputButton();239 expect(input.isDisplayed()).to.eventually.eql(true);240 expect(input.isEnabled()).to.eventually.eql(true);241 expect(btn.isEnabled()).to.eventually.eql(false);242 input.sendKeys('tractor');243 expect(btn.isEnabled()).to.eventually.eql(true);244 btn.click();245 expect(example.storageDropdownMenu().isDisplayed()).eventually.eql(true);246 var items = example.storageDropdownMenuItems();247 expect(items.count()).to.eventually.eql(3);248 var label = example.storageDropdownMenuItemName(2);249 expect(label.getText()).to.eventually.eql('tractor');250 browser.executeScript('return JSON.parse(localStorage.getItem("camunda"))')251 .then(function(result) {252 expect(result.searchCriteria.search1.tractor).to.be.an('array');253 })254 ;255 });256 it('can restore a set of saved criteria', function() {257 var example = page.example('example1');258 clearPills(example);259 expect(example.searchPills().count()).to.eventually.eql(0);260 expect(example.storageDropdownButton().isEnabled()).to.eventually.eql(true);261 example.storageDropdownButton().click();262 var items = example.storageDropdownMenuItems();263 expect(items.count()).to.eventually.eql(3);264 var label = example.storageDropdownMenuItemName(2);265 expect(label.getText()).to.eventually.eql('tractor');266 label.click();267 browser.getCurrentUrl().then(function(url) {268 var query = parseQS(url.split('?').pop());269 var criteria = JSON.parse(decodeURIComponent(query.search1Query));270 expect(criteria).to.be.an('array');271 expect(criteria).to.be.have.length(2);272 expect(criteria[0]).to.have.keys([273 'type',274 'operator',275 'value',276 'name'277 ]);278 expect(criteria[0].type).to.eql('PredefinedOperators');279 expect(criteria[0].operator).to.eql('eq');280 expect(criteria[0].value).to.eql('something');281 expect(criteria[1].type).to.eql('basicQuery');282 expect(criteria[1].operator).to.eql('eq');283 });284 });285 it('allows to drop a set of search criteria', function() {286 var example = page.example('example1');287 expect(example.storageDropdownButton().isEnabled()).to.eventually.eql(true);288 example.storageDropdownButton().click();289 var items = example.storageDropdownMenuItems();290 expect(items.count()).to.eventually.eql(3);291 example.storageDropdownMenuItemRemove(2).click();292 items = example.storageDropdownMenuItems();293 expect(items.count()).to.eventually.eql(1);294 browser.executeScript('return JSON.parse(localStorage.getItem("camunda"))')295 .then(function(result) {296 expect(result.searchCriteria.search1).to.be.an('object');297 expect(Object.keys(result.searchCriteria.search1)).to.have.length(0);298 })299 ;300 });301 describe('with groups', function() {302 var example, input, ddBtn, saveBtn;303 before(function() {304 example = page.example('example2');305 });306 it('stores the sets in separate groups', function() {307 browser.executeScript('localStorage.removeItem("camunda")')308 .then(function(res) {309 input = example.storageDropdownInput();310 ddBtn = example.storageDropdownButton();311 saveBtn = example.storageDropdownInputButton();312 clearPills(example);313 example.searchInput().click();314 example.inputDropdownOption(0).click();315 example.searchPill(0).valueField().type('X', protractor.Key.ENTER);316 example.searchInput().click();317 example.inputDropdownOption(1).click();318 example.searchPill(1).valueField().type('Z', protractor.Key.ENTER);319 ddBtn.click();320 input.sendKeys('A1');321 saveBtn.click();322 clearPills(example);323 example.searchInput().click();324 example.inputDropdownOption(0).click();325 example.searchPill(0).valueField().type('X', protractor.Key.ENTER);326 ddBtn.click();327 input.sendKeys('A2');328 saveBtn.click();329 clearPills(example);330 example.searchInput().click();331 example.inputDropdownOption(1).click();332 example.searchPill(0).valueField().type('Y', protractor.Key.ENTER);333 ddBtn.click();334 input.sendKeys('B1');335 saveBtn.click();336 clearPills(example);337 browser.executeScript('return JSON.parse(localStorage.getItem("camunda"))')338 .then(function(result) {339 // console.info('result', result);340 expect(result.searchCriteria).to.have.keys(['A', 'B', 'search1']);341 expect(result.searchCriteria.A).to.have.keys(['A1', 'A2']);342 expect(result.searchCriteria.B).to.have.keys(['B1']);343 })344 ;345 });346 });347 });348 });...
example-1.js
Source:example-1.js
1const fieldsExample1 = dlocalInstance.fields({2 fonts: [{3 cssSrc: 'https://rsms.me/inter/inter-ui.css'4 }],5 locale: 'en',6 country: 'BR'7});8var example1 = document.querySelector(".example-1");9var form1 = example1.querySelector('form');10var error1 = form1.querySelector('.error');11var errorMessage1 = error1.querySelector('.message');12const panExample1 = fieldsExample1.create('pan', {13 style: {14 base: {15 fontSize: "16px",16 fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif",17 lineHeight: '18px',18 fontSmoothing: 'antialiased',19 fontWeight: '500',20 color: "#666",21 '::placeholder': {22 color: "#c1c1c1"23 },24 iconColor: "#c1c1c1"25 },26 autofilled: {27 color: "#000000"28 }29 },30 placeholder: "4111 1111 1111 1111"31});32let actualBrandExample1 = null;33panExample1.on('brand', function (event) {34 if (event.brand && actualBrandExample1 !== event.brand) {35 actualBrandExample1 = event.brand;36 dlocalInstance.createInstallmentsPlan(panExample1, 20, "BRL")37 .then((result) => {38 var installmentsSelect1 = form1.querySelector('.installments');39 buildInstallments(installmentsSelect1, result.installments);40 }).catch((result) => {41 console.error(result);42 error1.classList.add('visible');43 errorMessage1.innerText = result.error.message;44 });45 }46});47const expirationExample1 = fieldsExample1.create('expiration', {48 style: {49 base: {50 fontSize: "16px",51 fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif",52 lineHeight: '18px',53 fontSmoothing: 'antialiased',54 fontWeight: '500',55 color: "#666",56 '::placeholder': {57 color: "#c1c1c1"58 }59 },60 autofilled: {61 color: "#000000"62 }63 },64 placeholder: monthStr + "/" + year65});66const cvvExample1 = fieldsExample1.create('cvv', {67 style: {68 base: {69 fontSize: "16px",70 fontFamily: "Quicksand, Open Sans, Segoe UI, sans-serif",71 lineHeight: '18px',72 fontSmoothing: 'antialiased',73 fontWeight: '500',74 color: "#666",75 '::placeholder': {76 color: "#c1c1c1"77 }78 }79 },80 placeholder: "123"81});82document.getElementById('fields-form-example-1').onsubmit = function (e) {83 e.preventDefault();84 // Trigger HTML5 validation UI on the form if any of the inputs fail85 // validation.86 var plainInputsValid = true;87 Array.prototype.forEach.call(form1.querySelectorAll('input'), function (88 input89 ) {90 if (input.checkValidity && !input.checkValidity()) {91 plainInputsValid = false;92 return;93 }94 });95 if (!plainInputsValid) {96 triggerBrowserValidation(form1);97 return;98 }99 if (errorMessage1.innerText) {100 return;101 }102 // Show a loading screen...103 example1.classList.add('submitting');104 dlocalInstance.createToken(cvvExample1, {105 name: document.getElementById('example-1-name').value106 }).then((result) => {107 error1.classList.remove('visible');108 errorMessage1.innerText = "";109 example1.classList.remove('submitting');110 example1.querySelector(".token").innerText = result.token;111 example1.classList.add("submitted");112 }).catch((result) => {113 example1.classList.remove('submitting');114 error1.classList.add('visible');115 errorMessage1.innerText = result.error.message;116 });117}118registerClearBtn("example-1", [panExample1, expirationExample1, cvvExample1])119registerEvents("example-1", [panExample1, expirationExample1, cvvExample1], ["example-1-pan", "example-1-expiration", "example-1-cvv"])120panExample1.mount(document.getElementById('example-1-pan'));121expirationExample1.mount(document.getElementById('example-1-expiration'));...
App.js
Source:App.js
1import React from "react";2import { Route, Switch } from "react-router-dom";3import "./App.css";4import Header from "./common/Header";5import useStateExmple1 from "./HooksExamples/useStateHookExmples/useStateExmple1";6import useStateWithObjects from "./HooksExamples/useStateHookExmples/useStateWithObjects";7import useEffectExample1 from "./HooksExamples/useEffectExamples/useEffectExample1";8import useEffectExample2 from "./HooksExamples/useEffectExamples/useEffectExample2";9import useEffectExample3 from "./HooksExamples/useEffectExamples/useEffectExample3";10import useMemoExample1 from "./HooksExamples/useMemoExample/useMemoExample1";11import useRefExample1 from "./HooksExamples/useRefExamples/useRefExample1";12import useRefExample2 from "./HooksExamples/useRefExamples/useRefExample2";13import useRefExample3 from "./HooksExamples/useRefExamples/useRefExample3";14import useContextExample1 from "./HooksExamples/useContextExamples/useContextExample1";15import useContextExampleDefinationRender from "./HooksExamples/useContextExamples/useContextExampleDefinationRender";16import displayExample2 from "./HooksExamples/useContextExamples/useContextExample2Display";17import useCallBackExample1 from "./HooksExamples/useCallBackExamples/useCallBackExample1";18import useReducerExample1 from "./HooksExamples/useReducerExample/useReducerExample1";19import useReducerExample2 from "./HooksExamples/useReducerExample/useReducerExample2";20import CustomHookExample1 from "./HooksExamples/CustomHooks/CustomHookExample1";21import AppLoginLogout from "./HooksExamples/useContextExamples/useContextExampleLoginLogout/AppLoginLogout";22import useEffectExample4 from "./HooksExamples/useEffectExamples/useEffectExample4";23import useRefExample4Callback_ref from "./HooksExamples/useRefExamples/useRefExample4Callback_ref";24function App() {25 return (26 <div className="container-fluid">27 <Header />28 <Switch>29 <Route path="/useStateExmple1" exact component={useStateExmple1} />30 <Route31 path="/useStateWithObjects"32 component={useStateWithObjects}33 />{" "}34 <Route path="/useEffectExample1" component={useEffectExample1} />35 <Route path="/useEffectExample2" component={useEffectExample2} />36 <Route path="/useEffectExample3" component={useEffectExample3} />37 <Route path="/useMemoExample1" component={useMemoExample1} />38 <Route path="/useRefExample1" component={useRefExample1} />39 <Route path="/useRefExample2" component={useRefExample2} />40 <Route path="/useRefExample3" component={useRefExample3} />41 <Route path="/useContextExample1" component={useContextExample1} />42 <Route path="/useCallBackExample1" component={useCallBackExample1} />43 <Route path="/useReducerExample1" component={useReducerExample1} />44 <Route path="/useReducerExample2" component={useReducerExample2} />45 <Route path="/CustomHookExample1" component={CustomHookExample1} />46 <Route path="/useEffectExample4" component={useEffectExample4} />47 <Route48 path="/useContextExampleDefinationRender"49 component={useContextExampleDefinationRender}50 />51 <Route path="/useContextExample2" component={displayExample2} />52 <Route path="/AppLoginLogout" component={AppLoginLogout} />53 <Route54 path="/useRefExample4Callback_ref"55 component={useRefExample4Callback_ref}56 />57 </Switch>58 </div>59 );60}...
Using AI Code Generation
1import { Example1 } from 'storybook-root';2export { Example1 } from './src/Example1';3export { Example1 } from './Example1';4export { Example1 } from './Example1';5export { Example1 } from './Example1';6export { Example1 } from './Example1';7export { Example1 } from './Example1';8export { Example1 } from './Example1';9export { Example1 } from './Example1';10export { Example1 } from './Example1';11export { Example1 } from './Example1';12export { Example1 } from './Exa
Using AI Code Generation
1import { Example1 } from 'storybook-root';2const test = () => {3 return <Example1 />;4};5export { Example1 } from './Example1';6export const Example1 = () => {7 return <div>Example1</div>;8};9export const Example2 = () => {10 return <div>Example2</div>;11};12export const Example3 = () => {13 return <div>Example3</div>;14};15export const Example4 = () => {16 return <div>Example4</div>;17};18export const Example5 = () => {19 return <div>Example5</div>;20};21export const Example6 = () => {22 return <div>Example6</div>;23};24export const Example7 = () => {25 return <div>Example7</div>;26};27export const Example8 = () => {28 return <div>Example8</div>;29};30export const Example9 = () => {31 return <div>Example9</div>;32};33export const Example10 = () => {34 return <div>Example10</div>;35};36export const Example11 = () => {37 return <div>Example11</div>;38};39export const Example12 = () => {
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!