Skip to content

Commit

Permalink
test cases added
Browse files Browse the repository at this point in the history
  • Loading branch information
@SooryaSoorya
SooryaSoorya committed Apr 29, 2020
1 parent 5626c52 commit a1d4a54
Show file tree
Hide file tree
Showing 14 changed files with 135 additions and 105 deletions.
32 changes: 16 additions & 16 deletions src/app/movie-detail/movie-detail.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
<app-loader [loading]="loading"></app-loader>

<div class="ngmp-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
<div *ngIf="(movie.Poster !== MOVIE_PROPS.NO_IMG_URL || null)" class="ngmp-movie-cover">
<div class="ngma-movie-details-container" *ngIf="movie" [@simpleFadeAnimation]="'in'">
<div *ngIf="(movie.Poster !== MOVIE_PROPS.NO_IMG_URL || null)" class="ngma-movie-cover">
<img src="{{movie.Poster}}" alt="movie cover">
</div>
<div class="ngmp-movie-details">
<div class="ngmp-movie-poster">
<div class="ngma-movie-details">
<div class="ngma-movie-poster">
<img src="{{movie.Poster}}" alt="movie poster">
</div>
<div class="ngmp-movie-contents">
<div class="ngma-movie-contents">
<h2>{{movie.Title}}</h2>
<div class="ngmp-movie-info">
<div class="ngmp-movie-rate">
<div class="ngma-movie-info">
<div class="ngma-movie-rate">
<a>
<img class="ngmp-star-img" src="assets/icons/star.svg" alt="movie poster">
<img class="ngma-star-img" src="assets/icons/star.svg" alt="movie poster">
<strong>{{movie.imdbRating}}</strong>
</a>
</div>
<div class="ngmp-movie-duration">
<a><img class="ngmp-duration-img" src="assets/icons/duration.svg" alt="movie poster">
<div class="ngma-movie-duration">
<a><img class="ngma-duration-img" src="assets/icons/duration.svg" alt="movie poster">
<strong>{{movie.Runtime}}</strong>
</a>
</div>
<div class="ngmp-movie-rating-container">
<div class="ngma-movie-rating-container">
<strong>Ratings:</strong>
<a *ngFor="let rating of movie.Ratings">
{{rating.Source}}
{{rating.Value}}
</a>
</div>
</div>
<div class="ngmp-movie-info">
<div class="ngmp-movie-rating-container">
<div class="ngma-movie-info">
<div class="ngma-movie-rating-container">
<a *ngFor="let genre of movie.Genre.split(',')">
{{genre}}
</a>
</div>
</div>

<p class="ngmp-movie-plot">
<img class="ngmp-plot-img" src="assets/icons/plot.svg" alt="movie poster">
<p class="ngma-movie-plot">
<img class="ngma-plot-img" src="assets/icons/plot.svg" alt="movie poster">
{{movie.Plot}}
</p>
<div class="ngmp-movie-info">
<div class="ngma-movie-info">
<a class="ngma-actor-details">
<div class="ngma-icon-container ngma-avatar"
style="background-image: url('assets/icons/director.svg');">
Expand Down
30 changes: 15 additions & 15 deletions src/app/movie-detail/movie-detail.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@import "variables";

.ngmp-movie-details-container {
.ngma-movie-details-container {
width: 100%;
}

.ngmp-movie-cover {
.ngma-movie-cover {
position: relative;
max-height: 25em;
overflow: hidden;
Expand Down Expand Up @@ -42,7 +42,7 @@
}
}

.ngmp-movie-details {
.ngma-movie-details {
position: relative;
display: flex;
flex-direction: row;
Expand All @@ -51,7 +51,7 @@
transform: translateY(-4em);
}

.ngmp-movie-contents {
.ngma-movie-contents {
padding: 0 1em;
color: darken($light, 35);

Expand All @@ -61,7 +61,7 @@
font-size: 44px;
}

.ngmp-movie-info {
.ngma-movie-info {
display: flex;
justify-content: flex-start;
flex-direction: row;
Expand Down Expand Up @@ -102,7 +102,7 @@
}
}

.ngmp-movie-rating-container {
.ngma-movie-rating-container {
a {
margin-left: 0.5em;
background-color: $secondary-color;
Expand All @@ -113,42 +113,42 @@
}
}

.ngmp-movie-plot {
.ngma-movie-plot {
max-width: 70%;
line-height: 1.8;
}

.ngmp-plot-img {
.ngma-plot-img {
top: 10px;
position: relative;
height: 25px;
width: 25px;
}

.ngmp-star-img {
.ngma-star-img {
top: 5px;
position: relative;
height: 25px;
width: 25px;
}

.ngmp-duration-img {
.ngma-duration-img {
top: 10px;
position: relative;
height: 20px;
}
}

@media only screen and (max-width: 48em) {
.ngmp-movie-details {
.ngma-movie-details {
flex-direction: column-reverse;
transform: translateY(0);
padding: 0 0.5em;

.ngmp-movie-poster {
.ngma-movie-poster {
padding: 0 1em;
}
.ngmp-movie-info {
.ngma-movie-info {
display: block;
div {
flex-direction: column;
Expand All @@ -160,14 +160,14 @@
margin-bottom: 1em;
}
}
.ngmp-movie-rating-container {
.ngma-movie-rating-container {
flex-direction: column;
span {
display: block;
margin-bottom: 1em;
}
}
.ngmp-movie-plot {
.ngma-movie-plot {
max-width: 100%;
}
}
Expand Down
25 changes: 17 additions & 8 deletions src/app/movie-detail/movie-detail.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { async, ComponentFixture, TestBed } from "@angular/core/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";
import { ActivatedRoute } from "@angular/router";

import { MovieDetailComponent } from './movie-detail.component';
import { MovieDetailComponent } from "./movie-detail.component";
import { MovieService } from "../movie/services/movie.services";

describe('MovieDetailComponent', () => {
describe("MovieDetailComponent", () => {
let component: MovieDetailComponent;
let fixture: ComponentFixture<MovieDetailComponent>;


beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MovieDetailComponent ]
})
.compileComponents();
imports: [HttpClientTestingModule],
declarations: [MovieDetailComponent],
providers: [
{
provide: ActivatedRoute,
useValue: { snapshot: { params: { id: 1 } } },
},
MovieService,
],
}).compileComponents();
}));

beforeEach(() => {
Expand All @@ -20,7 +29,7 @@ describe('MovieDetailComponent', () => {
fixture.detectChanges();
});

it('should create', () => {
it("should create", () => {
expect(component).toBeTruthy();
});
});
24 changes: 12 additions & 12 deletions src/app/movie/movie.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<app-nav-menu (onNavMenuChange)="onNavMenuChange($event)" (showLoading)="showLoading($event)"></app-nav-menu>
<app-loader [loading]="loading"></app-loader>

<div class="ngmp-main-container">
<div *ngIf="movies; else elseBlock" class="ngmp-movies-container">
<div class="ngmp-movies-list-header">
<span class="ngmp-movies-count">
<div class="ngma-main-container">
<div *ngIf="movies; else elseBlock" class="ngma-movies-container">
<div class="ngma-movies-list-header">
<span class="ngma-movies-count">
{{movies.length}} Movies
</span>
<div class="ngmp-movies-sort"> Sort By:
<div class="ngma-movies-sort"> Sort By:
<select [(ngModel)]="sortBy" (change)="sortMovies()">
<option selected="true" disabled="disabled">Select</option>
<option value="Title">Title</option>
Expand All @@ -17,22 +17,22 @@
</div>
</div>
<hr>
<div class="ngmp-movies-list">
<div *ngFor="let movie of movies" class="ngmp-movie">
<div class="ngma-movies-list">
<div *ngFor="let movie of movies" class="ngma-movie">
<a
[routerLink]="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null)? ['..'] :['/movies/' + movie.Type + '/' + movie.imdbID]">
<div *ngIf="(movie.Poster === MOVIE_PROPS.NO_IMG_URL || null); else elseBlock"
class="ngmp-noimageposter">
<img src="assets/icons/notfound.svg" alt="search icon" class="ngmp-noimage">
class="ngma-noimageposter">
<img src="assets/icons/notfound.svg" alt="search icon" class="ngma-noimage">
</div>
<ng-template #elseBlock>
<figure>
<img src="{{movie.Poster}}" alt="movie poster" class="ngmp-poster">
<img src="{{movie.Poster}}" alt="movie poster" class="ngma-poster">
</figure>
</ng-template>

<h3 class="ngmp-movie-title">{{movie.Title}}</h3>
<div class="ngmp-movie-year">
<h3 class="ngma-movie-title">{{movie.Title}}</h3>
<div class="ngma-movie-year">
<img src="assets/icons/calender.svg" alt="movie poster" class="ngma-rateimg">
{{movie.Year}}
</div>
Expand Down
34 changes: 17 additions & 17 deletions src/app/movie/movie.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,31 +6,31 @@
flex-direction: column;
}

.ngmp-main-container {
.ngma-main-container {
display: flex;
justify-content: flex-start;
flex-direction: row;
}

.ngmp-movies-container {
.ngma-movies-container {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 100%;
max-height: 100vh;

.ngmp-movies-list-header {
.ngma-movies-list-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 1em;

.ngmp-movies-count {
.ngma-movies-count {
color: $secondary-title;
}

.ngmp-movies-sort {
.ngma-movies-sort {
color: $primary-title;
padding-right: 1em;
font-size: 0.8em;
Expand All @@ -53,15 +53,15 @@
opacity: 0.6;
}

.ngmp-movies-list {
.ngma-movies-list {
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
padding: 1em;
}

.ngmp-movie {
.ngma-movie {
margin-bottom: 1em;
flex-basis: 25%;

Expand All @@ -75,7 +75,7 @@
&:hover {
opacity: 0.7;

.ngmp-poster {
.ngma-poster {
transform: scale(1.05);
}
}
Expand All @@ -87,18 +87,18 @@
}
}

.ngmp-poster {
.ngma-poster {
transition: all 0.2s;
display: block;
}

.ngmp-movie-title,
.ngmp-movie-year {
.ngma-movie-title,
.ngma-movie-year {
text-decoration: none;
display: inline-block;
}

.ngmp-movie-title {
.ngma-movie-title {
color: $orange;
margin: 15px 0 5px 42px;
overflow: hidden;
Expand All @@ -107,7 +107,7 @@
width: 300px;
}

.ngmp-movie-year {
.ngma-movie-year {
color: $grey;
margin: 0;
margin-left: 70px;
Expand All @@ -119,11 +119,11 @@
margin-top: 0px;
margin-left: -30px;
}
.ngmp-noimageposter {
.ngma-noimageposter {
text-align: center;
height: 100px;
}
.ngmp-noimage {
.ngma-noimage {
text-align: center;
height: 100px;
margin-right: 100px;
Expand Down Expand Up @@ -170,13 +170,13 @@
&:hover {
opacity: 0.7;

.ngmp-poster {
.ngma-poster {
transform: scale(1.05);
}
}
}

.ngmp-poster {
.ngma-poster {
transition: all 0.2s;
display: block;
}
Expand Down
Loading

0 comments on commit a1d4a54

Please sign in to comment.