karma jasmine - HTML Input not displayed

I am learning Karma Jasmine in Angular and in tutorials I can see HTML input like in attachement.

In my test I am not able to see this in test results.

I tried to change karma/jasmine versions to the same like in tutorial and also to the newests (6)

How can I get this tests result?

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      jasmine: {
        // you can add configuration options for Jasmine here
        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
        // for example, you can disable the random execution with `random: false`
        // or set a specific seed with `seed: 4321`
      },
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    jasmineHtmlReporter: {
      suppressAll: true // removes the duplicated traces
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage/angular-unit-test-app'),
      subdir: '.',
      reporters: [
        { type: 'html' },
        { type: 'text-summary' }
      ]
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

app.component.spec.ts

import { HttpClientModule } from '@angular/common/http';
import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { of } from 'rxjs';
import { AppRoutingModule } from '../app-routing.module';
import { StudentService } from '../student.service';

import { StudentComponent } from './student.component';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

describe('StudentComponent', () => {
  let component: StudentComponent;
  let fixture: ComponentFixture<StudentComponent>;
  let h1: HTMLElement;
  let deb: DebugElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [StudentComponent],
      providers: [StudentService],
      imports: [
        AppRoutingModule,
        HttpClientModule,
        ReactiveFormsModule,
        BrowserModule,
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(StudentComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

    h1 = fixture.nativeElement.querySelector('h1');

    deb = fixture.debugElement;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  //SPY method
  it('Spy method', () => {
    spyOn(component, 'calculate');
    component.saveData();
    expect(component.calculate).toHaveBeenCalled();
  });

  it('Spy method - 1', () => {
    spyOn(component, 'calculate').and.returnValues(10, 20);
    let result = component.studentResult();
    expect(result).toEqual('fail');
  });

  it('Spy method - 2', () => {
    let service = fixture.debugElement.injector.get(StudentService);
    spyOn(service, 'SaveDetails').and.callFake(() => {
      return of({
        result1: 200,
      });
    });

    spyOn(component, 'saveDataIntoConsol').and.stub();

    component.saveData();

    expect(component.result).toEqual({
      result1: 200,
    });
  });

  it('Verify the h1 element value', () => {
    component.studentSchoolResult();
    fixture.detectChanges();
    expect(h1.textContent).toBe(component.studentResult2);
  });

  it('Increase count click', () => {
    const h2 = deb.query(By.css('h2'));
    const btn = deb.query(By.css('#btnIncreaseNumber'));
    //sprawdzam co się stanie, gdy przycisk zostanie kliknięty
    btn.triggerEventHandler('click', {});
    fixture.detectChanges();

    expect(component.countNumber).toEqual(parseInt(h2.nativeElement.innerText));
  });

  it('call private method', () => {
    //showName jest metodą prywatną
    component['showName']();
    //name jest polem prywatnym
    expect(component['name']).toEqual('Angular Office');
  });

  it('call private method - 2', () => {
    //calculate2 jest metodą prywatną
    component['calculate2'](10, 20);
    expect(component.sum2).toEqual(30);
  });

  it('call private method with spy', () => {
    let spyName = spyOn<any>(component, 'showName');
    //showName jest metodą prywatną
    component['showName']();
    //sprawdzam, czy ta prywatna metoda jest wywoływana
    expect(spyName).toHaveBeenCalled();
  });

  it('interpolation test', () => {
    const name: HTMLElement =
      fixture.debugElement.nativeElement.querySelector('#name2');
    expect(name.innerHTML).toEqual(component.name2);

    component.name2 = 'dupa dupa';
    fixture.detectChanges();
    expect(name.innerHTML).toEqual(component.name2);
  });

  it('interpolation test for textbox', () => {
    const inputval: HTMLInputElement =
      deb.nativeElement.querySelector('#usenum');
    expect(inputval.type).toEqual(component.type);

    component.type = 'text';
    fixture.detectChanges();
    expect(inputval.type).toEqual(component.type);
  });
});