mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
86 lines
3.3 KiB
TypeScript
86 lines
3.3 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {Component} from '@angular/core';
|
|
import {ComponentFixture, TestBed} from '@angular/core/testing';
|
|
import {FrameManager} from './frame_manager';
|
|
import {DevToolsComponent} from './devtools.component';
|
|
import {DevToolsTabsComponent} from './devtools-tabs/devtools-tabs.component';
|
|
import {MessageBus} from 'protocol';
|
|
|
|
@Component({
|
|
selector: 'ng-devtools-tabs',
|
|
template: '',
|
|
standalone: true,
|
|
})
|
|
export class MockNgDevToolsTabs {}
|
|
|
|
describe('DevtoolsComponent', () => {
|
|
let fixture: ComponentFixture<DevToolsComponent>;
|
|
let component: DevToolsComponent;
|
|
|
|
beforeEach(() => {
|
|
const mockMessageBus = jasmine.createSpyObj('MessageBus', ['on', 'emit', 'once']);
|
|
|
|
TestBed.configureTestingModule({
|
|
providers: [{provide: MessageBus, useValue: mockMessageBus}],
|
|
}).overrideComponent(DevToolsComponent, {
|
|
remove: {imports: [DevToolsTabsComponent], providers: [FrameManager]},
|
|
add: {
|
|
imports: [MockNgDevToolsTabs],
|
|
providers: [{provide: FrameManager, useFactory: () => FrameManager.initialize(123)}],
|
|
},
|
|
});
|
|
|
|
fixture = TestBed.createComponent(DevToolsComponent);
|
|
component = fixture.componentInstance;
|
|
});
|
|
|
|
it('should render ng devtools tabs when Angular Status is EXISTS and is in dev mode and is supported version', () => {
|
|
component.angularStatus = component.AngularStatus.EXISTS;
|
|
component.angularIsInDevMode = true;
|
|
component.angularVersion = '0.0.0';
|
|
component.ivy = true;
|
|
fixture.detectChanges();
|
|
expect(fixture.nativeElement.querySelector('ng-devtools-tabs')).toBeTruthy();
|
|
});
|
|
|
|
it('should render Angular Devtools dev mode only support text when Angular Status is EXISTS and is angular is not in dev mode', () => {
|
|
component.angularStatus = component.AngularStatus.EXISTS;
|
|
component.angularIsInDevMode = false;
|
|
fixture.detectChanges();
|
|
expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
|
|
'We detected an application built with production configuration. Angular DevTools only supports development build.',
|
|
);
|
|
});
|
|
|
|
it('should render version support message when Angular Status is EXISTS and angular version is not supported', () => {
|
|
component.angularStatus = component.AngularStatus.EXISTS;
|
|
component.angularIsInDevMode = true;
|
|
component.angularVersion = '1.0.0';
|
|
fixture.detectChanges();
|
|
expect(fixture.nativeElement.querySelector('.devtools').textContent).toContain(
|
|
'Angular Devtools only supports Angular versions 12 and above',
|
|
);
|
|
});
|
|
|
|
it('should render Angular application not detected when Angular Status is DOES_NOT_EXIST', () => {
|
|
component.angularStatus = component.AngularStatus.DOES_NOT_EXIST;
|
|
fixture.detectChanges();
|
|
// expect the text to be "Angular application not detected"
|
|
expect(fixture.nativeElement.querySelector('.not-detected').textContent).toContain(
|
|
'Angular application not detected',
|
|
);
|
|
});
|
|
|
|
it('should render loading svg when Angular Status is UNKNOWN', () => {
|
|
component.angularStatus = component.AngularStatus.UNKNOWN;
|
|
fixture.detectChanges();
|
|
expect(fixture.nativeElement.querySelector('.loading svg')).toBeTruthy();
|
|
});
|
|
});
|