(feat) : Homepage layout

Static layout for the home page with image and header

e2e/app.po.ts

@@ -6,6 +6,6 @@ export class LoklakSearchPage {
 	}
 
 	getHeaderText() {
-		return element(by.css('app-root app-home h1')).getText();
+		return element(by.css('app-root app-home div.wrapper h1')).getText();
 	}
 }

src/app/home/home.component.html

@@ -1 +1,4 @@
-<h1>{{header}}</h1>
+<div class="wrapper">
+	<img src="{{headerImageUrl}}" alt="Loklak Cow" width="200" height="233">
+	<h1>{{header}}</h1>
+</div>

src/app/home/home.component.scss

@@ -0,0 +1,19 @@
+:host{
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+}
+
+div.wrapper{
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+
+	h1{
+		font-weight: 300;
+		text-align: center;
+	}
+}

src/app/home/home.component.spec.ts

@@ -28,6 +28,27 @@ describe('Component: Home', () => {
 		let fixture = TestBed.createComponent(HomeComponent);
 		fixture.detectChanges();
 		let compiled = fixture.debugElement.nativeElement;
-		expect(compiled.querySelector('h1').textContent).toBe('Loklak Search!');
+		expect(compiled.querySelector('div.wrapper h1').textContent).toBe('Loklak Search!');
+	}));
+
+	it('should have a correct headerImageUrl property', () => {
+		let fixture = TestBed.createComponent(HomeComponent);
+		let component = fixture.debugElement.componentInstance;
+		expect(component.headerImageUrl).toBe('assets/images/cow_200x233.png');
+	});
+
+	it('should render header cow image correctly', async(() => {
+		let fixture = TestBed.createComponent(HomeComponent);
+		fixture.detectChanges();
+		let component = fixture.debugElement.componentInstance;
+		let compiled = fixture.debugElement.nativeElement;
+
+		let image: HTMLImageElement = compiled.querySelector('div.wrapper img');
+
+		let imgSrc: string = image.src;
+		let relativePath: string = imgSrc.replace(window.location.origin + '/', ''); // Removing the host and port from the image source
+
+		expect(relativePath).toBe(component.headerImageUrl);
+		expect(image.alt).toBe('Loklak Cow');	// Correct alt text 'Loklak Cow' must be present.
 	}));
 });

src/app/home/home.component.ts

@@ -7,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 	private header: string = 'Loklak Search!';
+	private headerImageUrl: string = 'assets/images/cow_200x233.png';
 
 	constructor() { }
 

src/styles.scss

@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */
+
+body{
+	margin: 0;
+	padding: 0;
+	width: 100vw;
+	height: 100vh;
+	background: #fafafa;
+	font-family: Roboto, Arial, Helvetica, sans-serif;
+	font-family: Iconsolata, monospace;
+}