From 6bceadc1a384a24bf0f089c399ebcf0b52549802 Mon Sep 17 00:00:00 2001
From: Vipul Sharma <sharm493@morris.umn.edu>
Date: Fri, 27 Oct 2017 15:51:30 -0500
Subject: [PATCH 1/2] Fixes word wrapping issue and adds a like instance to the
 card component.

- Fixes the issue when the string in the card was larger than the width of the card.
- Added a button to render the like.
- Like button is disabled after it is clicked and the global state of total number of like of the particular card increments by 1.
- Changed the position of the button to be alligned at the end of the card.
---
 src/app/card-component/card.component.html       | 16 ++++++++++++----
 src/app/card-component/card.component.scss       | 11 +++--------
 src/app/card-component/card.component.ts         |  9 +++++++++
 src/app/card/card.ts                             |  3 ++-
 src/app/deck/deck.service.ts                     |  7 ++++---
 .../new-card-dialog/new-card-dialog.component.ts |  3 ++-
 6 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/src/app/card-component/card.component.html b/src/app/card-component/card.component.html
index 57ef4e8..2c1d4b8 100644
--- a/src/app/card-component/card.component.html
+++ b/src/app/card-component/card.component.html
@@ -1,10 +1,18 @@
 <mat-card>
-    <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    <mat-card-header>
+        <mat-card-title class="card-word">{{ card.word }}</mat-card-title>
+    </mat-card-header>
     <mat-divider></mat-divider>
     <mat-card-content>
-        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div>
-        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div>
-        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div>
+        <div class="card-synonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(1) != -1}"><div class="card-desc">Synonym:</div> <div class="card-cont">{{ card.synonym }}</div></div><br>
+        <div class="card-antonym card-line" [ngClass]="{'hint-selected': this.selected.indexOf(2) != -1}"><div class="card-desc">Antonym:</div> <div class="card-cont">{{ card.antonym }}</div></div><br>
+        <div class="card-general-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(3) != -1}"><div class="card-desc">General usage:</div> <div class="card-cont">{{ card.general_sense }}</div></div><br>
         <div class="card-example-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(4) != -1}"><div class="card-desc">Example usage:</div> <div class="card-cont">{{ card.example_usage }}</div></div>
     </mat-card-content>
+    <mat-card-actions align="end">
+        <button mat-icon-button color="primary" [disabled]="DisableButton" class="card-vote"(click)= "hitUpvote()">
+            <mat-icon>thumb_up</mat-icon>
+        </button>
+    </mat-card-actions>
+
 </mat-card>
diff --git a/src/app/card-component/card.component.scss b/src/app/card-component/card.component.scss
index 57f62c3..9d1d557 100644
--- a/src/app/card-component/card.component.scss
+++ b/src/app/card-component/card.component.scss
@@ -1,13 +1,8 @@
 .hint-selected {
     background-color: yellow;
 }
-.card-line {
-    margin-top: 5px;
-
-}
+.card-line {  margin-top: 5px; }
 .card-desc { float: left; width: 120px; }
 .card-cont { margin-left: 120px; }
-
-.card-word, .card-cont {
-    word-wrap: break-word;
-}
+.card-vote { bottom: 0; position: absolute;}
+.card-word, .card-cont {  word-wrap: break-word; }
diff --git a/src/app/card-component/card.component.ts b/src/app/card-component/card.component.ts
index 33edc26..d49464e 100644
--- a/src/app/card-component/card.component.ts
+++ b/src/app/card-component/card.component.ts
@@ -8,6 +8,8 @@ import {Card} from "../card/card";
 })
 export class CardComponent implements OnInit {
 
+    DisableButton: boolean = false;
+
   constructor() {
   }
 
@@ -18,4 +20,11 @@ export class CardComponent implements OnInit {
   ngOnInit() {
   }
 
+  hitUpvote(): number {
+      this.card.likes += 1;
+      this.DisableButton = true;
+      console.log(this.card.likes);
+      return this.card.likes;
+  }
+
 }
diff --git a/src/app/card/card.ts b/src/app/card/card.ts
index 11b0a5f..e996554 100644
--- a/src/app/card/card.ts
+++ b/src/app/card/card.ts
@@ -4,5 +4,6 @@ export interface Card {
     synonym: string,
     antonym: string,
     general_sense: string,
-    example_usage: string
+    example_usage: string,
+    likes: number;
 }
diff --git a/src/app/deck/deck.service.ts b/src/app/deck/deck.service.ts
index 9cbef7d..2e6b8cd 100644
--- a/src/app/deck/deck.service.ts
+++ b/src/app/deck/deck.service.ts
@@ -34,13 +34,14 @@ export class DeckService {
     }
 
     public addNewCard(deckID: string, word: string, synonym: string, antonym: string, general: string, example: string) {
-        const body : Card = {
+        const body: Card = {
             word: word,
             synonym: synonym,
             antonym: antonym,
             general_sense: general,
-            example_usage: example
-        }
+            example_usage: example,
+            likes: 0
+        };
         console.log(body);
 
         return this.db.doc('decks/' + deckID).collection('cards').add(body);
diff --git a/src/app/new-card-dialog/new-card-dialog.component.ts b/src/app/new-card-dialog/new-card-dialog.component.ts
index 5f831c1..5880905 100644
--- a/src/app/new-card-dialog/new-card-dialog.component.ts
+++ b/src/app/new-card-dialog/new-card-dialog.component.ts
@@ -51,7 +51,8 @@ export class NewCardDialogComponent implements OnInit {
             this.newCardSynonym,
             this.newCardAntonym,
             this.newCardGeneral,
-            this.newCardExample).then(
+            this.newCardExample,
+            ).then(
             succeeded => {
                 //this.cardAddSuccess = true;
                 this.matDialogRef.close(succeeded);

From 90d24923a93044a2c67681dc45af4a52fcca30b4 Mon Sep 17 00:00:00 2001
From: Vipul Sharma <sharm493@morris.umn.edu>
Date: Fri, 27 Oct 2017 16:58:08 -0500
Subject: [PATCH 2/2] Added tests for liking.

- Checks whether the button is getting clicked.
- Checks whether the likes are getting incremented after it is clicked.
---
 src/app/card-component/card.component.html    |  2 +-
 src/app/card-component/card.component.spec.ts | 25 ++++++++++++++++++-
 src/app/card-component/card.component.ts      |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/card-component/card.component.html b/src/app/card-component/card.component.html
index 2c1d4b8..05ae077 100644
--- a/src/app/card-component/card.component.html
+++ b/src/app/card-component/card.component.html
@@ -10,7 +10,7 @@
         <div class="card-example-usage card-line" [ngClass]="{'hint-selected': this.selected.indexOf(4) != -1}"><div class="card-desc">Example usage:</div> <div class="card-cont">{{ card.example_usage }}</div></div>
     </mat-card-content>
     <mat-card-actions align="end">
-        <button mat-icon-button color="primary" [disabled]="DisableButton" class="card-vote"(click)= "hitUpvote()">
+        <button mat-icon-button color="primary" [disabled]="DisableButton" class="card-vote"(click)= "hitLike()">
             <mat-icon>thumb_up</mat-icon>
         </button>
     </mat-card-actions>
diff --git a/src/app/card-component/card.component.spec.ts b/src/app/card-component/card.component.spec.ts
index 1d75621..3a1da71 100644
--- a/src/app/card-component/card.component.spec.ts
+++ b/src/app/card-component/card.component.spec.ts
@@ -9,6 +9,7 @@ import {Component} from "@angular/core";
 import {Card} from "../card/card";
 import {browser} from "protractor";
 
+
 describe('CardComponent', () => {
   let component: CardComponent;
   let fixture: ComponentFixture<TestComponentWrapper>;
@@ -41,7 +42,6 @@ describe('CardComponent', () => {
         expect(component.card.general_sense).toContain("test general_sense");
         expect(component.card.example_usage).toContain("test example_usage");
 
-
     });
 
      it('synonym should be highlighted', () => {
@@ -63,6 +63,28 @@ describe('CardComponent', () => {
         let synonym: HTMLElement = debugElement.query(By.css('.card-example-usage')).nativeElement;
         expect(synonym.classList).not.toContain("hint-selected");
     });
+
+    it('should check whether the button has been called', async(() => {
+        spyOn(component, 'hitLike');
+
+        let button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+
+        fixture.whenStable().then(() => {
+            expect(component.hitLike).toHaveBeenCalled();
+        })
+    }));
+    it('should increment the like by 1', async(() => {
+        spyOn(component, 'hitLike');
+
+        let button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+
+        fixture.whenStable().then(() => {
+            expect(this.likes = 1);
+        })
+    }));
+
 });
 
 @Component({
@@ -76,6 +98,7 @@ class TestComponentWrapper {
         antonym: "test antonym",
         general_sense: "test general_sense",
         example_usage: "test example_usage",
+        likes: 0
     };
 
 
diff --git a/src/app/card-component/card.component.ts b/src/app/card-component/card.component.ts
index d49464e..e9246ca 100644
--- a/src/app/card-component/card.component.ts
+++ b/src/app/card-component/card.component.ts
@@ -20,7 +20,7 @@ export class CardComponent implements OnInit {
   ngOnInit() {
   }
 
-  hitUpvote(): number {
+  hitLike(): number {
       this.card.likes += 1;
       this.DisableButton = true;
       console.log(this.card.likes);