Skip to content

Fix: banner showing Fixed when switching entity #461

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timotheeguerin merged 5 commits into from
Jun 15, 2017
Merged

Fix: banner showing Fixed when switching entity #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f98b45
Fix banner showing Fixed when switching entity
timotheeguerin Jun 14, 2017
88aa58d
Merge branch 'master' into fix/banner-fix-message
timotheeguerin Jun 14, 2017
4e2925b
Fix tslint
timotheeguerin Jun 14, 2017
a0cab4e
Merge branch 'master' into fix/banner-fix-message
timotheeguerin Jun 15, 2017
a035e58
fix async problem in tests
timotheeguerin Jun 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions app/components/base/banner/banner.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, ContentChildren, Directive, Input, OnChanges, QueryList } from "@angular/core";
import { Observable } from "rxjs";
import { Observable, Subscription } from "rxjs";

export enum ErrorState {
Error,
Expand Down Expand Up @@ -68,8 +68,16 @@ export class BannerComponent implements OnChanges {

public showOtherFixes = false;

/**
* Subscription when listening to the fixing method observable
*/
private _fixingSub: Subscription;

public ngOnChanges(inputs) {
this.state = ErrorState.Error;
if (this._fixingSub) {
this._fixingSub.unsubscribe();
}
}

public triggerFix(otherFix?: BannerOtherFixDirective) {
Expand All @@ -78,7 +86,7 @@ export class BannerComponent implements OnChanges {
const fixMethod = otherFix ? otherFix.fix : this.fix;
const fixObs = fixMethod();
if (fixObs) {
fixObs.subscribe(() => {
this._fixingSub = fixObs.subscribe(() => {
this._markFixed();
});
} else {
Expand Down
81 changes: 53 additions & 28 deletions test/app/components/base/banner/banner.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Component, DebugElement, NO_ERRORS_SCHEMA, ViewChild } from "@angular/core";
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { ComponentFixture, TestBed, fakeAsync } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { AsyncSubject } from "rxjs";

import { BannerComponent, BannerOtherFixDirective } from "app/components/base/banner";
import { mouseenter } from "test/utils/helpers";

@Component({
template: `
<bl-banner #banner [fix]="fix1" fixMessage="Main fix" [type]="type">
<bl-banner #banner [fix]="fix1" fixMessage="Main fix" [type]="type" [id]="bannerId">
<div code>Error 404</div>
<div message>Page not found</div>
<div details *ngIf="includeDetails">You got to look carefully where you go</div>
Expand All @@ -24,16 +25,18 @@ export class BannerTestComponent {
public includeOtherFixes = false;
public type = "error";

public bannerId = "id-1";

public fix1: jasmine.Spy;
public fix2: jasmine.Spy;
public fix3: jasmine.Spy;
}

describe("BannerComponent", () => {
let fixture: ComponentFixture<BannerTestComponent>;
let component: BannerTestComponent;
let bannerElement: DebugElement;
let bannerComponent: BannerComponent;
let testComponent: BannerTestComponent;
let de: DebugElement;
let component: BannerComponent;

beforeEach(() => {
TestBed.configureTestingModule({
Expand All @@ -43,25 +46,25 @@ describe("BannerComponent", () => {

TestBed.compileComponents();
fixture = TestBed.createComponent(BannerTestComponent);
component = fixture.componentInstance;
component.fix1 = jasmine.createSpy("Fix 1");
component.fix2 = jasmine.createSpy("Fix 2");
component.fix3 = jasmine.createSpy("Fix 3");
testComponent = fixture.componentInstance;
testComponent.fix1 = jasmine.createSpy("Fix 1");
testComponent.fix2 = jasmine.createSpy("Fix 2");
testComponent.fix3 = jasmine.createSpy("Fix 3");
fixture.detectChanges();
bannerElement = fixture.debugElement.query(By.css("bl-banner"));
bannerComponent = bannerElement.componentInstance;
de = fixture.debugElement.query(By.css("bl-banner"));
component = de.componentInstance;
});

it("should be of error type by default", () => {
expect(bannerComponent.type).toBe("error");
expect(bannerElement.query(By.css("md-card")).nativeElement.className).toContain("error");
expect(component.type).toBe("error");
expect(de.query(By.css("md-card")).nativeElement.className).toContain("error");
});

it("should be of warning type when changed", () => {
component.type = "warning";
testComponent.type = "warning";
fixture.detectChanges();
expect(bannerComponent.type).toBe("warning");
expect(bannerElement.query(By.css("md-card")).nativeElement.className).toContain("warning");
expect(component.type).toBe("warning");
expect(de.query(By.css("md-card")).nativeElement.className).toContain("warning");
});

describe("When there is details", () => {
Expand All @@ -70,26 +73,26 @@ describe("BannerComponent", () => {
});

it("should not show the more fixes button", () => {
expect(bannerElement.query(By.css(".other-fixes-btn"))).toBeNull();
expect(de.query(By.css(".other-fixes-btn"))).toBeNull();
});

it("should not have the carret on facing left", () => {
const carretEl = bannerElement.query(By.css(".caret"));
const carretEl = de.query(By.css(".caret"));
expect(carretEl).not.toBe(null);
expect(carretEl.classes["fa-caret-left"]).toBe(true);
expect(carretEl.classes["fa-caret-down"]).toBe(false);
});

it("should show details after you click", () => {
bannerElement.query(By.css(".summary-container")).nativeElement.click();
de.query(By.css(".summary-container")).nativeElement.click();
expect(fixture.componentRef.instance.banner.showDetails).toBe(true);
});

it("carret change when you click", () => {
bannerElement.query(By.css(".summary-container")).nativeElement.click();
de.query(By.css(".summary-container")).nativeElement.click();
fixture.detectChanges();

const carretEl = bannerElement.query(By.css(".caret"));
const carretEl = de.query(By.css(".caret"));
expect(carretEl).not.toBe(null);
expect(carretEl.classes["fa-caret-left"]).toBe(false);
expect(carretEl.classes["fa-caret-down"]).toBe(true);
Expand All @@ -103,36 +106,58 @@ describe("BannerComponent", () => {
});

it("should not have the carret", () => {
const carretEl = bannerElement.query(By.css(".caret"));
const carretEl = de.query(By.css(".caret"));
expect(carretEl).toBe(null);
});

it("clicking should not do anything", () => {
bannerElement.query(By.css(".summary-container")).nativeElement.click();
de.query(By.css(".summary-container")).nativeElement.click();
expect(fixture.componentRef.instance.banner.showDetails).toBe(false);
});
});

describe("when there is other fixes", () => {
beforeEach(() => {
component.includeOtherFixes = true;
testComponent.includeOtherFixes = true;
fixture.detectChanges();
});

it("should show the more fixes button", () => {
expect(bannerElement.query(By.css(".other-fixes-btn"))).not.toBeNull();
expect(bannerElement.query(By.css(".other-fixes"))).toBeNull();
expect(de.query(By.css(".other-fixes-btn"))).not.toBeNull();
expect(de.query(By.css(".other-fixes"))).toBeNull();
});

it("should list other fixes when mouse over the more fixes button", () => {
mouseenter(bannerElement.query(By.css(".other-fixes-btn")));
mouseenter(de.query(By.css(".other-fixes-btn")));
fixture.detectChanges();
const otherFixesEl = bannerElement.query(By.css(".other-fixes"));
const otherFixesEl = de.query(By.css(".other-fixes"));
expect(otherFixesEl).not.toBeNull();
const els = otherFixesEl.queryAll(By.css(".other-fix"));
expect(els.length).toBe(2);
expect(els[0].nativeElement.textContent).toContain("Second fix");
expect(els[1].nativeElement.textContent).toContain("Third fix");
});
});

describe("when switching id after clicking fix it", () => {
let subject;
beforeEach(() => {
subject = new AsyncSubject();
testComponent.fix1 = (() => subject) as any;
fixture.detectChanges();
component.triggerFix();
fixture.detectChanges();
expect(de.query(By.css(".quick-fix-btn-container .btn")).nativeElement.textContent).toContain("Fixing");
});

it("should not show the fixed message", fakeAsync(() => {
testComponent.bannerId = "id-2";
fixture.detectChanges();
expect(de.query(By.css(".quick-fix-btn-container .btn")).nativeElement.textContent).toContain("Main fix");
subject.next(true);
subject.complete();
expect(de.query(By.css(".quick-fix-btn-container .btn")).nativeElement.textContent)
.toContain("Main fix", "Should still be Main fix after fix observable resolve");
}));
});
});