How to use clearContainer method in Playwright Internal
Best JavaScript code snippet using playwright-internal
router.js
Source:router.js 
...246 // Get a profile, if needed.247 rest.get(service, query, _.bind(function (err, pro) {248 var mem = (pro || err).member;249 if (err) {250 this.clearContainer();251 this.stop();252 this.page = new Error(this.app).render(err);253 }254 if (secure && !mem) {255 return this.navigate('/', true);256 }257 this.showMap = true;258 // Set the profile.259 var login = this.app.update(pro || err);260 _render.call(this, err, login);261 // Handle welcome modal.262 if (this.app.profile && this.app.profile.member &&263 !this.app.profile.member.welcomed) {264 this.app.profile.member.welcomed = true;265 this.renderWelcome('Thanks for signing up!');266 }267 }, this));268 },269 clearContainer: function () {270 $('.container').removeClass('narrow').removeClass('wide')271 .removeClass('landing').removeClass('blog').removeClass('sign');272 },273 renderWelcome: function (title, skipUpdate) {274 var mem = this.app.profile.member;275 if (!mem) {276 return;277 }278 $.fancybox(_.template(tipTemp)({279 message: '<span style="font-size:14px;">' +280 '<ul>' +281 '<li><span class="item-pre">1</span> Use the search bar at the top of the page to find people, crags, and climbs.</li>' +282 '<li><span class="item-pre">2</span> Your feed shows activity from the crags and climbs you watch and the people you follow.</li>' +283 '<li><span class="item-pre">3</span> Check out your sidebar for some suggested athletes to follow.</li>' +284 '<li><span class="item-pre">4</span> The green "Log" buttons are your starting place for tracking your climbing.</li>' +285 '<li><span class="item-pre">5</span> In addition to logging a completed climb as an "ascent", log attempts as "work".</li>' +286 '<li><span class="item-pre">6</span> Don\'t want to broadcast to the entire world? Adjust the privacy options under your <a class="alt" href="/settings" target="blank">settings</a>.</li>' +287 '<li><span class="item-pre">7</span> Send us any questions or issues you have with the blue tab below or at <a class="alt" href="mailto:support@island.io">support@island.io</a>.</li>' +288 '</ul><br />' +289 '<span style="font-size:14px;"><strong>Do you use 8a.nu or 27crags?</strong>' +290 ' You can <a href="/import" target="blank" class="alt">import your scorecard</a> from your profile <a class="alt" href="/settings" target="blank">settings</a>.</span>',291 title: title292 }), {293 openEffect: 'fade',294 closeEffect: 'fade',295 closeBtn: false,296 padding: 0297 });298 $('#tip_close').click(function (e) {299 $.fancybox.close();300 if (!skipUpdate) {301 rest.put('/api/members/' + mem.username + '/welcome', {},302 function (err, data) {303 if (err) {304 return console.log(err);305 }306 });307 }308 });309 },310 renderTabs: function (params) {311 if (this.tabs) {312 this.tabs.params = params || {};313 this.tabs.render();314 } else {315 this.tabs = new Tabs(this.app, params).render();316 }317 },318 start: function (skipQueue, skipClass) {319 if (!skipQueue) {320 this.loadingQueue.push(1);321 }322 if (this.loading) {323 return;324 }325 this.loading = true;326 if (!skipClass) {327 $(window).scrollTop(0);328 $('body').addClass('loading');329 if (!$('footer').hasClass('nohide')) {330 $('footer').hide();331 }332 }333 this.spin.start();334 },335 stop: function () {336 this.loadingQueue.pop();337 if (this.loadingQueue.length !== 0) {338 return;339 }340 this.loading = false;341 _.defer(_.bind(function () {342 this.spin.stop();343 $(window).scrollTop(0);344 $('body').removeClass('loading');345 $('footer').show();346 fitSides();347 _.delay(fitSides, 100);348 _.delay(fitSides, 500);349 _.delay(fitSides, 1000);350 }, this));351 },352 refresh: function () {353 var frag = Backbone.history.fragment;354 Backbone.history.fragment = null;355 window.location.href = '/' + frag;356 },357 getEventActions: function () {358 var feed = store.get('feed') || {};359 return feed.actions || 'all';360 },361 getAscentEventActions: function () {362 var feed = store.get('ascentFeed') || {};363 return feed.actions || 'all';364 },365 // Routes //366 activity: function () {367 this.start();368 $('.container').removeClass('narrow').removeClass('blog')369 .removeClass('sign');370 this.renderTabs();371 var query = {372 actions: this.getEventActions(),373 public: true374 };375 this.render('/service/activity', query, _.bind(function (err) {376 if (err) return;377 if (this.app.profile.member) {378 this.clearContainer();379 this.page = new Dashboard(this.app, {}).render();380 this.renderTabs({tabs: [381 {title: 'Activity', icon: 'icon-globe', href: '/', active: true},382 {title: 'Following', icon: 'icon-users', href: '/following'},383 {title: 'Recent Media', icon: 'icon-picture', href: '/media'},384 {title: 'My Ascents', icon: 'icon-award',385 href: '/' + this.app.profile.member.username + '/ascents'}386 ], log: true});387 } else {388 $('.container').addClass('wide').addClass('landing');389 this.page = new Splash(this.app).render();390 }391 this.stop();392 }, this));393 },394 following: function () {395 this.start();396 $('.container').removeClass('narrow').removeClass('blog')397 .removeClass('sign');398 this.renderTabs();399 var query = {actions: this.getEventActions()};400 this.render('/service/activity', query, _.bind(function (err) {401 if (err) return;402 if (this.app.profile.member) {403 this.clearContainer();404 this.page = new Dashboard(this.app, {following: true}).render();405 this.renderTabs({tabs: [406 {title: 'Activity', icon: 'icon-globe', href: '/'},407 {title: 'Following', icon: 'icon-users', href: '/following',408 active: true},409 {title: 'Recent Media', icon: 'icon-picture', href: '/media'},410 {title: 'My Ascents', icon: 'icon-award',411 href: '/' + this.app.profile.member.username + '/ascents'}412 ], log: true});413 } else {414 $('.container').addClass('wide').addClass('landing');415 this.page = new Splash(this.app).render();416 }417 this.stop();418 }, this));419 },420 media: function () {421 this.start();422 this.renderTabs();423 this.clearContainer();424 this.render('/service/media', _.bind(function (err) {425 if (err) return;426 if (this.app.profile.member) {427 this.header.highlight('/');428 this.renderTabs({tabs: [429 {title: 'Activity', icon: 'icon-globe', href: '/'},430 {title: 'Following', icon: 'icon-users', href: '/following'},431 {title: 'Recent Media', icon: 'icon-picture', href: '/media',432 active: true},433 {title: 'My Ascents', icon: 'icon-award',434 href: '/' + this.app.profile.member.username + '/ascents'}435 ], log: true});436 }437 _.defer(_.bind(function () {438 this.page = new Medias(this.app).render();439 if (!this.app.profile.member) {440 this.renderTabs({title: 'Recent Media'});441 }442 }, this));443 this.stop();444 }, this));445 },446 ticks: function (username) {447 this.start();448 this.renderTabs();449 this.clearContainer();450 var query = {actions: this.getEventActions()};451 this.render('/service/ticks/' + username, query, _.bind(function (err) {452 if (err) return;453 if (this.app.profile.member &&454 this.app.profile.member.username === username) {455 this.header.highlight('/');456 this.renderTabs({tabs: [457 {title: 'Activity', icon: 'icon-globe', href: '/'},458 {title: 'Following', icon: 'icon-users', href: '/following'},459 {title: 'Recent Media', icon: 'icon-picture', href: '/media'},460 {title: 'My Ascents', icon: 'icon-award',461 href: '/' + this.app.profile.member.username + '/ascents',462 active: true}463 ], log: true});464 }465 _.defer(_.bind(function () {466 this.page = new Ticks(this.app).render();467 if (!this.app.profile.member ||468 this.app.profile.member.username !== username) {469 this.renderTabs({html: this.page.title});470 }471 }, this));472 this.stop();473 }, this));474 },475 crags: function (country) {476 this.start();477 this.renderTabs();478 this.clearContainer();479 var query = {};480 if (country) query.country = country;481 var q = util.getParameterByName('q');482 if (q) query.query = q;483 this.render('/service/crags', query, _.bind(function (err) {484 if (err) return;485 this.page = new Crags(this.app).render();486 this.renderTabs({title: 'Rock climbing crags on Earth', log: true});487 this.stop();488 }, this));489 },490 store: function () {491 this.start();492 this.renderTabs();493 this.clearContainer();494 this.render('/service/store', _.bind(function (err) {495 if (err) return;496 this.page = new Store(this.app).render();497 this.renderTabs({html: this.page.title});498 this.stop();499 }, this));500 },501 about: function () {502 this.start();503 this.renderTabs();504 this.clearContainer();505 this.render('/service/about', _.bind(function (err) {506 if (err) return;507 this.page = new About(this.app).render();508 this.renderTabs({title: 'About The Island'});509 this.stop();510 }, this));511 },512 privacy: function () {513 this.start();514 this.renderTabs();515 this.clearContainer();516 this.render('/service/static', _.bind(function (err) {517 if (err) return;518 this.page = new Static(this.app,519 {title: 'Privacy', template: privacyTemp}).render();520 this.renderTabs({title: 'Island\'s Privacy Policy',521 log: true});522 this.stop();523 }, this));524 },525 settings: function () {526 this.start();527 this.renderTabs();528 this.clearContainer();529 this.render('/service/settings', {}, true, _.bind(function (err) {530 if (err) return;531 this.page = new Settings(this.app).render();532 this.renderTabs({html: this.page.title});533 this.stop();534 }, this));535 },536 admin: function () {537 this.start();538 this.renderTabs();539 this.clearContainer();540 this.render('/service/admin', {}, true, _.bind(function (err) {541 if (err) return;542 this.page = new Admin(this.app).render();543 this.renderTabs({tabs: [{title: 'Beta', active: true}]});544 this.stop();545 }, this));546 },547 import: function () {548 this.start();549 this.renderTabs();550 this.clearContainer();551 var path, name = '';552 if (this.app.state && this.app.state.import) {553 var target = this.app.state.import.target;554 path = this.app.state.import.userId + '-' + target;555 name = this.app.state.import.name;556 }557 delete this.app.state.import;558 this.render('/service/import/' + path, _.bind(function (err) {559 if (err) return;560 if (path) {561 this.page = new ImportInsert(this.app,562 {name: name, target: target}).render();563 } else {564 this.navigate('/import');565 this.page = new ImportSearch(this.app).render();566 }567 this.renderTabs({title: 'Import your Scorecard', log: true});568 this.stop();569 }, this));570 },571 reset: function () {572 this.start();573 this.clearContainer();574 this.render('/service/static', _.bind(function (err) {575 if (err) return;576 this.page = new Reset(this.app).render();577 this.stop();578 }, this));579 this.renderTabs({title: 'Password reset'});580 },581 ascent: function (country, crag, type, ascent) {582 this.start();583 this.clearContainer();584 this.renderTabs();585 var key = [country, crag, type, ascent].join('/');586 var query = {actions: this.getAscentEventActions()};587 this.render('/service/ascent/' + key, query, _.bind(function (err) {588 if (err) return;589 this.page = new Ascent(this.app).render();590 this.renderTabs({html: this.page.title});591 this.stop();592 }, this));593 },594 ascentConfig: function (country, crag, type, ascent) {595 this.start();596 this.clearContainer();597 this.renderTabs();598 var key = [country, crag, type, ascent].join('/');599 this.render('/service/ascent/' + key + '/config', _.bind(function (err) {600 if (err) return;601 this.page = new Ascent(this.app, {config: true}).render();602 this.renderTabs({html: this.page.title});603 this.stop();604 }, this));605 },606 crag: function (country, crag) {607 this.start();608 this.clearContainer();609 this.renderTabs();610 var key = [country, crag].join('/');611 var query = {actions: this.getEventActions()};612 this.render('/service/crag/' + key, query, _.bind(function (err) {613 if (err) return;614 this.page = new Crag(this.app).render();615 this.renderTabs({html: this.page.title});616 this.stop();617 }, this));618 },619 cragConfig: function (country, crag) {620 this.start();621 this.clearContainer();622 this.renderTabs();623 var key = [country, crag].join('/');624 this.render('/service/crag/' + key + '/config', _.bind(function (err) {625 if (err) return;626 this.page = new Crag(this.app, {config: true}).render();627 this.renderTabs({html: this.page.title});628 this.stop();629 }, this));630 },631 session: function (key) {632 this.start();633 this.clearContainer();634 this.renderTabs();635 this.render('/service/session/' + key, _.bind(function (err) {636 if (err) return;637 this.page = new Session({wrap: '.main'}, this.app).render(true);638 this.renderTabs({html: this.page.title});639 this.stop();640 }, this));641 },642 tick: function (key) {643 this.start();644 this.clearContainer();645 this.renderTabs();646 this.render('/service/tick/' + key, _.bind(function (err) {647 if (err) return;648 this.page = new Tick({649 wrap: '.main',650 inlineTime: true,651 inlineWeather: true652 }, this.app).render(true);653 this.renderTabs({html: this.page.title});654 this.stop();655 }, this));656 },657 post: function (username, key) {658 this.start();659 this.clearContainer();660 key = [username, key].join('/');661 this.renderTabs();662 this.render('/service/post/' + key, _.bind(function (err) {663 if (err) return;664 this.page = new Post({wrap: '.main'}, this.app).render(true);665 this.renderTabs({html: this.page.title});666 this.stop();667 }, this));668 },669 profile: function (username) {670 this.start();671 this.renderTabs();672 this.clearContainer();673 var query = {actions: this.getEventActions()};674 this.render('/service/member/' + username, query,675 _.bind(function (err) {676 if (err) return;677 this.page = new Profile(this.app).render();678 this.renderTabs({html: this.page.title});679 this.stop();680 }, this));681 },682 signin: function () {683 this.start();684 this.clearContainer();685 this.showMap = false;686 this.render(_.bind(function (err) {687 if (err) return;688 $('.container').addClass('narrow').addClass('sign');689 this.page = new Signin(this.app).render();690 this.stop();691 }, this));692 this.renderTabs({title: 'Sign In'});693 },694 signup: function () {695 this.start();696 this.clearContainer();697 this.showMap = false;698 this.render(_.bind(function (err) {699 if (err) return;700 $('.container').addClass('narrow').addClass('sign');701 this.page = new Signup(this.app).render();702 this.stop();703 }, this));704 this.renderTabs({title: 'Sign Up'});705 },706 blog: function (slug) {707 if (this.app.profile) {708 return this.refresh();709 }710 this.start(null, true);711 this.render('/service/static', _.bind(function (err) {712 if (err) return;713 this.page = new Static(this.app).render();714 this.stop();715 }, this));716 },717 default: function () {718 this.renderTabs();719 this.clearContainer();720 this.render(_.bind(function (err) {721 if (err) return;722 this.page = new Error(this.app).render({723 code: 404,724 message: 'Sorry, this page isn\'t available'725 });726 this.stop();727 }, this));728 }729 });730 return Router;...
script.js
Source:script.js
...45 this.ContainerLevel = document.getElementById('ships_level');46 }47 addToSidebar(ship) {48 this.ships.push(ship);49 clearContainer(this.Container);50 showShipsSidebar(this.Container, this.getSidebar());51 showLevelSidebar(this.ContainerLevel);52 }53 removeFromSidebar(ship) {54 this.ships.splice(this.ships.indexOf(ship), 1);55 this.getSidebar();56 clearContainer(this.Container);57 showShipsSidebar(this.Container, this.getSidebar());58 showLevelSidebar(this.ContainerLevel);59 }60 getSidebar() {61 return this.ships;62 }63 sumLevel(shipLevel) {64 var buffer = this.levels;65 buffer += shipLevel;66 if (buffer > 40)67 return false;68 else if (buffer <= 40) {69 this.levels = buffer;70 return true;71 }72 }73 subtractionLevel(shipLevel) {74 this.levels -= shipLevel;75 }76 getLevels() {77 return this.levels;78 }7980}81class Query {82 constructor() {83 this.nation = "ÐаÑиÑ";84 this.type = "ÐлаÑÑ";85 this.level = "УÑовенÑ";86 }87 setNation(nation) {88 this.nation = nation;89 }90 getNation() {91 return this.nation;92 }93 setType(type) {94 this.type = type;95 }96 getType() {97 return this.type;98 }99 setLevel(level) {100 this.level = level;101 }102 getLevel() {103 return this.level;104 }105}106function clearContainer(Container) {107 Container.textContent = '';108}109window.addEventListener('load', function () {//initialize the function when was loaded the window110 let requestURL = 'ships.json';111 let request = new XMLHttpRequest();112 request.open('GET', requestURL);113 request.responseType = 'json';114 request.send();115 request.onload = function () {116 let ships = request.response;117 fillArray(ships);118 };119});120var sidebar = new Sidebar();121var query = new Query();122var shipsArray = [];123function fillArray(jsonObj) {124 for (var i = 0; i < jsonObj.length; i++)125 shipsArray.push(new Ship(jsonObj[i].title, jsonObj[i].nation, jsonObj[i].type, jsonObj[i].level, 0));126 var shipsContainer = document.getElementById('ships');127 showShips(shipsContainer, shipsArray);128 fillFilters(shipsArray);129}130function fillFilters(shipsArray) {131 let ships = shipsArray;132 fillNation(ships);//call filter by the Nation133 fillType(ships);//call filter by the Type134 fillLevel(ships);//call filter by the Level135}136function showShips(Container, shipsArray) {137 console.log(shipsArray);138 var shipsContainer = Container;139 for (var i = 0; i < shipsArray.length; i++) {140 var element = document.createElement('div');141 if (shipsArray[i].getStatus() == 0) {142 element.classList.add("ship");143 element.setAttribute("id", shipsArray[i].title);144 }145 else {146 element.classList.add("ship");147 element.classList.toggle("highlight");148 element.setAttribute("id", shipsArray[i].title);149 }150 var title = document.createElement('h3');151 var level = document.createElement('span');152 var nation = document.createElement('span');153 nation.textContent = shipsArray[i].nation;154 level.textContent = shipsArray[i].level;155 title.textContent = shipsArray[i].title;156 element.appendChild(title);157 element.appendChild(level);158 element.appendChild(nation);159 shipsContainer.appendChild(element);160 }161}162function showShipsSidebar(Container, shipsArray) {163 console.log(shipsArray);164 var shipsContainer = Container;165 for (var i = 0; i < shipsArray.length; i++) {166 var element = document.createElement('div');167 element.classList.add("ship");168 element.setAttribute("id", shipsArray[i].title);169 var title = document.createElement('h3');170 var level = document.createElement('span');171 var nation = document.createElement('span');172 nation.textContent = shipsArray[i].nation;173 level.textContent = shipsArray[i].level;174 title.textContent = shipsArray[i].title;175 element.appendChild(title);176 element.appendChild(level);177 element.appendChild(nation);178 shipsContainer.appendChild(element);179 }180}181function showLevelSidebar(Container) {182 var levelsContainer = Container;183 clearContainer(levelsContainer);184 levelsContainer.textContent = sidebar.getLevels();185}186document.getElementById('ships').addEventListener('click', function (e) {187 if (e.target.id && e.target.id != 'ships') {188 for (var i = 0; i < shipsArray.length; i++) {189 if (shipsArray[i].title == e.target.id) {190 if (shipsArray[i].getStatus() == 0) {191 if (sidebar.sumLevel(shipsArray[i].getLevel())) {192 if (sidebar.getSidebar().length < 7) {193 sidebar.addToSidebar(shipsArray[i]);194 console.log("Sum levels: " + sidebar.getLevels() + " Sum ships: " + sidebar.getSidebar().length);195 e.target.classList.toggle('highlight');196 e.target.style.transition = "all .3s";197 shipsArray[i].setStatus(1);198 console.log(shipsArray[i]);199 }200 else {201 sidebar.subtractionLevel(shipsArray[i].getLevel());202 }203 }204 }205 else {206 sidebar.subtractionLevel(shipsArray[i].getLevel());207 sidebar.removeFromSidebar(shipsArray[i]);208 console.log("Sum levels: " + sidebar.getLevels());209 e.target.classList.toggle('highlight');210 e.target.style.transition = "all .3s";211 shipsArray[i].setStatus(0);212 console.log(shipsArray[i]);213 }214 }215 }216 }217});218document.getElementById('search').addEventListener('keyup', function () {//function for searching ships by symbols219 var searchedShips = [];220 var searchPhrase = this.value;221 var shipsContainer = document.getElementById('ships');222 if (searchPhrase == '') {223 clearContainer(shipsContainer);224 showShips(shipsContainer, ships);225 }226 for (var ship of shipsArray) {227 if (ship.title.includes(searchPhrase)) {228 searchedShips.push(ship);229 clearContainer(shipsContainer);230 showShips(shipsContainer, searchedShips);231 }232 }233});234235function fillNation(shipsArray) {236 var shipNations = [];237 for (var i = 0; i < shipsArray.length; i++) {238 if (hasElement(shipNations))239 shipNations.push(shipsArray[i].nation);240 else if (shipNations.includes(shipsArray[i].nation))241 continue;242 else shipNations.push(shipsArray[i].nation);243 }244 var selectElement = document.getElementById('nation');245 createOption(selectElement, shipNations);246 console.log(shipNations);247}248function fillType(shipsArray) {249 var shipType = [];250 for (var i = 0; i < shipsArray.length; i++) {251 if (hasElement(shipType))252 shipType.push(shipsArray[i].type);253 else if (shipType.includes(shipsArray[i].type))254 continue;255 else shipType.push(shipsArray[i].type);256 }257 var selectElement = document.getElementById('type');258 createOption(selectElement, shipType);259 console.log(shipType);260}261function fillLevel(shipsArray) {262 var shipLevel = [];263 for (var i = 0; i < shipsArray.length; i++) {264 if (hasElement(shipLevel))265 shipLevel.push(shipsArray[i].level);266 else if (shipLevel.includes(shipsArray[i].level))267 continue;268 else shipLevel.push(shipsArray[i].level);269 }270 var selectElement = document.getElementById('level');271 createOption(selectElement, shipLevel);272 console.log(shipLevel);273}274function compareNumbers(a, b) {275 return a - b;276}277function hasElement(element) {//validation on exicting the first value278 if (element == 0) {279 return true;280 }281 else return false;282}283function createOption(selectElement, element) {//the interface for creating options284 if (typeof (element[0]) === 'string') {285 element.sort();286 }287 else {288 element.sort(compareNumbers);289 }290 for (let option of element) {291 var newOption = document.createElement('option');292 newOption.value = option;293 newOption.text = option;294 selectElement.appendChild(newOption);295 }296}297document.getElementById("nation").addEventListener("change", function (e) {298 if (this.value) {299 query.setNation(this.value);300 applyFilter();301 }302303});304document.getElementById("type").addEventListener("change", function (e) {305 if (this.value) {306 query.setType(this.value);307 applyFilter();308 }309});310document.getElementById("level").addEventListener("change", function (e) {311 if (this.value) {312 query.setLevel(this.value);313 applyFilter();314 }315});316function applyFilter() {317 if ((query.getNation() == "ÐаÑиÑ") && (query.getType() == "ÐлаÑÑ") && (query.getLevel() == "УÑовенÑ")) {318 var shipsContainer = document.getElementById('ships');319 clearContainer(shipsContainer);320 showShips(shipsContainer, shipsArray);321 }322 else if ((query.getNation()) && (query.getType() == "ÐлаÑÑ") && (query.getLevel() == "УÑовенÑ")) {323 var ships = shipsArray.filter(function (filter) {324 if (filter.nation == query.getNation())325 return filter;326 });327 var shipsContainer = document.getElementById('ships');328 clearContainer(shipsContainer);329 showShips(shipsContainer, ships);330 }331 else if ((query.getNation() == "ÐаÑиÑ") && (query.getType()) && (query.getLevel() == "УÑовенÑ")) {332 var ships = shipsArray.filter(function (filter) {333 if (filter.type == query.getType())334 return filter;335 });336 var shipsContainer = document.getElementById('ships');337 clearContainer(shipsContainer);338 showShips(shipsContainer, ships);339 }340 else if ((query.getNation() == "ÐаÑиÑ") && (query.getType() == "ÐлаÑÑ") && (query.getLevel())) {341 var ships = shipsArray.filter(function (filter) {342 if (filter.level == query.getLevel())343 return filter;344 });345 var shipsContainer = document.getElementById('ships');346 clearContainer(shipsContainer);347 showShips(shipsContainer, ships);348 }349 else if ((query.getNation()) && (query.getType()) && (query.getLevel() == "УÑовенÑ")) {350 var ships = shipsArray.filter(function (filter) {351 if ((filter.nation == query.getNation()) && (filter.type == query.getType()))352 return filter;353 });354 var shipsContainer = document.getElementById('ships');355 clearContainer(shipsContainer);356 showShips(shipsContainer, ships);357 }358 else if ((query.getNation() == "ÐаÑиÑ") && (query.getType()) && (query.getLevel())) {359 var ships = shipsArray.filter(function (filter) {360 if ((filter.type == query.getType()) && (filter.level == query.getLevel()))361 return filter;362 });363 var shipsContainer = document.getElementById('ships');364 clearContainer(shipsContainer);365 showShips(shipsContainer, ships);366 }367 else if ((query.getNation()) && (query.getType() == "ÐлаÑÑ") && (query.getLevel())) {368 var ships = shipsArray.filter(function (filter) {369 if ((filter.nation == query.getNation()) && (filter.level == query.getLevel()))370 return filter;371 });372 var shipsContainer = document.getElementById('ships');373 clearContainer(shipsContainer);374 showShips(shipsContainer, ships);375 }376 else if ((query.getNation()) && (query.getType()) && (query.getLevel())) {377 var ships = shipsArray.filter(function (filter) {378 if ((filter.nation == query.getNation()) && (filter.type == query.getType()) && (filter.level == query.getLevel()))379 return filter;380 });381 var shipsContainer = document.getElementById('ships');382 clearContainer(shipsContainer);383 showShips(shipsContainer, ships);384 }
...
category.js
Source:category.js
...43recreationFn();44freeFn();45tradeFn();46function propertyFn() {47 clearContainer();48 apiService.fetchProperty().then(rendProperty);49}50function rendProperty(data) {51 rendCategory.property.insertAdjacentHTML('beforeend', categoryTpl(data));52}53function transportFn() {54 clearContainer();55 apiService.fetchTransport().then(rendTransport);56}57function rendTransport(data) {58 console.log('data', data);59 rendCategory.transport.insertAdjacentHTML('beforeend', categoryTpl(data));60}61function workFn() {62 clearContainer();63 apiService.fetchWork().then(rendWork);64}65function rendWork(data) {66 rendCategory.work.insertAdjacentHTML('beforeend', categoryTpl(data));67}68function electronicsFn() {69 clearContainer();70 apiService.fetchElectronics().then(rendElectronics);71}72function rendElectronics(data) {73 rendCategory.electronics.insertAdjacentHTML('beforeend', categoryTpl(data));74}75function businessFn() {76 clearContainer();77 apiService.fetchBusiness().then(rendBusiness);78}79function rendBusiness(data) {80 rendCategory.business.insertAdjacentHTML('beforeend', categoryTpl(data));81}82function recreationFn() {83 clearContainer();84 apiService.fetchRecreation().then(rendRecreation);85}86function rendRecreation(data) {87 rendCategory.recreation.insertAdjacentHTML('beforeend', categoryTpl(data));88}89function freeFn() {90 clearContainer();91 apiService.fetchFree().then(rendFree);92}93function rendFree(data) {94 rendCategory.free.insertAdjacentHTML('beforeend', categoryTpl(data));95}96function tradeFn() {97 clearContainer();98 apiService.fetchTrade().then(rendTrade);99}100function rendTrade(data) {101 rendCategory.trade.insertAdjacentHTML('beforeend', categoryTpl(data));102}103function loadMore() {104 console.log('загÑÑзи болÑÑе');105}106function searchFn(e) {107 e.preventDefault();108 clearContainer();109 apiService.query = e.currentTarget.elements.query.value;110 apiService.fetchSearchQuery().then(appendCategory);111 console.log('Ð¡Ð°Ð±Ð¼Ð¸Ñ Ð½Ð° поиÑке');112}113function appendCategory(data) {114 categoryRend.insertAdjacentHTML('beforeend', categoryTpl(data));115}116function clearContainer() {117 categoryRend.innerHTML = '';118}119// ÐопÑоÑÑ Ðº менÑоÑÑ120// 1 Ðак иÑкаÑÑ Ð¿Ð¾ названиÑ121// 2 Ðак вÑзваÑÑ ÐºÐ°ÑегоÑии "Ð±Ð¸Ð·Ð½ÐµÑ Ð¸ ÑÑлÑги" и "оÑдÑÑ
и ÑпоÑÑ"122// Ðак оÑÑилÑÑÑоваÑÑ ÑоваÑÑ Ð¿Ð¾ ÑвойÑÑÐ²Ñ isOnSale123// Ðак оÑвежиÑÑ Ð²ÐµÑÐºÑ ÐµÑли Ñ Ð¼ÐµÐ½Ñ124// ÐадаÑи на 14 декабÑÑ125// 1. СделаÑÑ Ð¿Ð¾Ð¸Ñк +126// 2. СделаÑÑ ÑекÑии на одной ÑÑÑаниÑе +127// 3. СделаÑÑ ÐºÐ°ÑегоÑÐ¸Ñ Ð½Ð° одной ÑÑÑаниÑе...
FeatureClearContainerTest.js
Source:FeatureClearContainerTest.js
...52 this.setState({childFeatures: []});53 }54 });55 }56 clearContainer() {57 const {features, addError} = this.props;58 const feature = _.find(features, {geoId: this.state.selectedFeatureId});59 try {60 feature.clearContainer({61 onSuccess: () => {62 toastr.success('Cleared Feature Container');63 this.fetchChildren(feature);64 },65 onError: err => {66 toastr.error('Failed to Clear Feature Container');67 addError(err, 'Feature.clearContainer');68 }69 });70 } catch (err) {71 toastr.error(err.message, 'Feature.clearContainer: Critical');72 }73 }74 render() {...
landing.js
Source:landing.js
1import React from "react";2import styles from "../../../styles/home/landing.module.css";3import ClearContainer from "../../customComponents/ClearContainer";4import ClearGrid from "../../customComponents/ClearGrid";5import Grid from "@mui/material/Grid";6import Typography from "@mui/material/Typography";7import PrimaryButton from "../primaryButton";8import CustomHeight from "../../customComponents/CustomHeight";9import IconButton from "@mui/material/IconButton";10import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";11import SocialMedia from "../socialMedia";12import { useTheme } from "@mui/material/styles";13import { useMediaQuery } from "@mui/material";14const Landing = () => {15 const theme = useTheme();16 const isLessThan600Px = useMediaQuery("(max-width: 600px)");17 return (18 <ClearContainer style={{ position: "realtive" }}>19 <video20 className={styles.video_landing}21 autoPlay22 loop23 muted24 poster="./assets/video_poster.jpg"25 >26 <source src="./assets/video.webm" type="video/webm" />27 </video>28 <div className={styles.video_overlay}></div>29 <ClearContainer maxWidth="xl">30 <Grid container>31 <Grid item sm={10}>32 <div className={styles.contentWrap}>33 <Typography variant="h2" component="h2">34 Welcome to the <br />35 Internet of Trust36 </Typography>37 <Typography color="textSecondary">38 ARCHEthic gives back to humanity control over technology, and to39 each individual, control over their identity40 </Typography>41 <CustomHeight height="2rem" />42 <div>43 <PrimaryButton44 text="Buy UCO"45 onClick={() => {46 window.location.href = "#uco-landing";47 }}48 />49 <PrimaryButton50 text="Join the Community"51 onClick={() => {52 window.location.href = "#community-landing";53 }}54 />55 <IconButton>56 <PlayCircleOutlineIcon57 style={{58 fontSize: "3rem",59 lineHeight: "1rem",60 color: theme.palette.text.primary,61 }}62 />63 </IconButton>64 </div>65 </div>66 </Grid>67 <Grid68 item69 sm={2}70 sx={{71 display: "flex",72 alignItems: "center",73 justifyContent: isLessThan600Px ? "center" : "flex-end",74 width: "100%",75 }}76 >77 <SocialMedia orientation={isLessThan600Px ? "row" : "column"} />78 </Grid>79 </Grid>80 </ClearContainer>81 </ClearContainer>82 );83};...
createClearBtn.test.js
Source:createClearBtn.test.js
1import {2 expect, describe, it, jest,3} from '@jest/globals';4import page from '../../jsdom';5import views from '../../js/views/index';6import boards from '../mock/boards';7import fetchMock from '../mock/fetchMock';8import functions from '../../js/functions';9const { createClearBtn } = views;10const { fetchBoard } = functions;11const { board } = boards;12const boardCopy = [...board];13const url = 'https://sugoku.herokuapp.com/board?difficulty=easy';14global.window.document.body.innerHTML = page.window.document.body.innerHTML;15global.fetch = jest.fn(fetchMock);16describe('verifica a funcao createClearBtn', () => {17 const content = document.getElementById('content');18 const btnEasy = document.createElement('button');19 btnEasy.innerHTML = 'EASY';20 btnEasy.value = 'EASY';21 content.appendChild(btnEasy);22 const clearContainer = createClearBtn(boardCopy);23 it('verifica se a funcao retorna corretamente o elemento', () => {24 expect(clearContainer.tagName).toBe('DIV');25 expect(clearContainer.className).toBe('clear-container');26 expect(clearContainer.firstChild.tagName).toBe('BUTTON');27 expect(clearContainer.firstChild.className).toBe('clear-btn');28 expect(clearContainer.firstChild.innerHTML).toBe('CLEAR BOARD');29 });30 it('verifica a funcionalidade do botão', async () => {31 await fetchBoard(url, false, content);32 content.appendChild(clearContainer);33 const clearBtn = document.querySelector('.clear-btn');34 const event = new MouseEvent('click');35 const tryOne = document.getElementById('x=1 y=1');36 const tryTwo = document.getElementById('x=2 y=4');37 tryOne.innerHTML = '2';38 tryTwo.innerHTML = '3';39 boardCopy[1][1] = 2;40 boardCopy[2][4] = 3;41 expect(tryOne.innerHTML).toBe('2');42 expect(tryTwo.innerHTML).toBe('3');43 expect(boardCopy[1][1]).toBe(2);44 expect(boardCopy[2][4]).toBe(3);45 clearBtn.dispatchEvent(event);46 expect(tryOne.innerHTML).toBe('');47 expect(tryTwo.innerHTML).toBe('');48 expect(boardCopy[1][1]).toBe(0);49 expect(boardCopy[2][4]).toBe(0);50 });...
index.js
Source:index.js
2import { loadMainPage } from './mainpage';3import { loadMenuPage } from './menu';4import { loadContactPage } from './contact';5loadPage();6function clearContainer() { 7 while(cont.firstChild){8 cont.removeChild(cont.firstChild);9 };10}11const homeBtn = document.getElementById('home_btn')12homeBtn.addEventListener('click', () => {13 clearContainer();14 loadMainPage();15});16const logo = document.getElementById('logo')17logo.addEventListener('click', () => {18 clearContainer();19 loadMainPage();20});21const menuBtn = document.getElementById('menu_btn')22menuBtn.addEventListener('click', () => {23 clearContainer();24 loadMenuPage();25});26const contactBtn = document.getElementById('contact_btn')27contactBtn.addEventListener('click', () => {28 clearContainer();29 loadContactPage();30});...
clearContainer.test.js
Source:clearContainer.test.js
...17 </div>18 `;19 const cont = document.getElementById('container');20 expect(cont.children).toHaveLength(6);21 clearContainer();22 expect(cont.children).toHaveLength(2);23 addNewElemTo(cont);24 addNewElemTo(cont);25 clearContainer();26 expect(cont.children).toHaveLength(2);27 });...
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:
- 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.
- 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.
- 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.
- 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.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
