Decorators in test fail to compile

[eiswind]

Describe the Bug

When I use a decorator in a test, it fails to map the file.

[TestLocator]: Failed to get tests from spec file /home/thomas/projects/schulung/bulletin-board/src/app/registration/user-registration/password-toggle/password-toggle.directive.spec.ts: SyntaxError: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (5:0)

Steps to Reproduce the Behavior

it('shows a decorator', () => {

  
    @serializable
    class APIPayload {
        getValue(): Payload {
            return 0
        }
    }

    type Payload = number
   
    type ClassConstructor<T> = new(...args: any[]) => T

    function serializable<T extends ClassConstructor<{
        getValue(): Payload 
    }>>(Constructor: T) {

        return class extends Constructor {  
            serialize() {
                return this.getValue().toString()
            }
        }
    }

  })

Describe the Expected Behavior

U expect the test to be mapped.

• Node Version: 16
• VS Code Version: 1.70.1
• Karma Version: 6.4
• Frameworks: (e.g. Angular, Jasmine, Mocha) Angular, Jasmine

[eiswind]

Another Example that fails to be mapped with the same message is this one:

@Component({
  template: `<input [appPasswordToggle]="passwordVisible"/>`
})
class TestComponent {
  passwordVisible : boolean = false;
}

describe('PasswordToggleDirective', () => {
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    fixture = TestBed.configureTestingModule({
      declarations: [PasswordToggleDirective, TestComponent]
    }).createComponent(TestComponent);

    fixture.detectChanges();
  });

  it('should be type text when set true, type password when set to false', () => {

    const parameters = [
      { visible: true, expectedType: 'text'},
      { visible: false, expectedType: 'password'},
    ]

    parameters.forEach((parameter)=>{
      fixture.componentInstance.passwordVisible = parameter.visible;
      fixture.detectChanges();
      const input = fixture.debugElement.query(By.css('input'));
      const type = input.nativeElement.getAttribute('type');
      expect(type).toBe(parameter.expectedType);
    })
  });
});

[lucono]

The decorators-legacy babel parser plugin has to be enabled for parsing the syntax in that test source. Given there are many possible plugins to support various syntaxes that may appear in test files, one solution could be adding a new extension setting that allows specifying additional plugins to enable for the test parser:

"karmaTestExplorer.enabledSupplementalParserPlugins": [ "decorators-legacy" ]

Is that a solution you think would work well for your case? Any other proposals you think would be worth considering?

[eiswind]

Having decorators in angular tests is quite common at least at my side. I could live with the suggested solution as it will be open to other plugins.

[lucono]

Ok, perhaps it makes sense to enable it by default. Do you know if decorators-legacy will cover all cases of decorators, or should that be decorators instead?

[eiswind]

I don't know, sorry.

[lucono]

Try out the fix in the beta branch to confirm if it resolves the issue. You can use the vsix from the CI build, or build it yourself from the beta branch.

[eiswind]

It did parse the tests with decorators successfully.

[lucono]

Released in v0.7.4