CI/CD Frontend

.github/workflows/continous-integration.yml

@@ -0,0 +1,26 @@
+name: CI Pipeline Frontend
+
+on: push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout ✅
+        uses: actions/checkout@v3
+
+      - name: Setup 🏗
+        uses: actions/setup-node@v2
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install ⚙️
+        run: npm install
+
+      - name: Build 🛠
+        run: npm run build
+
+      - name: Test 📋
+        run: npm run test:prod

.github/workflows/heroku-deploy.yml

@@ -0,0 +1,21 @@
+name: heroku-deploy
+on:
+  pull_request:
+    types:
+      - closed
+    branches:
+      - develop
+
+jobs:
+  deploy-heroku:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    name: heroku deploy
+    steps:
+      - uses: actions/checkout@v3
+      - uses: akhileshns/[email protected] 
+        with:
+          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
+          heroku_app_name: "unb-tv-2023-2"
+          heroku_email: ${{secrets.HEROKU_EMAIL}}
+          usedocker: true

.gitignore

@@ -42,4 +42,4 @@ testem.log
 Thumbs.db
 
 ./github
-/src/app/secret/
+/src/app/environment

Dockerfile

@@ -2,6 +2,12 @@ FROM node:16 as angular
 
 WORKDIR /unb-tv-web
 
+RUN apt-get update
+RUN apt-get -y install chromium
+
+# set CHROME_BIN environment variable, so that karma knows which crome should be started
+ENV CHROME_BIN=/usr/bin/chromium
+
 ENV PATH /unb-tv-web/node_modules/.bin:$PATH
 ENV NODE_ENV=dev
 

angular.json

@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/un-b-tv-frontend",
+            "outputPath": "dist/unb-tv-frontend",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": [
@@ -89,7 +89,8 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         }
       }

karma.conf.js

@@ -0,0 +1,52 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--no-sandbox',
+          '--disable-gpu',
+          '--headless',
+          '--remote-debugging-port=9222'
+        ]
+      }
+    },
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/unb-tv-frontend'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'lcov' },
+        { type: 'cobertura' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    restartOnFileChange: true
+  });
+};

package.json

@@ -1,13 +1,15 @@
 {
-  "name": "un-b-tv-frontend",
+  "name": "unb-tv-frontend",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "build:tailwind": "postcss src/styles.css -o dist/styles.css",
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "build:prod": "ng build --prod",
+    "test:prod": "ng test --browsers=ChromeHeadless --watch=false --code-coverage"
   },
   "private": true,
   "dependencies": {

src/app/app.component.spec.ts

@@ -1,35 +1,24 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { BackgroundComponent } from './components/background/background.component';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule
-      ],
-      declarations: [
-        AppComponent
-      ],
+      imports: [RouterTestingModule],
+      declarations: [AppComponent, BackgroundComponent],
     }).compileComponents();
-  });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it(`should have as title 'UnB-TV-Frontend'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('UnB-TV-Frontend');
+  it('should create the app', () => {
+    expect(component).toBeTruthy();
   });
-
-  // it('should render title', () => {
-  //   const fixture = TestBed.createComponent(AppComponent);
-  //   fixture.detectChanges();
-  //   const compiled = fixture.nativeElement as HTMLElement;
-  //   expect(compiled.querySelector('.content span')?.textContent).toContain('UnB-TV-Frontend app is running!');
-  // });
 });

src/app/pages/active-account/active-account.component.spec.ts

@@ -1,23 +1,88 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ActiveAccountComponent } from './active-account.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AuthService } from 'src/app/services/auth.service';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { of, throwError } from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LoginComponent } from '../login/login.component';
+
+const mockData: any = {
+  "email": "[email protected]",
+  "code": 123456,
+}
+
+class AuthServiceMock {
+  constructor() { }
+  activeAccount() {
+    return of({ success: true });
+  }
+  resendCode() {
+    return of({ success: true });
+  }
+}
 
 describe('ActiveAccountComponent', () => {
   let component: ActiveAccountComponent;
   let fixture: ComponentFixture<ActiveAccountComponent>;
+  let authService: AuthService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ActiveAccountComponent ]
+      imports: [HttpClientTestingModule, RouterTestingModule.withRoutes(
+        [
+          { path: 'login', component: LoginComponent },
+        ]
+      ), ReactiveFormsModule],
+      providers: [{ provide: AuthService, useValue: new AuthServiceMock() }, FormBuilder],
+      declarations: [ActiveAccountComponent]
     })
-    .compileComponents();
+      .compileComponents();
 
     fixture = TestBed.createComponent(ActiveAccountComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+    authService = TestBed.inject(AuthService);
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call activeAccount method when the form is submitted', () => {
+    fixture.detectChanges();
+    spyOn(component, 'activeAccount').and.callThrough();
+    const form = component.userForm;
+    form.setValue(mockData);
+
+    const submitButton = fixture.nativeElement.querySelector(
+      'button[type="submit"]'
+    );
+    submitButton.click();
+
+    expect(component.activeAccount).toHaveBeenCalled();
+  });
+
+  it('should call alert when form is not valid', () => {
+    spyOn(component, 'activeAccount').and.callThrough();
+    const alertSpy = spyOn(window, 'alert');
+    fixture.detectChanges();
+
+    const submitButton = fixture.nativeElement.querySelector(
+      'button[type="submit"]'
+    );
+    submitButton.click();
+
+    expect(alertSpy).toHaveBeenCalledWith('Preencha todos os campos corretamente!');
+  });
+
+  it('should call activeAccount and return an error', () => {
+    fixture.detectChanges();
+    const form = component.userForm;
+    form.setValue(mockData);
+    const mySpy = spyOn(authService, 'activeAccount').and.returnValue(throwError(() => new Error('Erro')));
+    component.activeAccount();
+    expect(mySpy).toHaveBeenCalled();
+  });
+
 });

src/app/pages/check-code-rest-password/check-code-rest-password.component.html

@@ -1,13 +1,40 @@
-
 <div class="flex justify-center items-center h-4/5">
   <form [formGroup]="userForm" class="text-center">
     <div class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="email" formControlName="email" name="email" placeholder="E-mail" required>
+      <input
+        class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10"
+        type="email"
+        formControlName="email"
+        name="email"
+        placeholder="E-mail"
+        required
+      />
     </div>
     <div *ngIf="activeCode" class="mb-4">
-      <input class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10" type="text" formControlName="code" name="code" placeholder="Código" required>
+      <input
+        class="w-64 h-8 border rounded-lg border-gray-300 pl-4 md:w-96 md:h-10"
+        type="text"
+        formControlName="code"
+        name="code"
+        placeholder="Código"
+        required
+      />
     </div>
-    <button *ngIf="!activeCode" class="p-2 bg-blue-brand rounded-lg justify-center mb-4 text-white" (click)="sendEmail()">Enviar código</button>
-    <button *ngIf="activeCode" class="p-2 bg-blue-brand rounded-lg justify-center mb-4 text-white" (click)="checkCode()">Trocar senha</button>
+    <button
+      id="sendEmail"
+      *ngIf="!activeCode"
+      class="p-2 bg-blue-brand rounded-lg justify-center mb-4 text-white"
+      (click)="sendEmail()"
+    >
+      Enviar código
+    </button>
+    <button
+      id="checkCode"
+      *ngIf="activeCode"
+      class="p-2 bg-blue-brand rounded-lg justify-center mb-4 text-white"
+      (click)="checkCode()"
+    >
+      Trocar senha
+    </button>
   </form>
 </div>