Merge pull request #13 from UMM-CSci-3601-S20/refactorPostComponents

Refactor post components

client/e2e/src/add-note.e2e-spec.ts

@@ -0,0 +1,44 @@
+import {browser, protractor, by, element, utils} from 'protractor';
+import { AddNotePage, TestNote } from './add-note.po';
+import { E2EUtil } from './e2e.util';
+
+describe('Add note', () => {
+  let page: AddNotePage;
+  const EC = protractor.ExpectedConditions;
+
+  beforeEach(() => {
+    page = new AddNotePage();
+    page.navigateTo();
+  });
+
+  it('Should have the correct title', () => {
+    expect(page.getTitle()).toEqual('New Note');
+  });
+
+
+  it('Should enable and disable the add note button', async () => {
+    expect(element(by.buttonText('ADD NOTE')).isEnabled()).toBe(false);
+    await page.typeInput('messageField', 'bit.ly/umm-cscc');
+    expect(element(by.buttonText('ADD NOTE')).isEnabled()).toBe(true);
+  });
+
+  it('Should add a new note and go to the right page', async () => {
+    const note: TestNote = {
+      owner_id: E2EUtil.randomText(14),
+      message: E2EUtil.randomLetters(10),
+      owner: E2EUtil.randomText(10),
+    };
+
+    await page.addNote(note);
+
+    // Wait until the URL does not contain 'notes/new
+    await browser.wait(EC.not(EC.urlContains('notes/new')), 10000);
+
+    const url = await page.getUrl();
+    expect(RegExp('/owner/78f1d3bfa098879fe7a01373/notes').test(url)).toBe(true);
+    expect(url.endsWith('/notes/new')).toBe(false);
+  });
+
+});
+
+/// Tried lots of things and nothing worked.

client/e2e/src/add-post.po.ts → client/e2e/src/add-note.po.ts

@@ -1,22 +1,22 @@
 import { browser, by, element, Key, ElementFinder } from 'protractor';
 
-export interface TestPost {
+export interface TestNote {
   owner_id: string;
   message: string;
   owner: string;
 }
 
-export class AddPostPage {
+export class AddNotePage {
   navigateTo() {
-    return browser.get('/owner/78f1d3bfa098879fe7a01373/posts/new');
+    return browser.get('/owner/78f1d3bfa098879fe7a01373/notes/new');
   }
 
   getUrl() {
     return browser.getCurrentUrl();
   }
 
   getTitle() {
-    const title = element(by.className('add-post-title')).getText();
+    const title = element(by.className('add-note-title')).getText();
     return title;
   }
 
@@ -33,12 +33,12 @@ export class AddPostPage {
     });
   }
 
-  clickAddPost() {
-    return element(by.buttonText('ADD POST')).click();
+  clickAddNote() {
+    return element(by.buttonText('ADD NOTE')).click();
   }
 
-  async addPost(newPost: TestPost) {
-    await this.typeInput('messageField', newPost.message);
-    return this.clickAddPost();
+  async addNote(newNote: TestNote) {
+    await this.typeInput('messageField', newNote.message);
+    return this.clickAddNote();
   }
 }

client/e2e/src/doorboard.e2e-spec.ts

@@ -14,9 +14,9 @@ describe('Owner Doorboard', () => {
     expect(page.getPageTitle()).toEqual('Rachel Johnson');
   });
 
-  it('Should have the correct first post', async () => {
+  it('Should have the correct first note', async () => {
     page.getOwnerListItems().first();
-    expect(element(by.className('post-card')).getText()).toEqual(
+    expect(element(by.className('note-card')).getText()).toEqual(
       'I\'m going to be a few minutes late to my office hours today. I got caught in traffic this morning.');
   });
   });

client/e2e/src/doorboard.po.ts

@@ -3,7 +3,7 @@ import {browser, by, element, Key, ElementFinder} from 'protractor';
 export class DoorBoard {
   // navigates to Rachel Johnson's doorboard
   navigateTo() {
-    return browser.get('/owner/588935f57546a2daea44de7c/posts');
+    return browser.get('/owner/588935f57546a2daea44de7c/notes');
   }
 
   getUrl() {
@@ -16,6 +16,6 @@ export class DoorBoard {
   }
 
   getOwnerListItems() {
-    return element(by.className('list-of-owner-posts')).all(by.className('list-of-posts'));
+    return element(by.className('list-of-owner-notes')).all(by.className('list-of-notes'));
   }
 }

client/e2e/src/owner-list.e2e-spec.ts

@@ -79,7 +79,7 @@ describe('Owner list', () => {
 
     // When the view profile button on the first owner card is clicked, the URL should have a valid mongo ID
     const url = await page.getUrl();
-    expect(RegExp('/owner/[0-9a-fA-F]{24}/posts$', 'i').test(url)).toBe(true);
+    expect(RegExp('/owner/[0-9a-fA-F]{24}/notes$', 'i').test(url)).toBe(true);
 
   });
 

client/src/app/app-routing.module.ts

@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home/home.component';
-import { AddPostComponent } from './posts/add-post.component';
+import { AddNoteComponent } from './notes/add-note.component';
 import { OwnerListComponent } from './owners/owner-list.component';
 import { OwnerDoorBoardComponent } from './owners/owner-doorboard.component';
 import { AddOwnerComponent } from './owners/add-owner.component';
 
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
-  {path: 'owner/:id/posts/new', component: AddPostComponent},
+  {path: 'owner/:id/notes/new', component: AddNoteComponent},
   {path: 'owners', component: OwnerListComponent},
   {path: 'owners/new', component: AddOwnerComponent},
-  {path: 'owner/:id/posts', component: OwnerDoorBoardComponent}
+  {path: 'owner/:id/notes', component: OwnerDoorBoardComponent}
 ];
 
 @NgModule({

client/src/app/app.module.ts

@@ -29,8 +29,8 @@ import { HomeComponent } from './home/home.component';
 import { OwnerService } from './owners/owner.service';
 import { HttpClientModule } from '@angular/common/http';
 import { LayoutModule } from '@angular/cdk/layout';
-import { AddPostComponent } from './posts/add-post.component';
-import { PostService } from './posts/post.service';
+import { AddNoteComponent } from './notes/add-note.component';
+import { NoteService } from './notes/note.service';
 import { OwnerCardComponent } from './owners/owner-card.component';
 import { OwnerDoorBoardComponent } from './owners/owner-doorboard.component';
 import { AddOwnerComponent } from './owners/add-owner.component';
@@ -58,7 +58,7 @@ const MATERIAL_MODULES: any[] = [
   declarations: [
     AppComponent,
     HomeComponent,
-    AddPostComponent,
+    AddNoteComponent,
     OwnerListComponent,
     OwnerCardComponent,
     OwnerDoorBoardComponent,
@@ -76,7 +76,7 @@ const MATERIAL_MODULES: any[] = [
     AppRoutingModule
   ],
   providers: [
-    PostService,
+    NoteService,
     OwnerService
   ],
   bootstrap: [AppComponent]

client/src/app/posts/add-post.component.html → client/src/app/notes/add-note.component.html

@@ -1,29 +1,29 @@
 <div fxLayout="row">
   <div fxFlex fxFles.gt-sm="80" fxFlexOffset.gt-sm="10">
-    <form [formGroup]="addPostForm" (ngSubmit)="submitForm();">
-      <mat-card class="add-post-card">
+    <form [formGroup]="addNoteForm" (ngSubmit)="submitForm();">
+      <mat-card class="add-note-card">
         <mat-card-header>
-          <mat-card-title class="add-post-title">New Post</mat-card-title>
+          <mat-card-title class="add-note-title">New Note</mat-card-title>
         </mat-card-header>
           <mat-card-content fxLayout="column">
 
             <mat-form-field>
               <mat-label>Message</mat-label>
               <input matInput id="messageField" placeholder="Message" formControlName="message"
                     required>
-              <mat-error *ngFor="let validation of add_post_validation_messages.message">
+              <mat-error *ngFor="let validation of add_note_validation_messages.message">
                 <mat-error class="error-message" id="message-error"
-                      *ngIf="addPostForm.get('message').hasError(validation.type) && (addPostForm.get('message').dirty || addPostForm.get('message').touched)">
+                      *ngIf="addNoteForm.get('message').hasError(validation.type) && (addNoteForm.get('message').dirty || addNoteForm.get('message').touched)">
                     {{validation.message}}
                     </mat-error>
               </mat-error>
             </mat-form-field>
 
           </mat-card-content>
           <mat-card-actions align="end">
-            <button mat-button id="confirmAddPostButton" type="button" color="primary"
-                    [disabled]="!addPostForm.valid" type="submit">
-                    ADD POST
+            <button mat-button id="confirmAddNoteButton" type="button" color="primary"
+                    [disabled]="!addNoteForm.valid" type="submit">
+                    ADD NOTE
             </button>
           </mat-card-actions>
       </mat-card>

client/src/app/posts/add-post.component.scss → client/src/app/notes/add-note.component.scss

@@ -1,3 +1,3 @@
-.add-post-title {
+.add-note-title {
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 }

client/src/app/posts/add-post.component.spec.ts → client/src/app/notes/add-note.component.spec.ts

@@ -8,15 +8,15 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
-import { MockPostService } from 'src/testing/post.service.mock';
-import { AddPostComponent } from './add-post.component';
-import { PostService } from './post.service';
+import { MockNoteService } from 'src/testing/note.service.mock';
+import { AddNoteComponent } from './add-note.component';
+import { NoteService } from './note.service';
 
-describe('AddPostComponent', () => {
-  let addPostComponent: AddPostComponent;
-  let addPostForm: FormGroup;
+describe('AddNoteComponent', () => {
+  let addNoteComponent: AddNoteComponent;
+  let addNoteForm: FormGroup;
   let calledClose: boolean;
-  let fixture: ComponentFixture<AddPostComponent>;
+  let fixture: ComponentFixture<AddNoteComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -31,22 +31,22 @@ describe('AddPostComponent', () => {
         BrowserAnimationsModule,
         RouterTestingModule
       ],
-      declarations: [AddPostComponent],
-      providers: [{ provide: PostService, useValue: new MockPostService() }]
+      declarations: [AddNoteComponent],
+      providers: [{ provide: NoteService, useValue: new MockNoteService() }]
     }).compileComponents().catch(error => {
       expect(error).toBeNull();
     });
   }));
 
   beforeEach(() => {
     calledClose = false;
-    fixture = TestBed.createComponent(AddPostComponent);
-    addPostComponent = fixture.componentInstance;
-    addPostComponent.ngOnInit();
+    fixture = TestBed.createComponent(AddNoteComponent);
+    addNoteComponent = fixture.componentInstance;
+    addNoteComponent.ngOnInit();
     fixture.detectChanges();
-    addPostForm = addPostComponent.addPostForm;
-    expect(addPostForm).toBeDefined();
-    expect(addPostForm.controls).toBeDefined();
+    addNoteForm = addNoteComponent.addNoteForm;
+    expect(addNoteForm).toBeDefined();
+    expect(addNoteForm.controls).toBeDefined();
   });
 
   // Not terribly important; if the component doesn't create
@@ -55,21 +55,21 @@ describe('AddPostComponent', () => {
   // our component definitions don't have errors that would
   // prevent them from being successfully constructed.
   it('should create the component and form', () => {
-    expect(addPostComponent).toBeTruthy();
-    expect(addPostForm).toBeTruthy();
+    expect(addNoteComponent).toBeTruthy();
+    expect(addNoteForm).toBeTruthy();
   });
 
   // Confirms that an initial, empty form is *not* valid, so
   // people can't submit an empty form.
   it('form should be invalid when empty', () => {
-    expect(addPostForm.valid).toBeFalsy();
+    expect(addNoteForm.valid).toBeFalsy();
   });
 
   describe('The message field', () => {
     let messageControl: AbstractControl;
 
     beforeEach(() => {
-      messageControl = addPostComponent.addPostForm.controls[`message`];
+      messageControl = addNoteComponent.addNoteForm.controls[`message`];
     });
 
     it('should not allow empty messages', () => {