core/templates/base-components/base-content.component.spec.ts - develop - githubmirror/oppia

core/templates/base-components/base-content.component.spec.ts
320 строк11 KB
Sheron Jayasinghe
Fix #18495: Display the title of the exploration being edited. (#26492)
08 июл 2026, 11:32
08 июл 2026, 11:32703b7c0
// Copyright 2019 The Oppia Authors. All Rights Reserved.
//
// 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.

/**
 * @fileoverview Tests for the Base Transclusion Component.
 */

import {DOCUMENT} from '@angular/common';
import {EventEmitter, NO_ERRORS_SCHEMA} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {NavigationEnd, Router} from '@angular/router';
import {AppConstants} from 'app.constants';
import {LimitToPipe} from 'filters/limit-to.pipe';
import {CookieModule, CookieService} from 'ngx-cookie';
import {Observable, of} from 'rxjs';
import {BottomNavbarStatusService} from 'services/bottom-navbar-status.service';
import {UrlService} from 'services/contextual/url.service';
import {WindowRef} from 'services/contextual/window-ref.service';
import {KeyboardShortcutService} from 'services/keyboard-shortcut.service';
import {LoaderService} from 'services/loader.service';
import {PageTitleService} from 'services/page-title.service';
import {SidebarStatusService} from 'services/sidebar-status.service';
import {BackgroundMaskService} from 'services/stateful/background-mask.service';
import {MockTranslatePipe} from 'tests/unit-test-utils';
import {BaseContentComponent} from './base-content.component';
import {PlatformFeatureService} from 'services/platform-feature.service';
import {I18nLanguageCodeService} from 'services/i18n-language-code.service';

class MockPlatformFeatureService {
  status = {
    NewLessonPlayer: {
      isEnabled: false,
    },
  };
}

describe('Base Content Component', () => {
  // This corresponds to Fri, 21 Nov 2014 09:45:00 GMT.
  const NOW_MILLIS = 1416563100000;
  const ONE_YEAR_FROM_NOW_MILLIS = 1448099100000;
  let fixture: ComponentFixture<BaseContentComponent>;
  let componentInstance: BaseContentComponent;
  let isIframed: boolean = false;
  let hostname: string = '';
  let href: string = 'test_href';
  let pathname: string = 'test_pathname';
  let search: string = 'test_search';
  let hash: string = 'test_hash';
  let backgroundMaskService: BackgroundMaskService;
  let bottomNavbarStatusService: BottomNavbarStatusService;
  let mockPlatformFeatureService = new MockPlatformFeatureService();
  let windowRef: WindowRef;
  let loaderService: LoaderService;
  let urlService: UrlService;
  let keyboardShortcutService: KeyboardShortcutService;
  let sidebarStatusService: SidebarStatusService;
  let cookieService: CookieService;
  let i18nLanguageCodeService: I18nLanguageCodeService;
  let oldDate = Date;

  class MockUrlService {
    isIframed(): boolean {
      return isIframed;
    }

    getPathname(): string {
      return '/lesson/123';
    }
  }

  class MockLoaderService {
    onLoadingMessageChange: Observable<string> = of('Test Message');
  }

  // We are mocking Router service to return the NavigationEnd object,
  // so that we can test the routing event in our base component.
  class MockRouteService {
    public events: Observable<NavigationEnd> = of(
      new NavigationEnd(0, 'http://localhost:8181', 'http://localhost:8181')
    );
  }

  class MockWindowRef {
    nativeWindow = {
      location: {
        hostname: hostname,
        href: href,
        pathname: pathname,
        search: search,
        hash: hash,
      },
      document: {
        addEventListener(event: string, callback: () => void) {
          callback();
        },
      },
    };
  }

  class MockPageTitleService {
    getNavbarTitleForMobileView(): string {
      return 'Page Title';
    }

    getNavbarSubtitleForMobileView(): string {
      return 'Page Subtitle';
    }
  }

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [CookieModule.forRoot()],
      declarations: [BaseContentComponent, MockTranslatePipe, LimitToPipe],
      providers: [
        {
          provide: Router,
          useClass: MockRouteService,
        },
        {
          provide: PlatformFeatureService,
          useValue: mockPlatformFeatureService,
        },
        {
          provide: WindowRef,
          useClass: MockWindowRef,
        },
        {
          provide: UrlService,
          useClass: MockUrlService,
        },
        BackgroundMaskService,
        BottomNavbarStatusService,
        KeyboardShortcutService,
        {
          provide: LoaderService,
          useClass: MockLoaderService,
        },
        {
          provide: PageTitleService,
          useClass: MockPageTitleService,
        },
        SidebarStatusService,
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BaseContentComponent);
    componentInstance = fixture.componentInstance;
    loaderService = TestBed.inject(LoaderService);
    loaderService = loaderService as jasmine.SpyObj<LoaderService>;
    urlService = TestBed.inject(UrlService);
    keyboardShortcutService = TestBed.inject(KeyboardShortcutService);
    keyboardShortcutService =
      keyboardShortcutService as jasmine.SpyObj<KeyboardShortcutService>;
    windowRef = TestBed.inject(WindowRef);
    windowRef = windowRef as jasmine.SpyObj<WindowRef>;
    sidebarStatusService = TestBed.inject(SidebarStatusService);
    sidebarStatusService =
      sidebarStatusService as jasmine.SpyObj<SidebarStatusService>;
    bottomNavbarStatusService = TestBed.inject(BottomNavbarStatusService);
    bottomNavbarStatusService =
      bottomNavbarStatusService as jasmine.SpyObj<BottomNavbarStatusService>;
    backgroundMaskService = TestBed.inject(BackgroundMaskService);
    backgroundMaskService =
      backgroundMaskService as jasmine.SpyObj<BackgroundMaskService>;
    cookieService = TestBed.inject(CookieService);
    i18nLanguageCodeService = TestBed.inject(I18nLanguageCodeService);
  });

  afterEach(() => {
    componentInstance.ngOnDestroy();
  });

  it('should create', () => {
    expect(componentInstance).toBeDefined();
  });

  it('should initiaize', () => {
    spyOn(keyboardShortcutService, 'bindNavigationShortcuts');
    windowRef.nativeWindow.location.hostname = 'oppiaserver.appspot.com';
    componentInstance.ngOnInit();
    expect(componentInstance.loadingMessage).toEqual('Test Message');
    expect(keyboardShortcutService.bindNavigationShortcuts).toHaveBeenCalled();
    expect(componentInstance.iframed).toEqual(isIframed);
    expect(componentInstance.getHeaderText()).toEqual('Page Title');
    expect(componentInstance.getSubheaderText()).toEqual('Page Subtitle');
    expect(componentInstance.getSubheaderText).toBeDefined();
    expect(windowRef.nativeWindow.location.href).toEqual(
      'https://oppiatestserver.appspot.com' + pathname + search + hash
    );
  });

  it('should return true for isNewLessonPlayerEnabled when feature is enabled and pathname includes lesson', () => {
    mockPlatformFeatureService.status.NewLessonPlayer.isEnabled = true;
    spyOn(urlService, 'getPathname').and.returnValue('/lesson/123');
    const result = componentInstance.isNewLessonPlayerEnabled();
    expect(result).toBe(true);
  });

  it('should get sidebar status', () => {
    spyOn(sidebarStatusService, 'isSidebarShown').and.returnValue(false);
    expect(componentInstance.isSidebarShown()).toBe(false);
    expect(sidebarStatusService.isSidebarShown).toHaveBeenCalled();
  });

  it('should get bottom navbar status', () => {
    spyOn(bottomNavbarStatusService, 'isBottomNavbarEnabled').and.returnValue(
      false
    );
    expect(componentInstance.isBottomNavbarShown()).toBe(false);
    expect(bottomNavbarStatusService.isBottomNavbarEnabled).toHaveBeenCalled();
  });

  it('should close sidebar on swipe', () => {
    spyOn(sidebarStatusService, 'closeSidebar');
    componentInstance.closeSidebarOnSwipe();
    expect(sidebarStatusService.closeSidebar).toHaveBeenCalled();
  });

  it('should toggle mobile nav options', () => {
    componentInstance.mobileNavOptionsAreShown = false;
    componentInstance.toggleMobileNavOptions();
    expect(componentInstance.mobileNavOptionsAreShown).toBe(true);
  });

  it('should get background mask status', () => {
    spyOn(backgroundMaskService, 'isMaskActive').and.returnValue(false);
    expect(componentInstance.isBackgroundMaskActive()).toBe(false);
    expect(backgroundMaskService.isMaskActive).toHaveBeenCalled();
  });

  it('should skip to main content', () => {
    let document = TestBed.inject(DOCUMENT);
    let dummyElement = document.createElement('div');
    spyOn(document, 'getElementById').and.returnValue(dummyElement);
    componentInstance.skipToMainContent();
    expect(dummyElement.tabIndex).toEqual(-1);
  });

  it('should throw error when there is no main content', () => {
    let document = TestBed.inject(DOCUMENT);
    spyOn(document, 'getElementById').and.returnValue(null);
    expect(componentInstance.skipToMainContent).toThrowError(
      'Variable mainContentElement is null.'
    );
  });

  it('should show the cookie banner if there is no cookie set', () => {
    spyOn(cookieService, 'get').and.returnValue('');
    expect(componentInstance.hasAcknowledgedCookies()).toBe(false);
  });

  it(
    'should show the cookie banner if a cookie exists but the policy has ' +
      'been updated',
    () => {
      spyOn(cookieService, 'get').and.returnValue(
        String(AppConstants.COOKIE_POLICY_LAST_UPDATED_MSECS - 100000)
      );
      expect(componentInstance.hasAcknowledgedCookies()).toBe(false);
    }
  );

  it('should not show the cookie banner if a valid cookie exists', () => {
    spyOn(cookieService, 'get').and.returnValue(
      String(AppConstants.COOKIE_POLICY_LAST_UPDATED_MSECS + 100000)
    );
    expect(componentInstance.hasAcknowledgedCookies()).toBe(true);
  });

  it('should be able to acknowledge cookies', () => {
    spyOn(window, 'Date')
      .withArgs()
      .and.returnValue(new oldDate(NOW_MILLIS))
      .withArgs(ONE_YEAR_FROM_NOW_MILLIS)
      .and.callThrough();
    spyOn(cookieService, 'put');
    componentInstance.acknowledgeCookies();
    expect(cookieService.put).toHaveBeenCalledWith(
      'OPPIA_COOKIES_ACKNOWLEDGED',
      String(NOW_MILLIS),
      {
        expires: new oldDate(ONE_YEAR_FROM_NOW_MILLIS),
        secure: true,
        sameSite: 'none',
      }
    );
  });

  it('should initialize isRtl and update it when language direction changes', () => {
    spyOn(i18nLanguageCodeService, 'isCurrentLanguageRTL').and.returnValues(
      true,
      false
    );
    const changeEmitter = new EventEmitter<string>();
    spyOnProperty(
      i18nLanguageCodeService,
      'onI18nLanguageCodeChange'
    ).and.returnValue(changeEmitter);

    componentInstance.ngOnInit();
    expect(componentInstance.isRtl).toBe(true);

    changeEmitter.emit('en');
    expect(componentInstance.isRtl).toBe(false);
  });
});