How to use findDOMNode method in Playwright Internal

Best JavaScript code snippet using playwright-internal

PaginationBoxView-test.js

Source:PaginationBoxView-test.js Github

copy

Full Screen

...7import ReactTestUtils from 'react-dom/test-utils';8describe('Test rendering', () => {9 it('should render a pagination component', () => {10 const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);11 expect(ReactDOM.findDOMNode(pagination).nodeName).toEqual('UL');12 ReactTestUtils.scryRenderedComponentsWithType(13 pagination,14 PaginationBoxView15 );16 expect(17 ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')18 .textContent19 ).toBe('Previous');20 expect(21 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent22 ).toBe('1');23 expect(24 ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')25 .textContent26 ).toBe('Next');27 const pages = ReactDOM.findDOMNode(pagination).querySelectorAll('li');28 // 3 * 2 margins + 1 break label + previous & next buttons == 9:29 expect(pages.length).toEqual(9);30 });31 it('test rendering only active page item', function() {32 const pagination = ReactTestUtils.renderIntoDocument(33 <PaginationBoxView34 initialPage={0}35 pageRangeDisplayed={0}36 marginPagesDisplayed={0}37 breakLabel={null}38 />39 );40 const pageItems = ReactDOM.findDOMNode(pagination).querySelectorAll('li');41 // Prev, selected page, next42 expect(pageItems.length).toBe(3);43 });44});45describe('Test clicks', () => {46 it('test clicks on previous and next buttons', () => {47 const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);48 let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(49 pagination,50 'a'51 );52 let previous = elmts[0];53 let next = elmts[elmts.length - 1];54 ReactTestUtils.Simulate.click(next);55 expect(56 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent57 ).toBe('2');58 ReactTestUtils.Simulate.click(previous);59 expect(60 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent61 ).toBe('1');62 });63 it('test click on a page item', () => {64 const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView />);65 ReactTestUtils.findRenderedComponentWithType(pagination, PaginationBoxView);66 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(67 'li:nth-child(3) a'68 );69 ReactTestUtils.Simulate.click(pageItem);70 expect(71 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent72 ).toBe('2');73 });74 it('test click on the left break view', () => {75 const pagination = ReactTestUtils.renderIntoDocument(76 <PaginationBoxView77 initialPage={0}78 pageCount={20}79 marginPagesDisplayed={2}80 pageRangeDisplayed={5}81 />82 );83 // The selected page is before the left break84 const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(85 '.break a'86 );87 ReactTestUtils.Simulate.click(leftBreakView1);88 expect(89 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent90 ).toBe('6');91 // The selected page is after the left break92 const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(93 '.break a'94 )[0];95 ReactTestUtils.Simulate.click(leftBreakView2);96 expect(97 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent98 ).toBe('1');99 });100 it('test click on the right break view', () => {101 const pagination = ReactTestUtils.renderIntoDocument(102 <PaginationBoxView103 initialPage={10}104 pageCount={20}105 marginPagesDisplayed={2}106 pageRangeDisplayed={5}107 />108 );109 // The selected page is before the right break110 const rightBreak1 = ReactDOM.findDOMNode(pagination).querySelectorAll(111 '.break a'112 )[1];113 ReactTestUtils.Simulate.click(rightBreak1);114 expect(115 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent116 ).toBe('16');117 // The selected page is after the right break118 const rightBreak2 = ReactDOM.findDOMNode(pagination).querySelector(119 '.break a'120 );121 ReactTestUtils.Simulate.click(rightBreak2);122 expect(123 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent124 ).toBe('11');125 });126});127describe('Test custom event listener', () => {128 it('test custom listener on previous and next buttons', () => {129 const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView eventListener="onMouseOver" />);130 let elmts = ReactTestUtils.scryRenderedDOMComponentsWithTag(131 pagination,132 'a'133 );134 let previous = elmts[0];135 let next = elmts[elmts.length - 1];136 ReactTestUtils.Simulate.mouseOver(next);137 expect(138 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent139 ).toBe('2');140 ReactTestUtils.Simulate.mouseOver(previous);141 expect(142 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent143 ).toBe('1');144 });145 it('test custom listener on a page item', () => {146 const pagination = ReactTestUtils.renderIntoDocument(<PaginationBoxView eventListener="onMouseOver" />);147 ReactTestUtils.findRenderedComponentWithType(pagination, PaginationBoxView);148 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(149 'li:nth-child(3) a'150 );151 ReactTestUtils.Simulate.mouseOver(pageItem);152 expect(153 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent154 ).toBe('2');155 });156 it('test custom listener on the left break view', () => {157 const pagination = ReactTestUtils.renderIntoDocument(158 <PaginationBoxView159 initialPage={0}160 pageCount={20}161 marginPagesDisplayed={2}162 pageRangeDisplayed={5}163 eventListener="onMouseOver"164 />165 );166 // The selected page is before the left break167 const leftBreakView1 = ReactDOM.findDOMNode(pagination).querySelector(168 '.break a'169 );170 ReactTestUtils.Simulate.mouseOver(leftBreakView1);171 expect(172 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent173 ).toBe('6');174 // The selected page is after the left break175 const leftBreakView2 = ReactDOM.findDOMNode(pagination).querySelectorAll(176 '.break a'177 )[0];178 ReactTestUtils.Simulate.mouseOver(leftBreakView2);179 expect(180 ReactDOM.findDOMNode(pagination).querySelector('.selected a').textContent181 ).toBe('1');182 });183});184describe('Test pagination behaviour', () => {185 it('should display 6 elements to the left, 1 break element and 2 elements to the right', () => {186 const pagination = ReactTestUtils.renderIntoDocument(187 <PaginationBoxView188 initialPage={0}189 pageCount={20}190 marginPagesDisplayed={2}191 pageRangeDisplayed={5}192 />193 );194 const previousElement = ReactDOM.findDOMNode(pagination).querySelector(195 'li:first-child'196 );197 const nextElement = ReactDOM.findDOMNode(pagination).querySelector(198 'li:last-child'199 );200 let leftElements = [];201 let rightElements = [];202 let breakElements = [];203 let breakElementReached = false;204 const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(205 'li:not(.previous):not(.next)'206 );207 elements.forEach(element => {208 if (breakElementReached === false && element.className !== 'break') {209 leftElements.push(element);210 } else if (211 breakElementReached === true &&212 element.className !== 'break'213 ) {214 rightElements.push(element);215 } else {216 breakElements.push(element);217 breakElementReached = true;218 }219 });220 expect(previousElement.className).toBe('previous disabled');221 expect(nextElement.className).toBe('next');222 expect(leftElements.length).toBe(6);223 expect(rightElements.length).toBe(2);224 expect(breakElements.length).toBe(1);225 });226 it('should display 7 elements to the left, 1 break element and 2 elements to the right', () => {227 const pagination = ReactTestUtils.renderIntoDocument(228 <PaginationBoxView229 initialPage={4}230 pageCount={20}231 marginPagesDisplayed={2}232 pageRangeDisplayed={5}233 />234 );235 const previousElement = ReactDOM.findDOMNode(pagination).querySelector(236 'li:first-child'237 );238 const nextElement = ReactDOM.findDOMNode(pagination).querySelector(239 'li:last-child'240 );241 let leftElements = [];242 let rightElements = [];243 let breakElements = [];244 let breakElementReached = false;245 const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(246 'li:not(.previous):not(.next)'247 );248 elements.forEach(element => {249 if (breakElementReached === false && element.className !== 'break') {250 leftElements.push(element);251 } else if (252 breakElementReached === true &&253 element.className !== 'break'254 ) {255 rightElements.push(element);256 } else {257 breakElements.push(element);258 breakElementReached = true;259 }260 });261 expect(previousElement.className).toBe('previous');262 expect(nextElement.className).toBe('next');263 expect(leftElements.length).toBe(7);264 expect(rightElements.length).toBe(2);265 expect(breakElements.length).toBe(1);266 });267 it('should display 2 elements to the left, 5 elements in the middle, 2 elements to the right and 2 break elements', () => {268 const pagination = ReactTestUtils.renderIntoDocument(269 <PaginationBoxView270 initialPage={5}271 pageCount={20}272 marginPagesDisplayed={2}273 pageRangeDisplayed={5}274 />275 );276 const previousElement = ReactDOM.findDOMNode(pagination).querySelector(277 'li:first-child'278 );279 const nextElement = ReactDOM.findDOMNode(pagination).querySelector(280 'li:last-child'281 );282 let leftElements = [];283 let middleElements = [];284 let rightElements = [];285 let breakElements = [];286 let leftBreakElementReached = false;287 let rightBreakElementReached = false;288 const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(289 'li:not(.previous):not(.next)'290 );291 elements.forEach(element => {292 if (293 leftBreakElementReached === false &&294 rightBreakElementReached === false &&295 element.className !== 'break'296 ) {297 leftElements.push(element);298 } else if (299 leftBreakElementReached === true &&300 rightBreakElementReached === false &&301 element.className !== 'break'302 ) {303 middleElements.push(element);304 } else if (305 leftBreakElementReached === true &&306 rightBreakElementReached === true &&307 element.className !== 'break'308 ) {309 rightElements.push(element);310 } else if (breakElements.length === 0 && element.className === 'break') {311 breakElements.push(element);312 leftBreakElementReached = true;313 } else if (breakElements.length === 1 && element.className === 'break') {314 breakElements.push(element);315 rightBreakElementReached = true;316 }317 });318 expect(previousElement.className).toBe('previous');319 expect(nextElement.className).toBe('next');320 expect(leftElements.length).toBe(2);321 expect(middleElements.length).toBe(5);322 expect(rightElements.length).toBe(2);323 expect(breakElements.length).toBe(2);324 });325 it('should display 2 elements to the left, 1 break element and 7 elements to the right', () => {326 const pagination = ReactTestUtils.renderIntoDocument(327 <PaginationBoxView328 initialPage={15}329 pageCount={20}330 marginPagesDisplayed={2}331 pageRangeDisplayed={5}332 />333 );334 const previousElement = ReactDOM.findDOMNode(pagination).querySelector(335 'li:first-child'336 );337 const nextElement = ReactDOM.findDOMNode(pagination).querySelector(338 'li:last-child'339 );340 let leftElements = [];341 let rightElements = [];342 let breakElements = [];343 let breakElementReached = false;344 const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(345 'li:not(.previous):not(.next)'346 );347 elements.forEach(element => {348 if (breakElementReached === false && element.className !== 'break') {349 leftElements.push(element);350 } else if (351 breakElementReached === true &&352 element.className !== 'break'353 ) {354 rightElements.push(element);355 } else {356 breakElements.push(element);357 breakElementReached = true;358 }359 });360 expect(previousElement.className).toBe('previous');361 expect(nextElement.className).toBe('next');362 expect(leftElements.length).toBe(2);363 expect(rightElements.length).toBe(7);364 expect(breakElements.length).toBe(1);365 });366 it('should display 2 elements to the left, 1 break element and 6 elements to the right', () => {367 const pagination = ReactTestUtils.renderIntoDocument(368 <PaginationBoxView369 initialPage={16}370 pageCount={20}371 marginPagesDisplayed={2}372 pageRangeDisplayed={5}373 />374 );375 const previousElement = ReactDOM.findDOMNode(pagination).querySelector(376 'li:first-child'377 );378 const nextElement = ReactDOM.findDOMNode(pagination).querySelector(379 'li:last-child'380 );381 let leftElements = [];382 let rightElements = [];383 let breakElements = [];384 let breakElementReached = false;385 const elements = ReactDOM.findDOMNode(pagination).querySelectorAll(386 'li:not(.previous):not(.next)'387 );388 elements.forEach(element => {389 if (breakElementReached === false && element.className !== 'break') {390 leftElements.push(element);391 } else if (392 breakElementReached === true &&393 element.className !== 'break'394 ) {395 rightElements.push(element);396 } else {397 breakElements.push(element);398 breakElementReached = true;399 }400 });401 expect(previousElement.className).toBe('previous');402 expect(nextElement.className).toBe('next');403 expect(leftElements.length).toBe(2);404 expect(rightElements.length).toBe(6);405 expect(breakElements.length).toBe(1);406 });407 it('should use ariaLabelBuilder for rendering aria-labels if ariaLabelBuilder is specified', function() {408 const linkedPagination = ReactTestUtils.renderIntoDocument(409 <PaginationBoxView410 initialPage={1}411 pageCount={3}412 pageRangeDisplayed={2}413 marginPagesDisplayed={2}414 ariaLabelBuilder={(page, selected) =>415 selected ? 'Current page' : 'Goto page ' + page416 }417 />418 );419 expect(420 ReactDOM.findDOMNode(linkedPagination)421 .querySelector('li:nth-last-child(2) a')422 .getAttribute('aria-label')423 ).toBe('Goto page 3');424 expect(425 ReactDOM.findDOMNode(linkedPagination)426 .querySelector('li:nth-child(2) a')427 .getAttribute('aria-label')428 ).toBe('Goto page 1');429 expect(430 ReactDOM.findDOMNode(linkedPagination)431 .querySelector('.selected a')432 .getAttribute('aria-label')433 ).toBe('Current page');434 });435 it('test ariaLabelBuilder works with extraAriaContext', function() {436 const linkedPagination = ReactTestUtils.renderIntoDocument(437 <PaginationBoxView438 initialPage={1}439 pageCount={3}440 pageRangeDisplayed={2}441 marginPagesDisplayed={2}442 ariaLabelBuilder={(page, selected) =>443 selected ? 'Current page' : 'Goto page ' + page444 }445 extraAriaContext="foobar"446 />447 );448 expect(449 ReactDOM.findDOMNode(linkedPagination)450 .querySelector('li:nth-last-child(2) a')451 .getAttribute('aria-label')452 ).toBe('Goto page 3 foobar');453 expect(454 ReactDOM.findDOMNode(linkedPagination)455 .querySelector('li:nth-child(2) a')456 .getAttribute('aria-label')457 ).toBe('Goto page 1 foobar');458 expect(459 ReactDOM.findDOMNode(linkedPagination)460 .querySelector('.selected a')461 .getAttribute('aria-label')462 ).toBe('Current page');463 });464});465describe('Test default props', () => {466 describe('default previousLabel/nextLabel', () => {467 it('should use the default previousLabel/nextLabel', () => {468 const pagination = ReactTestUtils.renderIntoDocument(469 <PaginationBoxView />470 );471 expect(472 ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')473 .textContent474 ).toBe('Previous');475 expect(476 ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')477 .textContent478 ).toBe('Next');479 });480 });481 describe('default breakLabel/breakClassName/breakLinkClassName', () => {482 it('should use the default breakLabel/breakClassName/breakLinkClassName', () => {483 const pagination = ReactTestUtils.renderIntoDocument(484 <PaginationBoxView />485 );486 expect(487 ReactDOM.findDOMNode(pagination).querySelector('li.break').textContent488 ).toBe('...');489 expect(ReactDOM.findDOMNode(pagination).querySelector('.break')).not.toBe(490 null491 );492 expect(493 ReactDOM.findDOMNode(pagination).querySelector('.break a').className494 ).toBe('');495 });496 });497 describe('default onPageChange', () => {498 it('should not call any onPageChange callback if not defined but it should go to the next page', () => {499 const pagination = ReactTestUtils.renderIntoDocument(500 <PaginationBoxView />501 );502 const nextItem = ReactDOM.findDOMNode(pagination).querySelector(503 'li:last-child a'504 );505 ReactTestUtils.Simulate.click(nextItem);506 expect(507 ReactDOM.findDOMNode(pagination).querySelector('.selected a')508 .textContent509 ).toBe('2');510 });511 });512 describe('default initialPage/forcePage', () => {513 it('should use the default initial selected page (0)', () => {514 const pagination = ReactTestUtils.renderIntoDocument(515 <PaginationBoxView />516 );517 expect(518 ReactDOM.findDOMNode(pagination).querySelector('.selected a')519 .textContent520 ).toBe('1');521 });522 });523 describe('default disableInitialCallback', () => {524 it('should call the onPageChange callback when disableInitialCallback is set to false/undefined', () => {525 const myOnPageChangeMethod = jest.fn();526 ReactTestUtils.renderIntoDocument(527 <PaginationBoxView528 initialPage={5}529 onPageChange={myOnPageChangeMethod}530 />531 );532 expect(myOnPageChangeMethod).toHaveBeenCalledWith({ selected: 5 });533 });534 });535 describe('default containerClassName', () => {536 it('should not use any classname on the container by default', () => {537 const pagination = ReactTestUtils.renderIntoDocument(538 <PaginationBoxView />539 );540 expect(ReactDOM.findDOMNode(pagination).className).toEqual('');541 });542 });543 describe('default pageClassName/activeClassName', () => {544 it('should not use any classname on page items and a default activeClassName', () => {545 const pagination = ReactTestUtils.renderIntoDocument(546 <PaginationBoxView previousClassName="prev" nextClassName="next" />547 );548 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(549 'li:nth-child(3) a'550 );551 ReactTestUtils.Simulate.click(pageItem);552 expect(553 ReactDOM.findDOMNode(pagination).querySelector(554 'li:not(.selected):not(.prev):not(.next)'555 ).className556 ).toBe('');557 expect(558 ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')559 .className560 ).toBe('selected');561 });562 });563 describe('default pageLinkClassName/activeLinkClassName', () => {564 it('should not use any classname on selected links by default', () => {565 const pagination = ReactTestUtils.renderIntoDocument(566 <PaginationBoxView previousClassName="prev" nextClassName="next" />567 );568 expect(569 ReactDOM.findDOMNode(pagination).querySelector(570 'li:not(.selected):not(.prev):not(.next) a'571 ).className572 ).toBe('');573 expect(574 ReactDOM.findDOMNode(pagination).querySelector('.selected a').className575 ).toBe('');576 });577 });578 describe('default previousClassName/nextClassName', () => {579 it('should use the default previousClassName/nextClassName', () => {580 const pagination = ReactTestUtils.renderIntoDocument(581 <PaginationBoxView initialPage={2} />582 );583 expect(584 ReactDOM.findDOMNode(pagination).querySelector('li:first-child')585 .className586 ).toBe('previous');587 expect(588 ReactDOM.findDOMNode(pagination).querySelector('li:last-child')589 .className590 ).toBe('next');591 });592 });593 describe('default previousLinkClassName/nextLinkClassName', () => {594 it('should not use any classname on previous/next links by default', () => {595 const pagination = ReactTestUtils.renderIntoDocument(596 <PaginationBoxView initialPage={2} />597 );598 expect(599 ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')600 .className601 ).toBe('');602 expect(603 ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')604 .className605 ).toBe('');606 });607 });608 describe('default disabledClassName', () => {609 it('should use the default disabledClassName', function() {610 const pagination = ReactTestUtils.renderIntoDocument(611 <PaginationBoxView initialPage={0} pageCount={1} />612 );613 expect(614 ReactDOM.findDOMNode(pagination).querySelector('li:first-child')615 .className616 ).toBe('previous disabled');617 expect(618 ReactDOM.findDOMNode(pagination).querySelector('li:last-child')619 .className620 ).toBe('next disabled');621 });622 });623 describe('default hrefBuilder', () => {624 it('should not render href attributes on page items if hrefBuilder is not defined', function() {625 const linkedPagination = ReactTestUtils.renderIntoDocument(626 <PaginationBoxView />627 );628 expect(629 ReactDOM.findDOMNode(linkedPagination)630 .querySelector('li:last-child a')631 .hasAttribute('href')632 ).toBe(false);633 expect(634 ReactDOM.findDOMNode(linkedPagination)635 .querySelector('li:first-child a')636 .hasAttribute('href')637 ).toBe(false);638 expect(639 ReactDOM.findDOMNode(linkedPagination)640 .querySelector('.selected a')641 .hasAttribute('href')642 ).toBe(false);643 });644 });645 describe('default extraAriaContext', () => {646 it('should use the default extraAriaContext', () => {647 const pagination = ReactTestUtils.renderIntoDocument(648 <PaginationBoxView previousClassName="prev" nextClassName="next" />649 );650 expect(651 ReactDOM.findDOMNode(pagination)652 .querySelector('li:not(.selected):not(.prev):not(.next) a')653 .getAttribute('aria-label')654 ).toBe('Page 2');655 expect(656 ReactDOM.findDOMNode(pagination)657 .querySelector('.selected a')658 .getAttribute('aria-label')659 ).toBe('Page 1 is your current page');660 });661 });662});663describe('Test custom props', () => {664 describe('previousLabel/nextLabel', () => {665 it('should use the previousLabel prop when defined', () => {666 const pagination = ReactTestUtils.renderIntoDocument(667 <PaginationBoxView previousLabel={'Custom previous label'} />668 );669 expect(670 ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')671 .textContent672 ).toBe('Custom previous label');673 });674 it('should use the nextLabel prop when defined', () => {675 const pagination = ReactTestUtils.renderIntoDocument(676 <PaginationBoxView nextLabel={'Custom next label'} />677 );678 expect(679 ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')680 .textContent681 ).toBe('Custom next label');682 });683 });684 describe('breakLabel/breakClassName/breakLinkClassName', () => {685 it('should use the breakLabel string prop when defined', () => {686 const pagination = ReactTestUtils.renderIntoDocument(687 <PaginationBoxView breakLabel={'...'} />688 );689 expect(690 ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild691 .nodeType692 ).toBe(Node.ELEMENT_NODE);693 expect(694 ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild695 .nodeName696 ).toBe('A');697 expect(698 ReactDOM.findDOMNode(pagination).querySelector('li.break').firstChild699 .textContent700 ).toBe('...');701 });702 it('should use the breakLabel node prop when defined', () => {703 const pagination = ReactTestUtils.renderIntoDocument(704 <PaginationBoxView breakLabel={<span>...</span>} />705 );706 expect(707 ReactDOM.findDOMNode(pagination).querySelector('li.break a').firstChild708 .nodeName709 ).toBe('SPAN');710 expect(711 ReactDOM.findDOMNode(pagination).querySelector('li.break a').lastChild712 .textContent713 ).toBe('...');714 });715 it('should use the breakClassName prop when defined', function() {716 const pagination = ReactTestUtils.renderIntoDocument(717 <PaginationBoxView breakClassName={'break-me'} />718 );719 expect(720 ReactDOM.findDOMNode(pagination).querySelector('.break-me')721 ).not.toBe(null);722 });723 it('should use the breakLinkClassName prop when defined', function() {724 const pagination = ReactTestUtils.renderIntoDocument(725 <PaginationBoxView breakLinkClassName={'break-link'} />726 );727 expect(728 ReactDOM.findDOMNode(pagination).querySelector('.break-link')729 ).not.toBe(null);730 });731 });732 describe('onPageChange', () => {733 it('should use the onPageChange prop when defined', () => {734 const myOnPageChangeMethod = jest.fn();735 const pagination = ReactTestUtils.renderIntoDocument(736 <PaginationBoxView onPageChange={myOnPageChangeMethod} />737 );738 const nextItem = ReactDOM.findDOMNode(pagination).querySelector(739 'li:last-child a'740 );741 ReactTestUtils.Simulate.click(nextItem);742 expect(myOnPageChangeMethod).toHaveBeenCalledWith({ selected: 1 });743 });744 });745 describe('onPageActive', () => {746 it('should use the onPageActive prop when defined', () => {747 const myOnPageActiveMethod = jest.fn();748 const myOnPageChangeMethod = jest.fn();749 const pagination = ReactTestUtils.renderIntoDocument(750 <PaginationBoxView751 onPageActive={myOnPageActiveMethod}752 onPageChange={myOnPageChangeMethod} />753 );754 const activeItem = ReactDOM.findDOMNode(pagination).querySelector(755 '.selected a'756 );757 ReactTestUtils.Simulate.click(activeItem);758 expect(myOnPageActiveMethod).toHaveBeenCalledWith({ selected: 0 });759 expect(myOnPageChangeMethod).not.toHaveBeenCalled();760 });761 });762 describe('initialPage', () => {763 it('should use the initialPage prop when defined', () => {764 const pagination = ReactTestUtils.renderIntoDocument(765 <PaginationBoxView initialPage={2} />766 );767 expect(768 ReactDOM.findDOMNode(pagination).querySelector('.selected a')769 .textContent770 ).toBe('3');771 });772 });773 describe('forcePage', () => {774 it('should use the forcePage prop when defined', () => {775 const pagination = ReactTestUtils.renderIntoDocument(776 <PaginationBoxView forcePage={2} />777 );778 expect(779 ReactDOM.findDOMNode(pagination).querySelector('.selected a')780 .textContent781 ).toBe('3');782 });783 it('should update forcePage and hence selected page when forcePage value is changed', () => {784 const node = document.createElement('div');785 const pagination1 = ReactDOM.render(786 <PaginationBoxView forcePage={2} />,787 node788 );789 const pagination2 = ReactDOM.render(790 <PaginationBoxView forcePage={3} />,791 node792 );793 expect(794 ReactDOM.findDOMNode(pagination2).querySelector('.selected a')795 .textContent796 ).toBe('4');797 });798 });799 describe('disableInitialCallback', () => {800 it('should not call the onPageChange callback when disableInitialCallback is set to true', () => {801 const myOnPageChangeMethod = jest.fn();802 ReactTestUtils.renderIntoDocument(803 <PaginationBoxView804 initialPage={5}805 disableInitialCallback={true}806 onPageChange={myOnPageChangeMethod}807 />808 );809 expect(myOnPageChangeMethod).not.toHaveBeenCalled();810 });811 });812 describe('containerClassName', () => {813 it('should use the containerClassName prop when defined', () => {814 const pagination = ReactTestUtils.renderIntoDocument(815 <PaginationBoxView containerClassName={'my-pagination'} />816 );817 expect(ReactDOM.findDOMNode(pagination).className).toEqual(818 'my-pagination'819 );820 });821 });822 describe('pageClassName/activeClassName', () => {823 it('should use the pageClassName prop when defined', () => {824 const pagination = ReactTestUtils.renderIntoDocument(825 <PaginationBoxView826 pageClassName={'page-item'}827 previousClassName="prev"828 nextClassName="next"829 />830 );831 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(832 'li:nth-child(3) a'833 );834 ReactTestUtils.Simulate.click(pageItem);835 expect(836 ReactDOM.findDOMNode(pagination).querySelector(837 'li:not(.selected):not(.prev):not(.next)'838 ).className839 ).toBe('page-item');840 expect(841 ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')842 .className843 ).toBe('page-item selected');844 });845 it('should use the activeClassName prop when defined', () => {846 const pagination = ReactTestUtils.renderIntoDocument(847 <PaginationBoxView848 activeClassName="active-page-item"849 previousClassName="prev"850 nextClassName="next"851 />852 );853 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(854 'li:nth-child(3) a'855 );856 ReactTestUtils.Simulate.click(pageItem);857 expect(858 ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')859 .className860 ).toBe('active-page-item');861 });862 it('should use the activeClassName prop without overriding the defined pageClassName', () => {863 const pagination = ReactTestUtils.renderIntoDocument(864 <PaginationBoxView865 pageClassName="page-item"866 activeClassName="active-page-item"867 previousClassName="prev"868 nextClassName="next"869 />870 );871 const pageItem = ReactDOM.findDOMNode(pagination).querySelector(872 'li:nth-child(3) a'873 );874 ReactTestUtils.Simulate.click(pageItem);875 expect(876 ReactDOM.findDOMNode(pagination).querySelector(877 'li:not(.selected):not(.prev):not(.next)'878 ).className879 ).toBe('page-item');880 expect(881 ReactDOM.findDOMNode(pagination).querySelector('li:nth-child(3)')882 .className883 ).toBe('page-item active-page-item');884 });885 });886 describe('pageLinkClassName/activeLinkClassName', () => {887 it('should use the pageLinkClassName prop when defined', () => {888 const pagination = ReactTestUtils.renderIntoDocument(889 <PaginationBoxView890 pageLinkClassName="page-item-link"891 previousClassName="prev"892 nextClassName="next"893 />894 );895 expect(896 ReactDOM.findDOMNode(pagination).querySelector(897 'li:not(.selected):not(.prev):not(.next) a'898 ).className899 ).toBe('page-item-link');900 expect(901 ReactDOM.findDOMNode(pagination).querySelector('.selected a').className902 ).toBe('page-item-link');903 });904 it('should use the activeLinkClassName prop when defined', () => {905 const pagination = ReactTestUtils.renderIntoDocument(906 <PaginationBoxView907 activeLinkClassName="active-page-item-link"908 pageCount={5}909 />910 );911 expect(912 ReactDOM.findDOMNode(pagination).querySelector('.selected a').className913 ).toBe('active-page-item-link');914 });915 it('should use the activeLinkClassName prop without overriding the defined pageLinkClassName', () => {916 const pagination = ReactTestUtils.renderIntoDocument(917 <PaginationBoxView918 pageLinkClassName="page-item-link"919 activeLinkClassName="active-page-item-link"920 previousClassName="prev"921 nextClassName="next"922 />923 );924 expect(925 ReactDOM.findDOMNode(pagination).querySelector(926 'li:not(.selected):not(.prev):not(.next) a'927 ).className928 ).toBe('page-item-link');929 expect(930 ReactDOM.findDOMNode(pagination).querySelector('.selected a').className931 ).toBe('page-item-link active-page-item-link');932 });933 });934 describe('previousClassName/nextClassName', () => {935 it('should use the previousClassName prop when defined', () => {936 const pagination = ReactTestUtils.renderIntoDocument(937 <PaginationBoxView938 initialPage={2}939 previousClassName="custom-previous-classname"940 />941 );942 expect(943 ReactDOM.findDOMNode(pagination).querySelector('li:first-child')944 .className945 ).toBe('custom-previous-classname');946 });947 it('should use the nextClassName prop when defined', () => {948 const pagination = ReactTestUtils.renderIntoDocument(949 <PaginationBoxView950 initialPage={2}951 nextClassName="custom-next-classname"952 />953 );954 expect(955 ReactDOM.findDOMNode(pagination).querySelector('li:last-child')956 .className957 ).toBe('custom-next-classname');958 });959 });960 describe('previousLinkClassName/nextLinkClassName', () => {961 it('should use the previousLinkClassName prop when defined', () => {962 const pagination = ReactTestUtils.renderIntoDocument(963 <PaginationBoxView964 initialPage={2}965 previousLinkClassName="custom-previous-link-classname"966 />967 );968 expect(969 ReactDOM.findDOMNode(pagination).querySelector('li:first-child a')970 .className971 ).toBe('custom-previous-link-classname');972 });973 it('should use the nextLinkClassName prop when defined', () => {974 const pagination = ReactTestUtils.renderIntoDocument(975 <PaginationBoxView976 initialPage={2}977 nextLinkClassName="custom-next-link-classname"978 />979 );980 expect(981 ReactDOM.findDOMNode(pagination).querySelector('li:last-child a')982 .className983 ).toBe('custom-next-link-classname');984 });985 });986 describe('prevRel/nextRel', () => {987 it('should render default rel if they are not specified', function() {988 const linkedPagination = ReactTestUtils.renderIntoDocument(989 <PaginationBoxView pageCount={3} />990 );991 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')992 .getAttribute('rel')).toBe('next');993 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')994 .getAttribute('rel')).toBe('prev');995 });996 it('should render custom rel if they are defined', function() {997 const linkedPagination = ReactTestUtils.renderIntoDocument(998 <PaginationBoxView pageCount={3}999 nextRel={'nofollow noreferrer'}1000 prevRel={'nofollow noreferrer'}1001 />1002 );1003 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')1004 .getAttribute('rel')).toBe('nofollow noreferrer');1005 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')1006 .getAttribute('rel')).toBe('nofollow noreferrer');1007 });1008 });1009 describe('disabledClassName', () => {1010 it('should use the disabledClassName prop when defined', () => {1011 const pagination = ReactTestUtils.renderIntoDocument(1012 <PaginationBoxView1013 initialPage={0}1014 pageCount={1}1015 disabledClassName="custom-disabled-classname"1016 />1017 );1018 expect(1019 ReactDOM.findDOMNode(pagination).querySelector('li:first-child')1020 .className1021 ).toBe('previous custom-disabled-classname');1022 expect(1023 ReactDOM.findDOMNode(pagination).querySelector('li:last-child')1024 .className1025 ).toBe('next custom-disabled-classname');1026 });1027 });1028 describe('hrefBuilder', () => {1029 it('should use the hrefBuilder prop when defined', function() {1030 const pagination = ReactTestUtils.renderIntoDocument(1031 <PaginationBoxView1032 initialPage={1}1033 hrefBuilder={page => '/page/' + page}1034 />1035 );1036 expect(1037 ReactDOM.findDOMNode(pagination)1038 .querySelector('li:last-child a')1039 .getAttribute('href')1040 ).toBe('/page/3');1041 expect(1042 ReactDOM.findDOMNode(pagination)1043 .querySelector('li:first-child a')1044 .getAttribute('href')1045 ).toBe('/page/1');1046 expect(1047 ReactDOM.findDOMNode(pagination)1048 .querySelector('.selected a')1049 .getAttribute('href')1050 ).toBe(null);1051 });1052 });1053 describe('extraAriaContext', () => {1054 it('should use the extraAriaContext prop when defined', () => {1055 const pagination = ReactTestUtils.renderIntoDocument(1056 <PaginationBoxView1057 extraAriaContext="can be clicked"1058 previousClassName="prev"1059 nextClassName="next"1060 />1061 );1062 expect(1063 ReactDOM.findDOMNode(pagination)1064 .querySelector('li:not(.selected):not(.prev):not(.next) a')1065 .getAttribute('aria-label')1066 ).toBe('Page 2 can be clicked');1067 expect(1068 ReactDOM.findDOMNode(pagination)1069 .querySelector('.selected a')1070 .getAttribute('aria-label')1071 ).toBe('Page 1 is your current page');1072 });1073 });1074 describe('aria-disabled', () => {1075 it('should be true for previous link when link is disabled', () => {1076 const pagination = ReactTestUtils.renderIntoDocument(1077 <PaginationBoxView initialPage={0} pageCount={5} />1078 );1079 expect(1080 ReactDOM.findDOMNode(pagination)1081 .querySelector('li:first-child a')1082 .getAttribute('aria-disabled')1083 ).toBe('true');1084 expect(1085 ReactDOM.findDOMNode(pagination)1086 .querySelector('li:last-child a')1087 .getAttribute('aria-disabled')1088 ).toBe('false');1089 });1090 it('should be true for next link when link is disabled', () => {1091 const pagination = ReactTestUtils.renderIntoDocument(1092 <PaginationBoxView initialPage={4} pageCount={5} />1093 );1094 expect(1095 ReactDOM.findDOMNode(pagination)1096 .querySelector('li:first-child a')1097 .getAttribute('aria-disabled')1098 ).toBe('false');1099 expect(1100 ReactDOM.findDOMNode(pagination)1101 .querySelector('li:last-child a')1102 .getAttribute('aria-disabled')1103 ).toBe('true');1104 });1105 });1106 it('should be true for both previous and next links when only one page', () => {1107 const pagination = ReactTestUtils.renderIntoDocument(1108 <PaginationBoxView initialPage={0} pageCount={1} />1109 );1110 expect(1111 ReactDOM.findDOMNode(pagination)1112 .querySelector('li:first-child a')1113 .getAttribute('aria-disabled')1114 ).toBe('true');1115 expect(1116 ReactDOM.findDOMNode(pagination)1117 .querySelector('li:last-child a')1118 .getAttribute('aria-disabled')1119 ).toBe('true');1120 });1121 it('should render default aria labels if they are not specified', function() {1122 const linkedPagination = ReactTestUtils.renderIntoDocument(1123 <PaginationBoxView pageCount={3} />1124 );1125 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')1126 .getAttribute('aria-label')).toBe('Next page');1127 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')1128 .getAttribute('aria-label')).toBe('Previous page');1129 });1130 it('should render custom aria labels if they are defined', function() {1131 const linkedPagination = ReactTestUtils.renderIntoDocument(1132 <PaginationBoxView pageCount={3}1133 nextAriaLabel={'Go to the next page'}1134 previousAriaLabel={'Go to the previous page'}1135 />1136 );1137 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:last-child a')1138 .getAttribute('aria-label')).toBe('Go to the next page');1139 expect(ReactDOM.findDOMNode(linkedPagination).querySelector('li:first-child a')1140 .getAttribute('aria-label')).toBe('Go to the previous page');1141 });1142 describe('render custom page labels if defined', () => {1143 it('should use custom page labels', () => {1144 const data = [1145 { name: 'Item 1' },1146 { name: 'Item 2' },1147 { name: 'Item 3' },1148 { name: 'Item 4' },1149 { name: 'Item 5' },1150 ];1151 const pagination = ReactTestUtils.renderIntoDocument(1152 <PaginationBoxView1153 pageCount={data.length}1154 pageLabelBuilder={(page) => {1155 const pageIndex = page - 1;1156 return data[pageIndex]?.name1157 }}1158 />1159 );1160 expect(1161 ReactDOM.findDOMNode(pagination).querySelector('.selected a')1162 .textContent1163 ).toBe('Item 1');1164 });1165 });...

Full Screen

Full Screen

form-field-test.js

Source:form-field-test.js Github

copy

Full Screen

...51 onBlur: stub()52 });53 });54 it('should be wrapped in a label', function () {55 expect(ReactDOM.findDOMNode(component).tagName).to.equal('LABEL');56 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');57 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_errored');58 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_select');59 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');60 renderFormField({61 field: 'input',62 name: 'MOCK_NAME',63 label: 'MOCK_LABEL',64 error: '',65 value: 'VALUE_MOCK',66 required: true,67 validation: 'MOCK_VALIDATION',68 fieldProps: {69 prop1: 'value1',70 prop2: 'value2',71 prop3: 'value3'72 },73 onChange: stub(),74 onBlur: stub()75 });76 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');77 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_errored');78 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');79 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_select');80 });81 it('should render error and label in right order and pass correct classes', function () {82 expect(ReactDOM.findDOMNode(component).children[0].tagName).to.equal('SPAN');83 expect(ReactDOM.findDOMNode(component).children[0].className).to.equal('form-field__label');84 expect(ReactDOM.findDOMNode(component).children[0].textContent).to.equal('MOCK_LABEL');85 expect(ReactDOM.findDOMNode(component).children[1]).to.equal(ReactDOM.findDOMNode(innerField));86 expect(ReactDOM.findDOMNode(component).children[2].tagName).to.equal('SPAN');87 expect(ReactDOM.findDOMNode(component).children[2].className).to.equal('form-field__error');88 expect(ReactDOM.findDOMNode(component).children[2].textContent).to.equal('MOCK_ERROR');89 });90 it('should pass props correctly to Input', function () {91 expect(innerField.props).to.include({92 prop1: 'value1',93 prop2: 'value2',94 prop3: 'value3',95 errored: true,96 name: 'MOCK_NAME',97 onBlur: component.props.onBlur,98 required: true,99 value: 'VALUE_MOCK'100 });101 });102 it('should pass disable field when context is loading', function () {103 component.context.loading = true;104 component.forceUpdate();105 expect(innerField.props.disabled).to.equal(true);106 component.context.loading = false;107 });108 it('should pass callbacks correctly', function () {109 component.props.onChange.reset();110 component.props.onBlur.reset();111 innerField.props.onChange({ target: { value: 'SOME_VALUE_2'}});112 innerField.props.onBlur();113 expect(component.props.onBlur).to.have.been.called;114 expect(component.props.onChange).to.have.been.calledWithMatch({target: { value: 'SOME_VALUE_2'}});115 });116 it('should pass focus to the field', function () {117 innerField.focus = stub();118 component.focus();119 expect(innerField.focus).to.have.been.called;120 });121 });122 describe('when rendering a checkbox field', function () {123 beforeEach(function () {124 renderFormField({125 field: 'checkbox',126 name: 'MOCK_NAME',127 label: 'MOCK_LABEL',128 error: 'MOCK_ERROR',129 value: false,130 required: true,131 validation: 'MOCK_VALIDATION',132 fieldProps: {133 prop1: 'value1',134 prop2: 'value2',135 prop3: 'value3'136 },137 onChange: stub(),138 onBlur: stub()139 });140 });141 it('should be wrapped in a label', function () {142 expect(ReactDOM.findDOMNode(component).tagName).to.equal('LABEL');143 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');144 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_checkbox');145 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_errored');146 renderFormField({147 field: 'checkbox',148 name: 'MOCK_NAME',149 label: 'MOCK_LABEL',150 error: '',151 value: false,152 required: true,153 validation: 'MOCK_VALIDATION',154 fieldProps: {155 prop1: 'value1',156 prop2: 'value2',157 prop3: 'value3'158 },159 onChange: stub(),160 onBlur: stub()161 });162 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');163 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_checkbox');164 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_errored');165 });166 it('should render error and label in right order and pass correct classes', function () {167 expect(ReactDOM.findDOMNode(component).children[0]).to.equal(ReactDOM.findDOMNode(innerField));168 expect(ReactDOM.findDOMNode(component).children[1].tagName).to.equal('SPAN');169 expect(ReactDOM.findDOMNode(component).children[1].className).to.equal('form-field__label');170 expect(ReactDOM.findDOMNode(component).children[1].textContent).to.equal('MOCK_LABEL');171 expect(ReactDOM.findDOMNode(component).children[2].tagName).to.equal('SPAN');172 expect(ReactDOM.findDOMNode(component).children[2].className).to.equal('form-field__error');173 expect(ReactDOM.findDOMNode(component).children[2].textContent).to.equal('MOCK_ERROR');174 });175 it('should pass props correctly to Checkbox', function () {176 expect(innerField.props).to.include({177 prop1: 'value1',178 prop2: 'value2',179 prop3: 'value3',180 errored: true,181 name: 'MOCK_NAME',182 onBlur: component.props.onBlur,183 required: true,184 value: false185 });186 });187 it('should pass disable field when context is loading', function () {188 component.context.loading = true;189 component.forceUpdate();190 expect(innerField.props.disabled).to.equal(true);191 component.context.loading = false;192 });193 it('should pass callbacks correctly', function () {194 component.props.onChange.reset();195 component.props.onBlur.reset();196 innerField.props.onChange({ target: { checked: true }});197 innerField.props.onBlur();198 expect(component.props.onBlur).to.have.been.called;199 expect(component.props.onChange).to.have.been.calledWithMatch({target: { value: true}});200 });201 it('should pass focus to the field', function () {202 innerField.focus = stub();203 component.focus();204 expect(innerField.focus).to.have.been.called;205 });206 });207 describe('when rendering an select field', function () {208 beforeEach(function () {209 renderFormField({210 field: 'select',211 name: 'MOCK_NAME',212 label: 'MOCK_LABEL',213 error: 'MOCK_ERROR',214 value: 5,215 required: true,216 validation: 'MOCK_VALIDATION',217 fieldProps: {218 prop1: 'value1',219 prop2: 'value2',220 prop3: 'value3',221 items: []222 },223 onChange: stub(),224 onBlur: stub()225 });226 });227 it('should be wrapped in a label', function () {228 expect(ReactDOM.findDOMNode(component).tagName).to.equal('LABEL');229 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');230 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_errored');231 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_select');232 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');233 renderFormField({234 field: 'select',235 name: 'MOCK_NAME',236 label: 'MOCK_LABEL',237 error: '',238 value: 5,239 required: true,240 validation: 'MOCK_VALIDATION',241 fieldProps: {242 prop1: 'value1',243 prop2: 'value2',244 prop3: 'value3',245 items: []246 },247 onChange: stub(),248 onBlur: stub()249 });250 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');251 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_errored');252 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_select');253 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');254 });255 it('should render error and label in right order and pass correct classes', function () {256 expect(ReactDOM.findDOMNode(component).children[0].tagName).to.equal('SPAN');257 expect(ReactDOM.findDOMNode(component).children[0].className).to.equal('form-field__label');258 expect(ReactDOM.findDOMNode(component).children[0].textContent).to.equal('MOCK_LABEL');259 expect(ReactDOM.findDOMNode(component).children[1]).to.equal(ReactDOM.findDOMNode(innerField));260 expect(ReactDOM.findDOMNode(component).children[2].tagName).to.equal('SPAN');261 expect(ReactDOM.findDOMNode(component).children[2].className).to.equal('form-field__error');262 expect(ReactDOM.findDOMNode(component).children[2].textContent).to.equal('MOCK_ERROR');263 });264 it('should pass props correctly to DropDown', function () {265 expect(innerField.props).to.include({266 prop1: 'value1',267 prop2: 'value2',268 prop3: 'value3',269 errored: true,270 name: 'MOCK_NAME',271 onBlur: component.props.onBlur,272 required: true,273 selectedIndex: 5274 });275 });276 it('should pass disable field when context is loading', function () {277 component.context.loading = true;278 component.forceUpdate();279 expect(innerField.props.disabled).to.equal(true);280 component.context.loading = false;281 });282 it('should pass callbacks correctly', function () {283 component.props.onChange.reset();284 component.props.onBlur.reset();285 innerField.props.onChange({index: 2});286 innerField.props.onBlur();287 expect(component.props.onBlur).to.have.been.called;288 expect(component.props.onChange).to.have.been.calledWithMatch({target: {value: 2}});289 });290 it('should pass focus to the field', function () {291 innerField.focus = stub();292 component.focus();293 expect(innerField.focus).to.have.been.called;294 });295 });296 describe('when rendering an textarea field', function () {297 beforeEach(function () {298 renderFormField({299 field: 'textarea',300 name: 'MOCK_NAME',301 label: 'MOCK_LABEL',302 error: 'MOCK_ERROR',303 value: {value: 'VALUE_MOCk'},304 required: true,305 validation: 'MOCK_VALIDATION',306 fieldProps: {307 prop1: 'value1',308 prop2: 'value2',309 prop3: 'value3'310 },311 onChange: stub(),312 onBlur: stub()313 });314 });315 it('should be wrapped in a div', function () {316 expect(ReactDOM.findDOMNode(component).tagName).to.equal('DIV');317 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');318 expect(ReactDOM.findDOMNode(component).className).to.include('form-field_errored');319 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_select');320 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');321 renderFormField({322 field: 'textarea',323 name: 'MOCK_NAME',324 label: 'MOCK_LABEL',325 error: '',326 value: {value: 'VALUE_MOCk'},327 required: true,328 validation: 'MOCK_VALIDATION',329 fieldProps: {330 prop1: 'value1',331 prop2: 'value2',332 prop3: 'value3'333 },334 onChange: stub(),335 onBlur: stub()336 });337 expect(ReactDOM.findDOMNode(component).className).to.include('form-field');338 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_errored');339 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_checkbox');340 expect(ReactDOM.findDOMNode(component).className).to.not.include('form-field_select');341 });342 it('should render error and label in right order and pass correct classes', function () {343 expect(ReactDOM.findDOMNode(component).children[0].tagName).to.equal('SPAN');344 expect(ReactDOM.findDOMNode(component).children[0].className).to.equal('form-field__label');345 expect(ReactDOM.findDOMNode(component).children[0].textContent).to.equal('MOCK_LABEL');346 expect(ReactDOM.findDOMNode(component).children[1]).to.equal(ReactDOM.findDOMNode(innerField));347 expect(ReactDOM.findDOMNode(component).children[2].tagName).to.equal('SPAN');348 expect(ReactDOM.findDOMNode(component).children[2].className).to.equal('form-field__error');349 expect(ReactDOM.findDOMNode(component).children[2].textContent).to.equal('MOCK_ERROR');350 });351 it('should pass props correctly to TextEditor', function () {352 expect(innerField.props).to.include({353 prop1: 'value1',354 prop2: 'value2',355 prop3: 'value3',356 errored: true,357 name: 'MOCK_NAME',358 onBlur: component.props.onBlur,359 required: true360 });361 expect(innerField.props.value).to.deep.equal({value: 'VALUE_MOCk'});362 });363 it('should pass disable field when context is loading', function () {...

Full Screen

Full Screen

new-stock-old.js

Source:new-stock-old.js Github

copy

Full Screen

...57 handleOptionChange(changeEvent) {58 this.setState({selectedOption: changeEvent.target.value});59 60 if (changeEvent.target.value == 'option1')61 ReactDOM.findDOMNode(this.refs.ATRMultiple).focus();62 else if (changeEvent.target.value == 'option2')63 ReactDOM.findDOMNode(this.refs.stoplossQuote).focus();64 else65 ReactDOM.findDOMNode(this.refs.stoplossPercentage).focus(); 66 }67 68 // Virtuell function som anropas då sidan visas69 componentDidMount() {70 var self = this;71 var stoplossOption = "option1"; 72 var helpStr = "";73 // Om vi har ett ID, hämta aktien74 if (_stockID != undefined) {75 var request = require("client-request");76 77 var options = {78 uri: "http://app-o.se:3000/stock/" + _stockID,79 method: "GET",80 json: true,81 headers: {82 "content-type": "application/json"83 }84 };85 var req = request(options, function(err, response, body) {86 87 if (!err) {88 89 ReactDOM.findDOMNode(self.refs.stockticker).value = body[0].ticker;90 ReactDOM.findDOMNode(self.refs.stockticker).disabled = true;91 92 ReactDOM.findDOMNode(self.refs.stockname).value = body[0].namn;93 ReactDOM.findDOMNode(self.refs.stockname).focus();94 95 ReactDOM.findDOMNode(self.refs.stockprice).value = body[0].kurs;96 ReactDOM.findDOMNode(self.refs.stockcount).value = body[0].antal;97 98 if (body[0].stoplossTyp == 1) {99 ReactDOM.findDOMNode(self.refs.ATRMultiple).value = body[0].ATRMultipel;100 stoplossOption = "option1";101 }102 else if (body[0].stoplossTyp == 2) {103 ReactDOM.findDOMNode(self.refs.stoplossQuote).value = body[0].stoplossKurs;104 stoplossOption = "option2";105 }106 else {107 ReactDOM.findDOMNode(self.refs.stoplossPercentage).value = body[0].stoplossProcent * 100;108 stoplossOption = "option3";109 }110 111 _percentile10 = body[0].percentil10;112 113 helpStr = "(ATR = " + body[0].ATR.toFixed(2) + " ATR % = " + ((body[0].ATR/_stockQuote)*100).toFixed(2) + "%)";114 115 self.setState({helptext: helpStr, selectedOption: stoplossOption, selectedCheck: _percentile10});116 117 }118 else119 console.log(err); 120 121 }); 122 123 }124 else {125 // Sätt fokus på ticker126 ReactDOM.findDOMNode(this.refs.stockticker).focus(); 127 self.setState({helptext: helpStr, selectedOption: stoplossOption, selectedCheck: false});128 }129 130 _inputfield = ReactDOM.findDOMNode(this.refs.stockname);131 }132 133 onSave() {134 var rec = {}; 135 var today = new Date(); 136 137 // ---- VALIDATE138 139 if (ReactDOM.findDOMNode(this.refs.stockticker).value.length == 0) {140 ReactDOM.findDOMNode(this.refs.stockticker).focus(); 141 return; 142 }143 if (ReactDOM.findDOMNode(this.refs.stockname).value.length == 0) {144 ReactDOM.findDOMNode(this.refs.stockname).focus(); 145 return; 146 }147 if (!(ReactDOM.findDOMNode(this.refs.stockprice).value.length > 0 && isNumeric(ReactDOM.findDOMNode(this.refs.stockprice).value))) {148 ReactDOM.findDOMNode(this.refs.stockprice).focus(); 149 return; 150 }151 if (!(ReactDOM.findDOMNode(this.refs.stockcount).value.length > 0 && isNumeric(ReactDOM.findDOMNode(this.refs.stockcount).value))) {152 ReactDOM.findDOMNode(this.refs.stockcount).focus(); 153 return; 154 }155 156 if (this.state.selectedOption == 'option1') {157 if (!(ReactDOM.findDOMNode(this.refs.ATRMultiple).value.length > 0 && isNumeric(ReactDOM.findDOMNode(this.refs.ATRMultiple).value))) {158 ReactDOM.findDOMNode(this.refs.ATRMultiple).focus(); 159 return; 160 }161 }162 else if (this.state.selectedOption == 'option2') {163 if (!(ReactDOM.findDOMNode(this.refs.stoplossQuote).value.length > 0 && isNumeric(ReactDOM.findDOMNode(this.refs.stoplossQuote).value))) {164 ReactDOM.findDOMNode(this.refs.stoplossQuote).focus(); 165 return; 166 }167 }168 else {169 if (!ReactDOM.findDOMNode(this.refs.stoplossPercentage).value.length > 0) {170 ReactDOM.findDOMNode(this.refs.stoplossPercentage).focus(); 171 return; 172 }173 else if (isNumeric(ReactDOM.findDOMNode(this.refs.stoplossPercentage).value)) {174 var val = ReactDOM.findDOMNode(this.refs.stoplossPercentage).value;175 176 if (val > 25) {177 ReactDOM.findDOMNode(this.refs.stoplossPercentage).focus(); 178 return; 179 }180 }181 else {182 ReactDOM.findDOMNode(this.refs.stoplossPercentage).focus(); 183 return; 184 }185 }186 187 // ---- SAVE188 189 var request = require("client-request");190 rec.ticker = (ReactDOM.findDOMNode(this.refs.stockticker).value).toUpperCase();191 rec.namn = ReactDOM.findDOMNode(this.refs.stockname).value;192 rec.kurs = ReactDOM.findDOMNode(this.refs.stockprice).value;193 rec.antal = ReactDOM.findDOMNode(this.refs.stockcount).value;194 195 if (this.state.selectedOption == 'option1') {196 rec.stoplossTyp = _stoplossType.StoplossTypeATR;197 rec.ATRMultipel = ReactDOM.findDOMNode(this.refs.ATRMultiple).value; 198 }199 else if (this.state.selectedOption == 'option2') {200 rec.stoplossTyp = _stoplossType.StoplossTypeQuote;201 rec.stoplossKurs = ReactDOM.findDOMNode(this.refs.stoplossQuote).value; 202 203 }204 else {205 rec.stoplossTyp = _stoplossType.StoplossTypePercent;206 rec.stoplossProcent = ReactDOM.findDOMNode(this.refs.stoplossPercentage).value/100; 207 }208 209 rec.percentil10 = _percentile10;210 211 rec.ATR = _ATR; 212 var options = {213 uri: "http://app-o.se:3000/save",214 method: "POST",215 body: rec,216 timeout: 3000,217 json: true,218 headers: {219 "content-type": "application/json" 220 }221 };222 223 var req = request(options, function callback(err, response, body) {224 225 if (err) {226 console.log(err);227 }228 229 window.history.back(); 230 });231 }232 233 onCancel() {234 window.history.back();235 }236 handleKeyDown(target) {237 // Tillåt inte ','238 if (target.keyCode == 188)239 target.preventDefault(); 240 }241 242 handleKeyPress(target) {243 // Kolla att tickern finns244 if (target.key == 'Enter') {245 var self = this;246 247 var request = require("client-request");248 var ticker = target.currentTarget.value;249 250 var options = {251 uri: "http://app-o.se:3000/company/" + ticker,252 method: "GET",253 timeout: 1000,254 json: true,255 headers: {256 "content-type": "application/json" // setting headers is up to *you* 257 }258 };259 260 var req = request(options, function(err, response, body) {261 if (!err) {262 263 if (body != null) {264 _inputfield.value = body; // Sätt aktienamnet automatiskt265 266 options = {267 uri: "http://app-o.se:3000/atr/" + ticker,268 method: "GET",269 timeout: 1000,270 json: true,271 headers: {272 "content-type": "application/json" // setting headers is up to *you* 273 }274 };275 276 var req = request(options, function(err, response, body) {277 if (!err) {278 var helpStr;279 280 helpStr = "(ATR = " + body.ATR + " ATR % = " + Math.round(body.atrPercentage*100*100)/100 + "%) " + getSweDate(body.earningsDate[0]);281 _ATR = body.ATR;282 283 self.setState({helptext: helpStr}); 284 ReactDOM.findDOMNode(self.refs.stockprice).focus();285 } 286 }); 287 }288 } 289 });290 291 }292 } 293 294 render() {295 return (296 <div id="new_stock">297 298 <Col sm={10} smOffset={1} md={8} mdOffset={2}>...

Full Screen

Full Screen

index.spec.js

Source:index.spec.js Github

copy

Full Screen

...35 changeHook = null;36 });37 it('add className', () => {38 const expectedClassName = 'rc-collapse-item important';39 expect(findDOMNode(collapse, 'rc-collapse-item')[2].className).to.be(expectedClassName);40 });41 it('create works', () => {42 expect(findDOMNode(collapse, 'rc-collapse').length).to.be(1);43 });44 it('panel works', () => {45 expect(findDOMNode(collapse, 'rc-collapse-item').length).to.be(3);46 expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(0);47 });48 it('should render custom arrow icon corrctly', () => {49 expect(findDOMNode(collapse, 'rc-collapse-header')[0].textContent.includes('test>'));50 });51 it('default active works', () => {52 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(0);53 });54 it('onChange works', (done) => {55 changeHook = (d) => {56 expect(d).to.eql(['2']);57 done();58 };59 const header = findDOMNode(collapse, 'rc-collapse-header')[1];60 Simulate.click(header);61 });62 it('click should toggle panel state', (done) => {63 const header = findDOMNode(collapse, 'rc-collapse-header')[1];64 Simulate.click(header);65 setTimeout(() => {66 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);67 Simulate.click(header);68 setTimeout(() => {69 expect(findDOMNode(collapse, 'rc-collapse-content-inactive')[0].innerHTML).70 to.eql('<div class="rc-collapse-content-box">second</div>');71 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);72 done();73 }, 500);74 }, 500);75 });76 it('click should not toggle disabled panel state', (done) => {77 const header = findDOMNode(collapse, 'rc-collapse-header')[0];78 Simulate.click(header);79 setTimeout(() => {80 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);81 done();82 }, 500);83 });84 it('should not have role', () => {85 const item = findDOMNode(collapse, 'rc-collapse')[0];86 expect(item.getAttribute('role')).to.eql(null);87 });88 it('should set button role on panel title', () => {89 const item = findDOMNode(collapse, 'rc-collapse-header')[0];90 expect(item.getAttribute('role')).to.eql('button');91 });92 });93 describe('destroyInactivePanel', () => {94 let node;95 let collapse;96 const destroyInactivePanel = true;97 beforeEach((done) => {98 node = document.createElement('div');99 document.body.appendChild(node);100 ReactDOM.render(101 <Collapse onChange={onChange} destroyInactivePanel={destroyInactivePanel}>102 <Panel header="collapse 1" key="1">first</Panel>103 <Panel header="collapse 2" key="2">second</Panel>104 <Panel header="collapse 3" key="3" className="important">third</Panel>105 </Collapse>, node, function init() {106 collapse = this;107 done();108 });109 });110 afterEach(() => {111 ReactDOM.unmountComponentAtNode(node);112 changeHook = null;113 });114 it('click should toggle panel state', (done) => {115 const header = findDOMNode(collapse, 'rc-collapse-header')[1];116 Simulate.click(header);117 setTimeout(() => {118 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);119 Simulate.click(header);120 setTimeout(() => {121 expect(findDOMNode(collapse, 'rc-collapse-content-inactive')[0].innerHTML).to.eql('');122 done();123 }, 500);124 }, 500);125 });126 });127 describe('accordion', () => {128 let node;129 let collapse;130 beforeEach((done) => {131 node = document.createElement('div');132 document.body.appendChild(node);133 ReactDOM.render(134 <Collapse onChange={onChange} accordion>135 <Panel header="collapse 1" key="1">first</Panel>136 <Panel header="collapse 2" key="2">second</Panel>137 <Panel header="collapse 3" key="3">third</Panel>138 </Collapse>, node, function init() {139 collapse = this;140 done();141 });142 });143 afterEach(() => {144 ReactDOM.unmountComponentAtNode(node);145 changeHook = null;146 });147 it('accordion item, should default open zero item', () => {148 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);149 });150 it('accordion item, should default open zero item', () => {151 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(0);152 });153 it('should toggle show on panel', (done) => {154 let header = findDOMNode(collapse, 'rc-collapse-header')[1];155 Simulate.click(header);156 setTimeout(() => {157 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);158 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(1);159 header = findDOMNode(collapse, 'rc-collapse-header')[1];160 Simulate.click(header);161 setTimeout(() => {162 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);163 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(0);164 done();165 }, 500);166 }, 500);167 });168 it('should only show on panel', (done) => {169 let header = findDOMNode(collapse, 'rc-collapse-header')[1];170 Simulate.click(header);171 setTimeout(() => {172 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);173 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(1);174 header = findDOMNode(collapse, 'rc-collapse-header')[2];175 Simulate.click(header);176 setTimeout(() => {177 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);178 expect(findDOMNode(collapse, 'rc-collapse-item-active').length).to.be(1);179 done();180 }, 500);181 }, 500);182 });183 it('should add tab role on panel title', () => {184 const item = findDOMNode(collapse, 'rc-collapse-header')[0];185 expect(item.getAttribute('role')).to.eql('tab');186 });187 it('should add tablist role on accordion', () => {188 const item = findDOMNode(collapse, 'rc-collapse')[0];189 expect(item.getAttribute('role')).to.eql('tablist');190 });191 it('should add tablist role on PanelContent', (done) => {192 const header = findDOMNode(collapse, 'rc-collapse-header')[0];193 Simulate.click(header);194 setTimeout(() => {195 const item = findDOMNode(collapse, 'rc-collapse-content')[0];196 expect(item.getAttribute('role')).to.eql('tabpanel');197 done();198 }, 500);199 });200 });201 describe('forceRender', () => {202 let node;203 let collapse;204 beforeEach(() => {205 node = document.createElement('div');206 document.body.appendChild(node);207 });208 const renderCollapse = (element) => {209 ReactDOM.render(element, node, function init() {210 collapse = this;211 });212 };213 afterEach(() => {214 ReactDOM.unmountComponentAtNode(node);215 changeHook = null;216 });217 it('when forceRender is not supplied it should lazy render the panel content', () => {218 renderCollapse(219 <Collapse>220 <Panel header="collapse 1" key="1" disabled>first</Panel>221 <Panel header="collapse 2" key="2">second</Panel>222 </Collapse>223 );224 expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(0);225 });226 it('when forceRender is FALSE it should lazy render the panel content', () => {227 renderCollapse(228 <Collapse>229 <Panel header="collapse 1" key="1" forceRender={false} disabled>first</Panel>230 <Panel header="collapse 2" key="2">second</Panel>231 </Collapse>232 );233 expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(0);234 });235 it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {236 renderCollapse(237 <Collapse>238 <Panel header="collapse 1" key="1" forceRender disabled>first</Panel>239 <Panel header="collapse 2" key="2">second</Panel>240 </Collapse>241 );242 expect(findDOMNode(collapse, 'rc-collapse-content').length).to.be(1);243 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);244 });245 });246 describe('keyboard support', () => {247 let node;248 let collapse;249 beforeEach(() => {250 node = document.createElement('div');251 document.body.appendChild(node);252 });253 const renderCollapse = (element) => {254 ReactDOM.render(element, node, function init() {255 collapse = this;256 });257 };258 afterEach(() => {259 ReactDOM.unmountComponentAtNode(node);260 changeHook = null;261 });262 it('should toggle panel when press enter', (done) => {263 renderCollapse(264 <Collapse>265 <Panel header="collapse 1" key="1">first</Panel>266 <Panel header="collapse 2" key="2">second</Panel>267 <Panel header="collapse 3" key="3" disabled>second</Panel>268 </Collapse>269 );270 Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[2], {271 key: 'Enter', keyCode: 13, which: 13,272 });273 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);274 Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {275 key: 'Enter', keyCode: 13, which: 13,276 });277 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);278 expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)279 .to.contain('rc-collapse-content-active');280 Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {281 key: 'Enter', keyCode: 13, which: 13,282 });283 setTimeout(() => {284 expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);285 expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)286 .not.to.contain('rc-collapse-content-active');287 done();288 }, 500);289 });290 });...

Full Screen

Full Screen

Fire.js

Source:Fire.js Github

copy

Full Screen

...12 var frost;13 var fire_main;14 var fire;15 if (this.getDate() == 1) {16 ReactDOM.findDOMNode(this.refs.fire).style.display = "none";17 ReactDOM.findDOMNode(this.refs.sparks).style.display = "none";18 frost = ReactDOM.findDOMNode(this.refs.frost).style;19 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "block";20 frost.display = "block";21 frost.width = "100%";22 frost.height = "100%";23 ReactDOM.findDOMNode(this.refs.status).innerHTML = status + "Feeling Monday 😭";24 } else if (this.getDate() == 2) {25 ReactDOM.findDOMNode(this.refs.fire).style.display = "none";26 ReactDOM.findDOMNode(this.refs.sparks).style.display = "none";27 frost = ReactDOM.findDOMNode(this.refs.frost);28 frost.style.display = "block";29 frost.style.width = "75%";30 frost.style.height = "75%";31 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "none";32 ReactDOM.findDOMNode(this.refs.status).innerHTML = status + "Feeling Tuesday 😟";33 } else if (this.getDate() == 3) {34 ReactDOM.findDOMNode(this.refs.fire).style.display = "none";35 ReactDOM.findDOMNode(this.refs.sparks).style.display = "none";36 ReactDOM.findDOMNode(this.refs.frost).style.display = "block";37 ReactDOM.findDOMNode(this.refs.frost_left).style.display = "none";38 ReactDOM.findDOMNode(this.refs.frost_right).style.display = "none";39 ReactDOM.findDOMNode(this.refs.frost_bottom).style.display = "none";40 frost = ReactDOM.findDOMNode(this.refs.frost_main).style;41 frost.display = "block";42 frost.width = "75%";43 frost.height = "75%";44 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "none";45 ReactDOM.findDOMNode(this.refs.status).innerHTML = status + "Feeling Wednesday 👩‍💻";46 } else if (this.getDate() == 4) {47 ReactDOM.findDOMNode(this.refs.frost).style.display = "none";48 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "none";49 ReactDOM.findDOMNode(this.refs.sparks).style.display = "none";50 ReactDOM.findDOMNode(this.refs.fire).style.display = "block";51 ReactDOM.findDOMNode(this.refs.fire_left).style.display = "none";52 ReactDOM.findDOMNode(this.refs.fire_right).style.display = "none";53 ReactDOM.findDOMNode(this.refs.fire_bottom).style.display = "none";54 fire_main = ReactDOM.findDOMNode(this.refs.fire_main).style;55 fire_main.display = "block";56 fire_main.width = "75%";57 fire_main.height = "75%";58 ReactDOM.findDOMNode(this.refs.status).innerHTML = status + "Feeling Thrusday 😴";59 } else if (this.getDate() == 5) {60 ReactDOM.findDOMNode(this.refs.frost).style.display = "none";61 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "none";62 ReactDOM.findDOMNode(this.refs.sparks).style.display = "none";63 fire = ReactDOM.findDOMNode(this.refs.fire).style;64 fire.display = "block";65 fire.width = "75%";66 fire.height = "75%";67 ReactDOM.findDOMNode(this.refs.fire_left).style.display = "block";68 ReactDOM.findDOMNode(this.refs.fire_right).style.display = "block";69 ReactDOM.findDOMNode(this.refs.fire_bottom).style.display = "block";70 ReactDOM.findDOMNode(this.refs.fire_main).style.display = "block";71 ReactDOM.findDOMNode(this.refs.status).innerHTML = status + "Feeling Friday 💃";72 } else {73 ReactDOM.findDOMNode(this.refs.frost).style.display = "none";74 ReactDOM.findDOMNode(this.refs.snowflakes).style.display = "none";75 ReactDOM.findDOMNode(this.refs.sparks).style.display = "block";76 fire = ReactDOM.findDOMNode(this.refs.fire).style;77 fire.display = "block";78 fire.width = "100%%";79 fire.height = "100%%";80 ReactDOM.findDOMNode(this.refs.fire_left).style.display = "block";81 ReactDOM.findDOMNode(this.refs.fire_right).style.display = "block";82 ReactDOM.findDOMNode(this.refs.fire_bottom).style.display = "block";83 ReactDOM.findDOMNode(this.refs.fire_main).style.display = "block";84 var s = status + "Feeling "85 if(this.getDate() == 6){86 s += "Saturday 🎉";87 // ReactDOM.findDOMNode(this.refs.emo).style.content = "🎉"88 }89 else{90 s += "Sunday 😌";91 }92 ReactDOM.findDOMNode(this.refs.status).innerHTML = s;93 // ReactDOM.findDOMNode(this.refs.level).innerHTML = "Maximum Level";94 }95 // ReactDOM.findDOMNode(this.refs.status).innerHTML = this.getDate();96 }97 componentDidMount() {98 this.updateLevel();99 }100 render() {101 return (102 <html>103 <body>104 <div className="condition">105 <div className="snowflakes" ref="snowflakes" aria-hidden="true">106 <div className="snowflake">❅</div>107 <div className="snowflake">❆</div>108 <div className="snowflake">❅</div>109 <div className="snowflake">❆</div>...

Full Screen

Full Screen

findDOMNode-test.js

Source:findDOMNode-test.js Github

copy

Full Screen

...12const ReactTestUtils = require('react-dom/test-utils');13const StrictMode = React.StrictMode;14describe('findDOMNode', () => {15 it('findDOMNode should return null if passed null', () => {16 expect(ReactDOM.findDOMNode(null)).toBe(null);17 });18 it('findDOMNode should find dom element', () => {19 class MyNode extends React.Component {20 render() {21 return (22 <div>23 <span>Noise</span>24 </div>25 );26 }27 }28 const myNode = ReactTestUtils.renderIntoDocument(<MyNode />);29 const myDiv = ReactDOM.findDOMNode(myNode);30 const mySameDiv = ReactDOM.findDOMNode(myDiv);31 expect(myDiv.tagName).toBe('DIV');32 expect(mySameDiv).toBe(myDiv);33 });34 it('findDOMNode should find dom element after an update from null', () => {35 function Bar({flag}) {36 if (flag) {37 return <span>A</span>;38 }39 return null;40 }41 class MyNode extends React.Component {42 render() {43 return <Bar flag={this.props.flag} />;44 }45 }46 const container = document.createElement('div');47 const myNodeA = ReactDOM.render(<MyNode />, container);48 const a = ReactDOM.findDOMNode(myNodeA);49 expect(a).toBe(null);50 const myNodeB = ReactDOM.render(<MyNode flag={true} />, container);51 expect(myNodeA === myNodeB).toBe(true);52 const b = ReactDOM.findDOMNode(myNodeB);53 expect(b.tagName).toBe('SPAN');54 });55 it('findDOMNode should reject random objects', () => {56 expect(function() {57 ReactDOM.findDOMNode({foo: 'bar'});58 }).toThrowError('Argument appears to not be a ReactComponent. Keys: foo');59 });60 it('findDOMNode should reject unmounted objects with render func', () => {61 class Foo extends React.Component {62 render() {63 return <div />;64 }65 }66 const container = document.createElement('div');67 const inst = ReactDOM.render(<Foo />, container);68 ReactDOM.unmountComponentAtNode(container);69 expect(() => ReactDOM.findDOMNode(inst)).toThrowError(70 'Unable to find node on an unmounted component.',71 );72 });73 it('findDOMNode should not throw an error when called within a component that is not mounted', () => {74 class Bar extends React.Component {75 UNSAFE_componentWillMount() {76 expect(ReactDOM.findDOMNode(this)).toBeNull();77 }78 render() {79 return <div />;80 }81 }82 expect(() => ReactTestUtils.renderIntoDocument(<Bar />)).not.toThrow();83 });84 it('findDOMNode should warn if used to find a host component inside StrictMode', () => {85 let parent = undefined;86 let child = undefined;87 class ContainsStrictModeChild extends React.Component {88 render() {89 return (90 <StrictMode>91 <div ref={n => (child = n)} />92 </StrictMode>93 );94 }95 }96 ReactTestUtils.renderIntoDocument(97 <ContainsStrictModeChild ref={n => (parent = n)} />,98 );99 let match;100 expect(() => (match = ReactDOM.findDOMNode(parent))).toErrorDev([101 'Warning: findDOMNode is deprecated in StrictMode. ' +102 'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' +103 'Instead, add a ref directly to the element you want to reference. ' +104 'Learn more about using refs safely here: ' +105 'https://fb.me/react-strict-mode-find-node' +106 '\n in div (at **)' +107 '\n in StrictMode (at **)' +108 '\n in ContainsStrictModeChild (at **)',109 ]);110 expect(match).toBe(child);111 });112 it('findDOMNode should warn if passed a component that is inside StrictMode', () => {113 let parent = undefined;114 let child = undefined;115 class IsInStrictMode extends React.Component {116 render() {117 return <div ref={n => (child = n)} />;118 }119 }120 ReactTestUtils.renderIntoDocument(121 <StrictMode>122 <IsInStrictMode ref={n => (parent = n)} />123 </StrictMode>,124 );125 let match;126 expect(() => (match = ReactDOM.findDOMNode(parent))).toErrorDev([127 'Warning: findDOMNode is deprecated in StrictMode. ' +128 'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' +129 'Instead, add a ref directly to the element you want to reference. ' +130 'Learn more about using refs safely here: ' +131 'https://fb.me/react-strict-mode-find-node' +132 '\n in div (at **)' +133 '\n in IsInStrictMode (at **)' +134 '\n in StrictMode (at **)',135 ]);136 expect(match).toBe(child);137 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { findDOMNode } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const element = await page.$('text=Docs');7 const domNode = await findDOMNode(page, element);8 console.log(domNode);9 await browser.close();10})();11{ nodeType: 1,12 [ { nodeType: 1,

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { chromium } = require("playwright");2const { findElement } = require("playwright/lib/server/dom");3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const element = await page.$("#main > div > div:nth-child(1) > div > div > div > div > div > div > div > div > div > div > div > h1");7 const elementHandle = await findElement(element);8 console.log(elementHandle);9 await browser.close();10})();11const domHandle = await element.evaluateHandle((e) => findElement(e));12const domHandle = await element.evaluateHandle((e) => findElement(e));13const domHandle = await element.evaluateHandle((e) => findElement(e));14const domHandle = await element.evaluateHandle((e) => findElement(e));

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { findDOMNode } = require('playwright/lib/server/dom.js');2const { test, expect } = require('@playwright/test');3test('test', async ({ page }) => {4 const elementHandle = await page.$('text=Get started');5 const domNode = await findDOMNode(elementHandle);6 expect(domNode.outerHTML).toContain('Get started');7});8const { findDOMNode } = require('playwright/lib/server/dom.js');9const { test, expect } = require('@playwright/test');10test('test', async ({ page }) => {11 const elementHandle = await page.$('text=Get started');12 const domNode = await findDOMNode(elementHandle);13 expect(domNode.outerHTML).toContain('Get started');14});15const { findDOMNode } = require('playwright/lib/server/dom.js');16const { test, expect } = require('@playwright/test');17test('test', async ({ page }) => {18 const elementHandle = await page.$('text=Get started');19 const domNode = await findDOMNode(elementHandle);20 expect(domNode.outerHTML).toContain('Get started');21});22const { findDOMNode } = require('playwright/lib/server/dom.js');23const { test, expect } = require('@playwright/test');24test('test', async ({ page }) => {25 const elementHandle = await page.$('text=Get started');26 const domNode = await findDOMNode(elementHandle);27 expect(domNode.outerHTML).toContain('Get started');28});29const { findDOMNode } = require('playwright/lib/server/dom.js');30const { test, expect } = require('@playwright/test');31test('test', async ({ page }) => {32 const elementHandle = await page.$('text=Get started');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const {findDOMNode} = require('playwright/lib/server/dom.js');2const {BrowserServer} = require('playwright/lib/server/browserServer.js');3const {Browser} = require('playwright/lib/server/browser.js');4const {Page} = require('playwright/lib/server/page.js');5const {ElementHandle} = require('playwright/lib/server/elementHandler.js');6const elementHandle = await page.$('#elementId');7const domNode = await findDOMNode(elementHandle);8const browserServer = await BrowserServer.create(browser);9const browser = await Browser.connect(browserServer);10const page = await Page.create(browser);11const elementHandle = await ElementHandle.create(page, 'elementId');12const domNode = await findDOMNode(elementHandle);13const elementHandle = await page.$('#elementId');14const domNode = await elementHandle._getDOMHandle();15const elementHandle = await page.$('#elementId');16const domNode = await elementHandle.asElement()._getDOMHandle();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { findDOMNode } = require('playwright/lib/server/dom');2const { test } = require('playwright-test');3const { chromium } = require('playwright');4test('test', async ({ page }) => {5 const node = await page.$('.navbar__inner');6 const domNode = await findDOMNode(node);7 console.log(domNode);8});9{10 attributes: {11 },12 {13 attributes: {14 },15 },16 {17 attributes: {18 },19 {20 attributes: {21 },22 },23 {24 attributes: {25 },26 },27 {28 attributes: {29 },

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { findDOMNode } = 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 input = await page.$('input[name="q"]');8 const inputNode = findDOMNode(input);9 console.log(inputNode);10 await browser.close();11})();12HTMLInputElement {13 _ownerDocument: Document {14 _implementation: DOMImplementation { _features: [Object] },15 _mutationObservers: Map(0) {},16 _childListMutationObservers: Map(0) {},17 _attributeMutationObservers: Map(0) {},18 _characterDataMutationObservers: Map(0) {},19 _subtreeMutationObservers: Map(0) {},20 _idToElements: Map(0) {},21 _idToElementsWithIdAttribute: Map(0) {},22 _implementationSpecific: DOMImplementationSpecific {23 },24 _defaultView: Window {

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { findDOMNode } = require('@playwright/test');2test('check findDOMNode', async ({ page }) => {3 const handle = await findDOMNode(page, 'text=Learn More');4 await handle.click();5 await page.waitForLoadState('domcontentloaded');6 const url = page.url();7});

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