Angular Unit Test - How to SpyOn a mock for angularfire delete()

I'm trying to test a simple delete function on a service.

  deleteCharacter(id: string) {
    const characterCollectionRef = this.afs.collection<character>('users/' + this.authService.liveUid + '/Characters/');
    return characterCollectionRef.doc(id).delete()
  }

If I run the following test with the actual spy and expectation commented out, the test finishes without error leading me to believe that my mock is working correctly.

If I uncomment the spy and expect lines however, i get an error that characterCollectionRef.doc is not a function. I've tried several different variations, but they all have some sort of issue. I'm obviously missing something here on the best way to write a spy and an assertion for this.

  it('deleteCharacter works', () => {

    AngularFirestoreMock.collection.and.returnValue({
      doc: function () {
        return { delete: function () {
          return Promise.resolve()
         } }
      }
    })

     // const spy = spyOn(AngularFirestoreMock.collection.doc, 'delete')

    service.deleteCharacter('id')

    // expect(spy).toHaveBeenCalled()


  });

We can declare the function to test delete and the containing object as a separate property, then we can easily test this newly created property.

it('deleteCharacter works', () => {
  const deleteObj = {
    delete: function () {
      return Promise.resolve();
    },
  };

  AngularFirestoreMock.collection.and.returnValue({
    doc: function () {
      return deleteObj;
    }
  })
  const spy = spyOn(deleteObj, 'delete');
  component.deleteCharacter('id');
  expect(spy).toHaveBeenCalled();
});