- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 Angular 分量 l
@Component({
selector: 'aas-add-option',
templateUrl: './add-option-modal.component.html',
styleUrls: ['./add-option-modal.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
有表格组
this.formBuilder.group({
newOptionInput: new FormControl('', [
Validators.required,
Validators.maxLength(150),
Validators.pattern(this.htmlPattern),
]),
newOptionHint: new FormControl(''),
});
==============================
<vt-modal-footer>
<button
vtButton
ot-auto-id="AAResultsAddModalCancelButton"
[disabled]="isLoading"
(click)="closeModal()"
>
{{ 'Cancel' | translate }}
</button>
<button
vtButton
color="neutral"
class="slds-m-right_medium"
ot-auto-id="AAResultsAddModalSaveAndAddAnotherButton"
[disabled]="
!optionsForm?.get('newOptionInput').value?.trim() ||
!optionsForm?.get('newOptionInput').valid <--HERE BUTTON DISABLED CHECK
"
(click)="onSaveAndAddAnother()"
>
{{ 'SaveAndAddAnother' | translate }}
</button>
<button
vtButton
color="primary"
*ngIf="!isLoading"
ot-auto-id="AAResultsAddModalSaveButton"
[disabled]="
!optionsForm?.get('newOptionInput').value?.trim() || <--HERE BUTTON DISABLED CHECK
!optionsForm?.get('newOptionInput').valid
"
(click)="addOption(true)"
>
{{ 'Save' | translate }}
</button>
</vt-modal-footer>
规范
fit('should saveNewOptionButton and saveAndAddAnotherButton should get enabled, when the value is set in input', () => {
const saveNewOptionButtonElement = fixture.debugElement.query(
By.css('button[ot-auto-id="AAResultsAddModalSaveButton"]')
);
const saveAndAddAnotherButtonElement = fixture.debugElement.query(
By.css('button[ot-auto-id="AAResultsAddModalSaveAndAddAnotherButton"]')
);
//fixture.nativeElement.querySelector('[ot-auto-id="AAResultsNewOptionInput"]').value = 'ravi'; // basically I want to test, by setting like this.
component.optionsForm.controls.newOptionInput.setValue('ravi'); //trying this too
fixture.detectChanges();
expect(component.optionsForm.valid).toBeTruthy(); <- got failed
expect(saveNewOptionButtonElement.nativeElement.disabled).toBe(false); <- got failed
// expect(saveAndAddAnotherButtonElement.nativeElement.disabled).toBe(false); <- got failed
});
现在我需要通过将值设置为输入 DOM 来对 Formcontrol 进行单元测试,并期望按钮被启用,因为该值是在规范中设置的,
changeDetection: ChangeDetectionStrategy.OnPush
从@Component 开始,一切正常,但我希望更改检测策略位于组件上。
changeDetection: ChangeDetectionStrategy.OnPush
以及我应该进行哪些更改以使其在我的规范中工作
最佳答案
在测试中使用 OnPush 组件时,您应该注意 fixture.detectChanges()
不会在 undeflying 组件的 View 上触发更改检测,而是在主机 View 上触发。
为了纠正这种行为,您可以像这样获取实际组件的 changeDetector:
// fixture.changeDetectorRef.markForCheck();
const cdRef = fixture.componentRef.injector.get(ChangeDetectorRef);
cdRef.detectChanges();
关于javascript - 当组件被标记为 ChangeDetectionStrategy.OnPush 时,单元测试失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64376162/
我有两个组件,都设置为 OnPush。调用 getAccount() 后,父组件将 accountLoading 设置为 true,然后在调用完成后将 accountLoading 设置为 false
我正在尝试衡量变化检测策略的性能差异。 我已经添加了 Angular 分析器,并使用 Default 检查,然后将 onPush 添加到我们的大多数组件,这些是结果:(开发模式) 默认:{ msPer
我不明白为什么子组件的更改检测会在这种情况下运行: import { Component, ChangeDetectionStrategy } from '@angular/core' @Compon
我不明白为什么子组件的更改检测会在这种情况下运行: import { Component, ChangeDetectionStrategy } from '@angular/core' @Compon
最好的使用方法是什么OnPush更改检测可以使更改灵活并且在测试中也非常简单?通过各种教程,我发现可以使用 OnPush : 首先是在 View 中直接使用服务中的可观察对象,我不确定该方法是否有效。
可能是我误解了 Angular changeDetection 策略。 这里是描述: 我有 2 个同级组件(S1 和 S2) 将这两个组件都视为显示一些图形数据的小部件 加载时,我想一开始就在两个
我正在编写一个 Angular 2 应用程序,出于性能原因,我尝试在所有地方使用 ChangeDetectionStrategy.OnPush。我有一个复杂的组件需要 OnPush 才能顺利工作,其中
我有一个看起来像这样的子组件: @Component({ selector: 'app-child', changeDetection: ChangeDetectionStrategy.OnP
我正在尝试熟悉 Angular 2 的 ChangeDetectionStrategy.OnPush 性能提升(如 here 所述)。但我这里有古玩盒。 我有父 AppComponent: @Comp
我正在构建一个包含许多组件的 Angular 4 应用程序,其中 ChangeDetectionStrategy 是 OnPush。同时the Angular Documentation on the
我是否应该始终在我的组件中使用 ChangeDetectionStrategy.OnPush? 我总是听说 OnPush 非常棒,它解决了很多问题,加快了 Angular 应用程序的速度,甚至摆脱了
我有一个数据表组件 ( angular2-data-table) 项目,我们将项目从 Angular 的传统变化检测更改为 OnPush 以优化渲染速度。 实现新的变更检测策略后,当数据对象发生突变(
我有一个使用服务提交一些数据的组件。 该组件使用 ChangeDetectionStrategy.OnPush ,但发生了一些奇怪的事情: 当请求 成功 : next回调被调用,formStatus更
正如标题所说:我正在处理一个非常大的项目,而且我使用过的组件很少 ChangeDetectionStrategy.OnPush以免表现不佳。我想知道,将策略的每个组件都放入“好”,以防万一,使用 Ch
我在理解 Angular OnPush 检测策略时遇到问题。当我执行一些异步操作时(例如从 TS 打开覆盖,这样就不会导致使用 OnPush 策略检测组件上的更改),然后我单击任意位置,或调用其他检测
我想在使用 OnPush 变化检测策略上传之前预览多张图片。 我试试这个 https://stackblitz.com/edit/angular-mnltiv 当我添加 OnPush 时它停止工作,我
我有一个使用 ngFor 显示子组件列表的父组件。我注意到随着 child 数量的增加,性能变得非常糟糕,所以我将两者都更改为 OnPush 更改检测策略。 这很有帮助,但仍然有一些情况会变慢,我可以
https://stackblitz.com/edit/angular-xpamld 问题:有人能帮我理解为什么我的原型(prototype)的 changeDetection: ChangeDete
当我们使用默认策略时,这些家伙可以触发变更检测(当然除了输入参数): 用户事件 计时器 ajax 响应 但是。当您切换到 OnPush 策略 时,它仅由事件 触发并且不适用于计时器和 http。 所以
@Component({ selector: "parent", template: ``, changeDetection: ChangeDetectionStrategy.
我是一名优秀的程序员,十分优秀!