angular 在Image onload事件中设置信号失败,出现NG0600错误,

68bkxrlz  于 6个月前  发布在  Angular
关注(0)|答案(3)|浏览(44)

哪个@angular/*包是bug的来源?

core

这是一次回归吗?

是的

描述

大家好
我目前正在尝试对我的图像裁剪组件进行测试。在那里,我有以下方法:

loadImage(file: File, fn?: () => void) {
        this._primaryAreaWidth = this.config().width;
        this._primaryAreaHeight = this.config().height;

        this._currentLoadConfig = file;

        // const src = normalizeSVG(file);

        const img = createHtmlImg(file);

        const cropEvent = { ...this.config() } as ImgCropperEvent;

        img.onload = () => {
            this._imgLoaded(img);
            this._positionImg(cropEvent, fn);
            this.isLoadedImg.set(true);
            this.cd.markForCheck();
        };
    }

the createHtmlImg 函数看起来像这样:

function createHtmlImg(src: File): HTMLImageElement {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.src = URL.createObjectURL(src);
    return img;
}```

The test throwing the error looks like this:
```ts
it('should emit ready event when image is loaded', () => {
        global.Image = jest.fn().mockImplementation(() => ({
            onerror: jest.fn(),
            src: '',
            set onload(value: () => void) {
                value();
            },
        }));

        let ready;

        spectator.output('ready').subscribe((output) => (ready = output));

        spectator.setInput(
            'image',
            new File(
                [
                    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII',
                ],
                'filename.png',
                { type: 'image/png' },
            ),
        );

        expect(ready).not.toBe(undefined);
    });

有人知道为什么下面的问题会发生吗?

请提供一个链接,指向最小复现bug的情况

  • 无响应*

请提供您看到的异常或错误

ERROR RuntimeError: NG0600: Writing to signals is not allowed in a `computed` or an `effect` by default. Use `allowSignalWrites` in the `CreateEffectOptions` to enable this inside effects.
        at /Users/nicolaric/projects/akenza-ui/node_modules/@angular/core/fesm2022/core.mjs:31219:15

请提供您发现此bug的环境(运行ng version)

Angular 17.3.5

还有其他信息吗?

  • 无响应*
pprl5pva

pprl5pva1#

你能在StackBlitz中分享一个复现场景吗?不清楚loadImage何时被调用/运行。

imzjd6km

imzjd6km2#

在pkozlowski-opensource这里,你可以尝试以下代码:

[https://stackblitz.com/edit/stackblitz-starters-kvmfjv?file=src%2Fimage-crop%2Fimage-crop.component.ts](https://stackblitz.com/edit/stackblitz-starters-kvmfjv?file=src%2Fimage-crop%2Fimage-crop.component.ts)

当不在测试环境中运行时,它可以正常工作。但在测试环境中运行时,它会失败。

irlmq6kh

irlmq6kh3#

当不在测试中运行时,它可以正常工作。但是在运行测试时,它会失败。这是因为你的测试同步解析了图像加载,这意味着你的onload事件处理程序作为构造函数中定义的效果的一部分运行。从这个意义上说,你的测试和生产代码表现不同。

你有几个选项来解决这个警告:

  • 使测试变为异步;
  • 添加 allowSignalWrites 选项;

尽管如此,如果我们能轻松/快速地识别触发警告的效果,那么它将有助于调试这些场景。

相关问题