How to test component with multiple pipes in it?

Question

In i have the following components : and the output is quite easy

Base on list of students - i want to mark who pass and who not - that's according to s threshold service... getRanges() 45 - Fail Sat Jul 15 2023 48 - Fail Sat Jul 15 2023 77 - Pass Sat Jul 15 2023

My goal in the test is to check if passed / failed values got the correct class - not - i have not idea where to begin since i'm newbie to unit testing - but i guess i need to do the following parts - like include the pipes and and the services .... any help will appreciate.

import { ComponentFixture, TestBed } from '@angular/core/testing';

import {StudentCardComponent} from '../../../app/components/student-card/student- 
card.component';

describe('StudentCardComponent', () => {
let component: StudentCardComponent;
let fixture: ComponentFixture<StudentCardComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
  declarations: [ StudentCardComponent ]
})
.compileComponents();
});

beforeEach(() => {
  fixture = TestBed.createComponent(StudentCardComponent);
  component = fixture.componentInstance;
   fixture.detectChanges();
});

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

code