Ks89/angular-modal-gallery

View on GitHub
projects/ks89/angular-modal-gallery/src/lib/components/current-image/loading-spinner/loading-spinner.component.spec.ts

Summary

Maintainability
F
2 wks
Test Coverage
/*
 * Copyright (C) 2017-2021 Stefano Cappa
 *
 * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { LoadingSpinnerComponent } from './loading-spinner.component';
import { AccessibilityConfig } from '../../../model/accessibility.interface';
import { LoadingConfig, LoadingType } from '../../../model/loading-config.interface';
import { KS_DEFAULT_ACCESSIBILITY_CONFIG } from '../../accessibility-default';

let comp: LoadingSpinnerComponent;
let fixture: ComponentFixture<LoadingSpinnerComponent>;

const CUSTOM_ACCESSIBILITY: AccessibilityConfig = Object.assign({}, KS_DEFAULT_ACCESSIBILITY_CONFIG);
CUSTOM_ACCESSIBILITY.loadingSpinnerAriaLabel = 'custom loadingSpinnerAriaLabel';
CUSTOM_ACCESSIBILITY.loadingSpinnerTitle = 'custom loadingSpinnerTitle';

const VISIBLE_CONFIG: LoadingConfig[] = [
  {enable: true, type: LoadingType.STANDARD},
  {enable: true, type: LoadingType.BARS},
  {enable: true, type: LoadingType.CIRCULAR},
  {enable: true, type: LoadingType.DOTS},
  {enable: true, type: LoadingType.CUBE_FLIPPING},
  {enable: true, type: LoadingType.CIRCLES},
  {enable: true, type: LoadingType.EXPLOSING_SQUARES}
];

function initTestBed(): void {
  TestBed.configureTestingModule({
    declarations: [LoadingSpinnerComponent]
  });
}

describe('LoadingSpinnerComponent', () => {
  beforeEach(() => {
    initTestBed();
    fixture = TestBed.createComponent(LoadingSpinnerComponent);
    comp = fixture.componentInstance;
  });

  it('should instantiate it', () => expect(comp).not.toBeNull());

  describe('---YES---', () => {
    VISIBLE_CONFIG.forEach((loadingConfig: LoadingConfig, i: number) => {
      it(`should display loading spinner with default accessibility config. Test i=${i}`, () => {
        comp.loadingConfig = loadingConfig;
        comp.accessibilityConfig = KS_DEFAULT_ACCESSIBILITY_CONFIG;
        fixture.detectChanges();

        const element: DebugElement = fixture.debugElement;
        const spinnerContainer: DebugElement = element.query(By.css('div'));
        expect(spinnerContainer).not.toBeUndefined();
        expect(spinnerContainer.name).toBe('div');
        expect(spinnerContainer.attributes['aria-label']).toBe(KS_DEFAULT_ACCESSIBILITY_CONFIG.loadingSpinnerAriaLabel);
        expect(spinnerContainer.properties.title).toBe(KS_DEFAULT_ACCESSIBILITY_CONFIG.loadingSpinnerTitle);

        switch (loadingConfig.type) {
          case LoadingType.STANDARD:
            const cssLoadLoader: DebugElement = element.query(By.css('div.cssload-loader'));
            expect(cssLoadLoader).not.toBeUndefined();
            expect(cssLoadLoader.name).toBe('div');
            const cssloadInner1: DebugElement = element.query(By.css('div.cssload-inner.cssload-one'));
            expect(cssloadInner1).not.toBeUndefined();
            expect(cssloadInner1.name).toBe('div');
            const cssloadInner2: DebugElement = element.query(By.css('div.cssload-inner.cssload-two'));
            expect(cssloadInner2).not.toBeUndefined();
            expect(cssloadInner2.name).toBe('div');
            const cssloadInner3: DebugElement = element.query(By.css('div.cssload-inner.cssload-three'));
            expect(cssloadInner3).not.toBeUndefined();
            expect(cssloadInner3.name).toBe('div');
            break;
          case LoadingType.DOTS:
            const dotsSpinner: DebugElement = element.query(By.css('div.loader-dots'));
            expect(dotsSpinner).not.toBeUndefined();
            expect(dotsSpinner.name).toBe('div');
            break;
          case LoadingType.CIRCULAR:
            const circularSpinner: DebugElement = element.query(By.css('div.loader-circular'));
            expect(circularSpinner).not.toBeUndefined();
            expect(circularSpinner.name).toBe('div');
            break;
          case LoadingType.BARS:
            const barsSpinner: DebugElement = element.query(By.css('div.loader-bars'));
            expect(barsSpinner).not.toBeUndefined();
            expect(barsSpinner.name).toBe('div');
            break;
          case LoadingType.CUBE_FLIPPING:
            const cubeFlippingSpinner: DebugElement = element.query(By.css('div.cube-wrapper'));
            expect(cubeFlippingSpinner).not.toBeUndefined();
            expect(cubeFlippingSpinner.name).toBe('div');
            const cssCubeFolding: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding'));
            expect(cssCubeFolding).not.toBeUndefined();
            expect(cssCubeFolding.name).toBe('div');
            const cssLeaf1: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding >.leaf1'));
            expect(cssLeaf1).not.toBeUndefined();
            expect(cssLeaf1.name).toBe('span');
            const cssLeaf2: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding >.leaf2'));
            expect(cssLeaf2).not.toBeUndefined();
            expect(cssLeaf2.name).toBe('span');
            const cssLeaf3: DebugElement = element.query(By.css('div.cube-wrapper> div.cube-folding >.leaf3'));
            expect(cssLeaf3).not.toBeUndefined();
            expect(cssLeaf3.name).toBe('span');
            break;
          case LoadingType.CIRCLES:
            const circlesSpinner: DebugElement = element.query(By.css('#preloader'));
            expect(circlesSpinner).not.toBeUndefined();
            expect(circlesSpinner.name).toBe('div');
            const cssLoader: DebugElement = element.query(By.css('#loader'));
            expect(cssLoader).not.toBeUndefined();
            expect(cssLoader.name).toBe('div');
            break;
          case LoadingType.EXPLOSING_SQUARES:
            const explosingSquaresSpinner: DebugElement = element.query(By.css('div.loader'));
            expect(explosingSquaresSpinner).not.toBeUndefined();
            expect(explosingSquaresSpinner.name).toBe('div');
            explosingSquaresSpinner.children.forEach((el: DebugElement) => {
              expect(el.name).toBe('span');
            });
            break;
        }
      });
    });

    VISIBLE_CONFIG.forEach((loadingConfig: LoadingConfig, i: number) => {
      it(`should display loading spinner with CUSTOM accessibility config. Test i=${i}`, () => {
        comp.loadingConfig = loadingConfig;
        comp.accessibilityConfig = CUSTOM_ACCESSIBILITY;
        fixture.detectChanges();

        const element: DebugElement = fixture.debugElement;
        const spinnerContainer: DebugElement = element.query(By.css('div'));
        expect(spinnerContainer).not.toBeUndefined();
        expect(spinnerContainer.name).toBe('div');
        expect(spinnerContainer.attributes['aria-label']).toBe(CUSTOM_ACCESSIBILITY.loadingSpinnerAriaLabel);
        expect(spinnerContainer.properties.title).toBe(CUSTOM_ACCESSIBILITY.loadingSpinnerTitle);

        switch (loadingConfig.type) {
          case LoadingType.STANDARD:
            const cssLoadLoader: DebugElement = element.query(By.css('div.cssload-loader'));
            expect(cssLoadLoader).not.toBeUndefined();
            expect(cssLoadLoader.name).toBe('div');
            const cssloadInner1: DebugElement = element.query(By.css('div.cssload-inner.cssload-one'));
            expect(cssloadInner1).not.toBeUndefined();
            expect(cssloadInner1.name).toBe('div');
            const cssloadInner2: DebugElement = element.query(By.css('div.cssload-inner.cssload-two'));
            expect(cssloadInner2).not.toBeUndefined();
            expect(cssloadInner2.name).toBe('div');
            const cssloadInner3: DebugElement = element.query(By.css('div.cssload-inner.cssload-three'));
            expect(cssloadInner3).not.toBeUndefined();
            expect(cssloadInner3.name).toBe('div');
            break;
          case LoadingType.DOTS:
            const dotsSpinner: DebugElement = element.query(By.css('div.loader-dots'));
            expect(dotsSpinner).not.toBeUndefined();
            expect(dotsSpinner.name).toBe('div');
            break;
          case LoadingType.CIRCULAR:
            const circularSpinner: DebugElement = element.query(By.css('div.loader-circular'));
            expect(circularSpinner).not.toBeUndefined();
            expect(circularSpinner.name).toBe('div');
            break;
          case LoadingType.BARS:
            const barsSpinner: DebugElement = element.query(By.css('div.loader-bars'));
            expect(barsSpinner).not.toBeUndefined();
            expect(barsSpinner.name).toBe('div');
            break;
          case LoadingType.CUBE_FLIPPING:
            const cubeFlippingSpinner: DebugElement = element.query(By.css('div.cube-wrapper'));
            expect(cubeFlippingSpinner).not.toBeUndefined();
            expect(cubeFlippingSpinner.name).toBe('div');
            const cssCubeFolding: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding'));
            expect(cssCubeFolding).not.toBeUndefined();
            expect(cssCubeFolding.name).toBe('div');
            const cssLeaf1: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding >.leaf1'));
            expect(cssLeaf1).not.toBeUndefined();
            expect(cssLeaf1.name).toBe('span');
            const cssLeaf2: DebugElement = element.query(By.css('div.cube-wrapper > div.cube-folding >.leaf2'));
            expect(cssLeaf2).not.toBeUndefined();
            expect(cssLeaf2.name).toBe('span');
            const cssLeaf3: DebugElement = element.query(By.css('div.cube-wrapper> div.cube-folding >.leaf3'));
            expect(cssLeaf3).not.toBeUndefined();
            expect(cssLeaf3.name).toBe('span');
            break;
          case LoadingType.CIRCLES:
            const circlesSpinner: DebugElement = element.query(By.css('#preloader'));
            expect(circlesSpinner).not.toBeUndefined();
            expect(circlesSpinner.name).toBe('div');
            const cssLoader: DebugElement = element.query(By.css('#loader'));
            expect(cssLoader).not.toBeUndefined();
            expect(cssLoader.name).toBe('div');
            break;
          case LoadingType.EXPLOSING_SQUARES:
            const explosingSquaresSpinner: DebugElement = element.query(By.css('div.loader'));
            expect(explosingSquaresSpinner).not.toBeUndefined();
            expect(explosingSquaresSpinner.name).toBe('div');
            explosingSquaresSpinner.children.forEach((el: DebugElement) => {
              expect(el.name).toBe('span');
            });
            break;
        }
      });
    });
  });
});