Skip to content

Flush on TestOperation does not work if Query Document contains a Fragment #2356

Open
@reicheltp

Description

@reicheltp

Describe the bug

The ApolloTestingController removes all flushed fields, which are described in a fragment.

To Reproduce

Having the following query:

query GetBenefitOptions {
  benefits {
    ...BenefitOption
  }
}

fragment BenefitOption on Benefit {
  __typename
  id
  description

  price {
    price
  }
}

and code in the component:

public readonly options$: Observable<BenefitOptionFragment[]> = this.getBenefitOptions.watch().valueChanges.pipe(
    map((result) => result.data.benefits),
    tap((val) => console.log(JSON.stringify(val)))
  );

I am doing the following test case:

// The change of the inputs should trigger the query
    const op: TestOperation<GetBenefitOptionsQuery> = controller.expectOne(GetBenefitOptionsDocument);

    // Mock the GraphQL response
    op.flushData({
      __typename: 'Query',
      benefits: [
        {
          __typename: 'PrivateBenefit',
          id: 'benefit-1' as BenefitID,
          description: 'Basic Cleaning',
          price: { price: 50 },
        },
        {
          __typename: 'PrivateBenefit',
          id: 'benefit-2' as BenefitID,
          description: 'Premium Cleaning',
          price: { price: 100 },
        },
        {
          __typename: 'PrivateBenefit',
          id: 'benefit-3' as BenefitID,
          description: 'Deep Cleaning',
          price: { price: 150 },
        },
      ],
    });

The component logs:

[{}, {}, {}]

Changing the query to not using a fragment

query GetBenefitOptions($filter: BenefitsFilterInput!) {
  benefits {
    __typename
    id
    description

    price {
      price
    }
  }
}

let the component produce the expected output

[{"__typename":"PrivateBenefit","id":"benefit-1","description":"Basic Cleaning","price":{"price":50}},{"__typename":"PrivateBenefit","id":"benefit-2","description":"Premium Cleaning","price":{"price":100}},{"__typename":"PrivateBenefit","id":"benefit-3","description":"Deep Cleaning","price":{"price":150}}]

Expected behavior

TestingController will also work with fragments.

Environment:

├── @angular/[email protected]
├── @angular/[email protected] overridden
├── @apollo/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Additional context

Using Karma to execute the tests.

Benefit is an interface.

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions