How to use GuidedTourService method in tracetest
Best JavaScript code snippet using tracetest
tutorial.service.ts
Source:tutorial.service.ts 
1import { HttpClient } from '@angular/common/http';2import { Injectable } from '@angular/core';3import { OrientationConfiguration, Orientation, TourStep, GuidedTour, GuidedTourService } from 'ngx-guided-tour';4import { Observable } from 'rxjs';5import { map, tap } from 'rxjs/operators';6import { ResponseModel } from 'src/app/shared/model/response.model';7import { UserModel } from 'src/app/shared/model/user.model';8import { environment } from 'src/environments/environment';9import { UserService } from '../user/user.service';10@Injectable({11 providedIn: 'root'12})13export class TutorialService {14 config: OrientationConfiguration = {15 orientationDirection: Orientation.Center16 };17 baseTour: GuidedTour = {18 steps: [19 {20 content: 'Możesz w tym miejscu dodawaÄ klientki',21 title: 'Klientki',22 selector: '#customer',23 orientation: Orientation.BottomRight,24 skipStep: false,25 },26 {27 content: 'Tutaj zaplanujesz wysyÅkÄ SMS dla swoich klientek',28 title: 'Klientki',29 selector: '#message_plans',30 orientation: Orientation.BottomRight,31 skipStep: false,32 },33 {34 content: 'Tutaj znajdziesz historie wysÅanych wiadomoÅci SMS',35 title: 'Klientki',36 selector: '#message_history',37 orientation: Orientation.BottomRight,38 skipStep: false,39 },40 {41 content: 'Widok Twojego kalendarza pozwoli zoorganizowaÄ wizyty w jednym miejscu',42 title: 'Wizyty',43 selector: '#works',44 orientation: Orientation.BottomRight,45 skipStep: false,46 },47 {48 content: 'Tutaj możesz zarzÄ
dzaÄ swoimi pracownikami',49 title: 'Pracownicy',50 selector: '#workers',51 skipStep: false,52 },53 {54 content: `W tym miejscu widzisz swój aktualnÄ
iloÅÄ pieniÄdzy w portfelu. <br> PamiÄtaj że jeżeli stan konta spadnie poniżej zera smsy nie zostanÄ
wysÅane`,55 title: 'Stan konta',56 selector: '#navTutorial',57 orientation: Orientation.BottomRight,58 skipStep: false,59 },60 {61 content: `WÅaÅnie ukoÅczyÅaÅ wprowadzenie do aplikacji. <br>62 Poznanie reszty funkcji zajmie tyle co wypicie kawy.`,63 title: 'Åwietnie!',64 orientation: Orientation.Center,65 skipStep: false,66 },67 ],68 tourId: 'base_v1',69 completeCallback: () => this.baseTutorialCompleted(),70 }71 messageTour: GuidedTour = {72 steps: [73 {74 title: 'Plany SMS',75 content: 'Tutaj możesz zaplanowaÄ w jaki sposób komunikujemy siÄ z Twoimi klientkami',76 skipStep: false,77 },78 {79 content: 'Każdy plan posiada inne przeznaczenie oraz inne zachowanie',80 title: 'Plany',81 selector: '#plansContainer',82 skipStep: false,83 },84 {85 content: 'CaÅoÅÄ zachowania planu zobaczysz w jego szczegóÅach',86 title: 'SzczegóÅy',87 selector: '.btnsContainer',88 skipStep: false,89 },90 ],91 tourId: 'message_plans_v1',92 completeCallback: () => this.messageTutorialCompleted(),93 }94 messageDetailTour: GuidedTour = {95 steps: [96 {97 title: 'SzczegóÅy',98 content: 'Tutaj planujesz sposób realizacji planu',99 skipStep: false,100 },101 {102 title: 'Schemat',103 content: 'OkreÅla treÅÄ wiadomoÅci',104 selector: '#schema',105 skipStep: false,106 },107 {108 title: 'Zmienne',109 content: 'W treÅÄ wiadomoÅci możesz wrzucaÄ zmienne takie jak Imie klientki, a my w to miejsce wrzucimy wartoÅÄ dla konkretnego przypadku.',110 selector: '#addVariableTutorial',111 skipStep: false,112 },113 {114 title: 'PodglÄ
d',115 content: 'Aby siÄ upewniÄ zobacz jak wyglÄ
da treÅÄ wiadomoÅÄ na przykÅadzie konkretnej klientki.',116 selector: '.previewBtn',117 skipStep: false,118 },119 ],120 tourId: 'message_detail_plans_v1',121 completeCallback: () => this.messageDetailTutorialCompleted(),122 }123 scheduleTour: GuidedTour = {124 steps: [125 {126 title: 'Kalendarz',127 content: 'Widzisz tutaj wszystkie swoje nadchodzÄ
ce wizyty oraz ich historie',128 skipStep: false,129 },130 {131 title: 'Pracownicy',132 content: 'Do każdej wizyty możesz przypisaÄ pracownika, co pomoże Ci w organizacji pracy.',133 selector: '#worker_tutorial',134 orientation: Orientation.Bottom,135 skipStep: false,136 },137 {138 title: 'Wizyty',139 content: 'Wizyty możesz dodawaÄ poprzez zwykÅe klikniÄcie w miejsce w puste miejsce w kalendarzu',140 selector: '#schedule_tutorial',141 skipStep: false,142 },143 ],144 tourId: 'schedule_v1',145 completeCallback: () => this.scheduleTutorialCompleted(),146 }147 constructor(148 private guidedTourService: GuidedTourService,149 private http: HttpClient,150 private userService: UserService,151 ) {152 }153 startBaseTutorial() {154 this.guidedTourService.startTour(this.baseTour);155 }156 startMessageTutorial() {157 this.guidedTourService.startTour(this.messageTour);158 }159 startMessageDetailTutorial() {160 this.guidedTourService.startTour(this.messageDetailTour);161 }162 startScheduleTutorial() {163 document.querySelector('#worker_tutorial').scrollTo(0,0);164 document.querySelector('body').scrollTo(0,0);165 this.guidedTourService.startTour(this.scheduleTour);166 }167 private baseTutorialCompleted() {168 this.tutorialCompleteHttp(this.baseTour.tourId).subscribe();169 }170 private messageTutorialCompleted() {171 this.tutorialCompleteHttp(this.messageTour.tourId).subscribe();172 }173 private messageDetailTutorialCompleted() {174 this.tutorialCompleteHttp(this.messageDetailTour.tourId).subscribe();175 }176 private scheduleTutorialCompleted() {177 this.tutorialCompleteHttp(this.scheduleTour.tourId).subscribe();178 }179 private tutorialCompleteHttp(tutorial: string): Observable<any> {180 return this.http.post<ResponseModel<UserModel>>(`${environment.apiUrl}/user/tutorial`, {tutorial}).pipe(181 map(res => res.data),182 tap(user => this.userService.loggedUser = user),183 );184 }...
homePageController.ts
Source:homePageController.ts
1import * as _ from 'lodash';2export class HomePageController {3 static $inject = ['$rootScope', '$state', '$timeout', 'AuthService', 'Catalog', 'Constants', 'GuidedTourService', 'HTMLService', 'NotificationsService'];4 public ctrl: any = this;5 private $rootScope: any;6 private $state: any;7 private $timeout: any;8 private authService: any;9 private Catalog: any;10 private GuidedTourService: any;11 private HTMLService: any;12 private constants: any;13 private tourConfig: any;14 private NotificationsService: any;15 constructor($rootScope: any, $state: any, $timeout: any, AuthService: any, Catalog: any,16 Constants: any, GuidedTourService: any, HTMLService: any, NotificationsService: any) {17 this.$rootScope = $rootScope;18 this.$state = $state;19 this.$timeout = $timeout;20 this.authService = AuthService;21 this.Catalog = Catalog;22 this.GuidedTourService = GuidedTourService;23 this.HTMLService = HTMLService;24 this.constants = Constants;25 this.NotificationsService = NotificationsService;26 };27 public $onInit() {28 this.tourConfig = _.get(this.constants, 'GUIDED_TOURS.landing_page_tour');29 // Assume a development environment for the console. Remove the trailing slash if set.30 let consoleBaseUrl = _.get(window, 'OPENSHIFT_CONSOLE_BASE_URL', 'https://localhost:9000/dev-console').replace(/\/$/, '');31 this.ctrl.baseProjectUrl = consoleBaseUrl + "/project";32 this.ctrl.projectsUrl = consoleBaseUrl + "/projects";33 this.authService.withUser().then(() => {34 this.update();35 });36 };37 public update() {38 this.Catalog.getCatalogItems(false).then( _.spread((catalogServiceItems: any, errorMessage: any) => {39 this.ctrl.catalogItems = catalogServiceItems;40 if (errorMessage) {41 this.NotificationsService.addNotification({42 type: "error",43 message: errorMessage44 });45 }46 if (_.get(this, 'tourConfig.auto_launch')) {47 // Check if this is the first time this user has visited the home page, if so launch the tour48 var viewedHomePageKey: string = "openshift/viewedHomePage/" + this.$rootScope.user.metadata.name;49 if (localStorage.getItem(viewedHomePageKey) !== 'true') {50 this.$timeout(() => {51 if (this.startGuidedTour()) {52 localStorage.setItem(viewedHomePageKey, 'true');53 }54 }, 500);55 }56 }57 }), () => {58 this.ctrl.catalogItems = {};59 });60 this.ctrl.saasOfferings = this.constants.SAAS_OFFERINGS;61 };62 public startGuidedTour = () : boolean => {63 if (this.HTMLService.isWindowBelowBreakpoint(this.HTMLService.WINDOW_SIZE_SM)) {64 return false;65 }66 if (!this.tourConfig || !this.tourConfig.enabled || !this.tourConfig.steps) {67 return false;68 }69 this.GuidedTourService.startTour(this.tourConfig.steps);70 return true;71 };...
navigation.controller.ts
Source:navigation.controller.ts
1import * as angular from 'angular';2export class NavigationController implements angular.IController {3 static $inject = ['$transitions', '$rootScope', '$state', '$timeout', 'Constants', 'GuidedTourService'];4 public ctrl: any = this;5 public applicationName: string;6 public navCollapsed: boolean = true;7 private $transitions: any;8 private $rootScope: any;9 private $state: any;10 private $timeout: any;11 private Constants: any;12 private GuidedTourService: any;13 private tourConfig: any;14 constructor($transitions: any, $rootScope: any, $state: any, $timeout: any, Constants: any, GuidedTourService: any) {15 this.$transitions = $transitions;16 this.$rootScope = $rootScope;17 this.$state = $state;18 this.$timeout = $timeout;19 this.Constants = Constants;20 this.GuidedTourService = GuidedTourService;21 };22 public $onInit() {23 this.ctrl.applicationName = 'OPENSHIFT WEB CATALOGS';24 var _ctrl: any = this.ctrl;25 this.$transitions.onSuccess({to: true}, function(state: any) {26 var toState: any = state.$to();27 var stateName: string = toState.name;28 angular.forEach(_ctrl.navigationItems, function(navItem: any) {29 navItem.isActive = stateName.indexOf(navItem.uiSref) === 0;30 });31 });32 this.ctrl.user = this.$rootScope.user;33 this.$rootScope.$watch('user', function(newValue: any) {34 _ctrl.user = newValue;35 });36 this.tourConfig = this.Constants.GUIDED_TOURS ? this.Constants.GUIDED_TOURS.landing_page_tour : undefined;37 };38 public doLogout() {39 this.$state.go('logout');40 }41 public startTour() {42 this.$state.go('home');43 this.$timeout(() => {44 if (this.tourConfig && this.tourConfig.enabled && this.tourConfig.steps) {45 this.GuidedTourService.startTour(this.tourConfig.steps);46 }47 }, 500);48 }...
Using AI Code Generation
1var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);2GuidedTourService.startTour("test");3var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);4GuidedTourService.startTour("test");5var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);6GuidedTourService.startTour("test");7var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);8GuidedTourService.startTour("test");9var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);10GuidedTourService.startTour("test");11var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);12GuidedTourService.startTour("test");13var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);14GuidedTourService.startTour("test");15var GuidedTourService = Components.classes["@mozilla.org/toolkit/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);16GuidedTourService.startTour("test");
Using AI Code Generation
1var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);2var tour = GuidedTourService.getTour("test");3tour.start();4var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);5var tour = GuidedTourService.getTour("test");6tour.start();7var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);8var tour = GuidedTourService.getTour("test");9tour.start();10var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);11var tour = GuidedTourService.getTour("test");12tour.start();13var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);14var tour = GuidedTourService.getTour("test");15tour.start();16var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);17var tour = GuidedTourService.getTour("test");18tour.start();19var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);20var tour = GuidedTourService.getTour("test");21tour.start();22var GuidedTourService = Components.classes["@mozilla.org/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);
Using AI Code Generation
1var GuidedTourService = Components.classes["@mozilla.org/browser/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);2var GuidedTourService = Components.classes["@mozilla.org/browser/guidedtour;1"].getService(Components.interfaces.nsIGuidedTourService);3var tour = GuidedTourService.createTour("test");4var page = tour.getPage(0);5page.addStep("step1");6page.addStep("step2");7var page = tour.getPage(1);8page.addStep("step3");9page.addStep("step4");10var page = tour.getPage(2);11page.addStep("step5");12page.addStep("step6");
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 tracetest 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?
