@updevs/components 1.0.0-alpha.1 → 1.0.0-alpha.3

package/layout/src/pages/auth-flow/logged-out/logged-out.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoggedOutComponent } from './logged-out.component';
+
+describe('LoggedOutComponent', () => {
+  let component: LoggedOutComponent;
+  let fixture: ComponentFixture<LoggedOutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoggedOutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoggedOutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/logged-out/logged-out.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'upd-logged-out',
+  templateUrl: './logged-out.component.html',
+  styleUrls: ['./logged-out.component.scss']
+})
+export class LoggedOutComponent {
+
+}

package/layout/src/pages/auth-flow/login/login.component.html

@@ -0,0 +1,96 @@
+<div class="page page-center">
+    <ng-container [ngSwitch]="layout">
+        <div *ngSwitchCase="'centered-box'" class="container container-tight py-4">
+            <ng-container [ngTemplateOutlet]="loginCard"></ng-container>
+        </div>
+        <div *ngSwitchCase="'box-with-picture'" class="container container-normal py-4">
+            <div class="row align-items-center g-4">
+                <div class="col-lg">
+                    <div class="container-tight">
+                        <ng-container [ngTemplateOutlet]="loginCard"></ng-container>
+                    </div>
+                </div>
+                <div class="col-lg d-none d-lg-block">
+                    <img height="300" class="d-block mx-auto upd-right-login-image"/>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>
+
+<ng-template #loginCard>
+    <div class="text-center mb-4">
+        <a href="." class="navbar-brand navbar-brand-autodark">
+            <img height="36" class="navbar-brand-image upd-brand-logo"/>
+        </a>
+    </div>
+    <div class="card card-md">
+        <div class="card-body">
+            <h2 class="h2 text-center mb-4" i18n>Login to your account</h2>
+            <form action="./" method="get" autocomplete="off" novalidate>
+                <div class="mb-3">
+                    <label class="form-label">Email address</label>
+                    <input type="email" class="form-control" name="username" [(ngModel)]="username">
+                </div>
+                <div class="mb-2">
+                    <label class="form-label">
+                        Password
+                        <span class="form-label-description">
+                    <a href="./forgot-password.html" i18n>I forgot my password</a>
+                  </span>
+                    </label>
+                    <div class="input-group input-group-flat">
+                        <input type="password" class="form-control" name="password" [(ngModel)]="password">
+                        <span class="input-group-text">
+                    <a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                          stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none"
+                          d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="2"/><path
+                          d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"/></svg>
+                    </a>
+                  </span>
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <label class="form-check">
+                        <input type="checkbox" class="form-check-input"/>
+                        <span class="form-check-label" i18n>Remember me on this device</span>
+                    </label>
+                </div>
+                <div class="form-footer">
+                    <upd-button (clicked)="login()" customClasses="w-100">
+                        <span i18n>Sign in</span>
+                    </upd-button>
+                </div>
+            </form>
+        </div>
+        <div class="hr-text" i18n>or</div>
+        <div class="card-body">
+            <div class="row">
+                <div class="col"><a href="#" class="btn w-100">
+                    <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24"
+                        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path
+                            d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/>
+                    </svg>
+                    Login with Github
+                </a></div>
+                <div class="col"><a href="#" class="btn w-100">
+                    <!-- Download SVG icon from http://tabler-icons.io/i/brand-twitter -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon text-twitter" width="24" height="24" viewBox="0 0 24 24"
+                        stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path
+                            d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"/>
+                    </svg>
+                    Login with Twitter
+                </a></div>
+            </div>
+        </div>
+    </div>
+    <div class="text-center text-muted mt-3">
+        Don't have account yet? <a href="./sign-up.html" tabindex="-1" i18n>Sign up</a>
+    </div>
+</ng-template>

package/layout/src/pages/auth-flow/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/login/login.component.ts

@@ -0,0 +1,26 @@
+import { Component, ViewEncapsulation, inject } from '@angular/core';
+import { LayoutService } from '@updevs/sdk/layout';
+import { AuthService } from '@updevs/sdk/security';
+
+@Component({
+    selector: 'upd-login',
+    templateUrl: './login.component.html',
+    styleUrls: ['./login.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class LoginComponent {
+    layout: 'centered-box' | 'box-with-picture' = 'centered-box';
+    username = '';
+    password = '';
+
+    private readonly authService = inject(AuthService);
+    private readonly layoutService = inject(LayoutService);
+
+    constructor() {
+        this.layoutService.addBodyClasses('border-top-wide', 'border-primary', 'd-flex', 'flex-column');
+    }
+
+    login(): void {
+        this.authService.login(this.username, this.password).subscribe();
+    }
+}

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.html

@@ -0,0 +1 @@
+<p>oauth-callback works!</p>

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OauthCallbackComponent } from './oauth-callback.component';
+
+describe('OauthCallbackComponent', () => {
+  let component: OauthCallbackComponent;
+  let fixture: ComponentFixture<OauthCallbackComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OauthCallbackComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(OauthCallbackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/layout/src/pages/auth-flow/oauth-callback/oauth-callback.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'upd-oauth-callback',
+  templateUrl: './oauth-callback.component.html',
+  styleUrls: ['./oauth-callback.component.scss']
+})
+export class OauthCallbackComponent {
+
+}

package/layout/src/pages/auth-flow/public-api.ts

@@ -0,0 +1,5 @@
+export * from './logged-out/logged-out.component';
+export * from './login/login.component';
+export * from './oauth-callback/oauth-callback.component';
+export * from './auth-flow.module';
+export * from './auth-flow-routing.module';

package/layout/src/pages/public-api.ts

@@ -0,0 +1 @@
+export * from './auth-flow/public-api';

package/layout/src/partials/footer/footer-copyright.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FooterCopyrightDirective } from './footer-copyright.directive';
+
+describe('FooterCopyrightDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FooterCopyrightDirective();
+    expect(directive).toBeTruthy();
+  });
+});

package/layout/src/partials/footer/footer-copyright.directive.ts

@@ -0,0 +1,9 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+    selector: '[updFooterCopyright]'
+})
+export class FooterCopyrightDirective {
+    constructor() {
+    }
+}

package/layout/src/partials/footer/footer.component.html

@@ -0,0 +1,30 @@
+<div class="container-xl">
+    <div class="row text-center align-items-center flex-row-reverse">
+        <div class="col-lg-auto ms-lg-auto">
+            <ul *ngIf="links.length > 0" class="list-inline list-inline-dots mb-0">
+                <li *ngFor="let link of links" class="list-inline-item">
+                    <a href="{{link.url}}" target="{{link.target}}" class="link-secondary">
+                        <span [innerHTML]="link.text"></span>
+                        <ng-container *transloco="let t">
+                            {{t('Layout.Aloha')}}
+                        </ng-container>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+            <ng-container *ngIf="!!footerCopyrightTemplate; else defaultFooterTpl"
+                [ngTemplateOutlet]="footerCopyrightTemplate"></ng-container>
+            <ng-template #defaultFooterTpl>
+                <ul class="list-inline list-inline-dots mb-0">
+                    <li class="list-inline-item">
+                        {{copyrightPrefix}} &copy; {{currentYear}} {{copyrightSuffix}}
+                    </li>
+                    <li *ngIf="!!version" class="list-inline-item">
+                        {{version}}
+                    </li>
+                </ul>
+            </ng-template>
+        </div>
+    </div>
+</div>

package/{src/lib/components.component.spec.ts → layout/src/partials/footer/footer.component.spec.ts}

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ComponentsComponent } from './components.component';
+import { FooterComponent } from './footer.component';
 
-describe('ComponentsComponent', () => {
-    let component: ComponentsComponent;
-    let fixture: ComponentFixture<ComponentsComponent>;
+describe('FooterComponent', () => {
+    let component: FooterComponent;
+    let fixture: ComponentFixture<FooterComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ ComponentsComponent ]
+            declarations: [ FooterComponent ]
         })
             .compileComponents();
 
-        fixture = TestBed.createComponent(ComponentsComponent);
+        fixture = TestBed.createComponent(FooterComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

package/layout/src/partials/footer/footer.component.ts

@@ -0,0 +1,73 @@
+import { Component, ContentChild, TemplateRef, HostBinding, OnInit, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { LinkModel } from '@updevs/sdk/core';
+import { BaseComponent } from '@updevs/sdk/layout';
+import { TranslocoService } from '@ngneat/transloco';
+
+import { FooterCopyrightDirective } from './footer-copyright.directive';
+
+@Component({
+    selector: 'upd-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    encapsulation: ViewEncapsulation.None
+})
+export class FooterComponent extends BaseComponent implements OnInit, OnChanges {
+    @HostBinding('class') wrapperClasses = '';
+    @ContentChild(FooterCopyrightDirective, { read: TemplateRef, static: true }) footerCopyrightTemplate?: TemplateRef<any>;
+
+    /**
+     * Whether the footer will always be shown.
+     */
+    isSticky = false;
+    /**
+     * Whether the footer is transparent or not.
+     */
+    isTransparent = true;
+    /**
+     * Links.
+     */
+    links: LinkModel[] = [];
+    /**
+     * Current year.
+     */
+    currentYear = new Date().getFullYear();
+    /**
+     * Text displayed in the copyright section before the symbol and year.
+     */
+    copyrightPrefix = 'Copyright';
+    /**
+     * Text displayed in the copyright section after the symbol and year.
+     */
+    copyrightSuffix = '';
+    /**
+     * Version of the application.
+     */
+    version?: string;
+
+    private baseWrapperClasses = 'footer d-print-none';
+
+    constructor(
+        private translocoService: TranslocoService
+    ) {
+        super();
+    }
+
+    ngOnInit(): void {
+        const footerCpsSub = this.translocoService.selectTranslate('Footer.AllRightsReserved').subscribe(r => this.copyrightSuffix = r);
+
+        this.updateWrapperClasses();
+        this.addSubscriptions(footerCpsSub);
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!!changes['isSticky'].currentValue || !!changes['isTransparent'].currentValue) {
+            this.updateWrapperClasses();
+        }
+    }
+
+    private updateWrapperClasses(): void {
+        const stickyBottomCls = this.isSticky ? ' sticky-bottom' : '';
+        const transparentCls = this.isTransparent ? ' footer-transparent' : '';
+        this.wrapperClasses = `${this.baseWrapperClasses}${stickyBottomCls}${transparentCls}`;
+    }
+}

package/layout/src/partials/footer/public-api.ts

@@ -0,0 +1,2 @@
+export * from './footer-copyright.directive';
+export * from './footer.component';

package/layout/src/partials/header/header-style.type.ts

@@ -0,0 +1 @@
+export type HeaderStyleType = 'light' | 'dark' | 'transparent';

package/layout/src/partials/header/header.component.html

@@ -0,0 +1,163 @@
+<div class="container-xl">
+    <button class="navbar-toggler" type="button">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-nav flex-row order-md-last">
+        <div class="d-none d-md-flex me-3">
+            <div class="nav-item">
+                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="switchTheme()">
+                    <upd-icon [tablerIcon]="nextThemeIcon"></upd-icon>
+                </upd-link>
+            </div>
+            <div *ngIf="showLanguageSwitcher" class="nav-item">
+                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="switchLanguage()">
+                    <upd-icon tablerIcon="flag"></upd-icon>
+                </upd-link>
+            </div>
+            <div *ngIf="showNotifications" class="nav-item dropdown d-none d-md-flex">
+                <upd-link [isNavigation]="true" [customClasses]="['px-0']" (clicked)="openNotifications()">
+                    <upd-icon [tablerIcon]="currentNotificationsIcon"></upd-icon>
+                    <span *ngIf="hasNewNotifications" class="badge bg-red"></span>
+                </upd-link>
+                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">Last updates</h3>
+                        </div>
+                        <div class="list-group list-group-flush list-group-hoverable">
+                            <div class="list-group-item">
+                                <div class="row align-items-center">
+                                    <div class="col-auto"><span
+                                        class="status-dot status-dot-animated bg-red d-block"></span></div>
+                                    <div class="col text-truncate">
+                                        <a href="#" class="text-body d-block">Example 1</a>
+                                        <div class="d-block text-muted text-truncate mt-n1">
+                                            Change deprecated html tags to text decoration classes (#29604)
+                                        </div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <a href="#" class="list-group-item-actions">
+                                            <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                stroke="currentColor" fill="none" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                <path
+                                                    d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                            </svg>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="list-group-item">
+                                <div class="row align-items-center">
+                                    <div class="col-auto"><span class="status-dot d-block"></span></div>
+                                    <div class="col text-truncate">
+                                        <a href="#" class="text-body d-block">Example 2</a>
+                                        <div class="d-block text-muted text-truncate mt-n1">
+                                            justify-content:between ⇒ justify-content:space-between (#29734)
+                                        </div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <a href="#" class="list-group-item-actions show">
+                                            <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow"
+                                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                stroke="currentColor" fill="none" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                <path
+                                                    d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                            </svg>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="list-group-item">
+                                <div class="row align-items-center">
+                                    <div class="col-auto"><span class="status-dot d-block"></span></div>
+                                    <div class="col text-truncate">
+                                        <a href="#" class="text-body d-block">Example 3</a>
+                                        <div class="d-block text-muted text-truncate mt-n1">
+                                            Update change-version.js (#29736)
+                                        </div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <a href="#" class="list-group-item-actions">
+                                            <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                stroke="currentColor" fill="none" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                <path
+                                                    d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                            </svg>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="list-group-item">
+                                <div class="row align-items-center">
+                                    <div class="col-auto"><span
+                                        class="status-dot status-dot-animated bg-green d-block"></span></div>
+                                    <div class="col text-truncate">
+                                        <a href="#" class="text-body d-block">Example 4</a>
+                                        <div class="d-block text-muted text-truncate mt-n1">
+                                            Regenerate package-lock.json (#29730)
+                                        </div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <a href="#" class="list-group-item-actions">
+                                            <!-- Download SVG icon from http://tabler-icons.io/i/star -->
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted"
+                                                width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                                                stroke="currentColor" fill="none" stroke-linecap="round"
+                                                stroke-linejoin="round">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                                                <path
+                                                    d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"/>
+                                            </svg>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="showUserMenu" class="nav-item dropdown">
+            <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
+                aria-label="Open user menu">
+                <!--<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>-->
+                <span class="avatar avatar-sm"></span>
+                <div class="d-none d-xl-block ps-2">
+                    <div>Eros Stein</div>
+                    <div class="mt-1 small text-muted">Administrator</div>
+                </div>
+            </a>
+            <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Status</a>
+                <a href="./profile.html" class="dropdown-item">Profile</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="./settings.html" class="dropdown-item">Settings</a>
+                <a href="./sign-in.html" class="dropdown-item">Logout</a>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="showSearchBar" class="collapse navbar-collapse">
+        <div>
+            <form autocomplete="off" novalidate>
+                <div class="input-icon">
+                        <span class="input-icon-addon">
+                            <upd-icon tablerIcon="search"></upd-icon>
+                        </span>
+                    <input type="text" value="" class="form-control" placeholder="Search…">
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

package/layout/src/partials/header/header.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});