How to test if a method retrieves data in Jasmine + Angular14

Question

As part of my job, I am working on an Angular project using v14, but im pretty new with unit testing with Jasmine.

My problem is that I need to test if a custom autocomplete component (which we created and is working as it should) is retrieving a list of objects that it requires, and i can't figure it out how to do it.

I will provide all my code and then what I've tried.

component.ts:

getFooList(): void {
    this.optionsFoo =
      this.foobar?.map((bar) => {
        return {
          label: bar.property ?? '',
          value: bar
        }
      }) ?? []
    this.optionsFooToDisplay = this.optionsFoo 
  }

The optionsFooToDisplay variable is an array of objects which look like this:

Option<FOO>[]

Option interface:

export interface Option<T> {
  label: string
  value: T
}

FOO interface:

export interface FOO {
  foo1?: string
  foo2?: string
  foo3?: string
  foo4?: string
  foo5?: string
  foo6?: string
}

And this is what I've tried so far: component.spec.ts:

it('should retrieve list of foos', () => {
    const mockFoo: Option<FOO> =
      [
        {
          label: 'foooo',
          value: {
            foo1: '69420',
            foo2: 'baaaar',
            foo3: 'AA',
            foo4: 'BBBBB',
            foo5: 'CC',
            foo6: 'DDDDDD'
          }
        }
      ] ?? []
    expect(component.optionsFooToDisplay).toContain(mockFoo)
  })

And finally, this is the error that VSCode shows:

Type '{ label: string; value: { foo1: string; foo2: string; foo3: string; foo4: string; foo5: string; foo6: string; }; }[]' is missing the following properties from type 'Option<FOO>': label, value

I'm stuck there and I don't know how to develop that properly.

Answer 1

Right now your issue has nothing to do with jasmine, it's a simple type error in this part of your spec:

    const mockFoo: Option<FOO> =
      [
        {
          label: 'foooo',
          value: {
            foo1: '69420',
            foo2: 'baaaar',
            foo3: 'AA',
            foo4: 'BBBBB',
            foo5: 'CC',
            foo6: 'DDDDDD'
          }
        }
      ] ?? []

you're assigning an array to mockFoo but giving it the type Option<FOO>. you need to remove the enclosing brackets and just make it an regular Object. The following should work:

it('should retrieve list of foos', () => {
    const mockFoo: Option<FOO> = {
          label: 'foooo',
          value: {
            foo1: '69420',
            foo2: 'baaaar',
            foo3: 'AA',
            foo4: 'BBBBB',
            foo5: 'CC',
            foo6: 'DDDDDD'
          }
        }

    expect(component.optionsFooToDisplay).toContain(mockFoo)
  })

`