KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use block1El method in ng-mocks
Best JavaScript code snippet using ng-mocks
main-script.js
Source:main-script.js 
1var scrollParam,2 scrollTimeParam = 0,3 scrollIdParam = 0,4 munuLi,5 slickParams,6 contentBlock1El,7 seaContentEls;8document.addEventListener( "DOMContentLoaded", ready );9function ready( event ) {10 slickParams = {11 dots: true,12 infinite: true,13 speed: 600,14 slidesToShow: 1,15 adaptiveHeight: true,16 autoplay: true,17 autoplaySpeed: 4000,18 pauseOnFocus: false,19 };20 $( "#home-page-slider" ).slick( slickParams );21 22 23 var parallaxSlider = $( '.home-page-slider-slide' );24 $(window).scroll( function( event ) {25 parallax( parallaxSlider );26 });27 28 scrollEl = document.querySelectorAll( ".nav-link" );29 if ( scrollEl ) 30 for ( var i = 0; i < scrollEl.length; i++ )31 scrollEl[ i ].addEventListener( "click", scrollingFunc );32 33 var headerEl = document.querySelector( "header" ),34 headerBobMenuBt = document.querySelector( "#header-bob-menu-bt" );35 36 if ( headerEl && headerBobMenuBt ) {37 headerBobMenuBt.addEventListener( "click", function( event ) {38 if ( headerEl.classList.contains( "active" ) ) {39 headerEl.classList.remove( "active" );40 document.body.style = "";41 }42 else {43 headerEl.classList.add( "active" );44 document.body.style.overflow = "hidden";45 }46 } );47 }48 49 var sitebarFixed = document.querySelector( "#sitebar-fixed" ),50 sitebarFixed2 = document.querySelector( "#sitebar-fixed-2" );51 if ( sitebarFixed ) {52 posFixed( sitebarFixed );53 $(window).scroll( function( event ) {54 posFixed( sitebarFixed );55 });56 }57 if ( sitebarFixed2 ) {58 posFixed( sitebarFixed2 );59 $(window).scroll( function( event ) {60 posFixed( sitebarFixed2 );61 });62 }63 64 munuLi = document.querySelectorAll( ".sea-nav li a" );65 66 var inA = document.querySelectorAll( ".in > a" );67 if ( inA ) {68 for ( var i = 0; i < inA.length; i++ ) {69 inA[ i ].addEventListener( "click", function( event ) {70 if ( ! this.classList.contains( "open" ) ) {71 event.preventDefault();72 this.classList.add( "open" );73 this.nextElementSibling.classList.add( "active" );74 }75 } );76 }77 }78 79 var headerPageTitle = document.querySelector( ".header-page-title" );80 if ( headerPageTitle ) {81 var headerPageTitleMob = document.querySelector( ".header-bottom-page-title" );82 if ( headerPageTitleMob ) {83 headerPageTitleMob.innerHTML = headerPageTitle.innerHTML;84 }85 }86 87 var headerInEl = document.querySelectorAll( "header .header-navigation" );88 if ( headerInEl[1] ) {89 headerInEl = headerInEl[ 1 ].querySelector( ".in" );90 if ( headerInEl )91 headerInEl.classList.remove( "in" );92 }93 94 /* map */95 var mapHoverBlock = document.querySelector( "#map-hover-block" ),96 mapBlockSpans = document.querySelectorAll( ".map-block div > span" );97 98 if ( mapHoverBlock && mapBlockSpans[ 0 ] ) {99 for ( var i = 0; i < mapBlockSpans.length; i++ ) {100 mapBlockSpans[ i ].addEventListener( "mouseover", function( event ) {101 if ( document.documentElement.clientWidth <= 900 )102 return;103 mapHoverBlock.style.top = this.offsetTop - 83 + "px";104 if ( this.classList.contains( "left-location" ) ) {105 mapHoverBlock.style.left = "auto";106 mapHoverBlock.style.right = "0";107 mapHoverBlock.style.overflow = "hidden";108 }109 else {110 mapHoverBlock.style.left = this.offsetLeft - 16 + "px";111 mapHoverBlock.style.right = "auto";112 mapHoverBlock.style.overflow = "visible";113 }114 115 mapHoverBlock.innerHTML = "<p><strong>" + this.dataset.title + "</strong><br /><br />" + this.dataset.text + "</p>";116 mapHoverBlock.style.display = "block";117 this.innerHTML = "";118 } );119 mapBlockSpans[ i ].addEventListener( "mouseout", function( event ) {120 if ( event.relatedTarget.id == "map-hover-block" )121 return;122 mapHoverBlock.style.display = "none";123 } );124 mapHoverBlock.addEventListener( "mouseout", function( event ) {125 if ( event.relatedTarget.id == "map-hover-block" )126 return;127 mapHoverBlock.style.display = "none";128 } );129 130 mapHoverFunc( mapBlockSpans );131 window.addEventListener( "resize", function( event ) {132 mapHoverFunc( mapBlockSpans );133 } )134 }135 }136 137 /* Animation */138 139 contentBlock1El = document.querySelectorAll( ".content .content-block-1" );140 if ( contentBlock1El.length > 0 ) {141 contentBlock1ElAnim();142 window.addEventListener( "scroll", function() {143 contentBlock1ElAnim();144 } );145 window.addEventListener( "resize", function() {146 contentBlock1ElAnim();147 } );148 }149 150 isMobile = {151 Android: function() {152 return navigator.userAgent.match(/Android/i);153 },154 BlackBerry: function() {155 return navigator.userAgent.match(/BlackBerry/i);156 },157 iOS: function() {158 return navigator.userAgent.match(/iPhone|iPad|iPod/i);159 },160 Opera: function() {161 return navigator.userAgent.match(/Opera Mini/i);162 },163 Windows: function() {164 return navigator.userAgent.match(/IEMobile/i);165 },166 any: function() {167 return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());168 }169 };170 // Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑегÑлÑÑок пÑовеÑÑем налиÑие ÑекÑÑа,171 // ÑооÑвеÑÑÑвÑÑÑие ÑÐ¾Ð¼Ñ Ð¸Ð»Ð¸ Ð¸Ð½Ð¾Ð¼Ñ Ð±ÑаÑзеÑÑ172 if (isMobile.iOS()) {173 var safariBgBlocks = document.querySelectorAll( "body .image-bg-top-block, .block-image-bg" );174 if ( safariBgBlocks ) {175 for ( var i = 0; i < safariBgBlocks.length; i++ )176 safariBgBlocks[ i ].style.backgroundAttachment = "scroll";177 }178 };179 180 /* Sea animation */181 seaContentEls = document.querySelectorAll( ".sea-content" );182 seaAnim();183 window.addEventListener( "scroll", seaAnim );184 window.addEventListener( "resize", seaAnim );185 186 /* PopUp */187 188 var popLinkEl = document.querySelectorAll( '.pop-link' );189 190 if ( popLinkEl[ 0 ] && popData ) {191 var popUpBg = document.querySelector( "#popUpBg" ),192 popUp = document.querySelector( "#popUp" );193 194 if ( popUpBg && popUp ) {195 for ( var i = 0; i < popLinkEl.length; i++ ) {196 popLinkEl[ i ].addEventListener( "click", function( event ) {197 event.preventDefault();198 199 popUp.innerHTML = popData[ this.dataset.id ] + "<button id='popUpCloseBtBottom' class='def-bt hover-trans-05'>CLOSE</button>";200 201 popUpBg.className = "open";202 setTimeout( function() {203 popUpBg.className = "active";204 }, 10 );205 } );206 207 popLinkEl[ i ].addEventListener( "mouseover", function( event ) {208 if ( this.parentNode.className == 'image-block' )209 return;210 if ( document.documentElement.clientWidth <= 900 )211 return;212 event.preventDefault();213 214 popUp.innerHTML = popData[ this.dataset.id ] + "<button id='popUpCloseBtBottom' class='def-bt hover-trans-05'>CLOSE</button>";215 216 popUpBg.className = "open";217 setTimeout( function() {218 popUpBg.className = "active";219 }, 10 );220 } );221 }222 223 popUpBg.addEventListener( "click", function( event ) {224 event.preventDefault();225 var elId = event.target.id;226 if ( elId != "popUpBg" && elId != "popUpCloseBtBottom" && elId != "popUpCloseBtTop" )227 return;228 229 popUpBg.className = "close";230 setTimeout( function() {231 popUpBg.className = "";232 }, 503 );233 } );234 }235 }236}237window.addEventListener( "scroll", function() {238 if ( munuLi.length > 0 )239 menuFunction();240} );241window.addEventListener( "resize", function() {242 if ( munuLi.length > 0 )243 menuFunction();244 $( "#home-page-slider" ).slick("unslick");245 $( "#home-page-slider" ).slick( slickParams );246} );247function seaAnim( event ) {248 if ( ! seaContentEls[ 0 ] )249 return;250 var nowPageScroll = window.pageYOffset;251 var p = 150;252 for ( var i = 0; i < seaContentEls.length; i++ ) {253 if ( nowPageScroll >= getCoords( seaContentEls[ i ] ).top - p - document.documentElement.clientHeight / 2 )254 seaContentEls[ i ].style.opacity = "1";255 else256 seaContentEls[ i ].style.opacity = "0";257 }258}259function mapHoverFunc( els ) {260 if ( ! els[ 0 ] )261 return;262 for ( var i = 0; i < els.length; i++ ) {263 if ( document.documentElement.clientWidth <= 900 )264 els[ i ].innerHTML = els[ i ].dataset.text;265 else266 els[ i ].innerHTML = "";267 }268}269function contentBlock1ElAnim() {270 var h1 = 60,271 h2 = 86,272 h3 = 86;273 274 var scrolled = $( window ).scrollTop(),275 pageHeight = document.documentElement.clientHeight + 200;276 if ( ! scrolled && scrolled != 0 )277 return;278 279 if ( document.documentElement.clientWidth <= 700 ) {280 return;281 }282 283 var h1_100 = h1 / 100,284 h2_100 = h2 / 100,285 h3_100 = h3 / 100,286 ph_100 = pageHeight / 100;287 288 for ( var i = 0; i < contentBlock1El.length; i++ ) {289 var el = contentBlock1El[ i ],290 elCoords = getCoords( el ).top,291 elHeight = el.clientHeight;292 if ( el.classList.contains( "left" ) ) {293 if ( scrolled + pageHeight > elCoords && scrolled < elCoords ) {294 var el_100 = ( ( elCoords ) - scrolled ) / 100 * ph_100;295 if ( el_100 > 100 )296 el_100 = 100;297 else if ( el_100 < 0 )298 el_100 = 0;299 el.style.marginTop = h2_100 * el_100 + "px";300 }301 else if ( scrolled + pageHeight <= elCoords ) {302 el.style.marginTop = h2 + "px";303 }304 else {305 el.style.marginTop = 0 + "px";306 }307 }308 else if ( el.classList.contains( "right" ) ) {309 if ( scrolled + pageHeight > elCoords && scrolled < elCoords ) {310 var el_100 = ( ( elCoords ) - scrolled ) / 100 * ph_100;311 if ( el_100 > 100 )312 el_100 = 100;313 else if ( el_100 < 0 )314 el_100 = 0;315 el.style.marginTop = h3 - ( h3_100 * el_100 ) + "px";316 }317 else if ( scrolled + pageHeight <= elCoords ) {318 el.style.marginTop = 0 + "px";319 }320 else {321 el.style.marginTop = h3 + "px";322 }323 }324 else {325 if ( scrolled + pageHeight > elCoords && scrolled < elCoords ) {326 var el_100 = ( ( elCoords ) - scrolled ) / 100 * ph_100;327 if ( el_100 > 100 )328 el_100 = 100;329 else if ( el_100 < 0 )330 el_100 = 0;331 el.style.marginTop = h1_100 * el_100 + 60 + "px";332 }333 else if ( scrolled + pageHeight <= elCoords ) {334 el.style.marginTop = h1 + "px";335 }336 else {337 el.style.marginTop = 0 + "px";338 }339 }340 }341 342 var elCoords = getCoords( el ).top,343 elParentCoords = getCoords( el.parentNode ).top;344 if ( ! elCoords )345 return;346 347 if ( document.documentElement.clientWidth <= 900 ) {348 el.classList.remove( "active" );349 return;350 }351 352 if ( scrolled >= elParentCoords - 20 ) {353 el.classList.add( "active" );354 el.style.top = ( scrolled - elParentCoords + 20 ) + "px";355 }356 else357 el.classList.remove( "active" );358}359function menuFunction() {360 if ( ! munuLi )361 return;362 var nowPageScroll = window.pageYOffset;363 //console.log( "nowPageScroll = " + nowPageScroll );364 //console.log( "getCoords = " + getCoords( document.querySelector( "#block-1" ) ).top );365 var p = 150;366 if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2018" ) ).top - p ) {367 if ( munuLi[ 10 ].className != "active" ) {368 for ( var i = 0; i < munuLi.length; i++ ) {369 munuLi[ i ].className = "";370 }371 munuLi[ 10 ].className = "active";372 }373 }374 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2017" ) ).top - p ) {375 if ( munuLi[ 9 ].className != "active" ) {376 for ( var i = 0; i < munuLi.length; i++ ) {377 munuLi[ i ].className = "";378 }379 munuLi[ 9 ].className = "active";380 }381 }382 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2016" ) ).top - p ) {383 if ( munuLi[ 8 ].className != "active" ) {384 for ( var i = 0; i < munuLi.length; i++ ) {385 munuLi[ i ].className = "";386 }387 munuLi[ 8 ].className = "active";388 }389 }390 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2015" ) ).top - p ) {391 if ( munuLi[ 7 ].className != "active" ) {392 for ( var i = 0; i < munuLi.length; i++ ) {393 munuLi[ i ].className = "";394 }395 munuLi[ 7 ].className = "active";396 }397 }398 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2014" ) ).top - p ) {399 if ( munuLi[ 6 ].className != "active" ) {400 for ( var i = 0; i < munuLi.length; i++ ) {401 munuLi[ i ].className = "";402 }403 munuLi[ 6 ].className = "active";404 }405 }406 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2013" ) ).top - p ) {407 if ( munuLi[ 5 ].className != "active" ) {408 for ( var i = 0; i < munuLi.length; i++ ) {409 munuLi[ i ].className = "";410 }411 munuLi[ 5 ].className = "active";412 }413 }414 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2012" ) ).top - p ) {415 if ( munuLi[ 4 ].className != "active" ) {416 for ( var i = 0; i < munuLi.length; i++ ) {417 munuLi[ i ].className = "";418 }419 munuLi[ 4 ].className = "active";420 }421 }422 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2010" ) ).top - p ) {423 if ( munuLi[ 3 ].className != "active" ) {424 for ( var i = 0; i < munuLi.length; i++ ) {425 munuLi[ i ].className = "";426 }427 munuLi[ 3 ].className = "active";428 }429 }430 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2008" ) ).top - p ) {431 if ( munuLi[ 2 ].className != "active" ) {432 for ( var i = 0; i < munuLi.length; i++ ) {433 munuLi[ i ].className = "";434 }435 munuLi[ 2 ].className = "active";436 }437 }438 else if ( nowPageScroll >= getCoords( document.querySelector( "#sea-content-2007" ) ).top - p ) {439 if ( munuLi[ 1 ].className != "active" ) {440 for ( var i = 0; i < munuLi.length; i++ ) {441 munuLi[ i ].className = "";442 }443 munuLi[ 1 ].className = "active";444 }445 }446 else if ( nowPageScroll >= 0 ) {447 if ( munuLi[ 0 ].className != "active" ) {448 for ( var i = 0; i < munuLi.length; i++ ) {449 munuLi[ i ].className = "";450 }451 munuLi[ 0 ].className = "active";452 }453 }454 else {455 for ( var i = 0; i < munuLi.length; i++ ) {456 munuLi[ i ].className = "";457 }458 }459}460function parallax( el ){461 var scrolled = $( window ).scrollTop();462 if ( window.pageYOffset > 120 ) {463 el.css( 'background-position', '0 ' + ( scrolled * 1 - 120 ) + 'px' );464 }465 else {466 el.css( 'background-position', '0 0' );467 }468}469function posFixed( el ) {470 if ( ! el )471 return;472 473 var elCoords = getCoords( el ).top,474 elParentCoords = getCoords( el.parentNode ).top;475 if ( ! elCoords )476 return;477 478 var scrolled = $( window ).scrollTop();479 if ( ! scrolled )480 return;481 482 if ( document.documentElement.clientWidth <= 900 ) {483 if ( el.parentNode.id != "boat" ) {484 el.classList.remove( "active" );485 return;486 }487 }488 489 if ( scrolled >= elParentCoords - 20 - 160 ) {490 el.classList.add( "active" );491 el.style.top = ( scrolled - elParentCoords + 20 + 160 ) + "px";492 }493 else494 el.classList.remove( "active" );495}496function scrollingFunc( event, s_max, scrollLength, scrollId, IdParam ) {497 //if ( document.documentElement.clientWidth <= 970 )498 //return;499 if ( ! s_max && s_max != 0 ) {500 //console.log( 1 );501 scrollTimeParam = 1;502 503 IdParam = scrollIdParam;504 scrollIdParam++;505 setTimeout( function() {506 scrollTimeParam = 0;507 }, 1001 );508 var scrollIdOb = this.attributes[ "href" ]509 if ( scrollIdOb )510 scrollId = scrollIdOb.value;511 if ( ! scrollId ) {512 scrollId = this.dataset.href;513 if ( ! scrollId )514 return;515 }516 517 scrollParam = scrollId;518 var el = document.querySelector( scrollId );519 //console.log( "el", el );520 if ( ! el )521 return;522 if ( document.documentElement.clientWidth > 700 )523 s_max = getCoords( el ).top - 50 - 100;524 else525 s_max = getCoords( el ).top - 50 - 30;526 s_max = s_max.toFixed( 0 );527 if ( s_max < 0 )528 s_max = 0;529 //console.log( "s_max", s_max );530 if ( ! s_max && s_max != 0 )531 return;532 }533 534 if ( scrollParam != scrollId )535 return;536 537 var scrollNow = window.pageYOffset;538 if ( ! scrollNow && scrollNow != 0 )539 return;540 541 if ( ! scrollLength ) {542 var scrollAbs = Math.abs( scrollNow - s_max );543 scrollLength = scrollAbs / 100;544 //console.log( "scrollLength", scrollLength );545 }546 547 if ( scrollNow > s_max ) {548 scrollNow -= scrollLength;549 if ( scrollNow < s_max )550 scrollNow = s_max;551 }552 else if ( scrollNow < s_max ) {553 scrollNow += scrollLength;554 if ( scrollNow > s_max )555 scrollNow = s_max;556 }557 else558 return;559 560 scrollTo( 0, scrollNow );561 setTimeout( function() {562 if ( scrollTimeParam == 1 )563 scrollingFunc( event, s_max, scrollLength, scrollId, IdParam );564 else565 scrollTo( 0, s_max );566 //console.log( 2 );567 }, 2 );568 569 event.preventDefault();570}571function getCoords(elem) {572 var box = elem.getBoundingClientRect();573 574 return {575 top: box.top + pageYOffset,576 left: box.left + pageXOffset577 };...
script.js
Source:script.js
1"use strict";2window.addEventListener("load", (event => animationGo(event)))3function animationGo(event) {4 const textPageEl = document.querySelectorAll('.text-page__content p');5 const headerEl = document.querySelector('.header');6 const block1ElItem = document.querySelectorAll('.block1__item');7 const block2ImgBox = document.querySelectorAll('.block2__img-box');8 const block3ElItem = document.querySelectorAll('.block3__item-block');9 const block4Form = document.querySelector('.block4__form');10 const block4Contacts = document.querySelector('.block4__contacts');11 window.addEventListener("scroll", (ev => scroll(ev)));12 function scroll(ev) {13 const heightWindow = window.innerHeight;14 const valueGoAnimation = heightWindow * 65 / 100;15 const positionElHeader = headerEl.getBoundingClientRect();16 const positionTextPageEL1 = textPageEl[0].getBoundingClientRect();17 const positionTextPageEL2 = textPageEl[1].getBoundingClientRect();18 const positionTextPageEL3 = textPageEl[2].getBoundingClientRect();19 const positionTextPageEL4 = textPageEl[3].getBoundingClientRect();20 const positionBlock1El1 = block1ElItem[0].getBoundingClientRect();21 // const positionBlock1El2 = block1ElItem[1].getBoundingClientRect();22 // const positionBlock1El3 = block1ElItem[2].getBoundingClientRect();23 // const positionBlock1El4 = block1ElItem[3].getBoundingClientRect();24 if (positionElHeader.bottom <= valueGoAnimation) {25 textPageEl[0].classList.add("animate__rotateInDownLeft");26 } else {27 textPageEl[0].classList.remove("animate__rotateInDownLeft");28 }29 if (positionTextPageEL1.bottom <= valueGoAnimation) {30 textPageEl[1].classList.add("animate__rotateInDownRight");31 } else {32 textPageEl[1].classList.remove("animate__rotateInDownRight");33 }34 if (positionTextPageEL2.bottom <= valueGoAnimation) {35 textPageEl[2].style.cssText = "animation: backInUp 1s forwards; opacity: 1;";36 } else {37 textPageEl[2].style.removeProperty("animation");38 textPageEl[3].style.removeProperty("opacity");39 }40 if (positionTextPageEL3.bottom <= valueGoAnimation) {41 textPageEl[3].style.cssText = "animation: backInUp 1s forwards; opacity: 1;";42 } else {43 textPageEl[3].style.removeProperty("animation");44 textPageEl[3].style.removeProperty("opacity");45 }46 if (positionTextPageEL4.bottom <= valueGoAnimation) {47 block1ElItem[0].classList.add("animate__lightSpeedInLeft");48 block1ElItem[0].style.opacity = '1';49 block1ElItem[1].classList.add("animate__lightSpeedInRight");50 block1ElItem[1].style.opacity = '1';51 } else {52 block1ElItem[0].classList.remove("animate__lightSpeedInLeft");53 block1ElItem[0].style.opacity = '0';54 block1ElItem[1].classList.remove("animate__lightSpeedInRight");55 block1ElItem[1].style.opacity = '0';56 }57 if (positionBlock1El1.bottom <= valueGoAnimation + 50) {58 block1ElItem[2].classList.add("animate__lightSpeedInLeft");59 block1ElItem[2].style.opacity = '1';60 block1ElItem[3].classList.add("animate__lightSpeedInRight");61 block1ElItem[3].style.opacity = '1';62 } else {63 block1ElItem[2].classList.remove("animate__lightSpeedInLeft");64 block1ElItem[2].style.opacity = '0';65 block1ElItem[3].classList.remove("animate__lightSpeedInRight");66 block1ElItem[3].style.opacity = '0';67 }68 if (document.querySelector('.block1').getBoundingClientRect().bottom <= valueGoAnimation) {69 block2ImgBox[0].style.cssText = 'animation: fadeln 1s forwards;'70 block2ImgBox[1].style.cssText = 'animation: fadeln 1s 0.2s forwards;'71 block2ImgBox[2].style.cssText = 'animation: fadeln 1s 0.4s forwards;'72 block2ImgBox[3].style.cssText = 'animation: fadeln 1s 0.6s forwards;'73 } else {74 block2ImgBox[0].style.removeProperty('animation');75 block2ImgBox[1].style.removeProperty('animation');76 block2ImgBox[2].style.removeProperty('animation');77 block2ImgBox[3].style.removeProperty('animation');78 }79 if (document.querySelector('.block2').getBoundingClientRect().bottom <= valueGoAnimation) {80 block3ElItem[2].classList.add("animate__flipInY");81 } else {82 block3ElItem[2].classList.remove("animate__flipInY");83 }84 if (document.querySelector('.block2').getBoundingClientRect().bottom <= valueGoAnimation - 150) {85 block3ElItem[1].classList.add("animate__flipInY");86 } else {87 block3ElItem[1].classList.remove("animate__flipInY");88 }89 if (document.querySelector('.block2').getBoundingClientRect().bottom <= valueGoAnimation - 300) {90 block3ElItem[0].classList.add("animate__flipInY");91 } else {92 block3ElItem[0].classList.remove("animate__flipInY");93 }94 if (document.querySelector('.block3').getBoundingClientRect().bottom <= valueGoAnimation) {95 block4Form.classList.add("animate__zoomInLeft");96 block4Form.style.opacity = '1';97 block4Contacts.classList.add("animate__zoomInRight");98 block4Contacts.style.opacity = '1';99 } else {100 block4Form.classList.remove("animate__zoomInLeft");101 block4Form.style.opacity = '0';102 block4Contacts.classList.remove("animate__zoomInRight");103 block4Contacts.style.opacity = '0';104 }105 }...
test.spec.ts
Source:test.spec.ts
1import { Directive, TemplateRef } from '@angular/core';2import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';3@Directive({4 selector: '[tpl]',5})6class TplDirective {7 public constructor(public readonly tpl: TemplateRef<any>) {}8}9// @see https://github.com/help-me-mom/ng-mocks/issues/28910describe('issue-289', () => {11 beforeEach(() => MockBuilder(null, TplDirective));12 it('checks whether rendered html is visible from ng-template element', () => {13 const fixture = MockRender(`14 115 <ng-template tpl>16 tpl117 <ng-template tpl>18 tpl219 </ng-template>20 </ng-template>21 222 `);23 // double check we don't change elements via lookup.24 expect(fixture.debugElement.childNodes.length).toEqual(3);25 expect(ngMocks.formatHtml(fixture)).toEqual('1 2');26 // double check we don't change elements via lookup.27 expect(fixture.debugElement.childNodes.length).toEqual(3);28 // now only the 1st template is visible29 {30 const templates = ngMocks.revealAll(fixture, TplDirective);31 // double check we don't change elements via lookup.32 expect(fixture.debugElement.childNodes.length).toEqual(3);33 expect(templates.length).toEqual(1);34 const [block1El] = templates;35 expect(ngMocks.formatHtml(block1El)).toEqual('');36 const block1 = ngMocks.get(block1El, TplDirective);37 ngMocks.render(block1, block1);38 // cool stuff39 expect(ngMocks.formatHtml(block1El)).toEqual('tpl1');40 }41 // but at least something42 expect(ngMocks.formatHtml(fixture)).toEqual('1 tpl1 2');43 // now the 2nd template is visible44 {45 const templates = ngMocks.revealAll(fixture, TplDirective);46 expect(templates.length).toEqual(2);47 const [, block2El] = templates;48 expect(ngMocks.formatHtml(block2El)).toEqual('');49 const block2 = ngMocks.get(block2El, TplDirective);50 ngMocks.render(block2, block2);51 // cool stuff52 expect(ngMocks.formatHtml(block2El)).toEqual('tpl2');53 }54 // but at least something55 expect(ngMocks.formatHtml(fixture)).toEqual('1 tpl1 tpl2 2');56 });...
Using AI Code Generation
1import { block1El } from 'ng-mocks';2describe('TestComponent', () => {3 let fixture: ComponentFixture<TestComponent>;4 beforeEach(() => {5 TestBed.configureTestingModule({6 });7 fixture = TestBed.createComponent(TestComponent);8 fixture.detectChanges();9 });10 it('should render the component', () => {11 expect(block1El(fixture)).toBeDefined();12 });13});
Using AI Code Generation
1var block1El = ngMocks.find('block1');2expect(block1El).toBeDefined();3var block2El = ngMocks.find('block2');4expect(block2El).toBeDefined();5var block3El = ngMocks.find('block3');6expect(block3El).toBeDefined();7var block4El = ngMocks.find('block4');8expect(block4El).toBeDefined();9var block5El = ngMocks.find('block5');10expect(block5El).toBeDefined();11var block6El = ngMocks.find('block6');12expect(block6El).toBeDefined();13var block7El = ngMocks.find('block7');14expect(block7El).toBeDefined();15var block8El = ngMocks.find('block8');16expect(block8El).toBeDefined();17var block9El = ngMocks.find('block9');18expect(block9El).toBeDefined();19var block10El = ngMocks.find('block10');20expect(block10El).toBeDefined();21var block11El = ngMocks.find('block11');22expect(block11El).toBeDefined();23var block12El = ngMocks.find('block12');24expect(block12El).toBeDefined();25var block13El = ngMocks.find('block13');26expect(block13El).toBeDefined();
Using AI Code Generation
1import { block1El } from 'ng-mocks';2import { block2El } from 'ng-mocks';3import { block1El } from 'ng-mocks';4import { block2El } from 'ng-mocks';5import { block1El } from 'ng-mocks';6import { block2El } from 'ng-mocks';7import { block1El } from 'ng-mocks';8import { block2El } from 'ng-mocks';9import { block1El } from 'ng-mocks';10import { block2El } from 'ng-mocks';11import { block1El } from 'ng-mocks';12import { block2El } from 'ng-mocks';13import { block1El } from 'ng-mocks';14import { block2El } from 'ng-mocks';15import { block1El } from 'ng-mocks';16import { block2El } from 'ng-mocks';17import { block1El } from 'ng-mocks';18import { block2El } from 'ng-mocks';
Using AI Code Generation
1block1El = ngMocks.find('block1');2block2El = ngMocks.find('block2');3block3El = ngMocks.find('block3');4block1El = ngMocks.find('block1');5block2El = ngMocks.find('block2');6block3El = ngMocks.find('block3');7block1El = ngMocks.find('block1');8block2El = ngMocks.find('block2');9block3El = ngMocks.find('block3');10block1El = ngMocks.find('block1');11block2El = ngMocks.find('block2');12block3El = ngMocks.find('block3');13block1El = ngMocks.find('block1');14block2El = ngMocks.find('block2');15block3El = ngMocks.find('block3');16block1El = ngMocks.find('block1');17block2El = ngMocks.find('block2');18block3El = ngMocks.find('block3');19block1El = ngMocks.find('block1');20block2El = ngMocks.find('block2');21block3El = ngMocks.find('block3');
Using AI Code Generation
1import { block1El } from 'ng-mocks';2import { MyComponent } from './my.component';3import { MyModule } from './my.module';4describe('MyComponent', () => {5 it('should render the component', () => {6 const fixture = MockRender(MyComponent, MyModule);7 expect(block1El(fixture)).toBeDefined();8 });9});10import { Component } from '@angular/core';11@Component({12})13export class MyComponent {}14import { NgModule } from '@angular/core';15import { CommonModule } from '@angular/common';16import { MyComponent } from './my.component';17@NgModule({18 imports: [CommonModule],19})20export class MyModule {}21import { block1El, block2El } from './test';22describe('MyComponent', () => {23 it('should render the component', () => {24 const fixture = MockRender(MyComponent, MyModule);25 expect(block1El(fixture)).toBeDefined();26 expect(block2El(fixture)).toBeDefined();27 });28});29import { Component } from '@angular/core';30@Component({31})32export class MyComponent {}33import { NgModule } from '@angular/core';34import { CommonModule } from '@angular/common';35import { MyComponent } from './my.component';36@NgModule({37 imports: [CommonModule],38})39export class MyModule {}40import { block1El, block2El } from 'ng-mocks';41import { MyComponent } from './my.component';42import { MyModule } from './my.module';43describe('MyComponent', () => {44 it('should render the component', () => {45 const fixture = MockRender(MyComponent, My
Using AI Code Generation
1import { block1El } from 'ng-mocks';2describe('Test', () => {3 it('should find element', () => {4 const fixture = MockRender(`5 `);6 const [el1, el2] = block1El(fixture, 'div');7 expect(el1.nativeElement.textContent).toEqual('1');8 expect(el2.nativeElement.textContent).toEqual('2');9 });10});
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run ng-mocks automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
