alfresco-ng2-components/lib/core/card-view/components/card-view-boolitem/card-view-boolitem.component.spec.ts

/*!
 * @license
 * Copyright 2016 Alfresco Software, Ltd.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { HttpClientModule } from '@angular/common/http';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '../../../material.module';
import { MatCheckboxChange, MatCheckbox } from '@angular/material';
import { By } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { AppConfigService } from '../../../app-config/app-config.service';
import { CardViewUpdateService } from '../../services/card-view-update.service';
import { LogService } from '../../../services/log.service';
import { TranslateLoaderService } from '../../../services/translate-loader.service';

import { CardViewBoolItemComponent } from './card-view-boolitem.component';
import { CardViewBoolItemModel } from '../../models/card-view-boolitem.model';

describe('CardViewBoolItemComponent', () => {

    let fixture: ComponentFixture<CardViewBoolItemComponent>;
    let component: CardViewBoolItemComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                FormsModule,
                NoopAnimationsModule,
                MaterialModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLoaderService
                    }
                })
            ],
            declarations: [
                CardViewBoolItemComponent
            ],
            providers: [
                AppConfigService,
                CardViewUpdateService,
                LogService
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(CardViewBoolItemComponent);
        component = fixture.componentInstance;
        component.property = new CardViewBoolItemModel({
            label: 'Boolean label',
            value: true,
            key: 'boolkey',
            default: false,
            editable: false
        });
    });

    afterEach(() => {
        fixture.destroy();
        TestBed.resetTestingModule();
    });

    describe('Rendering', () => {

        it('should render the label and value if the property is editable', () => {
            component.editable = true;
            component.property.editable = true;
            fixture.detectChanges();

            let label = fixture.debugElement.query(By.css('.adf-property-label'));
            expect(label).not.toBeNull();
            expect(label.nativeElement.innerText).toBe('Boolean label');

            let value = fixture.debugElement.query(By.css('.adf-property-value'));
            expect(value).not.toBeNull();
        });

        it('should NOT render the label and value if the property is NOT editable and doesn\'t have a proper boolean value set' , () => {
            component.editable = true;
            component.property.value = undefined;
            component.property.editable = false;
            fixture.detectChanges();

            let label = fixture.debugElement.query(By.css('.adf-property-label'));
            expect(label).toBeNull();

            let value = fixture.debugElement.query(By.css('.adf-property-value'));
            expect(value).toBeNull();
        });

        it('should render the label and value if the property is NOT editable but has a proper boolean value set' , () => {
            component.editable = true;
            component.property.value = false;
            component.property.editable = false;
            fixture.detectChanges();

            let label = fixture.debugElement.query(By.css('.adf-property-label'));
            expect(label).not.toBeNull();

            let value = fixture.debugElement.query(By.css('.adf-property-value'));
            expect(value).not.toBeNull();
        });

        it('should render ticked checkbox if property\'s value is true', () => {
            component.property.value = true;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.checked).toBe(true);
        });

        it('should render ticked checkbox if property\'s value is not set but default is true and editable', () => {
            component.editable = true;
            component.property.editable = true;
            component.property.value = undefined;
            component.property.default = true;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.checked).toBe(true);
        });

        it('should render unticked checkbox if property\'s value is false', () => {
            component.property.value = false;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.checked).toBe(false);
        });

        it('should render unticked checkbox if property\'s value is not set but default is false and editable', () => {
            component.editable = true;
            component.property.editable = true;
            component.property.value = undefined;
            component.property.default = false;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.checked).toBe(false);
        });

        it('should render enabled checkbox if property and component are both editable', () => {
            component.editable = true;
            component.property.editable = true;
            component.property.value = true;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.hasAttribute('disabled')).toBe(false);
        });

        it('should render disabled checkbox if property is not editable', () => {
            component.editable = true;
            component.property.editable = false;
            component.property.value = true;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.hasAttribute('disabled')).toBe(true);
        });

        it('should render disabled checkbox if component is not editable', () => {
            component.editable = false;
            component.property.editable = true;
            component.property.value = true;
            fixture.detectChanges();

            let value = fixture.debugElement.query(By.css('.adf-property-value input[type="checkbox"]'));
            expect(value).not.toBeNull();
            expect(value.nativeElement.hasAttribute('disabled')).toBe(true);
        });
    });

    describe('Update', () => {

        beforeEach(() => {
            component.editable = true;
            component.property.editable = true;
            component.property.value = undefined;
            fixture.detectChanges();
        });

        it('should trigger the update event when changing the checkbox', () => {
            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
            spyOn(cardViewUpdateService, 'update');

            component.changed(<MatCheckboxChange> {checked: true});

            expect(cardViewUpdateService.update).toHaveBeenCalledWith(component.property, true);
        });

        it('should update the propery\'s value after a changed', async(() => {
            component.property.value = true;

            component.changed(<MatCheckboxChange> {checked: false});

            fixture.whenStable().then(() => {
                expect(component.property.value).toBe(false);
            });
        }));

        it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
            const cardViewUpdateService = TestBed.get(CardViewUpdateService);
            component.property.value = false;
            fixture.detectChanges();

            cardViewUpdateService.itemUpdated$.subscribe(
                (updateNotification) => {
                    expect(updateNotification.target).toBe(component.property);
                    expect(updateNotification.changed).toEqual({ boolkey: true });
                    done();
                }
            );

            const labelElement = fixture.debugElement.query(By.directive(MatCheckbox)).nativeElement.querySelector('label');
            labelElement.click();
        });
    });
});