feat: add EnvBanner component for non-production environments
Standalone component that renders a small banner whenever environment.production is false, so the local dev build is never mistaken for the real app.
This commit is contained in:
@@ -0,0 +1,3 @@
|
|||||||
|
@if (showBanner) {
|
||||||
|
<div class="env-banner" role="status">⚠ Entwicklungsumgebung</div>
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
// Höhe muss mit ENV_BANNER_HEIGHT_PX in env-banner.ts übereinstimmen.
|
||||||
|
.env-banner {
|
||||||
|
height: 28px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f4a300;
|
||||||
|
color: #20251f;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
import { EnvBanner } from './env-banner';
|
||||||
|
import { environment } from '../../../environments/environment';
|
||||||
|
|
||||||
|
describe('EnvBanner', () => {
|
||||||
|
const originalProduction = environment.production;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
environment.production = originalProduction;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the environment banner outside production', async () => {
|
||||||
|
environment.production = false;
|
||||||
|
await TestBed.configureTestingModule({ imports: [EnvBanner] }).compileComponents();
|
||||||
|
const fixture = TestBed.createComponent(EnvBanner);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const element = fixture.nativeElement.querySelector('.env-banner');
|
||||||
|
expect(element?.textContent).toContain('Entwicklungsumgebung');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders nothing in production', async () => {
|
||||||
|
environment.production = true;
|
||||||
|
await TestBed.configureTestingModule({ imports: [EnvBanner] }).compileComponents();
|
||||||
|
const fixture = TestBed.createComponent(EnvBanner);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const element = fixture.nativeElement.querySelector('.env-banner');
|
||||||
|
expect(element).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { environment } from '../../../environments/environment';
|
||||||
|
|
||||||
|
export const ENV_BANNER_HEIGHT_PX = 28;
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-env-banner',
|
||||||
|
templateUrl: './env-banner.html',
|
||||||
|
styleUrl: './env-banner.scss',
|
||||||
|
})
|
||||||
|
export class EnvBanner {
|
||||||
|
protected readonly showBanner = !environment.production;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user