mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
9f4063b143
We've been seeing some reports about Angular DevTools being unable to detect applications running in dev mode. This commit adds more context to the error message displayed when development mode is not detected and offers some possible resolutions. Displays 3 common reasons why DevTools fails to detect an application running in dev mode. Links directly to angular.dev for relevant configurations. Links to the Angular DevTools issue template if none of the suggestions work. PR Close #57861
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 builds.',
|
|
);
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|