How to use isVNode method in Playwright Internal

Best JavaScript code snippet using playwright-internal

testUtils.spec.jsx

Source:testUtils.spec.jsx Github

copy

Full Screen

...66 container.innerHTML = '';67 });68 describe('isVNode', () => {69 it('should return true for VNodes', () => {70 expect(isVNode(createElement('div'))).toBe(true);71 expect(isVNode(createElement(CreateClassComponent))).toBe(true);72 expect(isVNode(createElement(ExtendClassComponent))).toBe(true);73 expect(isVNode(createElement(FunctionalComponent))).toBe(true);74 expect(isVNode(<CreateClassComponent /​>)).toBe(true);75 expect(isVNode(<ExtendClassComponent /​>)).toBe(true);76 expect(isVNode(<FunctionalComponent /​>)).toBe(true);77 expect(isVNode(<div /​>)).toBe(true);78 });79 it('should return false for non-VNodes', () => {80 expect(isVNode(CreateClassComponent)).toBe(false);81 expect(isVNode(ExtendClassComponent)).toBe(false);82 expect(isVNode(FunctionalComponent)).toBe(false);83 expect(isVNode(createDOMElement('div'))).toBe(false);84 expect(isVNode('foo')).toBe(false);85 expect(isVNode({})).toBe(false);86 expect(isVNode([])).toBe(false);87 expect(isVNode(10)).toBe(false);88 expect(isVNode(undefined)).toBe(false);89 expect(isVNode(null)).toBe(false);90 });91 });92 describe('isComponentVNodeOfType', () => {93 it('Should return true if Component is same', () => {94 class Foobar extends Component {95 render() {96 return <div>1</​div>;97 }98 }99 expect(isComponentVNodeOfType(<Foobar /​>, Foobar)).toBe(true);100 expect(isComponentVNodeOfType(<div /​>, Foobar)).toBe(false);101 });102 });103 describe('isVNodeOfType', () => {104 it('should return true for VNodes with a specified type', () => {105 expect(isVNodeOfType(createElement('div'), 'div')).toBe(true);106 expect(isVNodeOfType(createElement(FunctionalComponent), FunctionalComponent)).toBe(true);107 expect(isVNodeOfType(createElement(CreateClassComponent), CreateClassComponent)).toBe(true);108 expect(isVNodeOfType(createElement(ExtendClassComponent), ExtendClassComponent)).toBe(true);109 });110 it('should return false for VNodes with a specified type', () => {111 expect(isVNodeOfType(createElement('div'), 'h1')).toBe(false);112 expect(isVNodeOfType(createElement(FunctionalComponent), CreateClassComponent)).toBe(false);113 expect(isVNodeOfType(createElement(CreateClassComponent), ExtendClassComponent)).toBe(false);114 expect(isVNodeOfType(createElement(ExtendClassComponent), FunctionalComponent)).toBe(false);115 });116 });117 describe('isDOMVNode', () => {118 it('should return true for VNodes of type string', () => {119 expect(isDOMVNode(createElement('div'))).toBe(true);120 expect(isDOMVNode(createElement('h1'))).toBe(true);121 expect(isDOMVNode(createElement('p'))).toBe(true);122 });123 it('should return false for VNodes of type function or class', () => {124 expect(isDOMVNode(createElement(CreateClassComponent))).toBe(false);125 expect(isDOMVNode(createElement(ExtendClassComponent))).toBe(false);126 expect(isDOMVNode(createElement(FunctionalComponent))).toBe(false);127 });128 });129 describe('isDOMVNodeOfType', () => {130 it('should return true for VNodes of specific string type', () => {131 expect(isDOMVNodeOfType(createElement('div'), 'div')).toBe(true);132 expect(isDOMVNodeOfType(createElement('h1'), 'h1')).toBe(true);133 expect(isDOMVNodeOfType(createElement('p'), 'p')).toBe(true);134 });135 it('should return false for VNodes of incorrect type', () => {136 expect(isDOMVNodeOfType(createElement('div'), 'foo')).toBe(false);137 expect(isDOMVNodeOfType(createElement('div'), {})).toBe(false);138 expect(isDOMVNodeOfType(createElement('div'), [])).toBe(false);139 expect(isDOMVNodeOfType(createElement('div'), 10)).toBe(false);140 expect(isDOMVNodeOfType(createElement('div'), undefined)).toBe(false);141 expect(isDOMVNodeOfType(createElement('div'), null)).toBe(false);142 });143 });144 describe('isFunctionalVNode', () => {145 it('should return true for VNodes of stateless function type', () => {146 expect(isFunctionalVNode(createElement(FunctionalComponent))).toBe(true);147 });148 it('should return false for VNodes of incorrect type', () => {149 expect(isFunctionalVNode(createElement(CreateClassComponent))).toBe(false);150 expect(isFunctionalVNode(createElement(ExtendClassComponent))).toBe(false);151 expect(isFunctionalVNode(createElement('div'))).toBe(false);152 });153 });154 describe('isFunctionalVNodeOfType', () => {155 it('should return true for VNodes of specific stateless function type', () => {156 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), FunctionalComponent)).toBe(true);157 });158 it('should return false for VNodes of incorrect type', () => {159 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), AnotherFunctionalComponent)).toBe(false);160 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), CreateClassComponent)).toBe(false);161 expect(isFunctionalVNodeOfType(createElement(FunctionalComponent), ExtendClassComponent)).toBe(false);162 });163 });164 describe('isClassVNode', () => {165 it('should return true for VNodes of class type', () => {166 expect(isClassVNode(createElement(CreateClassComponent))).toBe(true);167 expect(isClassVNode(createElement(ExtendClassComponent))).toBe(true);168 });169 it('should return false for VNodes of incorrect type', () => {170 expect(isClassVNode(createElement(FunctionalComponent))).toBe(false);171 expect(isClassVNode(createElement('div'))).toBe(false);172 });173 });174 describe('isClassVNodeOfType', () => {175 it('should return true for VNodes of specific class type', () => {176 expect(isClassVNodeOfType(createElement(CreateClassComponent), CreateClassComponent)).toBe(true);177 expect(isClassVNodeOfType(createElement(ExtendClassComponent), ExtendClassComponent)).toBe(true);178 });179 it('should return false for VNodes of incorrect type', () => {180 expect(isClassVNodeOfType(createElement(CreateClassComponent), AnotherCreateClassComponent)).toBe(false);181 expect(isClassVNodeOfType(createElement(CreateClassComponent), AnotherExtendClassComponent)).toBe(false);182 expect(isClassVNodeOfType(createElement(CreateClassComponent), FunctionalComponent)).toBe(false);183 expect(isClassVNodeOfType(createElement(ExtendClassComponent), AnotherCreateClassComponent)).toBe(false);184 expect(isClassVNodeOfType(createElement(ExtendClassComponent), AnotherExtendClassComponent)).toBe(false);185 expect(isClassVNodeOfType(createElement(ExtendClassComponent), FunctionalComponent)).toBe(false);186 });187 });188 describe('isDOMElement', () => {189 it('should return true for DOMElements', () => {190 expect(isDOMElement(createDOMElement('div'))).toBe(true);191 expect(isDOMElement(createDOMElement('h1'))).toBe(true);192 expect(isDOMElement(createDOMElement('p'))).toBe(true);193 });194 it('should return false for non-DOMElements', () => {195 expect(isDOMElement(createElement(CreateClassComponent))).toBe(false);196 expect(isDOMElement(createElement(ExtendClassComponent))).toBe(false);197 expect(isDOMElement(createElement(FunctionalComponent))).toBe(false);198 expect(isDOMElement(createElement('div'))).toBe(false);199 expect(isDOMElement(CreateClassComponent)).toBe(false);200 expect(isDOMElement(ExtendClassComponent)).toBe(false);201 expect(isDOMElement(FunctionalComponent)).toBe(false);202 expect(isDOMElement('div')).toBe(false);203 expect(isDOMElement(undefined)).toBe(false);204 expect(isDOMElement(null)).toBe(false);205 expect(isDOMElement({})).toBe(false);206 expect(isDOMElement([])).toBe(false);207 expect(isDOMElement(10)).toBe(false);208 });209 });210 describe('isDOMElementOfType', () => {211 it('should return true for DOMElements of specific type', () => {212 expect(isDOMElementOfType(createDOMElement('div'), 'div')).toBe(true);213 expect(isDOMElementOfType(createDOMElement('div'), 'DIV')).toBe(true);214 expect(isDOMElementOfType(createDOMElement('h1'), 'h1')).toBe(true);215 expect(isDOMElementOfType(createDOMElement('h1'), 'H1')).toBe(true);216 expect(isDOMElementOfType(createDOMElement('p'), 'p')).toBe(true);217 expect(isDOMElementOfType(createDOMElement('p'), 'P')).toBe(true);218 });219 it('should return false for DOMElements of incorrect type', () => {220 expect(isDOMElementOfType(createDOMElement('div'), 'foo')).toBe(false);221 expect(isDOMElementOfType(createDOMElement('div'), {})).toBe(false);222 expect(isDOMElementOfType(createDOMElement('div'), [])).toBe(false);223 expect(isDOMElementOfType(createDOMElement('div'), 10)).toBe(false);224 expect(isDOMElementOfType(createDOMElement('div'), undefined)).toBe(false);225 expect(isDOMElementOfType(createDOMElement('div'), null)).toBe(false);226 });227 });228 describe('isRenderedClassComponent', () => {229 const DOMVNode = createElement('div');230 const functionalVNode = createElement(FunctionalComponent);231 const createClassVNode = createElement(CreateClassComponent);232 const extendClassVNode = createElement(ExtendClassComponent);233 it('should return true for rendered Class Components', () => {234 expect(isRenderedClassComponent(renderIntoContainer(createClassVNode))).toBe(true);235 expect(isRenderedClassComponent(renderIntoContainer(extendClassVNode))).toBe(true);236 });237 it('should return false for non-rendered Class Components', () => {238 expect(isRenderedClassComponent(createClassVNode)).toBe(false);239 expect(isRenderedClassComponent(extendClassVNode)).toBe(false);240 expect(isRenderedClassComponent(renderIntoContainer(functionalVNode))).toBe(false);241 expect(isRenderedClassComponent(renderIntoContainer(DOMVNode))).toBe(false);242 });243 });244 describe('isRenderedClassComponentOfType', () => {245 const createClassVNode = createElement(CreateClassComponent);246 const extendClassVNode = createElement(ExtendClassComponent);247 it('should return true for rendered Class Components of specific type', () => {248 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), CreateClassComponent)).toBe(true);249 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), ExtendClassComponent)).toBe(true);250 });251 it('should return false for rendered Class Components of incorrect type', () => {252 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), AnotherCreateClassComponent)).toBe(false);253 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), ExtendClassComponent)).toBe(false);254 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), FunctionalComponent)).toBe(false);255 expect(isRenderedClassComponentOfType(renderIntoContainer(createClassVNode), 'div')).toBe(false);256 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), AnotherExtendClassComponent)).toBe(false);257 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), CreateClassComponent)).toBe(false);258 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), FunctionalComponent)).toBe(false);259 expect(isRenderedClassComponentOfType(renderIntoContainer(extendClassVNode), 'div')).toBe(false);260 });261 });262 describe('findAllInRenderedTree', () => {263 let tree1;264 beforeEach(() => {265 tree1 = (266 <section className="outer">267 <FunctionalComponent /​>268 </​section>269 );270 render(tree1, container);271 });272 it('should call predicate for each VNode instance in a rendered tree', () => {273 const spy = jasmine.createSpy('spy');274 expect(spy).not.toHaveBeenCalled();275 findAllInRenderedTree(tree1, (args) => {276 spy(args.type);277 });278 /​/​ 0: section279 /​/​ 1: FunctionalComponent280 /​/​ 2: div281 expect(spy).toHaveBeenCalledTimes(3);282 expect(spy).toHaveBeenCalledWith('section');283 expect(spy).toHaveBeenCalledWith(FunctionalComponent);284 expect(spy).toHaveBeenCalledWith('div');285 });286 it('should call predicate in the correct order', () => {287 const types = [];288 findAllInRenderedTree(tree1, ({ type }) => types.push(type));289 expect(types).toEqual(['section', FunctionalComponent, 'div']);290 });291 it('should work with interpolated text', () => {292 const predicate = jasmine.createSpy('spy');293 const Hello = ({ who }) => <div>Hello, {who}!</​div>;294 const tree = <Hello who="world" /​>;295 render(tree, container);296 expect(predicate).not.toHaveBeenCalled();297 findAllInRenderedTree(tree, predicate);298 expect(predicate).toHaveBeenCalledTimes(5);299 });300 it('should work without class wrappers', () => {301 const predicate = jasmine.createSpy('spy');302 const Hello = ({ who }) => <div>Hello, {who}!</​div>;303 const treeWithText = <Hello who="world" /​>;304 render(treeWithText, container);305 expect(predicate).not.toHaveBeenCalled();306 findAllInRenderedTree(treeWithText, predicate);307 expect(predicate).toHaveBeenCalledTimes(5);308 });309 });310 describe('findAllInVNodeTree', () => {311 const tree2 = (312 <section className="outer">313 <FunctionalComponent /​>314 </​section>315 );316 it('should throw an error when not passed a VNode', () => {317 const errorRegex = /​findAllInVNodeTree/​;318 const predicate = (vNode) => {319 return true;320 };321 const testValue = (value) => {322 expect(() => {323 findAllInVNodeTree(value, predicate);324 }).toThrowError();325 };326 testValue(render(<div /​>, container));327 testValue(CreateClassComponent);328 testValue(ExtendClassComponent);329 testValue(FunctionalComponent);330 testValue(createDOMElement('div'));331 testValue(undefined);332 testValue(null);333 testValue('foo');334 testValue({});335 testValue([]);336 testValue(10);337 });338 it('should call predicate for each VNode instance in an non-rendered tree', () => {339 const predicate = jasmine.createSpy('spy');340 findAllInVNodeTree(tree2, (args) => {341 predicate(args.type);342 });343 /​/​ 0: section344 /​/​ 1: FunctionalComponent345 expect(predicate).toHaveBeenCalledTimes(2);346 expect(predicate).toHaveBeenCalledWith('section');347 expect(predicate).toHaveBeenCalledWith(FunctionalComponent);348 });349 it('should call predicate in the correct order', () => {350 const types = [];351 findAllInVNodeTree(tree2, ({ type }) => types.push(type));352 expect(types).toEqual(['section', FunctionalComponent]);353 });354 });355 describe('scryRenderedDOMElementsWithClass', () => {356 const tree3 = renderIntoContainer(357 <div className="level-1 one">358 <div className="level-2 one">359 <div className="level-3 one" /​>360 </​div>361 <div className="level-2 two">362 <span className="level-3 two" /​>363 </​div>364 </​div>365 );366 it('should return an array of matched DOM elements', () => {367 const result1 = scryRenderedDOMElementsWithClass(tree3, 'one');368 expect(result1 instanceof Array).toBeTruthy();369 expect(result1.length).toBe(3);370 result1.forEach((result) => {371 expect(result.tagName).toBe('DIV');372 });373 const result2 = scryRenderedDOMElementsWithClass(tree3, 'two');374 expect(result2 instanceof Array).toBeTruthy();375 expect(result2.length).toBe(2);376 expect(result2[0].tagName).toBe('DIV');377 expect(result2[1].tagName).toBe('SPAN');378 const result3 = scryRenderedDOMElementsWithClass(tree3, 'three');379 expect(result3 instanceof Array).toBeTruthy();380 expect(result3.length).toBe(0);381 });382 it('should accept a space separated string of class names', () => {383 const result1 = scryRenderedDOMElementsWithClass(tree3, 'level-2');384 expect(result1 instanceof Array).toBeTruthy();385 expect(result1.length).toBe(2);386 const result2 = scryRenderedDOMElementsWithClass(tree3, 'level-2 one');387 expect(result2 instanceof Array).toBeTruthy();388 expect(result2.length).toBe(1);389 });390 it('should accept an array of class names', () => {391 const result = scryRenderedDOMElementsWithClass(tree3, ['level-2', 'one']);392 expect(result instanceof Array).toBeTruthy();393 expect(result.length).toBe(1);394 });395 });396 describe('scryRenderedDOMElementsWithTag', () => {397 const tree4 = renderIntoContainer(398 <div>399 <header>400 <h1>Hello</​h1>401 </​header>402 <section>403 <h1>Hello Again</​h1>404 <p>Paragraph 1</​p>405 <p>Paragraph 2</​p>406 <p>Paragraph 3</​p>407 </​section>408 </​div>409 );410 it('should return an array of matched DOM elements', () => {411 const testValue = (tagName, length, instance) => {412 const result = scryRenderedDOMElementsWithTag(tree4, tagName);413 expect(result instanceof Array).toBeTruthy();414 expect(result.length).toBe(length);415 result.forEach((item) => {416 expect(item.tagName).toBe(tagName.toUpperCase());417 });418 };419 testValue('div', 1);420 testValue('h1', 2);421 testValue('p', 3);422 testValue('span', 0);423 });424 });425 describe('scryRenderedVNodesWithType', () => {426 const tree5 = renderIntoContainer(427 <div>428 <FunctionalComponent /​>429 <FunctionalComponent /​>430 <CreateClassComponent /​>431 <CreateClassComponent /​>432 <ExtendClassComponent /​>433 <ExtendClassComponent /​>434 </​div>435 );436 it('should return an array of matched VNodes', () => {437 const testValue = (type, length) => {438 const result = scryRenderedVNodesWithType(tree5, type);439 expect(result instanceof Array).toBeTruthy();440 expect(result.length).toBe(length);441 result.forEach((item) => {442 expect(item instanceof Object).toBeTruthy();443 expect(Object.keys(item).sort()).toEqual(VNodeKeys);444 expect(isVNode(item)).toBe(true);445 });446 };447 testValue('p', 0);448 testValue('div', 7); /​/​ Outer div + each rendered component div449 testValue(FunctionalComponent, 2);450 testValue(CreateClassComponent, 2);451 testValue(ExtendClassComponent, 2);452 testValue(AnotherFunctionalComponent, 0);453 });454 });455 describe('scryVNodesWithType', () => {456 const tree6 = (457 <div>458 <FunctionalComponent /​>459 <FunctionalComponent /​>460 <CreateClassComponent /​>461 <CreateClassComponent /​>462 <ExtendClassComponent /​>463 <ExtendClassComponent /​>464 </​div>465 );466 it('should return an array of matched VNodes', () => {467 const testValue = (type, length) => {468 const result = scryVNodesWithType(tree6, type);469 expect(result instanceof Array).toBeTruthy();470 expect(result.length).toBe(length);471 result.forEach((item) => {472 expect(item instanceof Object).toBeTruthy();473 expect(Object.keys(item).sort()).toEqual(VNodeKeys);474 expect(isVNode(item)).toBe(true);475 });476 };477 testValue('p', 0);478 testValue('div', 1); /​/​ Just the outer div479 testValue(FunctionalComponent, 2);480 testValue(CreateClassComponent, 2);481 testValue(ExtendClassComponent, 2);482 testValue(AnotherFunctionalComponent, 0);483 });484 });485 describe('findRenderedDOMElementWithClass', () => {486 const tree7 = renderIntoContainer(487 <div className="level-1 one">488 <div className="level-2 one">489 <div className="level-3 one" /​>490 </​div>491 <div className="level-2 two">492 <span className="level-3 two" /​>493 </​div>494 </​div>495 );496 it('should throw an error when more than one result is found #1', () => {497 const errorRegex = /​Did not find exactly one match/​;498 const testValue = (classNames) => {499 expect(() => {500 findRenderedDOMElementWithClass(tree7, classNames);501 }).toThrowError();502 };503 testValue('level-2');504 testValue('level-3');505 });506 it('should return a matched DOM element', () => {507 const testValue = (classNames, instance) => {508 const result = findRenderedDOMElementWithClass(tree7, classNames);509 const arrOfClassName = classNames.split(' ');510 for (let i = 0; i < arrOfClassName.length; i++) {511 expect(result.classList.contains(arrOfClassName[i])).toBe(true);512 }513 };514 testValue('level-1');515 testValue('level-2 one');516 testValue('level-3 two');517 });518 it('should be able to handle null elements', () => {519 const NoOp = () => null;520 const Broken = () => (521 <div className="dummy">522 <NoOp /​>523 </​div>524 );525 const renderedTree = renderIntoContainer(<Broken /​>);526 const dummy = findRenderedDOMElementWithClass(renderedTree, 'dummy');527 expect(dummy.className).toBe('dummy');528 });529 });530 describe('findRenderedDOMElementWithTag', () => {531 const tree8 = renderIntoContainer(532 <div>533 <header>534 <h1>Head1</​h1>535 <span>Hello</​span>536 </​header>537 <section>538 <h1>Hello Again</​h1>539 <p>Paragraph 1</​p>540 <p>Paragraph 2</​p>541 <p>Paragraph 3</​p>542 <a>test</​a>543 </​section>544 </​div>545 );546 it('should throw an error when more than one result is found #2', () => {547 const errorRegex = /​Did not find exactly one match/​;548 const testValue = (tagName) => {549 expect(() => {550 findRenderedDOMElementWithTag(tree8, tagName);551 }).toThrowError();552 };553 testValue('h1');554 testValue('p');555 });556 it('should return a matched DOM element', () => {557 const testValue = (tagName, instance) => {558 const result = findRenderedDOMElementWithTag(tree8, tagName);559 expect(result.tagName).toBe(tagName.toUpperCase());560 };561 testValue('div');562 testValue('span');563 testValue('a');564 });565 });566 describe('findRenderedVNodeWithType', () => {567 const tree9 = renderIntoContainer(568 <div>569 <h1>Hello</​h1>570 <FunctionalComponent /​>571 <FunctionalComponent /​>572 <CreateClassComponent /​>573 <ExtendClassComponent /​>574 </​div>575 );576 it('should throw an error when more than one result is found #3', () => {577 const errorRegex = /​Did not find exactly one match/​;578 const testValue = (type) => {579 expect(() => {580 findRenderedVNodeWithType(tree9, type);581 }).toThrowError();582 };583 testValue('div');584 testValue(FunctionalComponent);585 });586 it('should return a matched VNode #1', () => {587 const testValue = (type) => {588 const result = findRenderedVNodeWithType(tree9, type);589 expect(result instanceof Object).toBeTruthy();590 expect(Object.keys(result).sort()).toEqual(VNodeKeys);591 expect(isVNode(result)).toBe(true);592 expect(result.type).toBe(type);593 };594 testValue('h1');595 testValue(CreateClassComponent);596 testValue(ExtendClassComponent);597 });598 });599 describe('findVNodeWithType', () => {600 const tree10 = (601 <div>602 <div>603 <h1>Hello</​h1>604 </​div>605 <FunctionalComponent /​>606 <FunctionalComponent /​>607 <CreateClassComponent /​>608 <ExtendClassComponent /​>609 </​div>610 );611 it('should throw an error when more than one result is found #4', () => {612 const errorRegex = /​Did not find exactly one match/​;613 const testValue = (type) => {614 expect(() => {615 findVNodeWithType(tree10, type);616 }).toThrowError();617 };618 testValue('div');619 testValue(FunctionalComponent);620 });621 it('should return a matched VNode #2', () => {622 const testValue = (type) => {623 const result = findVNodeWithType(tree10, type);624 expect(result instanceof Object).toBeTruthy();625 expect(Object.keys(result).sort()).toEqual(VNodeKeys);626 expect(isVNode(result)).toBe(true);627 expect(result.type).toBe(type);628 };629 testValue('h1');630 testValue(CreateClassComponent);631 testValue(ExtendClassComponent);632 });633 });...

Full Screen

Full Screen

props-util.js

Source:props-util.js Github

copy

Full Screen

...26 if (Array.isArray(child)) {27 res.push(...flattenChildren(child, filterEmpty));28 } else if (child && child.type === Fragment) {29 res.push(...flattenChildren(child.children, filterEmpty));30 } else if (child && isVNode(child)) {31 if (filterEmpty && !isEmptyElement(child)) {32 res.push(child);33 } else if (!filterEmpty) {34 res.push(child);35 }36 } else if (isValid(child)) {37 res.push(child);38 }39 });40 return res;41};42export const getSlot = (self, name = 'default', options = {}) => {43 if (isVNode(self)) {44 if (self.type === Fragment) {45 return name === 'default' ? flattenChildren(self.children) : [];46 } else if (self.children && self.children[name]) {47 return flattenChildren(self.children[name](options));48 } else {49 return [];50 }51 } else {52 let res = self.$slots[name] && self.$slots[name](options);53 return flattenChildren(res);54 }55};56export const getAllChildren = ele => {57 let componentOptions = ele.componentOptions || {};58 if (ele.$vnode) {59 componentOptions = ele.$vnode.componentOptions || {};60 }61 return ele.children || componentOptions.children || [];62};63export const getOptionProps = instance => {64 const res = {};65 if (instance.$ && instance.$.vnode) {66 const props = instance.$.vnode.props || {};67 Object.keys(instance.$props).forEach(k => {68 const v = instance.$props[k];69 const hyphenateKey = hyphenate(k);70 if (v !== undefined || hyphenateKey in props) {71 res[k] = v; /​/​ 直接取 $props[k]72 }73 });74 } else if (isVNode(instance) && typeof instance.type === 'object') {75 const originProps = instance.props || {};76 const props = {};77 Object.keys(originProps).forEach(key => {78 props[camelize(key)] = originProps[key];79 });80 const options = instance.type.props || {};81 Object.keys(options).forEach(k => {82 const v = resolvePropValue(options, props, k, props[k]);83 if (v !== undefined || k in props) {84 res[k] = v;85 }86 });87 }88 return res;89};90export const getComponent = (instance, prop = 'default', options = instance, execute = true) => {91 let com = undefined;92 if (instance.$) {93 const temp = instance[prop];94 if (temp !== undefined) {95 return typeof temp === 'function' && execute ? temp(options) : temp;96 } else {97 com = instance.$slots[prop];98 com = execute && com ? com(options) : com;99 }100 } else if (isVNode(instance)) {101 const temp = instance.props && instance.props[prop];102 if (temp !== undefined && instance.props !== null) {103 return typeof temp === 'function' && execute ? temp(options) : temp;104 } else if (instance.type === Fragment) {105 com = instance.children;106 } else if (instance.children && instance.children[prop]) {107 com = instance.children[prop];108 com = execute && com ? com(options) : com;109 }110 }111 if (Array.isArray(com)) {112 com = flattenChildren(com);113 com = com.length === 1 ? com[0] : com;114 com = com.length === 0 ? undefined : com;115 }116 return com;117};118export function getStyle(ele, camel) {119 const props = (isVNode(ele) ? ele.props : ele.$attrs) || {};120 let style = props.style || {};121 if (typeof style === 'string') {122 style = parseStyleText(style, camel);123 } else if (camel && style) {124 /​/​ 驼峰化125 const res = {};126 Object.keys(style).forEach(k => (res[camelize(k)] = style[k]));127 return res;128 }129 return style;130}131export function filterEmpty(children = []) {132 const res = []133 children.forEach(child => {...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

...18 info(options) {19 Object.assign(this.vm,defaultOptions , options,{20 type:'info'21 });22 if (isVNode(this.vm.msg)) {23 this.vm.$slots.default = [this.vm.msg];24 this.vm.msg = null;25 } else {26 delete this.vm.$slots.default;27 }28 this.idList.push(this.vm._uid);29 document.body.appendChild(this.vm.$el);30 document.body.classList.toggle('hidden');31 return this.vm.confirm();32 }33 warning(options) {34 Object.assign(this.vm,defaultOptions , options,{35 type:'warning'36 });37 if (isVNode(this.vm.msg)) {38 this.vm.$slots.default = [this.vm.msg];39 this.vm.msg = null;40 } else {41 delete this.vm.$slots.default;42 }43 this.idList.push(this.vm._uid);44 document.body.appendChild(this.vm.$el);45 document.body.classList.toggle('hidden');46 return this.vm.confirm();47 }48 confirm(options) {49 debugger;50 /​**51 * 实例化组件52 * **/​53 /​/​const vm = new VueComponent().$mount();54 /​/​合并所有选项55 Object.assign(this.vm,defaultOptions , options,{56 type:'confirm'57 });58 /​/​如果是虚拟dom节点的话默认将信息复制给插槽59 if (isVNode(this.vm.msg)) {60 this.vm.$slots.default = [this.vm.msg];61 this.vm.msg = null;62 } else {63 delete this.vm.$slots.default;64 }65 this.idList.push(this.vm._uid);66 document.body.appendChild(this.vm.$el);67 document.body.classList.toggle('hidden');68 /​/​调用confirm方法69 return this.vm.confirm();70 }71 error(options) {72 Object.assign(this.vm,defaultOptions , options,{73 type:'error'74 });75 if (isVNode(this.vm.msg)) {76 this.vm.$slots.default = [this.vm.msg];77 this.vm.msg = null;78 } else {79 delete this.vm.$slots.default;80 }81 this.idList.push(this.vm._uid);82 document.body.appendChild(this.vm.$el);83 document.body.classList.toggle('hidden');84 return this.vm.confirm();85 }86 alert(options) {87 Object.assign(this.vm,defaultOptions , options,{88 type:'alert'89 });90 if (isVNode(this.vm.msg)) {91 this.vm.$slots.default = [this.vm.msg];92 this.vm.msg = null;93 } else {94 delete this.vm.$slots.default;95 }96 this.idList.push(this.vm._uid);97 document.body.appendChild(this.vm.$el);98 document.body.classList.toggle('hidden');99 return this.vm.confirm();100 }101 close() {102 setTimeout(() => {103 document.body.removeChild(document.querySelector(`[data-id='${this.idList.pop()}']`));104 document.body.classList.toggle('hidden');...

Full Screen

Full Screen

main.js

Source:main.js Github

copy

Full Screen

...18 };19 instance = new NotificationConstructor({20 data: options21 });22 if (isVNode(options.message)) {23 instance.$slots.default = [options.message];24 options.message = 'REPLACED_BY_VNODE';25 }26 instance.id = id;27 instance.$mount();28 document.body.appendChild(instance.$el);29 instance.visible = true;30 instance.dom = instance.$el;31 instance.dom.style.zIndex = PopupManager.nextZIndex();32 let verticalOffset = options.offset || 0;33 instances.filter(item => item.position === position).forEach(item => {34 verticalOffset += item.$el.offsetHeight + 16;35 });36 verticalOffset += 16;37 instance.verticalOffset = verticalOffset;38 instances.push(instance);39 return instance;40};41['success', 'warning', 'info', 'error'].forEach(type => {42 Notification[type] = options => {43 if (typeof options === 'string' || isVNode(options)) {44 options = {45 message: options46 };47 }48 options.type = type;49 return Notification(options);50 };51});52Notification.close = function(id, userOnClose) {53 let index = -1;54 const len = instances.length;55 const instance = instances.filter((instance, i) => {56 if (instance.id === id) {57 index = i;...

Full Screen

Full Screen

render.js

Source:render.js Github

copy

Full Screen

...19export function _patch(lastVNode, nextVNode) {20 if (!isInvalid(lastVNode)) {21 if (isDOM(lastVNode)) {22 render(nextVNode, lastVNode);23 } else if (isVNode(lastVNode) && isVNode(nextVNode)) {24 if (lastVNode.dom) {25 patch(lastVNode, nextVNode);26 if (lastVNode.parentVNode) {27 assign(lastVNode, nextVNode);28 }29 } else {30 throwError('patch error vNode');31 }32 }33 return nextVNode;34 }35}36export function render(vNode, parentDom) {37 if (document.body === parentDom) {38 warning('you cannot render() to the "document.body". Use an empty element as a container instead.');39 }40 const lastVnode = parentDom.__NeactRootNode;41 if (!lastVnode) {42 if (!isInvalid(vNode) && isVNode(vNode)) {43 mount(vNode, parentDom, null, {});44 parentDom.__NeactRootNode = vNode;45 return vNode._instance || vNode.dom;46 } else {47 throwError('isInvalid VNode');48 }49 } else {50 if (isInvalid(vNode)) {51 unmount(lastVnode, parentDom);52 parentDom.__NeactRootNode = null;53 delete parentDom.__NeactRootNode;54 } else if (isVNode(vNode)) {55 patch(lastVnode, vNode);56 parentDom.__NeactRootNode = vNode;57 return vNode._instance || vNode.dom;58 } else {59 throwError('isInvalid VNode');60 }61 }62}63export function unmountComponentAtNode(dom) {64 if (dom.__NeactRootNode) {65 unmount(dom.__NeactRootNode, dom);66 delete dom.__NeactRootNode;67 }68}69export function findDOMNode(vNode) {70 if (!isInvalid(isVNode)) {71 if (isVNode(vNode)) {72 return vNode.dom;73 } else if (vNode._vNode) {74 return vNode._vNode.dom;75 }76 }77 return null;...

Full Screen

Full Screen

vdom.js

Source:vdom.js Github

copy

Full Screen

...3var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };4exports.isVNode = isVNode;5exports.getFirstComponentChild = getFirstComponentChild;6var _util = require('element-ui/​lib/​utils/​util');7function isVNode(node) {8 return node !== null && (typeof node === 'undefined' ? 'undefined' : _typeof(node)) === 'object' && (0, _util.hasOwn)(node, 'componentOptions');9};10function getFirstComponentChild(children) {11 return children && children.filter(function (c) {12 return c && c.tag;13 })[0];...

Full Screen

Full Screen

patch.js

Source:patch.js Github

copy

Full Screen

1import vnode from './​vnode';2import createElement from './​createElement';3export default function patch(oldVnode, newVnode){4 if(!isVnode(oldVnode)){5 oldVnode = vnode(oldVnode.tagName.toLowerCase(),{},[],undefined, oldVnode);6 }7 if(sameVnode(oldVnode, newVnode)){8 console.log('精细比较')9 }else{10 console.log()11 }12}13function isVnode(vnode){14 if(vnode.sel != '' || vnode.sel == undefined){15 return false;16 }17 return true;18}19function sameVnode(v1, v2){20 return v1.key === v2.key && v1.sel === v2.sel;...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const vNode = await page.evaluateHandle(() => document.querySelector('h1'));8 console.log(isVNode(vNode));9 await browser.close();10})();11const vNode = await page.evaluateHandle(() => document.querySelector('h1'));12const vNode = await page.evaluateHandle(document.querySelector('h1'));13The getUniqueSelector() method can be used as follows:14const vNode = await page.evaluateHandle(() => document.querySelector('h1'));15const uniqueSelector = vNode.getUniqueSelector();16console.log(uniq

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​dom');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const element = await page.$('text=Get started');8 const isElement = isVNode(element);9 console.log(isElement);10 await browser.close();11})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');2const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');3const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');4const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');5const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');6const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');7const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');8const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');9const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');10const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');11const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');12const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');13const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');14const { isVNode } = require('playwright/​lib/​server/​supplements/​recorder/​playwrightInternal');15const { isVNode } = require

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { isVNode } from 'playwright/​lib/​server/​frames';2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const element = await page.$('text=Get started');8 const isVNode = await page.evaluate(element => element.isVNode, element);9 console.log(isVNode);10 await browser.close();11})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​dom.js');2const { chromium } = require('playwright');3const assert = require('assert').strict;4(async () => {5 const browser = await chromium.launch();6 const context = await browser.newContext();7 const page = await context.newPage();8 const input = await page.$('input[name="q"]');9 assert.ok(isVNode(input), 'isVNode(input) is true');10 await browser.close();11})();12The assert.strict.strict() method is used

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​dom.js');2const { html } = require('playwright/​lib/​utils/​structuredClone.js');3const { isVNode } = require('playwright/​lib/​server/​dom.js');4const { html } = require('playwright/​lib/​utils/​structuredClone.js');5const vNode = html`<div>Test</​div>`;6const notVNode = {};7const { isVNode } = require('playwright/​lib/​server/​dom.js');8const { html } = require('playwright/​lib/​utils/​structuredClone.js');9const vNode = html`<div>Test</​div>`;10const notVNode = {};11const { isVNode } = require('playwright/​lib/​server/​dom.js');12const { html } = require('playwright/​lib/​utils/​structuredClone.js');13const vNode = html`<div>Test</​div>`;14const notVNode = {};15const { isVNode } = require('playwright/​lib/​server/​dom.js');16const { html } = require('playwright/​lib/​utils/​structuredClone.js');17const vNode = html`<div>Test</​div>`;18const notVNode = {};19const { isVNode } = require('playwright/​lib/​server/​dom.js');20const { html } = require('playwright/​lib/​utils/​structuredClone.js');21const vNode = html`<div>Test</​div>`;22const notVNode = {};23const { isVNode } = require('playwright/​lib/​server/​dom.js');24const { html } = require('playwright/​lib/​utils/​structuredClone.js');25const vNode = html`<div>Test</​div>`;26console.log(isVNode(vNode));

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { isVNode } = require('playwright/​lib/​server/​dom.js');2const vnode = { 3 attributes: {4 },5 { 6 attributes: {7 },8 {9 attributes: {10 },11 }12 }13}14const result = isVNode(vnode);15console.log(result);16isVNode(vNode) → boolean

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