How to use setupComponent method in Playwright Internal

Best JavaScript code snippet using playwright-internal

gviz-directive_test.js

Source:gviz-directive_test.js Github

copy

Full Screen

...51 if (isFetched) {52 state().datasource.status = ResultsDataStatus.FETCHED;53 }54 }55 function setupComponent() {56 directiveElement = angular.element(57 '<gviz-chart-widget widget-config="widgetConfig"/>');58 var component = compile(directiveElement)(rootScope);59 rootScope.$apply();60 timeout.flush();61 return {62 component: component,63 chartDiv: angular.element(64 component[0].getElementsByClassName('pk-chart')[0]),65 errorDiv: angular.element(66 component[0].getElementsByClassName('pk-chart-error')[0]),67 spinnerDiv: angular.element(68 component[0].getElementsByClassName('pk-chart-loading')[0])69 };70 }71 beforeEach(function() {72 jasmine.addMatchers({73 toHaveParentState: function() {74 return {75 compare: function(actual, expected) {76 var parentState = actual.parentNode.className.replace(77 /.*pk-cond-(\S+)/, '$1');78 var result = {};79 var classNames = parentState.split(' ');80 result.pass = (classNames.indexOf(expected) > -1);81 var elemText = actual.tagName + '(' + actual.className + ')';82 if (!result.pass) {83 result.message =84 'Expected state "' + expected + '", was "' +85 parentState + '".';86 }87 return result;88 }89 }90 }91 });92 });93 beforeEach(module('explorer'));94 beforeEach(module('googleVisualizationMocks'));95 beforeEach(module(function($provide) {96 var queryResultDataService = function($q) {97 // Mock fetchResults promise98 fetchResultsDeferred = $q.defer();99 queryResultDataServiceMock = {100 fetchResults: jasmine.createSpy().101 and.returnValue(fetchResultsDeferred.promise)102 };103 return queryResultDataServiceMock;104 };105 $provide.service('queryResultDataService', queryResultDataService);106 }));107 beforeEach(inject(function($httpBackend) {108 httpBackend = $httpBackend;109 }));110 beforeEach(inject(function($compile, $rootScope, $timeout, GvizChartWrapper,111 gvizEvents, _GvizDataTable_, dataViewService, _configService_,112 _dashboardService_, _explorerService_, _widgetFactoryService_,113 errorService) {114 errorService.logToConsole = false;115 compile = $compile;116 rootScope = $rootScope;117 timeout = $timeout;118 configService = _configService_;119 dashboardService = _dashboardService_;120 explorerService = _explorerService_;121 widgetFactoryService = _widgetFactoryService_;122 chartWrapperMock = GvizChartWrapper.prototype;123 spyOn(chartWrapperMock, 'draw');124 spyOn(chartWrapperMock, 'setView');125 spyOn(chartWrapperMock, 'setChartType');126 spyOn(chartWrapperMock, 'setOptions');127 gvizEventsMock = gvizEvents;128 GvizDataTable = _GvizDataTable_;129 dataViewServiceMock = dataViewService;130 configService.populate(configService.getConfigForTesting());131 spyOn(GvizDataTable.prototype, 'getNumberOfRows').and.returnValue(10);132 httpBackend.expectGET(133 '/static/components/widget/data_viz/gviz/gviz-charts.json')134 .respond({});135 // Setup fake data for component's attributes136 explorerService.newDashboard();137 $rootScope.$apply();138 rootScope.widgetConfig = dashboardService.selectedWidget;139 model = rootScope.widgetConfig.model;140 state = angular.bind(141 rootScope.widgetConfig,142 rootScope.widgetConfig.state);143 state().parent = new ContainerWidgetConfig(widgetFactoryService);144 model.datasource.query = 'fake query';145 spyOn(gvizEventsMock, 'addListener').and.callFake(146 function(chartWrapper, eventName, callback) {147 if (eventName === 'error') {148 gvizChartErrorCallback = callback;149 }150 }151 );152 dataViewsJson = {obj: 'fake dataViewsJson'};153 spyOn(dataViewServiceMock, 'create').and.returnValue(dataViewsJson);154 }));155 it('should update the chartWrapper when the configuration change.',156 function() {157 setupData(true);158 // Setup a configuration159 model.chart.chartType = 'chartType';160 model.chart.options = {obj: 'options'};161 setupComponent();162 expect(chartWrapperMock.setChartType).163 toHaveBeenCalledWith(model.chart.chartType);164 var optionsArg = chartWrapperMock.setOptions.calls.mostRecent().args[0];165 expect(optionsArg.obj).toEqual('options');166 // Change the configuration167 model.chart.chartType = 'chartType2';168 model.chart.options = {obj: 'options2'};169 rootScope.$apply();170 timeout.flush();171 expect(chartWrapperMock.setChartType).172 toHaveBeenCalledWith(model.chart.chartType);173 optionsArg = chartWrapperMock.setOptions.calls.mostRecent().args[0];174 expect(optionsArg.obj).toEqual('options2');175 }176 );177 it('should prevent overflow for a chart.',178 function() {179 setupData(true);180 model.chart.chartType = ChartType.LINE_CHART;181 setupComponent();182 expect(model.layout.cssClasses).183 toEqual('pk-widget-no-overflow');184 }185 );186 it('should not prevent overflow for a table.',187 function() {188 setupData(true);189 model.chart.chartType = ChartType.TABLE;190 setupComponent();191 expect(model.layout.cssClasses).toEqual('');192 }193 );194 describe('template', function() {195 it('should show the spinner when the data are fetching.',196 function() {197 state().datasource.status = ResultsDataStatus.FETCHING;198 var component = setupComponent();199 expect(component.spinnerDiv[0]).toHaveParentState('fetching');200 }201 );202 it('should hide the spinner when the data are not fetching.',203 function() {204 state().datasource.status = ResultsDataStatus.NODATA;205 var component = setupComponent();206 expect(component.spinnerDiv[0]).toHaveParentState('nodata');207 state().datasource.status = ResultsDataStatus.FETCHED;208 rootScope.$apply();209 expect(component.spinnerDiv[0]).toHaveParentState('fetched');210 }211 );212 it('should show the chart when there is no error.',213 function() {214 setupData(true);215 var component = setupComponent();216 expect(component.chartDiv[0]).toHaveParentState('fetched');217 }218 );219 it('should show the chart when data are fetched.',220 function() {221 setupData(true);222 var component = setupComponent();223 expect(component.chartDiv[0]).toHaveParentState('fetched');224 }225 );226 it('should hide the chart when data are not fetched.',227 function() {228 state().datasource.status = ResultsDataStatus.FETCHING;229 var component = setupComponent();230 expect(component.chartDiv[0]).toHaveParentState('fetching');231 }232 );233 it('should hide the error when there is none.',234 function() {235 setupData(true);236 var component = setupComponent();237 expect(component.errorDiv[0]).toHaveParentState('fetched');238 }239 );240 });241 describe('datasource', function() {242 it('should queue and fetch data when the datasource status is TOFETCH.',243 function() {244 setupData();245 setupComponent();246 // Should have no data.247 rootScope.$apply();248 expect(state().datasource.status).249 toEqual(ResultsDataStatus.NODATA);250 // Ask to fetch. We're still in TOFETCH state since the251 // query is queued but not yet started.252 state().datasource.status = ResultsDataStatus.TOFETCH;253 rootScope.$apply();254 timeout.verifyNoPendingTasks();255 expect(state().datasource.status).256 toEqual(ResultsDataStatus.TOFETCH);257 // Simulate notification from work queue service that258 // query should execute now. This should switch us to259 // FETCHING state.260 fetchResultsDeferred.notify(WorkQueueService.NOTIFICATION.STARTED);261 rootScope.$apply();262 timeout.flush();263 expect(state().datasource.status).264 toEqual(ResultsDataStatus.FETCHING);265 expect(queryResultDataServiceMock.fetchResults).266 toHaveBeenCalledWith(rootScope.widgetConfig);267 }268 );269 it('should update its state to FETCHED when new data have been fetched.',270 function() {271 setupData();272 setupComponent();273 state().datasource.status = ResultsDataStatus.TOFETCH;274 // Simulate new data have been fetched275 fetchResultsDeferred.resolve(new GvizDataTable());276 rootScope.$apply();277 timeout.flush();278 expect(state().datasource.status).279 toEqual(ResultsDataStatus.FETCHED);280 }281 );282 it('should update its state to NODATA when empty data have been fetched.',283 function() {284 GvizDataTable.prototype.getNumberOfRows.and.returnValue(0);285 setupData();286 setupComponent();287 state().datasource.status = ResultsDataStatus.TOFETCH;288 // Simulate new data have been fetched289 fetchResultsDeferred.resolve(new GvizDataTable());290 rootScope.$apply();291 timeout.flush();292 expect(state().datasource.status).293 toEqual(ResultsDataStatus.NODATA);294 }295 );296 it('should update its error state when there is an error.',297 function() {298 var errorMessage = 'fake error';299 setupData();300 setupComponent();301 state().datasource.status = ResultsDataStatus.TOFETCH;302 // Simulate a fetch error303 fetchResultsDeferred.reject(new Error(errorMessage));304 rootScope.$apply();305 timeout.flush();306 expect(state().datasource.status).307 toEqual(ResultsDataStatus.ERROR);308 }309 );310 });311 describe('chartWrapper', function() {312 it('should be attached to the chart div.',313 function() {314 spyOn(chartWrapperMock, 'setContainerId');315 var component = setupComponent();316 expect(chartWrapperMock.setContainerId).317 toHaveBeenCalledWith(component.chartDiv[0]);318 }319 );320 it('should be drawn only one time with a table.',321 function() {322 // Change chart type323 model.chart.chartType = ChartType.TABLE;324 setupData(true);325 setupComponent();326 rootScope.$apply();327 rootScope.$apply();328 expect(chartWrapperMock.draw.calls.count()).toEqual(1);329 }330 );331 it('should be drawn only one time with other charts type.',332 function() {333 // Change chart type334 model.chart.chartType = ChartType.LINE_CHART;335 setupData(true);336 setupComponent();337 rootScope.$apply();338 rootScope.$apply();339 expect(chartWrapperMock.draw.calls.count()).toEqual(1);340 }341 );342 it('should be drawn when new data are fetched.',343 function() {344 setupData(true);345 setupComponent();346 expect(chartWrapperMock.draw.calls.count()).toEqual(1);347 // Simulate new data have been fetched348 state().datasource.status = ResultsDataStatus.FETCHING;349 rootScope.$apply();350 state().datasource.status = ResultsDataStatus.FETCHED;351 rootScope.$apply();352 timeout.flush();353 expect(chartWrapperMock.draw.calls.count()).toEqual(2);354 }355 );356 it('should not be drawn if it has no query.',357 function() {358 setupComponent();359 rootScope.$apply();360 expect(chartWrapperMock.draw).not.toHaveBeenCalled();361 }362 );363 it('should not be drawn if it has no data.',364 function() {365 setupData();366 state().datasource.status = ResultsDataStatus.NODATA;367 setupComponent();368 rootScope.$apply();369 expect(chartWrapperMock.draw).not.toHaveBeenCalled();370 }371 );372 it('should not be drawn if it has no configuration.',373 function() {374 setupData();375 model.chart = null;376 setupComponent();377 rootScope.$apply();378 expect(chartWrapperMock.draw).not.toHaveBeenCalled();379 }380 );381 it('should have a new DataTable when new data have been fetched.',382 function() {383 spyOn(chartWrapperMock, 'setDataTable');384 setupData();385 setupComponent();386 state().datasource.status = ResultsDataStatus.TOFETCH;387 // Simulate new data have been fetched388 fetchResultsDeferred.resolve(new GvizDataTable());389 rootScope.$apply();390 expect(chartWrapperMock.setDataTable).toHaveBeenCalled();391 }392 );393 it('should update the chart error state when it has an error.',394 function() {395 var error = new Error({message: 'fake error', id: 'error-1'});396 setupComponent();397 // Raise a fake error398 gvizChartErrorCallback(error);399 rootScope.$apply();400 expect(state().chart.gvizError).toEqual(error);401 }402 );403 });404 describe('datasource.view', function() {405 it('should be applied at construction of the component if there is data.',406 function() {407 setupData(true);408 setupComponent();409 expect(dataViewServiceMock.create).toHaveBeenCalled();410 expect(chartWrapperMock.setView).toHaveBeenCalledWith(dataViewsJson);411 }412 );413 it('should not be applied at construction of the component if there is ' +414 'no data.',415 function() {416 setupData();417 setupComponent();418 expect(dataViewServiceMock.create).not.toHaveBeenCalled();419 expect(chartWrapperMock.setView).not.toHaveBeenCalled();420 }421 );422 it('should be applied when datasource.view changes.', function() {423 setupData(true);424 setupComponent();425 model.datasource.view.columns = [1, 0];426 rootScope.$apply();427 expect(dataViewServiceMock.create.calls.count()).toEqual(2);428 expect(chartWrapperMock.setView.calls.count()).toEqual(2);429 });430 it('should be applied when data changes.', function() {431 setupData(true);432 setupComponent();433 // Simulate new data have been fetched434 state().datasource.status = ResultsDataStatus.FETCHING;435 rootScope.$apply();436 state().datasource.status = ResultsDataStatus.FETCHED;437 rootScope.$apply();438 expect(dataViewServiceMock.create.calls.count()).toEqual(2);439 expect(chartWrapperMock.setView.calls.count()).toEqual(2);440 });441 it('should not be applied when the DataView has an error.', function() {442 var expectedError = {error: {property: 'sort', message: 'fake message'}};443 dataViewServiceMock.create.and.returnValue(expectedError);444 setupData(true);445 setupComponent();446 expect(dataViewServiceMock.create).toHaveBeenCalled();447 expect(chartWrapperMock.setView).not.toHaveBeenCalled();448 });449 it('should trigger a draw after being applied.', function() {450 setupData(true);451 setupComponent();452 expect(chartWrapperMock.draw.calls.count()).toEqual(1);453 // Modify the model to trigger a new dataview apply454 model.datasource.view.columns = [1, 0];455 rootScope.$apply();456 timeout.flush();457 expect(chartWrapperMock.draw.calls.count()).toEqual(2);458 });459 });...

Full Screen

Full Screen

endpoints.js

Source:endpoints.js Github

copy

Full Screen

1export function getEndpoint(resource, endpoint) {2 let res = endpointsMap[resource];3 if (!res) { return; }4 return res.endpoints[endpoint];5}6export function getTemplate(...args) {7 let ep = getEndpoint(...args)8 if (!ep) { return; }9 return ep.path;10}11export const endpointsMap = {12 'accounts': {13 'label': '账户(Accounts)',14 'endpoints': {15 'single': {16 'label': '单个账户',17 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/accounts-single.html',18 'method': 'GET',19 'path': {20 template: '/accounts/{account_id}',21 },22 'setupComponent': require('../components/SetupPanes/SingleAccount'),23 }24 }25 },26 'effects': {27 'label': '记录(Effects)',28 'endpoints': {29 'all': {30 'label': '总账的记录',31 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/effects-all.html',32 'method': 'GET',33 'path': {34 template: '/effects{?cursor,limit,order}',35 },36 'setupComponent': require('../components/SetupPanes/All'),37 },38 'for_account': {39 'label': '账户的记录',40 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/effects-for-account.html',41 'method': 'GET',42 'path': {43 template: '/accounts/{account_id}/effects{?cursor,limit,order}',44 },45 'setupComponent': require('../components/SetupPanes/ForAccount'),46 },47 'for_ledger': {48 'label': '账页的记录',49 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/effects-for-ledger.html',50 'method': 'GET',51 'path': {52 template: '/ledger/{ledger}/effects{?cursor,limit,order}',53 },54 'setupComponent': require('../components/SetupPanes/ForLedger'),55 },56 'for_operation': {57 'label': '操作的记录',58 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/effects-for-operation.html',59 'method': 'GET',60 'path': {61 template: '/operation/{operation}/effects{?cursor,limit,order}',62 },63 'setupComponent': require('../components/SetupPanes/ForOperation'),64 },65 'for_transaction': {66 'label': '事务的记录',67 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/effects-for-transaction.html',68 'method': 'GET',69 'path': {70 template: '/transactions/{transaction}/effects',71 },72 'setupComponent': require('../components/SetupPanes/ForTransaction'),73 }74 }75 },76 'ledgers': {77 'label': '总账(ledgers)',78 'endpoints': {79 'all': {80 'label': '所有账页',81 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/ledgers-all.html',82 'method': 'GET',83 'path': {84 template: '/ledgers{?cursor,limit,order}',85 },86 'setupComponent': require('../components/SetupPanes/All'),87 },88 'single': {89 'label': '单个账页',90 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/ledgers-single.html',91 'method': 'GET',92 'path': {93 template: '/ledgers/{ledger}',94 },95 'setupComponent': require('../components/SetupPanes/SingleLedger'),96 }97 }98 },99 'offers': {100 'label': '挂单(offers)',101 'endpoints': {102 'for_account': {103 'label': '账户挂单',104 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/offers-for-account.html',105 'method': 'GET',106 'path': {107 template: '/accounts/{account_id}/offers{?cursor,limit,order}',108 },109 'setupComponent': require('../components/SetupPanes/ForAccount'),110 }111 }112 },113 'operations': {114 'label': '操作(operations)',115 'endpoints': {116 'all': {117 'label': '总账所有操作',118 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/operations-all.html',119 'method': 'GET',120 'path': {121 template: '/operations{?cursor,limit,order}',122 },123 'setupComponent': require('../components/SetupPanes/All'),124 },125 'single': {126 'label': '单个操作',127 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/operations-single.html',128 'method': 'GET',129 'path': {130 template: '/operations/{operation}',131 },132 'setupComponent': require('../components/SetupPanes/SingleOperation'),133 },134 'for_account': {135 'label': '账户操作',136 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/operations-for-account.html',137 'method': 'GET',138 'path': {139 template: '/accounts/{account_id}/operations{?cursor,limit,order}',140 },141 'setupComponent': require('../components/SetupPanes/ForAccount'),142 },143 'for_ledger': {144 'label': '账页操作',145 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/operations-for-ledger.html',146 'method': 'GET',147 'path': {148 template: '/ledgers/{ledger}/operations{?cursor,limit,order}',149 },150 'setupComponent': require('../components/SetupPanes/ForLedger'),151 },152 'for_transaction': {153 'label': '事务操作',154 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/operations-for-transaction.html',155 'method': 'GET',156 'path': {157 template: '/transactions/{transaction}/operations{?cursor,limit,order}',158 },159 'setupComponent': require('../components/SetupPanes/ForTransaction'),160 }161 }162 },163 'order_book': {164 'label': '订单(Order Book)',165 'endpoints': {166 'details': {167 'label': '细节',168 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/orderbook-details.html',169 'method': 'GET',170 'path': {171 template: '/order_book{?selling_asset_type,selling_asset_code,selling_asset_issuer,buying_asset_type,buying_asset_code,buying_asset_issuer}',172 'selling_asset_type': 'selling_asset.type',173 'selling_asset_code': 'selling_asset.code',174 'selling_asset_issuer': 'selling_asset.issuer',175 'buying_asset_type': 'buying_asset.type',176 'buying_asset_code': 'buying_asset.code',177 'buying_asset_issuer': 'buying_asset.issuer',178 },179 'setupComponent': require('../components/SetupPanes/OrderBookDetails'),180 },181 'trades': {182 'label': '交易详情',183 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/trades-for-orderbook.html',184 'method': 'GET',185 'path': {186 template: '/order_book/trades{?selling_asset_type,selling_asset_code,selling_asset_issuer,buying_asset_type,buying_asset_code,buying_asset_issuer,cursor,limit,order}',187 'selling_asset_type': 'selling_asset.type',188 'selling_asset_code': 'selling_asset.code',189 'selling_asset_issuer': 'selling_asset.issuer',190 'buying_asset_type': 'buying_asset.type',191 'buying_asset_code': 'buying_asset.code',192 'buying_asset_issuer': 'buying_asset.issuer',193 },194 'setupComponent': require('../components/SetupPanes/OrderBookTrades'),195 }196 }197 },198 'paths': {199 'label': '路径(Paths)',200 'endpoints': {201 'all': {202 'label': '路径支付',203 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/path-finding.html',204 'method': 'GET',205 'path': {206 template: '/paths{?source_account,destination_account,destination_asset_type,destination_asset_code,destination_asset_issuer,destination_amount}',207 'destination_asset_type': 'destination_asset.type',208 'destination_asset_code': 'destination_asset.code',209 'destination_asset_issuer': 'destination_asset.issuer',210 },211 'setupComponent': require('../components/SetupPanes/FindPaymentPaths'),212 }213 }214 },215 'payments': {216 'label': '支付(Payments)',217 'endpoints': {218 'all': {219 'label': '所有的支付操作',220 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/payments-all.html',221 'method': 'GET',222 'path': {223 template: '/payments{?cursor,limit,order}',224 },225 'setupComponent': require('../components/SetupPanes/All'),226 },227 'for_account': {228 'label': '账户的支付操作',229 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/payments-for-account.html',230 'method': 'GET',231 'path': {232 template: '/accounts/{account_id}/payments{?cursor,limit,order}',233 },234 'setupComponent': require('../components/SetupPanes/ForAccount'),235 },236 'for_ledger': {237 'label': '账页的支付操作',238 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/payments-for-ledger.html',239 'method': 'GET',240 'path': {241 template: '/ledgers/{ledger}/payments{?cursor,limit,order}',242 },243 'setupComponent': require('../components/SetupPanes/ForLedger'),244 },245 'for_transaction': {246 'label': '事务的支付操作',247 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/payments-for-transaction.html',248 'method': 'GET',249 'path': {250 template: '/transactions/{transaction}/payments{?cursor,limit,order}',251 },252 'setupComponent': require('../components/SetupPanes/ForTransaction'),253 }254 }255 },256 'transactions': {257 'label': '业务(Transactions)',258 'endpoints': {259 'all': {260 'label': '所有业务',261 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/transactions-all.html',262 'method': 'GET',263 'path': {264 template: '/transactions{?cursor,limit,order}',265 },266 'setupComponent': require('../components/SetupPanes/All'),267 },268 'single': {269 'label': '单笔业务(get)',270 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/transactions-single.html',271 'method': 'GET',272 'path': {273 template: '/transactions/{transaction}',274 },275 'setupComponent': require('../components/SetupPanes/SingleTransaction'),276 },277 'create': {278 'label': '单笔业务(post)',279 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/transactions-create.html',280 'method': 'POST',281 'disableStreaming': true,282 'path': {283 template: '/transactions',284 },285 'setupComponent': require('../components/SetupPanes/PostTransaction'),286 },287 'for_account': {288 'label': '账户业务',289 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/transactions-for-account.html',290 'method': 'GET',291 'path': {292 template: '/accounts/{account_id}/transactions{?cursor,limit,order}',293 },294 'setupComponent': require('../components/SetupPanes/ForAccount'),295 },296 'for_ledger': {297 'label': '账页业务',298 'helpUrl': 'https://www.stellar.org/developers/horizon/reference/transactions-for-ledger.html',299 'method': 'GET',300 'path': {301 template: '/ledgers/{ledger}/transactions{?cursor,limit,order}',302 },303 'setupComponent': require('../components/SetupPanes/ForLedger'),304 }305 }306 }...

Full Screen

Full Screen

edit.profile.test.js

Source:edit.profile.test.js Github

copy

Full Screen

1import React from 'react';2import {3 Profile,4 mapStateToProps,5} from '../../../../src/components/profile/Profile';6import { props } from '../../../../__mockData__/redux-mock-data';7import { shallow, mount } from 'enzyme';8import { applyMiddleware, createStore } from 'redux';9import thunk from 'redux-thunk';10import reducer from '../../../../src/reducers/user.profile.reducer';11const middlewares = [thunk];12const testStore = state => {13 const createStoreWithMiddleware = applyMiddleware(...middlewares)(14 createStore,15 );16 return createStoreWithMiddleware(reducer, state);17};18const setUp = (initialState = {}) => {19 const store = testStore(initialState);20 const wrapper = mount(<Profile {...props} store={store} />);21 return wrapper;22};23const setUpComponent = (initialState = {}) => {24 const store = testStore(initialState);25 const wrapper = shallow(<Profile {...props} store={store} />);26 return wrapper;27};28describe('Update user profile components', () => {29 it('should handle handleChange successfully', () => {30 const initState = {31 userProfileReducer: { UpdateduserProfileInfo: '' },32 };33 expect(mapStateToProps(initState)).toBeDefined();34 });35 it('should handle on change event of firstName textfield', () => {36 const component = setUpComponent();37 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');38 component.find('#firstName').simulate('change', { target: { value: '' } });39 expect(handleChangeSpy).toBeDefined();40 component41 .find('#firstName')42 .simulate('change', { target: { value: 'shema' } });43 expect(handleChangeSpy).toBeDefined();44 expect(handleChangeSpy).toHaveBeenCalled();45 });46 it('should handle on change event of lastName textfield', () => {47 const component = setUpComponent();48 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');49 component50 .find('#lastName')51 .simulate('change', { target: { value: 'shema' } });52 expect(handleChangeSpy).toBeDefined();53 component.find('#lastName').simulate('change', { target: { value: '' } });54 expect(handleChangeSpy).toBeDefined();55 expect(handleChangeSpy).toHaveBeenCalled();56 });57 it('should handle on change event of department textfield', () => {58 const component = setUpComponent();59 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');60 component61 .find('#department')62 .simulate('change', { target: { value: 'shema' } });63 expect(handleChangeSpy).toBeDefined();64 expect(handleChangeSpy).toHaveBeenCalled();65 });66 it('should handle on change event of birthdate textfield', () => {67 const component = setUpComponent();68 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');69 component70 .find('#birthdate')71 .simulate('change', { target: { value: 'shema' } });72 expect(handleChangeSpy).toBeDefined();73 expect(handleChangeSpy).toHaveBeenCalled();74 });75 it('should handle on change event of place textfield', () => {76 const component = setUpComponent();77 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');78 component79 .find('#place')80 .simulate('change', { target: { value: 'Rwanda' } });81 expect(handleChangeSpy).toBeDefined();82 expect(handleChangeSpy).toHaveBeenCalled();83 });84 it('should handle on change event of preferred currency textfield', () => {85 const component = setUpComponent();86 const handleChangeSpy = jest.spyOn(component.instance(), 'handleChange');87 component88 .find('#preferredcurrency')89 .simulate('change', { target: { value: 'RWF' } });90 expect(handleChangeSpy).toBeDefined();91 expect(handleChangeSpy).toHaveBeenCalled();92 });93 it('should handle on change event of autocomplete(country) component', () => {94 const component = setUpComponent();95 const handleChangeSpy = jest.spyOn(96 component.instance(),97 'autoCompliteHandleChange',98 );99 handleChangeSpy({}, { label: 'country' }, 'country');100 });101 it('should handle on change event of autocomplete(languge) component', () => {102 const component = setUpComponent();103 const handleChangeSpy = jest.spyOn(104 component.instance(),105 'autoCompliteHandleChange',106 );107 component.setState({ firstName: true });108 handleChangeSpy({}, { label: 'language' }, 'kinyarwanda');109 });110 it('should handle on change event of app notification and email notification switch', () => {111 const component = setUp();112 const handleChangeSpy = jest.spyOn(113 component.instance(),114 'switchHandleChange',115 );116 component117 .find('#appNotification')118 .at(4)119 .simulate('change', 'appNotification');120 expect(handleChangeSpy).toBeDefined();121 expect(handleChangeSpy).toHaveBeenCalled();122 });123 it('should upload Image', () => {124 const component = setUp();125 const handleChangeSpy = jest.spyOn(component.instance(), 'uploadUserImage');126 const e = {127 target: {128 files: [129 {130 name: 'Screen Shot 2020-02-12 at 21.46.06.png',131 lastModified: 1581536771644,132 webkitRelativePath: '',133 size: 167933,134 type: 'image/png',135 },136 ],137 },138 };139 component.find('[data-test="upload-btn"]').simulate('change', e);140 expect(handleChangeSpy).toBeDefined();141 });142 it('should fail to upload an Image', () => {143 const component = setUp();144 const handleChangeSpy = jest.spyOn(component.instance(), 'uploadUserImage');145 const e = {};146 component.setProps({ UpdateduserProfileInfo: { errorMessage: true } });147 component.find('[data-test="upload-btn"]').simulate('change', e);148 expect(handleChangeSpy).toBeDefined();149 });150 it('should handle cancel event successfully', () => {151 const component = setUpComponent();152 const cancelBtn = component.find('#cancel');153 cancelBtn.simulate('click');154 const buttonState = component.state().buttonState;155 expect(buttonState).toBe(true);156 });157 it('should handle update event successfully', () => {158 const component = setUpComponent();159 const updateBtn = component.find('#update');160 updateBtn.simulate('click');161 component.setProps({ UpdateduserProfileInfo: { updateStatus: true } });162 const buttonState = component.state().buttonState;163 expect(buttonState).toBe(true);164 });...

Full Screen

Full Screen

describe_component.spec.js

Source:describe_component.spec.js Github

copy

Full Screen

...9 expect(this.Component).toEqual(Example);10 });11 });12 describe('this.component', function () {13 it('should be null if this.setupComponent() isn\'t called', function () {14 expect(this.component).toBeNull();15 });16 it('should be an instance of Example, if this.setupComponent() is called', function () {17 // waitsFor18 this.setupComponent();19 expect(this.component instanceof Example).toBe(true);20 });21 it('should reset `this.component` in a new context', function () {22 expect(this.component).toBeNull();23 });24 });25 describe('defineComponent.teardownAll()', function () {26 var result = [];27 beforeEach(function () {28 spyOn(defineComponent, 'teardownAll').and.callFake(function () {29 result.push('call');30 });31 });32 describe('automatically calls after each test', function () {33 it('dummy', function () {34 // do nothing35 });36 it('first call', function () {37 expect(result.length).toEqual(1);38 });39 it('second call', function () {40 expect(result.length).toEqual(2);41 });42 it('third call', function () {43 expect(result.length).toEqual(3);44 });45 });46 });47 describe('this.component.teardown()', function () {48 var result = [];49 beforeEach(function () {50 spyOn(this.Component.prototype, 'teardown').and.callFake(function () {51 result.push('call');52 });53 });54 it('should automatically call before this.setupComponent() if component exists', function () {55 expect(this.component).toBeNull();56 this.setupComponent();57 expect(result.length).toEqual(0);58 this.setupComponent();59 expect(result.length).toEqual(1);60 });61 it('should be called by afterEach of before `it`', function () {62 expect(result.length).toEqual(3);63 });64 });65 describe('this.setupComponent()', function () {66 it('provides the correct $node attribute', function () {67 expect(this.$node).toBeNull();68 this.setupComponent();69 expect(this.$node instanceof jQuery).toBe(true);70 expect(this.$node).toHaveClass('component-root');71 });72 it('sets the fixture if string given to first argument', function () {73 this.setupComponent('<div id="test_fixture1"/>');74 expect(this.$node).toHaveId('test_fixture1');75 });76 it('adds component-root class to fixture root', function () {77 this.setupComponent('<div id="test_fixture1"/>');78 expect(this.$node).toHaveClass('component-root');79 });80 it('sets the fixture if jQuery object given to first argument', function () {81 this.setupComponent($('<div id="test_fixture2"/>'));82 expect(this.$node).toHaveId('test_fixture2');83 });84 it('removes $node by afterEach', function () {85 expect(this.$node).toBeNull();86 expect($('.component-root').length).toEqual(0);87 });88 it('passes options to component if object givent to first argument', function () {89 this.setupComponent();90 expect(this.component.attr.param).toEqual('defaultParam');91 this.setupComponent({92 param: 'testParam'93 });94 expect(this.component.attr.param).toEqual('testParam');95 });96 it('sets the fixture and passed options to component if both arguments given', function () {97 this.setupComponent('<div id="test_fixture_both"/>', {98 param: 'testFixtureParam'99 });100 expect(this.component.attr.param).toEqual('testFixtureParam');101 expect(this.$node).toHaveId('test_fixture_both');102 });103 it('resets a fixture if multiple calls', function () {104 this.setupComponent('<div id="fixture1"/>');105 expect(this.$node).toHaveId('fixture1');106 this.setupComponent('<div id="fixture2"/>');107 expect(this.$node).toHaveId('fixture2');108 });109 it('calls this.component.teardown() if multiple calls', function () {110 spyOn(this.Component.prototype, 'teardown');111 try {112 this.setupComponent();113 expect(this.component.teardown.calls.count()).toEqual(0);114 this.setupComponent();115 expect(this.component.teardown.calls.count()).toEqual(1);116 } catch (e) {117 }118 });119 });120 });...

Full Screen

Full Screen

describe_mixin.spec.js

Source:describe_mixin.spec.js Github

copy

Full Screen

...32 spyOn(this.Component.prototype, 'teardown').and.callFake(function () {33 result.push('call');34 });35 });36 it('should automatically call before this.setupComponent() if component exists', function () {37 expect(this.component).toBeNull();38 this.setupComponent();39 expect(result.length).toEqual(0);40 this.setupComponent();41 expect(result.length).toEqual(1);42 });43 it('should be called by afterEach of before `it`', function () {44 expect(result.length).toEqual(3);45 });46 });47 describe('this.setupComponent()', function () {48 it('provides the correct $node attribute', function () {49 expect(this.$node).toBeNull();50 this.setupComponent();51 expect(this.$node instanceof jQuery).toBe(true);52 expect(this.$node).toHaveClass('component-root');53 });54 it('sets the fixture if string given to first argument', function () {55 this.setupComponent('<div id="test_fixture1"/>');56 expect(this.$node).toHaveId('test_fixture1');57 });58 it('adds component-root class to fixture root', function () {59 this.setupComponent('<div id="test_fixture1"/>');60 expect(this.$node).toHaveClass('component-root');61 });62 it('sets the fixture if jQuery object given to first argument', function () {63 this.setupComponent($('<div id="test_fixture2"/>'));64 expect(this.$node).toHaveId('test_fixture2');65 });66 it('removes $node by afterEach', function () {67 expect(this.$node).toBeNull();68 expect($('.component-root').length).toEqual(0);69 });70 it('passes options to component if object givent to first argument', function () {71 this.setupComponent();72 expect(this.component.attr.param).toEqual('defaultParam');73 this.setupComponent({74 param: 'testParam'75 });76 expect(this.component.attr.param).toEqual('testParam');77 });78 it('sets the fixture and passed options to component if both arguments given', function () {79 this.setupComponent('<div id="test_fixture_both"/>', {80 param: 'testFixtureParam'81 });82 expect(this.component.attr.param).toEqual('testFixtureParam');83 expect(this.$node).toHaveId('test_fixture_both');84 });85 it('resets a fixture if multiple calls', function () {86 this.setupComponent('<div id="fixture1"/>');87 expect(this.$node).toHaveId('fixture1');88 this.setupComponent('<div id="fixture2"/>');89 expect(this.$node).toHaveId('fixture2');90 });91 it('calls this.component.teardown() if multiple calls', function () {92 spyOn(this.Component.prototype, 'teardown');93 try {94 this.setupComponent();95 expect(this.component.teardown.calls.count()).toEqual(0);96 this.setupComponent();97 expect(this.component.teardown.calls.count()).toEqual(1);98 } catch (e) {99 }100 });101 });102 });...

Full Screen

Full Screen

notification.component.test.js

Source:notification.component.test.js Github

copy

Full Screen

1import React from 'react';2import {3 NotificatonPane,4 mapStateToProps,5} from '../../src/components/notification/notificationPane';6import { props } from '../../__mockData__/notification.mock.data';7import { shallow } from 'enzyme';8import { applyMiddleware, createStore } from 'redux';9import thunk from 'redux-thunk';10import reducer from '../../src/reducers/notification.reducer';11const middlewares = [thunk];12const testStore = state => {13 const createStoreWithMiddleware = applyMiddleware(...middlewares)(14 createStore,15 );16 return createStoreWithMiddleware(reducer, state);17};18const setUpComponent = initialState => {19 const store = testStore(initialState);20 const wrapper = shallow(<NotificatonPane {...props} store={store} />);21 return wrapper;22};23describe('Display notification pane', () => {24 it('should handle mapStateToProps successfully', () => {25 const initState = {26 NotificationReducer: {27 Notifications: [],28 },29 };30 expect(mapStateToProps(initState)).toBeTruthy();31 });32 it('should call markNotificationAsRead props', () => {33 const component = setUpComponent();34 component.setProps({35 options: [1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10],36 });37 component.state({ limitNumber: 12 });38 component39 .find('#mark_as_read')40 .first()41 .simulate('click');42 expect(component).toBeTruthy();43 });44 it('should call markNotificationAsRead function with limit number greater than 10', () => {45 const component = setUpComponent();46 component.setProps({47 options: [{ read: true }, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10],48 });49 component.state({ limitNumber: 12 });50 component51 .find('#mark_all_as_read')52 .first()53 .simulate('click');54 expect(component).toBeTruthy();55 });56 it('should clase error model', () => {57 const component = setUpComponent();58 const handleChangeSpy = jest.spyOn(59 component.instance(),60 'handleCloseAlert',61 );62 expect(handleChangeSpy).toBeDefined();63 });64 it('should call notificationPaneHeigthHandle function', () => {65 const component = setUpComponent();66 component.setProps({67 options: [1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10],68 });69 component.state({ limitNumber: 12 });70 const handleChangeSpy = jest.spyOn(71 component.instance(),72 'notificationPaneHeigthHandle',73 );74 component75 .find('#notificationPaneHeigthHandle')76 .first()77 .simulate('click');78 expect(handleChangeSpy).toHaveBeenCalled();79 });80 it('should redirect to a specific link', () => {81 const component = setUpComponent();82 component.setProps({83 options: [1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10],84 });85 component.state({ limitNumber: 9 });86 component87 .find('#trip_requests')88 .first()89 .simulate('click');90 expect(component).toBeTruthy();91 });92 it('should close Snackbar ', () => {93 const component = setUpComponent();94 component.setProps({95 options: [1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10],96 });97 component.state({ limitNumber: 9 });98 component99 .find('#Snackbar')100 .first()101 .simulate('close');102 expect(component).toBeTruthy();103 });104 it('should get all notifications less than 10', () => {105 const component = setUpComponent();106 component.setProps({107 options: [1, 2, 3, 4],108 });109 component.setState({ viewButton: false });110 const handleChangeSpy = jest.spyOn(111 component.instance(),112 'notificationPaneHeigthHandle',113 );114 component115 .find('#notificationPaneHeigthHandle')116 .first()117 .simulate('click');118 component.state({ limitNumber: 13 });119 expect(handleChangeSpy).toBeDefined();120 expect(handleChangeSpy).toHaveBeenCalled();121 expect(component).toBeTruthy();122 });...

Full Screen

Full Screen

tripRequestForm.test.js

Source:tripRequestForm.test.js Github

copy

Full Screen

1import React from 'react';2import { shallow, mount } from 'enzyme';3import sinon from 'sinon';4import { applyMiddleware, createStore } from 'redux';5import thunk from 'redux-thunk';6import {7 OneWayForm,8 mapStateToProps,9} from '../../src/components/trip-request/oneWay.jsx';10import { TripRequest } from '../../src/views/triprequest.view';11import { props, props2 } from '../../__mockData__/tripRequest-mock-data';12import reducer from '../../src/reducers/index';13const middlewares = [thunk];14const testStore = state => {15 const createStoreWithMiddleware = applyMiddleware(...middlewares)(16 createStore,17 );18 return createStoreWithMiddleware(reducer, state);19};20const setUpComponent = (initialState = {}) => {21 const store = testStore(initialState);22 const wrapper = shallow(<OneWayForm {...props} store={store} />);23 return wrapper;24};25describe('Trip requests Form component tests', () => {26 it('should count div used throughout the form', () => {27 const wrapper = setUpComponent();28 wrapper.setProps({ previousValue: { To: true } });29 expect(wrapper.find('div').length).toBe(1);30 });31 it('should handle departure change successfully while sending multi city trip request', () => {32 const component = setUpComponent();33 component.setProps({ previousValue: { To: false } });34 component.setProps({35 index: 1,36 });37 component.setState({38 submitted: false,39 });40 component41 .find('WithStyles(ForwardRef(Select))')42 .at(0)43 .props()44 .onChange();45 expect(component.state('submitted')).toEqual(true);46 });47 it('should handle destination change successfully while sending multi city trip request', () => {48 const component = setUpComponent();49 component.setProps({50 index: 1,51 });52 component.setState({53 submitted: true,54 });55 component56 .find('WithStyles(ForwardRef(Select))')57 .at(1)58 .props()59 .onChange();60 expect(component.state('submitted')).toEqual(false);61 });62 it('should handle departure date change successfully while sending multi city trip request', () => {63 const component = setUpComponent();64 component.setProps({65 index: 1,66 });67 component.setState({68 submitted: false,69 });70 component71 .find('PickerWithState')72 .props()73 .onChange();74 expect(component.state('submitted')).toEqual(true);75 });76 it('should handle reason change successfully while sending multi city trip request', () => {77 const component = setUpComponent();78 component.setProps({79 index: 1,80 });81 component.setState({82 submitted: true,83 });84 component85 .find('WithStyles(ForwardRef(TextField))')86 .props()87 .onChange();88 expect(component.state('submitted')).toEqual(false);89 });90 it('should simulate onChange successfully', () => {91 const component = setUpComponent();92 component.setProps({93 index: 1,94 value: {95 index: 1,96 },97 });98 component99 .find('PickerWithState')100 .at(1)101 .props()102 .onChange();103 });104 it('should simulate delete change when onclick is successful', () => {105 const component = setUpComponent();106 component.setProps({107 index: 1,108 multiCityDatalength: 3,109 });110 component111 .find('CloseRoundedIcon')112 .props()113 .onClick();114 });115 it('should map state to props', () => {116 const state = props;117 const stateObject = mapStateToProps(state);118 expect(stateObject).toBeTruthy();119 });120 it('should map state to props', () => {121 const store = testStore({});122 shallow(<OneWayForm {...props2} store={store} />);123 const state = props2;124 const stateObject = mapStateToProps(state);125 expect(stateObject).toBeTruthy();126 });...

Full Screen

Full Screen

ErrorBoundary.test.js

Source:ErrorBoundary.test.js Github

copy

Full Screen

...13 const technicalErrorMessage = 'This is an error.';14 const ThrowingComponent = () => {15 throw new Error(technicalErrorMessage);16 };17 function setupComponent(childComponent) {18 const spy = jest.spyOn(console, 'error').mockImplementation(() => {});19 const results = render(20 <ErrorBoundary message={friendlyErrorMessage}>21 {childComponent}22 </ErrorBoundary>23 );24 return { spy, ...results };25 }26 it('matches the snapshot', () => {27 const { container } = setupComponent(<ThrowingComponent />);28 expect(container.firstChild).toMatchSnapshot();29 });30 it('shows the component children when there is no error', () => {31 const { getByText } = setupComponent(childComponentText);32 expect(getByText(childComponentText)).toBeTruthy();33 });34 it('shows the error message children when the component throws error', () => {35 const { getByText } = setupComponent(<ThrowingComponent />);36 expect(getByText(friendlyErrorMessage)).toBeTruthy();37 });38 it('surfaces the error via console.error', () => {39 setupComponent(<ThrowingComponent />);40 expect(console.error).toHaveBeenCalled();41 });42 it('can click the component to view the full details', () => {43 const { getByText, getByTestId } = setupComponent(<ThrowingComponent />);44 // The technical error isn't visible yet.45 expect(46 getByTestId('error-technical-details').classList.contains('hide')47 ).toBe(true);48 // Click the button to expand the details.49 fireFullClick(getByText('View full error details'));50 // The technical error now exists.51 expect(52 getByTestId('error-technical-details').classList.contains('hide')53 ).toBe(false);54 });55 it('reports errors to the analytics', () => {56 withAnalyticsMock(() => {57 setupComponent(<ThrowingComponent />);58 expect(self.ga).toHaveBeenCalledWith('send', 'exception', {59 exDescription: [60 'Error: This is an error.',61 '',62 ' in ThrowingComponent',63 ' in ErrorBoundary',64 ].join('\n'),65 exFatal: true,66 });67 });68 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('playwright/lib/server/chromium/crBrowser.js');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 await page.close();7 await browser.close();8})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('playwright-core/lib/server/webkit/wkPage');2const { Page } = require('playwright-core/lib/server/webkit/wkPage');3const { Frame } = require('playwright-core/lib/server/webkit/wkFrame');4const { ElementHandle } = require('playwright-core/lib/server/webkit/wkElementHandle');5const page = new Page();6const frame = new Frame(page, null, null);7const setup = new setupComponent(frame);8const component = setup.setupComponent('div', 'test');9const element = new ElementHandle(frame, null, component);10element.evaluate(element => element.textContent);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { TestServer } = require('@playwright/test');2const { setupComponent } = require('@playwright/test/lib/server/componentServer');3const { chromium } = require('playwright');4(async () => {5 const server = await TestServer.create();6 await server.listen(0);7 const port = server.PORT;8 const browser = await chromium.launch();9 const page = await browser.newPage();10 const component = await setupComponent(page, 'my-component');11 console.log(await component.evaluate(el => el.textContent));12 await browser.close();13 await server.stop();14})();15 class MyComponent extends HTMLElement {16 constructor() {17 super();18 const shadow = this.attachShadow({mode: 'open'});19 const wrapper = document.createElement('span');20 wrapper.setAttribute('class', 'wrapper');21 const text = this.getAttribute('text');22 wrapper.textContent = text;23 const style = document.createElement('style');24 style.textContent = '.wrapper { color: red; }';25 shadow.appendChild(style);26 shadow.appendChild(wrapper);27 }28 }29 customElements.define('my-component', MyComponent);30setupComponent(page, selector) - This method is used to get a handle to a custom element. It is used to create a component fixture. The method returns an object that can be used to interact with the component. The object has

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('@playwright/test');2setupComponent(async (page, options) => {3 await page.click('text=Get Started');4 await page.click('text=Docs');5 await page.click('text=API');6 await page.click('text=Test Runner');7 await page.click('

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require("playwright");2const { test, expect } = require("@playwright/test");3const { Page } = require("@playwright/test");4const { ElementHandle } = require("@playwright/test");5test("Sample test", async ({ page }) => {6 await page.click("#docs-tab");7 await page.click("#docs-tabpanel-1");8 const elementHandle = await page.$("#docs-tabpanel-1");9 await setupComponent(elementHandle);10 const component = await elementHandle.getComponent();11 const heading = await component.$("text=Get Started");12 await expect(heading).toBeTruthy();13});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require("playwright");2const { test, expect } = require("@playwright/test");3const { Page } = require("@playwright/test");4const { ElementHandle } = require("@playwright/test");5test("Sample test", async ({ page }) => {6 await page.click("#docs-tab");7 await page.click("#docs-tabpanel-1");8 const elementHandle = await page.$("#docs-tabpanel-1");9 await setupComponent(elementHandle);10 const component = await elementHandle.getComponent();11 const heading = await component.$("text=Get Started");12 await expect(heading).toBeTruthy();13});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('@playwright/test');2const { setupComponent } = require('@playwright/test/lib/test');3class MyComponent {4 constructor(page) {5 this.page = page;6 }7 async click() {8 await this.page.click('text=Click Me');9 }10}11setupComponent(MyComponent);12test('MyComponent', async ({ page }) => {13 const myComponent = new MyComponent(page);14 await myComponent.click();15});16const { test } = require('@playwright/test');17test('basic test', async ({ page }) => {18 await page.screenshot({ path: 'example.png' });19});20const { test } = require('@playwright/test');21test.describe('My test suite', () => {22 test.beforeEach(async ({ page }) => {23 });24 test('basic test', async ({ page }) => {25 await page.screenshot({ path: 'example.png' });26 });27 test('basic test 2', async ({ page }) => {28 await page.screenshot({ path: 'example2.png' });29 });30});31module.exports = {32 use: {33 },34 {35 use: {36 },

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('@playwright/test');2const { expect } = require('chai');3describe('Playwright test', () => {4 it('should work', async () => {5 const component = await setupComponent();6 expect(await component.page.title()).to.equal('Google');txt](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('@playwright/test');2const { BrowserContext } = require('playwright');3module.exports = function () {4 setupComponent(async ({ browserName, headless }, use) => {5 const browser = await playwright[browserName].launch({ headless });6 const context = await browser.newContext();7 await use(context);8 await context.close();9 await browser.close();10 });11};12const { test, expect } = require('@playwright/test');13const { BrowserContext } = require('playwright');14test.describe('test', () => {15 test('test', async ({ context }) => {16 const page = await context.newPage();17 await page.screensho({ path: `eample.png` });18 });19});20setupComponent(async ({ browserName, headless }, use) => {21 const browser = await playwright[browserName.launch({ headless });22 const context = await browser.newContext();23 await use(context);24 await context.close();25 await browser.close);26});27test.describe('test', () => {28 test('test', async ({ context }) => {29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 });32});33test('test', async ({ context }) => {34 const page = await context.newPage();35 await page.screenshot({ path: `example.png` });36});37 await component.stop();38 });39});40### `setupComponent(options)`41 - `timezoneId` <[string]> Changes the timezone of the context. See ICU’s [metaZones.txt](

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { setupComponent } = require('@playwright/test');2const { BrowserContext } = require('playwright');3module.exports = function () {4 setupComponent(async ({ browserName, headless }, use) => {5 const browser = await playwright[browserName].launch({ headless });6 const context = await browser.newContext();7 await use(context);8 await context.close();9 await browser.close();10 });11};12const { test, expect } = require('@playwright/test');13const { BrowserContext } = require('playwright');14test.describe('test', () => {15 test('test', async ({ context }) => {16 const page = await context.newPage();17 await page.screenshot({ path: `example.png` });18 });19});20setupComponent(async ({ browserName, headless }, use) => {21 const browser = await playwright[browserName].launch({ headless });22 const context = await browser.newContext();23 await use(context);24 await context.close();25 await browser.close();26});27test.describe('test', () => {28 test('test', async ({ context }) => {29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 });32});33test('test', async ({ context }) => {34 const page = await context.newPage();35 await page.screenshot({ path: `example.png` });36});

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