[Radiobutton group] check won't work if uncheck hasn't been called on other options

[psantus]

My test case: I have a radiobutton group, with two options:
"allStatus" or "inProgressStatus"

The following test will fail

    it('should update criteria model when changing criteria', () => {
      // Given
      loadTester();

      // When
      tester.inProgressStatus.check();
      tester.allStatus.uncheck();

      // Then
      expect(tester.componentInstance.form.getRawValue()).toEqual({
        inProgress: 'true'
      });
    });

while the following (just inverting uncheck/check) will pass

    it('should update criteria model when changing criteria', () => {
      // Given
      loadTester();

      // When
      tester.allStatus.uncheck();
      tester.inProgressStatus.check();

      // Then
      expect(tester.componentInstance.form.getRawValue()).toEqual({
        inProgress: 'true'
      });
    });

(thanks for this great library by the way)

[cexbrayat]

👋 Hi Paul!

Could you provide a small repro or the component with unit test that reproduces the issue so we can investigate?

I suspect it might be more from how you set up your test than something weird with ngx-speculoos itself, as it just checks the input and emits the change event as you can see:

ngx-speculoos/projects/ngx-speculoos/src/lib/test-input.ts

Lines 43 to 57 in b2e77d6

	/**
	* Checks the wrapped input, then dispatches an event of type change and triggers a change detection
	*/
	check() {
	this.nativeElement.checked = true;
	this.dispatchEventOfType('change');
	}
	/**
	* Unchecks the wrapped input, then dispatches an event of type change and triggers a change detection
	*/
	uncheck() {
	this.nativeElement.checked = false;
	this.dispatchEventOfType('change');
	}

[psantus]

Hi Cedric

Thanks for your responsiveness!

If you still have access to our repo, I slacked you a link to the affected file.

Not sure how much I should extract to give you the relevant info

[cexbrayat]

I don't think I have. You can create a new CLI application with just one component and a failing test reproducing the issue (I'm sure someone from the team can help you :) ) and push the application to Github, and we'll take a look.

[jnizet]

Suspecting that this is about ng-bootstrap buttons, I tried to reproduce the issue using the following complete minimal example, but could not: the tests pass fine.

Closing due to lack of feedback.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TestBed } from '@angular/core/testing';
import { ComponentTester } from 'ngx-speculoos';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  template: `
    <form [formGroup]="form">
      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="foo">
        <label ngbButtonLabel class="btn-primary">
          <input id="a" ngbButton type="radio" value="a"> A
        </label>
        <label ngbButtonLabel class="btn-primary">
          <input id="b" ngbButton type="radio" value="b"> B
        </label>
      </div>
    </form>
  `
})
class TestComponent {
  form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      foo: ['a']
    });
  }
}

describe('test', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, NgbModule],
      declarations: [TestComponent]
    });
  })

  it('should work', () => {
    const tester = new ComponentTester<TestComponent>(TestComponent);
    tester.detectChanges();

    expect(tester.input('#a')).toBeChecked();
    expect(tester.input('#b')).not.toBeChecked();

    tester.input('#b').check();

    expect(tester.input('#a')).not.toBeChecked();
    expect(tester.input('#b')).toBeChecked();
  });
});