Testing button is disabled while form is invalid

I have a template driven form

<form #submissionForm="ngForm">
    <div class="form-check" *ngFor="let choice of question.choices">
        <input
          ngModel
          required
          class="form-check-input"
          type="checkbox"
          value=""
          name="questionChoices[]"
          id="choice-"
        >
        <label class="form-check-label" for="choice-">
          
        </label>
      </div>
    <button
      [disabled]="submissionForm.invalid"
      type="submit"
      class="btn btn-primary">
     </button>

And then a test:

it('should disable submit button until form is valid', () => {
    fixture = TestBed.createComponent(QuestionComponent);
    component = fixture.componentInstance;
    component.question = mockData.question[0].multipleChoice;
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('[type="submit"]').disabled).toBeTruthy();
});

My test fails with Error: Expected false to be truthy.

This works fine when actually running the app and visiting the page but when debugging via Karma in browser I see that the button is not disabled. Is something wrong with my code or my test? (or both?)