taller angular

mynewapp/angular.json

@@ -25,6 +25,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": []

mynewapp/src/app/app.component.css

@@ -0,0 +1,86 @@
+/* Add your styles here */
+
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+
+  header {
+      background: black;
+      width: 100%;
+      clear: both;
+      content:'';
+      display: table;
+
+  }
+
+  .negrilla {
+    font-weight: bold;
+  }
+
+  #notacion1 {
+    border-width: 2px;
+    border-style: solid;
+    border-color: darkcyan;
+
+  }
+
+  h5.card-title {
+    color:Teal;
+  }
+
+  h1.tituloPrincipal{
+    box-sizing: border-box;
+    width: 80%;
+    font-weight: bold;
+    font-stretch: semi-condensed;
+    font-size: 50px;
+    text-transform: uppercase;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    background: #dcdc39;
+    font-family: 'Open Sans', Verdana, Geneva, Tahoma, sans-serif;
+  }
+
+
+  #logoMenu {
+    width: 80px;
+  }
+
+  #nombreSerie{
+    color:dodgerblue;
+    cursor: pointer;
+  }
+
+  .menu {
+    width: 900px;
+    margin: 0 auto;
+  }
+
+  nav {
+    float:left;
+    padding: 5px;
+  }
+
+  #nombreLogo {
+    color:white;
+    font-size: 20pt;
+  }
+
+  #cartaContenido {
+    margin: 30px auto;
+  }
+
+  .table {
+    margin: 30px auto;
+  }
+
+
+

mynewapp/src/app/app.component.html

@@ -1,2 +1,10 @@
+<header>
+    <div class="menu">
+      <nav>
+        <img src="./assets/imagenes/logo.png" id="logoMenu" alt="Logo">
+        <label id="nombreLogo" href="#">TV Series</label>
+      </nav>
+    </div>
+  </header>
 <app-serie></app-serie>
-<app-root></app-root>
+

mynewapp/src/app/app.component.spec.ts

@@ -1,29 +1,30 @@
+import { HttpClientModule } from '@angular/common/http';
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { SerieComponent } from './serie/serie.component';
 
 describe('AppComponent', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [RouterTestingModule],
-    declarations: [AppComponent]
-  }));
+ beforeEach(async () => {
+   await TestBed.configureTestingModule({
+     imports: [
+       RouterTestingModule, HttpClientModule
+     ],
+     declarations: [
+       AppComponent, SerieComponent
+     ],
+   }).compileComponents();
+ });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+ it('should create the app', () => {
+   const fixture = TestBed.createComponent(AppComponent);
+   const app = fixture.componentInstance;
+   expect(app).toBeTruthy();
+ });
 
-  it(`should have as title 'mynewapp'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('mynewapp');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('mynewapp app is running!');
-  });
-});
+ it(`should have as title 'aplicacion-basica'`, () => {
+   const fixture = TestBed.createComponent(AppComponent);
+   const app = fixture.componentInstance;
+   expect(app.title).toEqual('aplicacion-basica');
+ });
+});

mynewapp/src/app/serie/dataSeries.ts

@@ -1,4 +1,4 @@
-import {Serie} from "./serie.js"
+import {Serie} from "./serie"
 
 export const dataSeries = [
     new Serie (1,"Breaking Bad","AMC", 5,"Set and filmed in Albuquerque, New Mexico, the series tells the story of Walter White, a struggling and depressed high school chemistry teacher who is diagnosed with lung cancer" ,

mynewapp/src/app/serie/serie.component.html

@@ -1,3 +1,42 @@
 <p>
   serie works!
 </p>
+
+<div class="container" id="Cuerpo">
+  <div class="row">
+    <div class="col-lg-8 col-md-8 col-12 col-sm-12">
+      <table class="table table-striped table-dark" id="tablaSeries">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Name</th>
+            <th scope="col">Channel</th>
+            <th scope="col">Seasons</th>
+          </tr>
+          <tbody>
+            <tr *ngFor="let seri of series">
+              <td>
+                <dd>{{seri.id}}</dd>
+              </td>
+              <td>
+                <dd>{{seri.nombre}}</dd>
+              </td>
+              <td>
+                <dd>{{seri.canal}}</dd>
+              </td>
+              <td>
+                <dd>{{seri.temporadas}}</dd>
+              </td>
+          </tr>
+          </tbody>
+      </table>
+      <p id="average">Average seasons: {{promedioTemporadas}}</p>
+    </div>
+    <div class="col-lg-4 col-md-4 col-4 col-sm-12" id="cartaContenido">
+    </div>
+  </div>
+</div>
+
+<script type="module" src = "scripts/index.js"></script>
+<script type="module" src = "scripts/data.js"></script>
+<script type="module" src = "scripts/Serie.js"></script>

mynewapp/src/app/serie/serie.component.spec.ts

@@ -0,0 +1,53 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { faker } from '@faker-js/faker';
+
+import { HttpClientModule } from '@angular/common/http';
+import { SerieComponent } from './serie.component';
+import { SerieService } from './serie.service';
+import { Serie } from './serie';
+
+
+describe('BookListComponent', () => {
+ let component: SerieComponent;
+ let fixture: ComponentFixture<SerieComponent>;
+ let debug: DebugElement;
+
+ beforeEach(async(() => {
+   TestBed.configureTestingModule({
+     imports: [HttpClientModule],
+     declarations: [ SerieComponent ],
+     providers: [ SerieService ]
+   })
+   .compileComponents();
+ }));
+
+ beforeEach(() => {
+   fixture = TestBed.createComponent(SerieComponent);
+   component = fixture.componentInstance;
+
+   component.series = [
+        new Serie(faker.datatype.number(), faker.name.firstName(), faker.name.firstName(), faker.datatype.number(), faker.lorem.sentence(), faker.internet.url(), faker.internet.url())
+   ]
+
+   fixture.detectChanges();
+   debug = fixture.debugElement;
+ });
+
+ it('should create', () => {
+   expect(component).toBeTruthy();
+ });
+
+ it("Component has a table", () => {
+   expect(debug.query(By.css("tbody")).childNodes.length).toBeGreaterThan(0);
+ });
+
+ it('should have an dd element ', () => {
+   const dd = debug.query(By.css('dd'));
+   const content: HTMLElement = dd.nativeElement;
+   expect(content.textContent).toEqual(component.series[0].nombre)
+ });
+
+});

mynewapp/src/app/serie/serie.component.ts

@@ -9,16 +9,31 @@ import { dataSeries } from './dataSeries';
 })
 export class SerieComponent implements OnInit {
 
-  private series: Array<Serie> = [];
+  series: Array<Serie> = [];
+
+  promedioTemporadas: number = 0;
 
   constructor() { }
 
   getSeriesList(): Array<Serie> {
     return dataSeries;
   }
 
+  darPromedio(): number {
+
+    let sumatoria: number = 0
+
+    for (let i = 0; i < this.series.length; i++) {
+      console.log(this.series[i].temporadas);
+      sumatoria += this.series[i].temporadas;
+    }
+    return sumatoria / this.series.length;
+  }
+
+
   ngOnInit() {
     this.series = this.getSeriesList();
+    this.promedioTemporadas = this.darPromedio();
   }
 
 }

mynewapp/src/app/serie/serie.service.spec.ts

@@ -2,15 +2,17 @@
 
 import { TestBed, async, inject } from '@angular/core/testing';
 import { SerieService } from './serie.service';
+import { HttpClientTestingModule } from "@angular/common/http/testing";
 
-describe('Service: Serie', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [SerieService]
-    });
-  });
+describe('Service: Course', () => {
+ beforeEach(() => {
+   TestBed.configureTestingModule({
+     imports: [HttpClientTestingModule],
+     providers: [SerieService]
+   });
+ });
 
-  it('should ...', inject([SerieService], (service: SerieService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+ it('should ...', inject([SerieService], (service: SerieService) => {
+   expect(service).toBeTruthy();
+ }));
+});

mynewapp/src/assets/imagenes/imagenes.code-workspace

@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "imagenes"
+		},
+		{
+			"path": "lib"
+		}
+	]
+}

mynewapp/src/environments/environment.prod.ts

@@ -0,0 +1 @@
+export const environment = {};

mynewapp/src/environments/environment.ts

@@ -0,0 +1 @@
+export const environment = {};