@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-test',
  template: `
    <div data-testid="number" [class.active]="activeField === 'number'">Number</div>
    <div data-testid="holder" [class.active]="activeField === 'holder'">Holder</div>
    <div data-testid="expiry" [class.active]="activeField === 'expiry'">Expiry</div>
    <div data-testid="cvv" [class.active]="activeField === 'cvv'">CVV</div>
  `,
})
export class TestComponent {
  @Input() activeField: string;
}

//////// Test file

async function setup() {
  const { rerender } = await render(TestComponent);
  const numberHtmlElementRef = screen.getByTestId('number');
  const holderHtmlElementRef = screen.getByTestId('holder');
  const expiryHtmlElementRef = screen.getByTestId('expiry');
  const cvvHtmlElementRef = screen.getByTestId('cvv');

  return {
    numberHtmlElementRef,
    holderHtmlElementRef,
    expiryHtmlElementRef,
    cvvHtmlElementRef,
    rerender,
  } as const;
}

describe(TestComponent.name, () => {
  test('someDescription', async () => {
    const {
      numberHtmlElementRef,
      holderHtmlElementRef,
      expiryHtmlElementRef,
      cvvHtmlElementRef,
      rerender,
    } = await setup();

    rerender({ activeField: 'number' });
    expect(numberHtmlElementRef).toHaveClass('active');
    rerender({ activeField: 'holder' });
    expect(holderHtmlElementRef).toHaveClass('active');
    rerender({ activeField: 'expiry' });
    expect(expiryHtmlElementRef).toHaveClass('active');
    rerender({ activeField: 'cvv' });
    expect(cvvHtmlElementRef).toHaveClass('active');
  });
}