How to mock observable and geter from injected mocked service

I'm new to testing and I'm already lost.

I have a service, which I want to test:

animation.service.ts

... 
public constructor(private animationStateService: AnimationStateService,
                   frameStateService: FrameStateService) {
     frameStateService.changedAvailableFrames
            .pipe(
                ...
                // Some code in pipe
                ...
            )
            ).subscribe(() => {
                ...
                // Some code in subscribe
                ...
            }
        ) }

public start(): void {

    this.animationStateService.changeStatus(AnimationStatus.Preloading);
    this.preloaderService.preloadAllFrames()
        .subscribe(
            () => {
                this.run();
            }
        ); 
}
...

The injected services:

frame-state.service.ts

@Injectable()
export class FrameStateService {

private changedAvailableFramesSubject: Subject<LayerId> = new Subject();
public changedAvailableFrames: Observable<LayerId> = this.changedAvailableFramesSubject.asObservable();

public constructor() {}
...

animation-state.service.ts

@Injectable()
export class AnimationStateService {

public get status(): AnimationStatus { return this.state.animation.status; }
...

In my tests I want to mock the changedAvailableFrames from FrameStateService and also the status from AnimationStateService.

What I already did:

animation.service.spec.ts

describe("AnimationService", () => {

    let animationService: SpyObj<AnimationService>;
    let animationStateService: SpyObj<AnimationStateService>;
    let frameStateService: SpyObj<FrameStateService>;

    beforeEach(() => {

        const spyFrameStateService = createSpyObj("FrameStateService", [""]);
        const spyAnimationStateService = createSpyObj("AnimationStateService", ["changeStatus", "status"]);

        TestBed.configureTestingModule({
        providers: [
            AnimationService,
            {provide: FrameService, useValue: spyFrameService},
            {provide: AnimationStateService, useValue: spyAnimationStateService},
            ]
        });

    animationService = TestBed.get(AnimationService);
    animationStateService = TestBed.get(AnimationStateService);
    frameStateService = TestBed.get(FrameStateService);

    frameStateService.changedAvailableFrames.and.returnValue(of());

    });

    it("Should call changeStatus", () => {

    // Arrange
    animationStateService.status.and.returnValue(AnimationStatus.Stopped);

    // Act
    animationService.start();

    // Assert
    expect(animationStateService.changeStatus).toHaveBeenCalled();
   });

})

The errors what I got:

TypeError: Cannot read property 'pipe' of undefined

TypeError: Cannot read property 'status' of undefined

At this point I'm totally lost and I don't know how to proceed.