触发 Angular Ivy 使用 Cypress 进行更改检测

Question

我有以下 Cypress 测试：

 ...

 describe('Form filling works properly, () => {
    it.only('should enable save button with correct form', () => {
      cy.get('input[name=notiName]').type('Test data for notiName, { force: true });
      cy.get('input[name=notiEnMessageName]').type('Test data for EnMessageName', { force: true 
    });

      cy.get('.navigationContainer [data-cy=btn-save]').should('be.enabled');
    });
  });

这很好用。

但是我在表单上有第三个输入值，它是一个复杂的数据选择器，我想用它 formControl 来处理为它设置值，而不是手动编程所有需要的点击。我们暂且称formControlspecialInputFormcontrol˙吧。

所以我这样做：

 describe('New notification works properly', () => {
    it.only('should enable save button with correct form', () => {
      cy.get('input[name=notiName]').type('Test data for notiName, { force: true });
      cy.get('input[name=notiEnMessageName]').type('Test data for EnMessageName', { force: true 

      let angular;
      cy.window()
        .then((win) => angular = win.ng)
        .then(() => cy.document())
        .then((doc) => {
          cy.log('Angular component captured');
          const componentInstance = angular
            .getComponent(doc.querySelector('my-component-name'));

          componentInstance.specialInputFormcontrol.setValue("special value");

           // change detection here?
        });

      cy.get('.navigationContainer [data-cy=btn-save]').should('be.enabled');
    });
  });

我的问题是，虽然值得到更新，但由于 Angular 的引擎，我仍然需要强制更改检测标记，以应用 cahnges。

我尝试用以下代码代替 // change detection here? 部分：

  angular.applyChanges(componentInstance)

这会重置整个页面。

  angular.applyChanges(angular.getComponent([=14=]);

$0 未定义。

   angular.probe(getAllAngularRootElements()[0]).injector.get(ng.coreTokens.ApplicationRef).tick()

angular.probe 在 Ivy 中行不通。（在 angular 9 之后）

   componentInstance.injector.get(angular.coreTokens.ApplicationRef).tick();

“类型错误：无法读取未定义的属性 'get'”。

更新：

          ɵdetectChanges(componentInstance);

正如 ChrisY 指出的那样，导入后我可以调用它，但得到 TypeError: Cannot read property 'length' of null

如您所见，我查阅了一些想法，none 的工作:(

Answer 1

找到解决方案 - 应该使用 angular 调试挂钩直接在组件引用上应用更改，如下所示：

describe('New notification works properly', () => {
    it.only('should enable save button with correct form', () => {
      cy.get('input[name=notiName]').type('Test data for notiName, { force: true });
      cy.get('input[name=notiEnMessageName]').type('Test data for EnMessageName', { force: true 

      let angular;
      cy.window()
        .then((win) => angular = win.ng)
        .then(() => cy.document())
        .then((doc) => {
          cy.log('Angular component captured');
          const componentInstance = angular
            .getComponent(doc.querySelector('my-component-name'));

          componentInstance.specialInputFormcontrol.setValue("special value");

          // Change detection trigger:
          angular.applyChanges(componentInstance)

        });

      cy.get('.navigationContainer [data-cy=btn-save]').should('be.enabled');
    });
  });

触发 Angular Ivy 使用 Cypress 进行更改检测

Trigger Angular Ivy Change detection with Cypress

angular

ivy