mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
efe78d5565
Angular DevTools depends on many modern Angular features in order to function. As a result, at present the last officially supported version is v12. Angular DevTools may function for some Angular 9, 10 and 11 applications, but they are not officially supported. This commit fixes an issue where DevTools would not inject a backend script into an Angular application if it detected it was below version 12. This backend script is important because it's used to inform the DevTools panel that the inspected application is in fact Angular, but that it is not on a supported version. Angular 9, 10 and 11 applications that successfully have Angular DevTools initialize will now have a red highlight and tooltip on their version number, informing the user that they are using Angular DevTools on a version of Angular that is no longer supported. Angular DevTools for applications that are below version 9 will continue to display the "Angular Devtools supports Angular versions 12 and above" message. PR Close #55233
86 lines
3.4 KiB
TypeScript
86 lines
3.4 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, signal} 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 = signal('0.0.0');
|
|
component.ivy = signal(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 = signal('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();
|
|
});
|
|
});
|