Writing unit tests with mocking services is a typical Angular approach for isolating the component under test from external dependencies like services. This allows you to test the component in isolation while focusing on its behavior. Here's a step-by-step approach for creating a unit test case using a mocked service in Angular using Jasmine and TestBed:

Assume you have a component named MyComponent that depends on a service called MyService. We'll build a dummy for MyService and use it during the test.
Create a component (my.component.ts).

// my.component.ts
import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my',
  template: '<div>{{ data }}</div>',
})
export class MyComponent implements OnInit {
  data: string;

  constructor(private myService: MyService) {}

  ngOnInit(): void {
    this.data = this.myService.getData();
  }
}

Create the Service (my.service.ts)

// my.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  getData(): string {
    return 'Hello from MyService!';
  }
}

Create the Unit Test (my.component.spec.ts)
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myServiceMock: jasmine.SpyObj<MyService>;

  beforeEach(() => {
    // Create a spy object for the service
    myServiceMock = jasmine.createSpyObj('MyService', ['getData']);

    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [{ provide: MyService, useValue: myServiceMock }],
    });

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
  });

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

  it('should set data from service', () => {
    // Configure the spy behavior
    myServiceMock.getData.and.returnValue('Mocked data');

    // Trigger ngOnInit
    component.ngOnInit();

    // Check if the data property has the expected value
    expect(component.data).toBe('Mocked data');
  });
});

In this example, we use the jasmine.createSpyObj function to generate a spy object for the MyService class. We then use the TestBed.configureTestingModule function to incorporate this dummy service into the testing module. The beforeEach function configures the testing module, creates a component fixture, and creates a component instance.

In the second test, we configure the spy to return a specified value when the getData function is called, and then we execute the component's ngOnInit method to verify its behavior. This is a basic example, and you may need to modify it for your own use case. Remember that Angular testing can include more advanced situations like testing asynchronous code, working with forms, and interacting with the DOM.