Merge pull request #6 from csvinhal/develop

ajustes tema e criacao de testes unitários

package.json

@@ -1,6 +1,6 @@
 {
   "name": "social-movies",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/features/home/home.component.html

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-sm-12 col-lg-6 mx-auto">
       <h1 class="text-center font-weight-bold">Social Movies</h1>
-      <span class="d-block text-center font-weight-bold mb-3"
+      <span class="d-block text-center font-weight-bold mb-3 sub-title"
         >Todos os filmes em um só lugar!</span
       >
     </div>
@@ -19,7 +19,7 @@ <h1 class="text-center font-weight-bold">Social Movies</h1>
           placeholder="Pesquise o filme:"
         />
         <div class="input-group-append">
-          <button type="submit" class="btn btn-primary" (click)="onSearch()">
+          <button id="btn-search" type="submit" class="btn btn-primary" (click)="onSearch()">
             <i class="fas fa-search mr-2"></i>Pesquisar
           </button>
         </div>
@@ -32,7 +32,6 @@ <h1 class="text-center font-weight-bold">Social Movies</h1>
       <app-movie-table
         [movies]="movies"
         [totalRecords]="totalRecords"
-        (select)="onSelect($event)"
         (pageChange)="onPageChange($event)"
       ></app-movie-table>
     </div>

src/app/features/home/home.component.scss

@@ -1,3 +1,7 @@
 .container {
   margin-top: 2vh;
 }
+
+.sub-title {
+  color: #b1b1b4;
+}

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

@@ -12,10 +12,16 @@ import {
 import { HomeComponent } from './home.component';
 import { MovieDetailComponent } from './movie-detail/movie-detail.component';
 import { MovieTableComponent } from './movie-table/movie-table.component';
+import { MovieService } from 'src/app/shared/services/movie.service';
+import { of } from 'rxjs';
+import { Movie } from '../../shared/models/movie';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
   let fixture: ComponentFixture<HomeComponent>;
+  let movieService: MovieService;
+  let movies: Movie[];
+  let apiResponse: any;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -31,13 +37,52 @@ describe('HomeComponent', () => {
     }).compileComponents();
   }));
 
+  beforeEach(async(() => {
+    movieService = TestBed.get(MovieService);
+    movies = [{ imdb: 'imdbtt4568', title: 'Spider-man', year: '2002' }];
+    apiResponse = { movies: movies, totalResults: 1 };
+  }));
+
   beforeEach(() => {
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    movieService = undefined;
+    movies = undefined;
+    apiResponse = undefined;
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have as title in h1 tag "Social Movies"', () => {
+    const h1: HTMLElement = fixture.debugElement.nativeElement.querySelector(
+      'h1'
+    );
+    expect(h1.textContent).toEqual('Social Movies');
+  });
+
+  it('should "listMovies" be called on click', () => {
+    const btn: HTMLButtonElement = fixture.nativeElement.querySelector(
+      '#btn-search'
+    );
+    spyOn(movieService, 'listMovies').and.returnValue(of({}));
+    btn.click();
+    expect(movieService.listMovies).toHaveBeenCalled();
+  });
+
+  it('should "movies" and "totalRecords" receive value', () => {
+    const btn: HTMLButtonElement = fixture.nativeElement.querySelector(
+      '#btn-search'
+    );
+    spyOn(movieService, 'listMovies').and.returnValue(of(apiResponse));
+    btn.click();
+
+    expect(component.movies).toBe(apiResponse.movies);
+    expect(component.totalRecords).toBe(apiResponse.totalResults);
+  });
 });

src/app/features/home/movie-detail/movie-detail.component.html

@@ -1,5 +1,7 @@
-<div id="movie-detail-modal" class="modal-header">
-  <h4 class="modal-title" id="modal-title">Detalhes do filme</h4>
+<div id="movie-detail-header" class="modal-header">
+  <h4 class="modal-title" id="modal-title">
+    {{ 'Detalhes do filme' | uppercase }}
+  </h4>
   <button type="button" class="close" aria-label="Close" (click)="close()">
     <span aria-hidden="true">&times;</span>
   </button>
@@ -22,9 +24,9 @@ <h4 class="modal-title" id="modal-title">Detalhes do filme</h4>
 
       <div class="row">
         <div class="col-12">
-          <h1 class="text-center">
+          <h2 class="text-center">
             {{ movieDetail?.title }} ({{ movieDetail?.year }})
-          </h1>
+          </h2>
           <hr class="my-2" />
           <p class="text-justify">{{ movieDetail?.plot }}</p>
         </div>
@@ -58,7 +60,7 @@ <h1 class="text-center">
   </div>
 </div>
 <div class="modal-footer">
-  <button type="button" class="btn btn-secondary" (click)="close()">
+  <button id="bnt-close" type="button" ngbAutofocus class="btn btn-secondary" (click)="close()">
     Fechar
   </button>
 </div>

src/app/features/home/movie-table/movie-table.component.html

@@ -16,8 +16,9 @@
         <td id="td-year-{{i}}">{{ movie.year }}</td>
         <td id="td-action-{{i}}">
           <button
+            id="btn-detail-{{i}}"
             type="button"
-            class="btn btn-outline-dark"
+            class="btn btn btn-secondary"
             (click)="onSelect(movie.imdb)"
             data-toggle="modal"
             data-target="#movie-detail-modal"

src/app/features/home/movie-table/movie-table.component.spec.ts

@@ -1,20 +1,43 @@
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NgModule } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbActiveModal,
+  NgbModalModule,
+  NgbPaginationModule
+} from '@ng-bootstrap/ng-bootstrap';
 
+import { Movie } from '../../../shared/models/movie';
+import { MovieDetailComponent } from '../movie-detail/movie-detail.component';
 import { MovieTableComponent } from './movie-table.component';
 
+// Foi necessário o mock para injetar o componente MovieDetail e testar se o modal iria abrir no click do botão.
+@NgModule({
+  imports: [CommonModule, HttpClientTestingModule, NgbModalModule],
+  declarations: [MovieDetailComponent],
+  entryComponents: [MovieDetailComponent]
+})
+class HomeTestMockModule {}
+
 describe('MovieTableComponent', () => {
   let component: MovieTableComponent;
   let fixture: ComponentFixture<MovieTableComponent>;
   let element: HTMLElement;
+  let movies: Movie[];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [MovieTableComponent],
-      imports: [NgbPaginationModule]
+      imports: [HomeTestMockModule, NgbPaginationModule],
+      providers: [NgbActiveModal, CurrencyPipe]
     }).compileComponents();
   }));
 
+  beforeEach(() => {
+    movies = [{ imdb: 'imdb1234', title: 'Spider-Man', year: '2012' }];
+  });
+
   beforeEach(() => {
     fixture = TestBed.createComponent(MovieTableComponent);
     component = fixture.componentInstance;
@@ -32,11 +55,26 @@ describe('MovieTableComponent', () => {
   });
 
   it('should show the table', () => {
-    component.movies = [
-      { imdb: 'imdb1234', title: 'Spider-Man', year: '2012' }
-    ];
+    component.movies = movies;
     fixture.detectChanges();
     expect(element.querySelector('.visible#dv-movie-table')).toBeTruthy();
     expect(element.querySelector('.invisible#dv-movie-table')).toBeFalsy();
   });
+
+  it('should have the "title", "year" and "action" from item', () => {
+    component.movies = movies;
+    fixture.detectChanges();
+
+    expect(element.querySelector('#td-title-0')).toBeTruthy();
+    expect(element.querySelector('#td-year-0')).toBeTruthy();
+    expect(element.querySelector('#td-action-0')).toBeTruthy();
+  });
+
+  it('should open the movie detail modal', () => {
+    component.movies = movies;
+    fixture.detectChanges();
+    const btnDetail: HTMLButtonElement = element.querySelector('#btn-detail-0');
+    btnDetail.click();
+    expect(document.querySelector('#movie-detail-header')).toBeTruthy();
+  });
 });

src/app/features/home/movie-table/movie-table.component.ts

@@ -15,8 +15,6 @@ export class MovieTableComponent implements OnInit {
   @Input()
   public movies: Movie[];
   @Output()
-  public select: EventEmitter<string> = new EventEmitter();
-  @Output()
   public pageChange: EventEmitter<number> = new EventEmitter();
   public page: number = 1;
   public maxSize: number = 3;

src/styles.scss

@@ -1,2 +1,6 @@
+$theme-colors: (
+  'secondary': #F1F1F2
+);
+
 @import '~bootstrap/scss/bootstrap.scss';
 @import '~@fortawesome/fontawesome-free/css/all.css';