50 sugerir pauta (#12)

* Corrige docker para o windows

Co-authored-by: Ricardo Loureiro <[email protected]>
Co-authored-by: Geraldo Victor <[email protected]>

* Adiciona componente de sugestão de pauta

Co-authored-by: Ricardo Loureiro <[email protected]>
Co-authored-by: Geraldo Victor <[email protected]>

* Tela Sugestao de pauta

Co-authored-by: VitoriaAquere <[email protected]>
Co-authored-by: Diego-Carlito <[email protected]>

* Adiciona service de e-mail

Co-authored-by: Geraldo Victor <[email protected]>
Co-authored-by: Diego-Carlito <[email protected]>

* Integração do frontend com o backend

Co-authored-by: Geraldo Victor <[email protected]>
Co-authored-by: Diego-Carlito <[email protected]>

* Descomenta código commitado por engano

* Ajusta formatação e corrige requisição para endpoint do email

* Corrige testes iniciais de criação de componentes

Co-authored-by: VitoriaAquere <[email protected]>

* Adiciona componente de participação

* Adiciona rota para a página de participação

* Ajustes de formatação e validação

* Adiciona indicação de que o email está sendo enviado

* Adiciona modulo de rotas nos testes

* Adiciona teste ao frontend

* Adiciona e corrige testes ao componente de sugestão de agenda

* Corrige code smells

* Corrige url e nome de variável

---------

Co-authored-by: Diego Carlito <[email protected]>
Co-authored-by: Ricardo Loureiro <[email protected]>
Co-authored-by: VitoriaAquere <[email protected]>

docker-compose.yml

@@ -11,4 +11,4 @@ services:
     volumes:
       - .:/unb-tv-web
       - /unb-tv-web/node_modules
-    command: ng serve --host 0 --port 4200
+    command: ng serve --host 0 --port 4200 --poll 2000

src/app/app-routing.module.ts

@@ -12,6 +12,8 @@ import { CheckCodeRestPasswordComponent } from './pages/check-code-rest-password
 import { ResetPasswordComponent } from './pages/reset-password/reset-password.component';
 import { AuthGuard } from './services/auth.guard';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
+import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
+import { ParticipateComponent } from './pages/participate/participate.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -22,6 +24,8 @@ const routes: Routes = [
   { path: 'activeAccount', component: ActiveAccountComponent },
   { path: 'sendCodeResetPassword', component: CheckCodeRestPasswordComponent },
   { path: 'changePassword', component: ResetPasswordComponent },
+  { path: 'suggestAgenda', component: SuggestAgendaComponent },
+  { path: 'participate', component: ParticipateComponent },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], },
   { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], },
   { path: '', component: HomePageComponent, canActivate: [AuthGuard], }

src/app/app.module.ts

@@ -22,6 +22,8 @@ import { CheckCodeRestPasswordComponent } from './pages/check-code-rest-password
 import { AuthGuard } from './services/auth.guard';
 import { AuthService } from './services/auth.service';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
+import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
+import { ParticipateComponent } from './pages/participate/participate.component';
 
 @NgModule({
   declarations: [
@@ -40,6 +42,8 @@ import { EditUserComponent } from './pages/edit-user/edit-user.component';
     ResetPasswordComponent,
     CheckCodeRestPasswordComponent,
     EditUserComponent,
+    SuggestAgendaComponent,
+    ParticipateComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/background/background.component.html

@@ -8,7 +8,8 @@
               <div class="px-2">Início</div>|
               <div class="px-2">Agora na TV</div>|
               <div class="px-2">Programação</div>|
-              <div class="pl-2">Transmissões</div>
+              <div class="px-2">Transmissões</div>|
+              <div class="pl-2" [routerLink]="['/participate']">Participe</div>
             </div>
             <img alt="hamburguer" src="../../../assets/hamburguer.svg">
         </div>

src/app/components/background/background.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BackgroundComponent } from './background.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('BackgroundComponent', () => {
   let component: BackgroundComponent;
   let fixture: ComponentFixture<BackgroundComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ BackgroundComponent ]
+      declarations: [ BackgroundComponent ],
+      imports: [RouterTestingModule]
     })
     .compileComponents();
 

src/app/environment/environment.ts

@@ -1,4 +1,5 @@
 export const EDUPLAY_CLIENT_KEY = "a1cdba06226408fcda63b49c50223c68d56005d234cc98bcdc1ae787d2b4de1d";
 export const environment = {
-  apiURL: 'https://unb-tv-backend-2be1ed3a0485.herokuapp.com/api',
+  usersAPIURL: 'https://unb-tv-backend-2be1ed3a0485.herokuapp.com/api',
+  adminAPIURL: 'https://admin-unb-tv-2023-2-dc0dd53d3aca.herokuapp.com/api'
 };

src/app/pages/login-social/login-social.component.css

@@ -104,4 +104,5 @@
     color: #0087C8;
     margin-left: -140px;
     margin-top: 18.5px
-}
+}
+

src/app/pages/participate/participate.component.css

@@ -0,0 +1,25 @@
+.font-unb {
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;    
+}
+
+.containner h1 {
+    color: #0087C8;
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 12.35px;
+    margin-left: 29px;
+    margin-top: 45px;
+    margin-bottom: 40px;
+    text-align: start;
+}
+
+.containner {
+    width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    height: -300px;
+}

src/app/pages/participate/participate.component.html

@@ -0,0 +1,9 @@
+<div class="containner">
+    <h1 [routerLink]="['/suggestAgenda']">
+        Sugira uma pauta 
+    </h1>
+    <h1>
+        Solicite uma transmissão
+    </h1>
+</div>
+

src/app/pages/participate/participate.component.spec.ts

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

src/app/pages/participate/participate.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-participate',
+  templateUrl: './participate.component.html',
+  styleUrls: ['./participate.component.css']
+})
+export class ParticipateComponent {
+
+}

src/app/pages/suggest-agenda/suggest-agenda.component.css

@@ -0,0 +1,71 @@
+
+.containner {
+    width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    height: -300px;
+}
+
+.containner h1 {
+    color: #0087C8;
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 12.35px;
+    margin-left: 29px;
+    margin-top: 45px;
+    margin-bottom: 40px;
+    text-align: start;
+}
+
+.first {
+    border: 0.15px solid #3C3C3B;
+    margin-left: 29px;
+    width: 330px;
+    border-radius: 9px;
+    height: 30px;
+    padding: 9px 0 10px 28px;
+}
+
+form ::placeholder {
+    font-size: 13px;
+    font-family: "unb-pro", sans-serif;    
+}
+
+.descricao {
+    border: 0.15px solid #3C3C3B;
+    margin-left: 29px;
+    width: 330px;
+    border-radius: 9px;
+    height: 100px;
+    padding: 9px 0 10px 28px;
+}
+
+.descricao::placeholder {
+    top: -35px;
+}
+
+button {
+    background-color: #0087C8;
+    padding: 3px 33px 3px 33px;
+    border-radius: 9px;
+    margin-top: 7px;
+}
+
+span {
+    color: white;
+    font-family: "unb-pro", sans-serif;
+    font-size: 13px;
+}
+
+.input:focus {
+    outline: none !important;
+    border: 0.25px solid #00A550;
+}
+
+.required-field {
+    outline: none !important;
+    border: 2px solid red;
+}

src/app/pages/suggest-agenda/suggest-agenda.component.html

@@ -0,0 +1,20 @@
+<div class="containner" >
+    <div class="mb-4">
+        <h1>Sugestão de Pautas</h1>
+        <form [formGroup]="suggestAgendaForm" (submit)="sendSuggestAgenda()" class="flex flex-col gap-y-3">
+            <input type="text" class="input first" name="tema" formControlName="tema" placeholder="Tema" >
+            <textarea class="input descricao" name="descicao" formControlName="descricao" placeholder="Descrição" required [ngClass]="{'required-field': !isDescricaoFilled}" (change)="onRequiredFieldsChange()"></textarea>
+            <input type="text" class="input first" name="quando" formControlName="quando" placeholder="Quando (data e hora)" >
+            <input type="text" class="input first" name="local" formControlName="local" placeholder="Local" >
+            <input type="text" class="input first" name="responsavel" formControlName="responsavel" placeholder="Responsável" required [ngClass]="{'required-field': !isResponsavelFilled}" (change)="onRequiredFieldsChange()">
+            <input type="text" class="input first" name="telefone-responsavel" formControlName="telefoneResponsavel" placeholder="Telefone do Responsável" required [ngClass]="{'required-field': !isTelefoneFilled}" (change)="onRequiredFieldsChange()">
+            <input type="text" class="input first" name="email-contato" formControlName="emailContato" placeholder="E-mail para contato" >
+            <div>
+                <button type="submit">
+                    <span *ngIf="isSendingEmail">Enviando...</span>
+                    <span *ngIf="!isSendingEmail">Enviar</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</div>

src/app/pages/suggest-agenda/suggest-agenda.component.spec.ts

@@ -0,0 +1,89 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { of, throwError } from 'rxjs';
+import { EmailService } from 'src/app/services/email.service';
+import { SuggestAgendaComponent } from './suggest-agenda.component';
+
+
+const mockData = "email has been sent"
+class EmailServiceMock {
+  sendEmail() {
+    return of(mockData);
+  }
+}
+
+
+describe('SuggestAgendaComponent', () => {
+  let component: SuggestAgendaComponent;
+  let fixture: ComponentFixture<SuggestAgendaComponent>;
+  let emailService: EmailService;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SuggestAgendaComponent],
+      imports: [HttpClientTestingModule,
+        ReactiveFormsModule],
+      providers: [FormBuilder, { provide: EmailService, useValue: new EmailServiceMock() }]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(SuggestAgendaComponent);
+    component = fixture.componentInstance;
+    emailService = TestBed.inject(EmailService);
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have a valid form on initialization', () => {
+    fixture.detectChanges();
+    expect(component.suggestAgendaForm).toBeTruthy();
+  });
+
+  it('should call suggestAgendaComponent method when the form is submitted', () => {
+    fixture.detectChanges();
+    spyOn(component, 'sendSuggestAgenda').and.callThrough();
+    const form = component.suggestAgendaForm;
+    form.setValue({ descricao: 'Descrição', responsavel: 'Usuário Teste', telefoneResponsavel: '999999999', tema: '', quando: '', local: '', emailContato: '' });
+
+    const submitButton = fixture.nativeElement.querySelector(
+      'button[type="submit"]'
+    );
+    submitButton.click();
+
+    expect(component.sendSuggestAgenda).toHaveBeenCalled();
+  });
+
+  it('should call onRequiredFieldsChange when responsavel input value changes', () => {
+    fixture.detectChanges();
+    spyOn(component, 'onRequiredFieldsChange');
+
+    const input = fixture.debugElement.query(By.css('input[name="responsavel"]')).nativeElement;
+    input.value = 'novo valor';
+    input.dispatchEvent(new Event('change'));
+
+    expect(component.onRequiredFieldsChange).toHaveBeenCalled();
+  });
+
+  it('should call sendEmail', () => {
+    fixture.detectChanges();
+    const mySpy = spyOn(emailService, 'sendEmail').and.callThrough();
+    const form = component.suggestAgendaForm;
+    form.setValue({ descricao: 'Descrição', responsavel: 'Usuário Teste', telefoneResponsavel: '999999999', tema: '', quando: '', local: '', emailContato: '' })
+    component.sendSuggestAgenda();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
+  it('should call sendEmail and return an error', () => {
+    fixture.detectChanges();
+    const mySpy = spyOn(emailService, 'sendEmail').and.returnValue(throwError(() => new Error('Erro')));
+    const form = component.suggestAgendaForm;
+    form.setValue({ descricao: 'Descrição', responsavel: 'Usuário Teste', telefoneResponsavel: '999999999', tema: '', quando: '', local: '', emailContato: '' })
+    component.sendSuggestAgenda();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
+});