🐞 - Integration Tests failing #2474

nicolashzmor · 2022-08-26T09:57:32Z

Which @taiga-ui/* package(s) are the source of the bug?

core, kit, cdk

Please provide a link to a minimal reproduction of the bug

No response

Is this issue blocking you?

Blocking

Description

I am having lots of problems with integration tests.

Is there a prefered way to work with tests when using Taiga Components? Is Integration tests out of the table?

This is an example:
Having the following files

<form
  [formGroup]="featureDefinitionForm"
>
  <tui-input formControlName="featurePurpose">
    Feature purpose
    <input data-testid="feature-purpose__input" tuiTextfield type="text">
  </tui-input>
  <tui-text-area [expandable]="true" data-testid="feature-brief" formControlName="featureBrief">
  </tui-text-area>
</form>

@Component({
  selector: 'the-factory-feature-request-form',
  templateUrl: './feature-request-form.component.html',
  styleUrls: ['./feature-request-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FeatureRequestFormComponent {
  featureDefinitionForm = new FormGroup({
    featurePurpose: new FormControl(),
    featureBrief: new FormControl(),
  })
}

@Component({
  selector: 'the-factory-test-taiga-wrapper',
  template:
    '<tui-root><the-factory-feature-request-form></the-factory-feature-request-form></tui-root>',
})
class TestTaigaWrapperComponent {}

describe(FeatureRequestFormComponent.name, () => {
  
  let fixture: ComponentFixture<FeatureRequestFormComponent>
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TestTaigaWrapperComponent, FeatureRequestFormComponent],
      imports: [
        TuiRootModule,
        ReactiveFormsModule,
        TuiInputModule,
        TuiTextAreaModule,
      ],
    })
    fixture = TestBed.createComponent(TestTaigaWrapperComponent)
  })
  
  describe('when defining the feature brief', () => {
    it('should be able to define the feature brief', async () => {
      const textareaWrapper = fixture.debugElement.query(
        By.css('[data-testid=feature-brief] textarea')
      )
      expect(textareaWrapper).toBeTruthy()
    })
  })
})

I get the following error:

TypeError: this.cssRef.supports is not a function

      at new TuiScrollbarComponent (../../../node_modules/@taiga-ui/core/bundles/@taiga-ui/core/components/scrollbar/scrollbar.component.ts:40:22)
      at NodeInjectorFactory.TuiScrollbarComponent_Factory [as factory] (../../../node_modules/@taiga-ui/core/bundles/@taiga-ui/core/components/scrollbar/scrollbar.component.ts:27:52)
      at getNodeInjectable (../../../node_modules/@angular/core/fesm2020/core.mjs:3516:44)
      at instantiateAllDirectives (../../../node_modules/@angular/core/fesm2020/core.mjs:12726:27)
      at createDirectivesInstances (../../../node_modules/@angular/core/fesm2020/core.mjs:12150:5)
      at Object.ɵɵelementStart (../../../node_modules/@angular/core/fesm2020/core.mjs:15384:9)
      at TuiTextAreaComponent_Template (../../../node_modules/@taiga-ui/kit/bundles/taiga-ui-kit-components-text-area.umd.js:543:16)
      at executeTemplate (../../../node_modules/@angular/core/fesm2020/core.mjs:12121:9)
      at renderView (../../../node_modules/@angular/core/fesm2020/core.mjs:11921:13)
      at renderComponent (../../../node_modules/@angular/core/fesm2020/core.mjs:13129:5)
      at renderChildComponents (../../../node_modules/@angular/core/fesm2020/core.mjs:11780:9)
      at renderView (../../../node_modules/@angular/core/fesm2020/core.mjs:11946:13)
      at renderComponent (../../../node_modules/@angular/core/fesm2020/core.mjs:13129:5)
      at renderChildComponents (../../../node_modules/@angular/core/fesm2020/core.mjs:11780:9)
      at renderView (../../../node_modules/@angular/core/fesm2020/core.mjs:11946:13)
      at ComponentFactory.create (../../../node_modules/@angular/core/fesm2020/core.mjs:13970:13)
      at initComponent (../../../node_modules/@angular/core/fesm2015/testing.mjs:26363:51)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Object.onInvoke (../../../node_modules/@angular/core/fesm2020/core.mjs:26378:33)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at NgZone.run (../../../node_modules/@angular/core/fesm2020/core.mjs:26232:28)
      at TestBedRender3.createComponent (../../../node_modules/@angular/core/fesm2015/testing.mjs:26366:41)
      at Function.createComponent (../../../node_modules/@angular/core/fesm2015/testing.mjs:26187:37)
      at ../../../node_modules/@testing-library/angular/fesm2020/testing-library-angular.mjs:171:20
      at fulfilled (../../../node_modules/@testing-library/angular/fesm2020/testing-library-angular.mjs:61:24)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at ../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1326:38
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:443:35)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3861:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invokeTask (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:442:64)
      at Zone.Object.<anonymous>.Zone.runTask (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:214:51)
      at drainMicroTaskQueue (../../../node_modules/zone.js/bundles/zone-testing-bundle.umd.js:632:39)

Angular version

14.1.1

Taiga UI version

2.60.0

Which browsers have you used?

Chrome
Firefox
Safari
Edge

Which operating systems have you used?

waterplea · 2022-08-26T12:34:44Z

Are you using Jest in your testing? If so, make sure you check out this little newly added guide:
https://taiga-ui.dev/testing/jest

nicolashzmor · 2022-08-26T12:48:30Z

Hey @waterplea, thanks for your answer. I've followed that guide already. Doesn't seem to fix the issue.

splincode · 2022-08-26T12:51:15Z

try

import {CSS} from '@ng-web-apis/common';

beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TestTaigaWrapperComponent, FeatureRequestFormComponent],
      imports: [
        TuiRootModule,
        ReactiveFormsModule,
        TuiInputModule,
        TuiTextAreaModule,
      ],
      providers: [
        { provide: CSS, useValue: MY_MOCK_CSS }
      ]
    })
    fixture = TestBed.createComponent(TestTaigaWrapperComponent)
  })

nicolashzmor · 2022-08-26T18:35:38Z

@splincode no luck with that fix... anyhow, it seems really obscure, right?

So far, my decision was to rely on cypress for behavioral tests, where I never had a problem with Taiga, and leave Jest for Unit Testing, using mocks to avoid these issues. Not sure if it's a good approach, but I like this library, although it is giving too many headaches so far with testing.

nicolashzmor · 2022-08-26T18:38:55Z

Another usual error I encounter is You need to run with a version of node that supports ES Modules in the VM API.
It happened to me when using the tui-editor

It works perfectly on :serve but with Jest I've tried many to solve that issue, but as I am also working with Nx, is more difficult to hijack the Node configuration… and using esm-transformers didn't work either.

nicolashzmor · 2022-08-26T18:40:24Z

If you don't feel like investigating this, it is okay to close it. I took an alternative path because it was making me lose too much time and in the end, I just want to test that my app behaves as I want to, which I can do with cypress.

waterplea · 2022-08-27T10:02:36Z

If you don't feel like investigating this, it is okay to close it. I took an alternative path because it was making me lose too much time and in the end, I just want to test that my app behaves as I want to, which I can do with cypress.

So it works with cypress and your original issue was with Jest? We plan to switch on Jest ourselves in the future, so we would probably bundle some sort of jest-setup to kick-start testing. Let's keep this issue open for now.

nicolashzmor · 2022-08-27T10:06:48Z

That's right. It does work with cypress, so I have a way to test it.

Count me in if I can help with that research. :)

Thanks for the answers anyway.

nicolashzmor added bug labels Aug 26, 2022

splincode added dev-infra P3 This issue has low priority and removed bug labels Aug 28, 2022

splincode mentioned this issue Aug 29, 2022

fix(core): prevent injection conflict with CSS global interface #2508

Merged

11 tasks

splincode self-assigned this Aug 29, 2022

splincode closed this as completed in #2508 Aug 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐞 - Integration Tests failing #2474

🐞 - Integration Tests failing #2474

nicolashzmor commented Aug 26, 2022 •

edited

Loading

waterplea commented Aug 26, 2022 •

edited

Loading

nicolashzmor commented Aug 26, 2022

splincode commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

waterplea commented Aug 27, 2022

nicolashzmor commented Aug 27, 2022

🐞 - Integration Tests failing #2474

🐞 - Integration Tests failing #2474

Comments

nicolashzmor commented Aug 26, 2022 • edited Loading

Which @taiga-ui/* package(s) are the source of the bug?

Please provide a link to a minimal reproduction of the bug

Is this issue blocking you?

Description

Angular version

Taiga UI version

Which browsers have you used?

Which operating systems have you used?

waterplea commented Aug 26, 2022 • edited Loading

nicolashzmor commented Aug 26, 2022

splincode commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

nicolashzmor commented Aug 26, 2022

waterplea commented Aug 27, 2022

nicolashzmor commented Aug 27, 2022

nicolashzmor commented Aug 26, 2022 •

edited

Loading

waterplea commented Aug 26, 2022 •

edited

Loading