How to use genComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

resolve-styles-test.js

Source:resolve-styles-test.js Github

copy

Full Screen

...40 MouseUpListener.subscribe = sinon.spy();41 });42 describe('no-op behavior', () => {43 it('handles null rendered element', () => {44 const component = genComponent();45 resolveStyles(component, null);46 });47 it("doesn't explode", () => {48 const component = genComponent();49 const renderedElement = <div /​>;50 const result = resolveStyles(component, renderedElement).element;51 expect(result).to.equal(renderedElement);52 expect(result.props).to.equal(renderedElement.props);53 });54 it('passes through normal style objects', () => {55 const component = genComponent();56 const renderedElement = <div style={{color: 'blue'}} /​>;57 const result = resolveStyles(component, renderedElement).element;58 expect(result.props.style).to.deep.equal(renderedElement.props.style);59 });60 it('passes through normal style objects of children', () => {61 const component = genComponent();62 const style = {color: 'blue'};63 const renderedElement = (64 <div>65 <div style={style} /​>66 </​div>67 );68 const result = resolveStyles(component, renderedElement).element;69 const children = getChildrenArray(result.props.children);70 expect(children[0].props.style).to.deep.equal(style);71 });72 it("doesn't wrap string children in spans", () => {73 const component = genComponent();74 const renderedElement = <div>Hello</​div>;75 const result = resolveStyles(component, renderedElement).element;76 expect(result.props.children).to.equal('Hello');77 });78 it("doesn't wrap number children in spans", () => {79 const component = genComponent();80 const renderedElement = <div>{88347}</​div>;81 const result = resolveStyles(component, renderedElement).element;82 expect(result.props.children).to.equal(88347);83 });84 it('ignores invalid children', () => {85 const component = genComponent();86 /​/​ JSX won't let this through, so do it with a plain object instead87 const renderedElement = {88 props: {89 children: [null]90 }91 };92 const result = resolveStyles(component, renderedElement).element;93 const children = getChildrenArray(result.props.children);94 expect(children[0]).to.be.undefined;95 });96 it('only processes an element once', () => {97 sinon.spy(React, 'cloneElement');98 const component = genComponent();99 const renderedElement = (100 <div style={[{background: 'white'}, {color: 'blue'}]} /​>101 );102 let result = resolveStyles(component, renderedElement).element;103 result = resolveStyles(component, result).element;104 expect(result.props.style).to.deep.equal({105 background: 'white',106 color: 'blue'107 });108 expect(React.cloneElement).to.have.been.calledOnce;109 React.cloneElement.restore();110 });111 });112 describe('style array', () => {113 it('merges an array of style objects', () => {114 const component = genComponent();115 const renderedElement = (116 <div style={[{background: 'white'}, {color: 'blue'}]} /​>117 );118 const result = resolveStyles(component, renderedElement).element;119 expect(result.props.style).to.deep.equal({120 background: 'white',121 color: 'blue'122 });123 });124 it('skips falsy and non-object entries', () => {125 const component = genComponent();126 const renderedElement = (127 <div128 style={[129 {background: 'white'},130 false,131 null,132 ''.someUndefinedVar,133 '',134 [1, 2, 3],135 {color: 'blue'}136 ]}137 /​>138 );139 const result = resolveStyles(component, renderedElement).element;140 expect(result.props.style).to.deep.equal({141 background: 'white',142 color: 'blue'143 });144 });145 it('overwrites earlier styles with later ones', () => {146 const component = genComponent();147 const renderedElement = (148 <div style={[{background: 'white'}, {background: 'blue'}]} /​>149 );150 const result = resolveStyles(component, renderedElement).element;151 expect(result.props.style).to.deep.equal({152 background: 'blue'153 });154 });155 it('merges nested special styles', () => {156 const component = genComponent();157 const renderedElement = (158 <div159 style={[160 {':hover': {background: 'white'}},161 {':hover': {color: 'blue'}}162 ]}163 /​>164 );165 let result = resolveStyles(component, renderedElement).element;166 result.props.onMouseEnter();167 result = resolveStyles(component, renderedElement).element;168 expect(result.props.style).to.deep.equal({169 background: 'white',170 color: 'blue'171 });172 });173 });174 const createPseduoStyleTests = function(175 pseudo,176 onHandlerName,177 offHandlerName178 ) {179 it('strips special styles if not applied', () => {180 const component = genComponent();181 const style = {background: 'blue'};182 style[':' + pseudo] = {background: 'red'};183 const renderedElement = <div style={style} /​>;184 const result = resolveStyles(component, renderedElement).element;185 expect(result.props.style).to.deep.equal({background: 'blue'});186 });187 it('adds appropriate handlers for ' + pseudo + ' styles', () => {188 const component = genComponent();189 const style = {background: 'blue'};190 style[':' + pseudo] = {background: 'red'};191 const renderedElement = <div style={style} /​>;192 const result = resolveStyles(component, renderedElement).element;193 expect(typeof result.props[onHandlerName]).to.equal('function');194 if (offHandlerName) {195 expect(typeof result.props[offHandlerName]).to.equal('function');196 }197 });198 it('adds ' + pseudo + ' styles ' + onHandlerName, () => {199 const component = genComponent();200 const style = {background: 'blue'};201 style[':' + pseudo] = {background: 'red'};202 const renderedElement = <div style={style} /​>;203 let result = resolveStyles(component, renderedElement).element;204 expect(result.props.style.background).to.equal('blue');205 result.props[onHandlerName]();206 expect(component.setState).to.have.been.called;207 /​/​ Must create a new renderedElement each time, same as React, since208 /​/​ resolveStyles mutates209 result = resolveStyles(component, renderedElement).element;210 expect(result.props.style.background).to.equal('red');211 });212 it('throws if multiple elements have the same key', () => {213 const component = genComponent();214 const style = {background: 'blue'};215 style[':' + pseudo] = {background: 'red'};216 /​/​ Use ref instead of key here because React.Children.map will discard217 /​/​ the duplicate keyed element.218 const renderedElement = (219 <div>220 <div ref="foo" style={style} /​>221 <div ref="foo" style={style} /​>222 </​div>223 );224 expect(() => {225 resolveStyles(component, renderedElement);226 }).to.throw();227 });228 it('throws if multiple elements have no key', () => {229 const component = genComponent();230 const style = {background: 'blue'};231 style[':' + pseudo] = {background: 'red'};232 const renderedElement = (233 <div>234 <div style={style} /​>235 <div style={style} /​>236 </​div>237 );238 expect(() => {239 resolveStyles(component, renderedElement);240 }).to.throw();241 });242 it('adds ' + pseudo + ' styles to correct element by key', () => {243 const component = genComponent();244 const style = {background: 'blue'};245 style[':' + pseudo] = {background: 'red'};246 const renderedElement = (247 <div>248 <div key="foo" /​>249 <div key="bar" style={style} /​>250 </​div>251 );252 let result = resolveStyles(component, renderedElement).element;253 let children = getChildrenArray(result.props.children);254 expect(children[0].props.style).to.be.undefined;255 expect(children[1].props.style.background).to.equal('blue');256 children[1].props[onHandlerName]();257 result = resolveStyles(component, renderedElement).element;258 children = getChildrenArray(result.props.children);259 expect(children[0].props.style).to.be.undefined;260 expect(children[1].props.style.background).to.equal('red');261 });262 it('adds ' + pseudo + ' styles to correct element by ref', () => {263 const component = genComponent();264 const style = {background: 'blue'};265 style[':' + pseudo] = {background: 'red'};266 const renderedElement = (267 <div>268 <div ref="foo" /​>269 <div ref="bar" style={style} /​>270 </​div>271 );272 let result = resolveStyles(component, renderedElement).element;273 let children = getChildrenArray(result.props.children);274 expect(children[0].props.style).to.be.undefined;275 expect(children[1].props.style.background).to.equal('blue');276 children[1].props[onHandlerName]();277 result = resolveStyles(component, renderedElement).element;278 children = getChildrenArray(result.props.children);279 expect(children[0].props.style).to.be.undefined;280 expect(children[1].props.style.background).to.equal('red');281 });282 if (offHandlerName) {283 it('removes ' + pseudo + ' styles ' + offHandlerName, () => {284 const component = genComponent();285 const style = {background: 'blue'};286 style[':' + pseudo] = {background: 'red'};287 const renderedElement = <div style={style} /​>;288 let result = resolveStyles(component, renderedElement).element;289 result.props[onHandlerName]();290 result = resolveStyles(component, renderedElement).element;291 expect(result.props.style.background).to.equal('red');292 result.props[offHandlerName]();293 expect(component.setState).to.have.been.called;294 result = resolveStyles(component, renderedElement).element;295 expect(result.props.style.background).to.equal('blue');296 });297 it("doesn't mutate state", () => {298 const component = genComponent();299 const style = {background: 'blue'};300 style[':' + pseudo] = {background: 'red'};301 const renderedElement = <div style={style} /​>;302 let result = resolveStyles(component, renderedElement).element;303 /​/​ Capturing a reference to the existing state is enough, since Radium304 /​/​ MUST return a new copy for shouldComponentUpdate.305 let previousState = component.state._radiumStyleState;306 result.props[onHandlerName]();307 /​/​ If they are still equal here, that means we mutated the existing308 /​/​ state, which will break shouldComponentUpdate.309 expect(component.state._radiumStyleState).not.to.equal(previousState);310 result = resolveStyles(component, renderedElement).element;311 previousState = component.state._radiumStyleState;312 result.props[offHandlerName]();313 expect(component.state._radiumStyleState).not.to.equal(previousState);314 });315 }316 };317 describe(':hover', () => {318 createPseduoStyleTests('hover', 'onMouseEnter', 'onMouseLeave');319 });320 describe(':focus', () => {321 createPseduoStyleTests('focus', 'onFocus', 'onBlur');322 });323 describe(':active', () => {324 createPseduoStyleTests('active', 'onMouseDown');325 it('subscribes to mouse up listener', () => {326 const component = genComponent();327 const renderedElement = <div style={{':active': {background: 'red'}}} /​>;328 resolveStyles(component, renderedElement);329 expect(MouseUpListener.subscribe).to.have.been.called;330 });331 it('adds active styles on mouse down', () => {332 const component = genComponent();333 const style = {334 background: 'blue',335 ':active': {background: 'red'}336 };337 const renderedElement = <div style={style} /​>;338 let result = resolveStyles(component, renderedElement).element;339 expect(result.props.style.background).to.equal('blue');340 result.props.onMouseDown();341 result = resolveStyles(component, renderedElement).element;342 expect(result.props.style.background).to.equal('red');343 });344 it('removes active styles on mouse up', () => {345 const component = genComponent();346 const style = {347 background: 'blue',348 ':active': {background: 'red'}349 };350 const renderedElement = <div style={style} /​>;351 let result = resolveStyles(component, renderedElement).element;352 result.props.onMouseDown();353 result = resolveStyles(component, renderedElement).element;354 expect(result.props.style.background).to.equal('red');355 /​/​ tigger global mouseup handler356 MouseUpListener.subscribe.firstCall.args[0]();357 result = resolveStyles(component, renderedElement).element;358 expect(result.props.style.background).to.equal('blue');359 });360 it('ignores mouse up if no active styles', () => {361 const component = genComponent();362 const style = {363 background: 'blue',364 ':active': {background: 'red'}365 };366 const renderedElement = <div style={style} /​>;367 let result = resolveStyles(component, renderedElement).element;368 result.props.onMouseDown();369 /​/​ tigger global mouseup handler370 MouseUpListener.subscribe.firstCall.args[0]();371 MouseUpListener.subscribe.firstCall.args[0]();372 result = resolveStyles(component, renderedElement).element;373 expect(result.props.style.background).to.equal('blue');374 });375 it('calls existing onMouseDown handler', () => {376 const component = genComponent();377 const style = {378 background: 'blue',379 ':active': {background: 'red'}380 };381 const originalOnMouseDown = sinon.spy();382 const renderedElement = (383 <div onMouseDown={originalOnMouseDown} style={style} /​>384 );385 let result = resolveStyles(component, renderedElement).element;386 result.props.onMouseDown();387 expect(originalOnMouseDown).to.have.been.called;388 result = resolveStyles(component, renderedElement).element;389 expect(result.props.style.background).to.equal('red');390 });391 });392 describe('multiple states triggered at once', () => {393 describe('applies pseudo styles in the defined order', () => {394 const component = genComponent();395 const stylePermutations = permutate([396 {name: ':active', style: {background: 'red'}},397 {name: ':focus', style: {background: 'yellow'}},398 {name: ':hover', style: {background: 'blue'}}399 ]);400 const onHandlerPermutations = permutate([401 'onFocus',402 'onMouseDown',403 'onMouseEnter'404 ]);405 const createMultiPseudoTest = function(pseudoStyles, onHandlers) {406 const name =407 'applies pseudo styles in the defined order: ' +408 pseudoStyles.map(pseudo => pseudo.name).join(', ') +409 ' when handlers called in order: ' +410 onHandlers.join(', ');411 it(name, () => {412 const style = {};413 pseudoStyles.forEach(pseudo => {414 style[pseudo.name] = pseudo.style;415 });416 const renderedElement = <div style={style} /​>;417 let result = resolveStyles(component, renderedElement).element;418 onHandlers.forEach(onHandler => {419 result.props[onHandler]();420 });421 result = resolveStyles(component, renderedElement).element;422 expect(result.props.style.background).to.equal(423 pseudoStyles[pseudoStyles.length - 1].style.background424 );425 });426 };427 stylePermutations.forEach(pseudoStyles => {428 onHandlerPermutations.forEach(onHandlers => {429 createMultiPseudoTest(pseudoStyles, onHandlers);430 });431 });432 });433 });434 describe('when elements are unmounted', () => {435 it('returns an extraStateKeyMap with keys of unmounted elements', () => {436 const initialState = {437 _radiumStyleState: {438 mountedDiv: {},439 unmountedDiv: {}440 }441 };442 const component = genComponent(initialState);443 const renderedElement = (444 <div>445 <div ref="mountedDiv" /​>446 </​div>447 );448 const result = resolveStyles(component, renderedElement).extraStateKeyMap;449 expect(result).to.deep.equal({unmountedDiv: true});450 });451 });452 describe('React.Children.only', () => {453 it("doesn't break React.Children.only", () => {454 const component = genComponent();455 const renderedElement = (456 <div>457 <span /​>458 </​div>459 );460 const result = resolveStyles(component, renderedElement).element;461 expect(React.Children.only(result.props.children)).to.be.ok;462 });463 it("doesn't break when only child isn't ReactElement", () => {464 const component = genComponent();465 const renderedElement = <div>Foo</​div>;466 resolveStyles(component, renderedElement);467 });468 });469 describe('ReactComponentElement children', () => {470 it("doesn't resolve ReactComponentElement children", () => {471 const component = genComponent();472 class CustomComponent extends React.Component {}473 const style = {':hover': {}};474 const renderedElement = (475 <div>476 <CustomComponent style={style} /​>477 </​div>478 );479 const result = resolveStyles(component, renderedElement).element;480 const children = getChildrenArray(result.props.children);481 expect(children[0].props.style).to.deep.equal(style);482 });483 it('resolves ReactDOMElement children of ReactComponentElements', () => {484 const component = genComponent();485 class CustomComponent extends React.Component {}486 const style = [{background: 'white'}, {color: 'blue'}];487 const renderedElement = (488 <div style={style}>489 <CustomComponent style={style}>490 <div style={style} /​>491 </​CustomComponent>492 </​div>493 );494 const result = resolveStyles(component, renderedElement).element;495 expect(result.props.style).to.deep.equal({496 background: 'white',497 color: 'blue'498 });499 const children = getChildrenArray(result.props.children);500 expect(children[0].props.style).to.deep.equal(style);501 const componentChildren = getChildrenArray(children[0].props.children);502 expect(componentChildren[0].props.style).to.deep.equal({503 background: 'white',504 color: 'blue'505 });506 });507 });508 describe('disabled', () => {509 it('discards interaction styles if element is disabled', () => {510 const component = genComponent();511 const style = {background: 'blue'};512 style[':hover'] = {background: 'red'};513 const renderedElement = (514 <div>515 <div ref="foo" /​>516 <div disabled ref="bar" style={style} /​>517 </​div>518 );519 let result = resolveStyles(component, renderedElement).element;520 let children = getChildrenArray(result.props.children);521 expect(children[0].props.style).to.be.undefined;522 expect(children[1].props.style.background).to.equal('blue');523 children[1].props.onMouseEnter();524 result = resolveStyles(component, renderedElement).element;525 children = getChildrenArray(result.props.children);526 expect(children[0].props.style).to.be.undefined;527 expect(children[1].props.style.background).to.equal('blue');528 });529 it('styles according to :disabled style if element is disabled', () => {530 const component = genComponent();531 const style = {background: 'blue'};532 style[':hover'] = {background: 'red'};533 style[':disabled'] = {background: 'yellow'};534 const renderedElement = (535 <div>536 <div ref="foo" /​>537 <div disabled ref="bar" style={style} /​>538 </​div>539 );540 let result = resolveStyles(component, renderedElement).element;541 let children = getChildrenArray(result.props.children);542 expect(children[0].props.style).to.be.undefined;543 expect(children[1].props.style.background).to.equal('yellow');544 children[1].props.onMouseEnter();545 result = resolveStyles(component, renderedElement).element;546 children = getChildrenArray(result.props.children);547 expect(children[0].props.style).to.be.undefined;548 expect(children[1].props.style.background).to.equal('yellow');549 });550 });551 /​* eslint-disable no-console */​552 describe('warnings', () => {553 beforeEach(() => {554 sinon.stub(console, 'warn');555 });556 afterEach(() => {557 console.warn.restore();558 process.env.NODE_ENV = null;559 });560 it('warns when mixing longhand and shorthand properties', () => {561 const component = genComponent();562 const renderedElement = (563 <div564 style={{565 border: '1px solid black',566 borderWidth: '0 1px 1px 1px'567 }}568 /​>569 );570 resolveStyles(component, renderedElement);571 expect(console.warn).to.have.been.called;572 expect(573 console.warn.firstCall.args[0].indexOf('border')574 ).to.be.greaterThan(0);575 });576 it('warns when mixing longhand and shorthand properties in nested styles', () => {577 const component = genComponent();578 const renderedElement = (579 <div580 style={{581 ':hover': {582 border: '1px solid black',583 borderWidth: '0 1px 1px 1px'584 }585 }}586 /​>587 );588 resolveStyles(component, renderedElement);589 expect(console.warn).to.have.been.called;590 expect(591 console.warn.firstCall.args[0].indexOf('border')592 ).to.be.greaterThan(0);593 });594 it('does not warn when mixing border and borderRadius', () => {595 const component = genComponent();596 const renderedElement = (597 <div598 style={{599 border: '1px solid black',600 borderRadius: '5px'601 }}602 /​>603 );604 resolveStyles(component, renderedElement);605 expect(console.warn).to.not.have.been.called;606 });607 it('does not throw when passed a falsy entry value', () => {608 const component = genComponent();609 const renderedElement = <div style={{height: null}} /​>;610 expect(() => {611 resolveStyles(component, renderedElement);612 }).to.not.throw();613 });614 });615 /​* eslint-enable no-console */​...

Full Screen

Full Screen

viron.js

Source:viron.js Github

copy

Full Screen

...24 }25 return cmp;26};27const genComponentWithQuery = (name, method, path, style, autoRefreshSec, query) => {28 const component = genComponent(name, method, path, style, autoRefreshSec);29 if (query) {30 component.query = query;31 }32 return component;33};34const genTableComponent = (name, method, path, primary, query, labels, actions) => {35 const component = genComponent(name, method, path, constant.VIRON_STYLE_TABLE, null, true);36 if (primary) {37 component.primary = primary;38 }39 if (query) {40 component.query = query;41 }42 if (labels) {43 component.table_labels = labels;44 }45 if (actions) {46 component.actions = actions;47 }48 return component;49};50const genPage = (section, group, id, name, components) => {51 return {52 id,53 name,54 section,55 components,56 group,57 };58};59const genGroup = (section, pages, groupName) => {60 const list = pages.map(page => {61 return genPage(section, groupName, page.id, page.name, page.components);62 });63 return list;64};65const genSection = (section, groups) => {66 let list = [];67 forOwn(groups, (pages, groupName) => {68 list = list.concat(genGroup(section, pages, groupName));69 });70 return list;71};72/​**73 * GET: /​viron74 */​75const show = (req, res) => {76 const vironlib = context.getVironLib();77 const env = context.getEnv();78 const helperAdminRole = vironlib.adminRole.helper;79 const title = req.swagger.swaggerObject.info.title;80 const result = {81 name: title,82 color: 'white',83 theme: 'standard',84 thumbnail: 'https:/​/​cam-inc.github.io/​viron/​latest/​img/​favicon-32x32.png', /​/​ サービスのアイコン等を指定85 tags: [env, 'viron', 'example-google'],86 pages: [].concat(87 /​/​ QuickView88 genSection(constant.VIRON_SECTION_DASHBOARD, {89 [constant.GROUP_EMPTY]: [90 {91 id: 'quickview',92 name: 'クイックビュー',93 components: [94 genComponent('DAU', 'get', '/​stats/​dau', constant.VIRON_STYLE_NUMBER, 5),95 genComponent('MAU', 'get', '/​stats/​mau', constant.VIRON_STYLE_NUMBER, 30),96 genComponent('Chart(area)', 'get', '/​stats/​area', constant.VIRON_STYLE_GRAPH_STACKED_AREA),97 ],98 }99 ],100 }),101 genSection(constant.VIRON_SECTION_MANAGE, {102 /​/​ Manage103 [constant.GROUP_USER]: [104 {105 id: 'user',106 name: 'ユーザ',107 components: [108 genTableComponent('ユーザ', 'get', '/​user', 'id', null, ['id', 'name']),109 ]110 },111 ],112 /​/​ Manage113 [constant.GROUP_DAILY]: [114 {115 id: 'rep_daily_charge',116 name: 'all',117 components: [118 genComponent('Chart(課金数)', 'get', '/​rep_daily_charge/​count', constant.VIRON_STYLE_GRAPH_STACKED_BAR),119 genComponent('Chart(課金額)', 'get', '/​rep_daily_charge/​price', constant.VIRON_STYLE_GRAPH_STACKED_BAR),120 genTableComponent('従量サマリ', 'get', '/​rep_daily_charge', 'site_id', [{key: 'site_id', type: 'string'}], ['site_id']),121 ]122 },123 {124 id: 'rep_daily_charge_getters',125 name: 'getters',126 components: [127 /​/​ genComponent('Chart(課金数)', 'get', '/​rep_daily_charge/​getters/​count', constant.VIRON_STYLE_GRAPH_STACKED_BAR),128 /​/​ genComponent('Chart(課金額)', 'get', '/​rep_daily_charge/​getters/​price', constant.VIRON_STYLE_GRAPH_STACKED_BAR),129 genComponent('課金数(今月)', 'get', '/​rep_daily_charge/​getters/​count/​this?site_id=getters&period_type=this', constant.VIRON_STYLE_GRAPH_STACKED_BAR),130 genComponent('課金数(先月)', 'get', '/​rep_daily_charge/​getters/​count/​last', constant.VIRON_STYLE_GRAPH_STACKED_BAR),131 genComponent('課金額(今月)', 'get', '/​rep_daily_charge/​getters/​price/​this', constant.VIRON_STYLE_GRAPH_STACKED_BAR),132 genComponent('課金額(先月)', 'get', '/​rep_daily_charge/​getters/​price/​last', constant.VIRON_STYLE_GRAPH_STACKED_BAR),133 genTableComponent('従量サマリ', 'get', '/​rep_daily_charge', 'site_id', [{key: 'site_id', type: 'string'}], ['site_id']),134 ]135 },136 {137 id: 'rep_daily_charge',138 name: 'mask',139 components: [140 genComponent('Chart(課金数)', 'get', '/​rep_daily_charge/​count', constant.VIRON_STYLE_GRAPH_STACKED_BAR),141 genComponent('Chart(課金額)', 'get', '/​rep_daily_charge/​price', constant.VIRON_STYLE_GRAPH_STACKED_BAR),142 genTableComponent('従量サマリ', 'get', '/​rep_daily_charge', 'site_id', [{key: 'site_id', type: 'string'}], ['site_id']),143 ]144 },145 {146 id: 'rep_daily_charge',147 name: 'chie',148 components: [149 genComponent('Chart(課金数)', 'get', '/​rep_daily_charge/​count', constant.VIRON_STYLE_GRAPH_STACKED_BAR),150 genComponent('Chart(課金額)', 'get', '/​rep_daily_charge/​price', constant.VIRON_STYLE_GRAPH_STACKED_BAR),151 genTableComponent('従量サマリ', 'get', '/​rep_daily_charge', 'site_id', [{key: 'site_id', type: 'string'}], ['site_id']),152 ]153 },154 {155 id: 'rep_daily_charge',156 name: 'reika',157 components: [158 genComponent('Chart(課金数)', 'get', '/​rep_daily_charge/​count', constant.VIRON_STYLE_GRAPH_STACKED_BAR),159 genComponent('Chart(課金額)', 'get', '/​rep_daily_charge/​price', constant.VIRON_STYLE_GRAPH_STACKED_BAR),160 genTableComponent('従量サマリ', 'get', '/​rep_daily_charge', 'site_id', [{key: 'site_id', type: 'string'}], ['site_id']),161 ]162 },163 ],164 /​/​ Admin165 [constant.GROUP_ADMIN]: [166 {167 id: 'adminrole',168 name: 'Viron ユーザ権限',169 components: [170 genTableComponent('Viron ユーザ権限', 'get', '/​adminrole', 'role_id', null, ['role_id']),171 ],172 },173 {...

Full Screen

Full Screen

TexterTodo.test.js

Source:TexterTodo.test.js Github

copy

Full Screen

...6import MuiThemeProvider from "material-ui/​styles/​MuiThemeProvider";7import { StyleSheetTestUtils } from "aphrodite";8import { genAssignment, contactGenerator } from "../​test_client_helpers";9import { TexterTodo } from "../​../​src/​containers/​TexterTodo";10function genComponent(11 isArchived,12 hasContacts,13 routerPushes,14 statusMessage,15 assignmentNull16) {17 const assignmentId = 8;18 const contactMapper = contactGenerator(assignmentId, statusMessage);19 let assignment = genAssignment(assignmentId, isArchived, hasContacts);20 if (assignmentNull) {21 assignment = null;22 }23 StyleSheetTestUtils.suppressStyleInjection();24 return mount(25 <MuiThemeProvider>26 <TexterTodo27 messageStatus={statusMessage}28 params={{ organizationId: 123, assignmentId: assignmentId }}29 data={{30 findNewCampaignContact: { found: false },31 refetch: function() {32 /​/​ console.log('REFETCHING')33 },34 assignment: assignment35 }}36 mutations={{37 getAssignmentContacts: function(contactIds) {38 /​/​ console.log('GETASSIGNCONTACTS', contactIds)39 return Promise.resolve(contactIds.map(contactMapper));40 },41 findNewCampaignContact: function(assignmentId) {42 return Promise.resolve({ found: false });43 }44 }}45 router={routerPushes} /​/​ used to push redirect46 /​>47 </​MuiThemeProvider>48 );49}50describe("TexterTodo tests...", () => {51 /​/​afterEach(() => {52 /​/​ propsWithEnforcedTextingHoursCampaign.refreshData.mockReset()53 /​/​})54 it("redirect if the assignment is archived", () => {55 const routerPushes = [];56 const isArchived = true;57 const hasContacts = true;58 const component = genComponent(59 isArchived,60 hasContacts,61 routerPushes,62 "needsMessage"63 );64 expect(routerPushes[0]).toBe("/​app/​123/​todos");65 });66 it("redirect if the assignment is null", () => {67 const routerPushes = [];68 const isArchived = false;69 const hasContacts = true;70 const assignmentNull = true;71 const component = genComponent(72 isArchived,73 hasContacts,74 routerPushes,75 "needsMessage",76 assignmentNull77 );78 expect(routerPushes[0]).toBe("/​app/​123/​todos");79 });80 it("redirect if the assignment is normal no redirects", () => {81 const routerPushes = [];82 const isArchived = false;83 const hasContacts = true;84 const assignmentNull = true;85 const component = genComponent(86 isArchived,87 hasContacts,88 routerPushes,89 "needsMessage"90 );91 expect(routerPushes).toEqual([]);92 });93 /​/​ 1. test assignContactsIfNeeded()94 /​/​ 2. test getNewContacts()95 /​/​ 3. test loadContacts()96 /​/​ 4. component render...

Full Screen

Full Screen

test.js

Source:test.js Github

copy

Full Screen

...34 })35 it('can generate single Componet', function () {36 var names = ['chartxkcd-line', 'chartxkcd-bar', 'chartxkcd-pie', 'chartxkcd-xy', 'chartxkcd-radar', 'chartxkcd-stackedbar']37 names.forEach(function (name) {38 var Component = genComponent(name)39 expect(Component.name).to.equal(name)40 componentHelper(`<${name}> :config="{}"></​${name}>`)41 })42 /​/​ var Unknown =expect(genComponent('Unknown'))43 /​/​ expect(Unknown).to.not.exist /​/​TODO catch error44 })...

Full Screen

Full Screen

example.stories.js

Source:example.stories.js Github

copy

Full Screen

...10 },11 }12}13const story = storyFactory({14 BaseBtn: genComponent('BaseBtn'),15 BaseCard: genComponent('BaseCard'),16})17export const asDefault = () => story({18 props: {19 actions: {20 default: boolean('Actions', false),21 },22 cardText: {23 default: text('Card text', 'Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Donec sodales sagittis magna. Vestibulum dapibus nunc ac augue. Donec sodales sagittis magna. Duis vel nibh at velit scelerisque suscipit.'),24 },25 divider: {26 default: boolean('Divider', false),27 },28 text: {29 default: boolean('Text', true),...

Full Screen

Full Screen

plopfile.js

Source:plopfile.js Github

copy

Full Screen

...4const genModule = require('./​plop/​generators/​module')5/​/​ 可继续扩展6module.exports = function (plop) {7 /​/​ component generator8 plop.setGenerator('component', genComponent())9 /​/​ redux module generator10 plop.setGenerator('module', genModule())...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require('playwright');2const fs = require('fs');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const component = await page._delegate.genComponent();8 fs.writeFileSync('playwright-component.js', component);9 await browser.close();10})();11const { chromium } = require('playwright');12(async () => {13 const browser = await chromium.launch();14 const context = await browser.newContext();15 const page = await context.newPage();16 await page.click('text=Docs');17 await page.click('text=API');18 await browser.close();19})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { genComponent } = require('@playwright/​test');2const { test, expect } = require('@playwright/​test');3test('test', async ({ page }) => {4 const component = await genComponent(page, '#header');5 expect(component).toMatchSnapshot('header.png');6});7const { test, expect } = require('@playwright/​test');8const { Header } = require('./​test');9test('test', async ({ page }) => {10 const component = await Header(page);11 expect(component).toMatchSnapshot('header.png');12});13{14 "test": {15 "header.png": {16 }17 }18}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2const {genComponent} = require('playwright/​internal/​lib/​genComponent');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const component = await genComponent(page);8 console.log(component);9 await browser.close();10})();11{12 {13 {14 {15 {16 {17 {18 {19 {20 {21 {22 {23 {24 {25 {26 {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { genComponent } = require('playwright-core/​lib/​server/​genComponent');2const { Page } = require('playwright-core/​lib/​server/​page');3const { Frame } = require('playwright-core/​lib/​server/​frame');4const { ElementHandle } = require('playwright-core/​lib/​server/​elementHandler');5const { JSHandle } = require('playwright-core/​lib/​server/​jsHandle');6const { CDPSession } = require('playwright-core/​lib/​server/​cdpsession');7const { Worker } = require('playwright-core/​lib/​server/​worker');8const { ConsoleMessage } = require('playwright-core/​lib/​server/​consoleMessage');9const { Dialog } = require('playwright-core/​lib/​server/​dialog');10const { Download } = require('playwright-core/​lib/​server/​download');11const { FileChooser } = require('playwright-core/​lib/​server/​fileChooser');12const { Request } = require('playwright-core/​lib/​server/​network');13const { Response } = require('playwright-core/​lib/​server/​network');14const { Route } = require('playwright-core/​lib/​server/​network');15const { WebSocket } = require('playwright-core/​lib/​server/​network');16const { BrowserContext } = require('playwright-core/​lib/​server/​browserContext');17const { Browser } = require('playwright-core/​lib/​server/​browser');18const { BrowserServer } = require('playwright-core/​lib/​server/​browserServer');19const { BrowserType } = require('playwright-core/​lib/​server/​browserType');20const generate = async () => {21 const page = await genComponent(Page, 'Page', 'page');22 const frame = await genComponent(Frame, 'Frame', 'frame');23 const elementHandle = await genComponent(ElementHandle, 'ElementHandle', 'elementHandle');24 const jsHandle = await genComponent(JSHandle, 'JSHandle', 'jsHandle');25 const cdpsession = await genComponent(CDPSession, 'CDPSession', 'cdpsession');26 const worker = await genComponent(Worker, 'Worker', 'worker');27 const consoleMessage = await genComponent(ConsoleMessage, 'ConsoleMessage', 'consoleMessage');28 const dialog = await genComponent(Dialog, 'Dialog', 'dialog');29 const download = await genComponent(Download, 'Download', 'download');30 const fileChooser = await genComponent(FileChooser, 'FileChooser', 'fileChooser');31 const request = await genComponent(Request, 'Request', 'request');32 const response = await genComponent(Response, 'Response

Full Screen

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful