Question

我在组件中使用了node-pre-gyp WARN Pre-built binaries not installable for fsevents@1.2.4 and node@11.3.0 (node-v67 ABI, unknown) (falling back to source compile with node-gyp) node-pre-gyp WARN Hit error EACCES: permission denied, mkdir '/usr/local/jamf/bin/lib/node_modules/@vue/cli/node_modules/fsevents/lib/binding/Release/node-v67-darwin-x64' gyp ERR! clean error gyp ERR! stack Error: EACCES: permission denied, rmdir 'build' gyp ERR! System Darwin 17.7.0 gyp ERR! command "/usr/local/jamf/bin/jamf/node" "/usr/local/jamf/bin/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "clean" gyp ERR! cwd /usr/local/jamf/bin/lib/node_modules/@vue/cli/node_modules/fsevents gyp ERR! node -v v11.3.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/jamf/bin/jamf/node /usr/local/jamf/bin/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js clean' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/usr/local/jamf/bin/lib/node_modules/@vue/cli/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:182:13) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:978:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5) node-pre-gyp ERR! System Darwin 17.7.0 node-pre-gyp ERR! command "/usr/local/jamf/bin/jamf/node" "/usr/local/jamf/bin/lib/node_modules/@vue/cli/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd /usr/local/jamf/bin/lib/node_modules/@vue/cli/node_modules/fsevents node-pre-gyp ERR! node -v v11.3.0 node-pre-gyp ERR! node-pre-gyp -v v0.10.0 node-pre-gyp ERR! not ok Failed to execute '/usr/local/jamf/bin/jamf/node /usr/local/jamf/bin/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js clean' (1) npm WARN @apollographql/apollo-upload-server@5.0.3 requires a peer of graphql@^0.13.1 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/@vue/cli/node_modules/fsevents): npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 install: `node install` npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1 + @vue/cli@3.2.1 + cdk-virtual-scroll-viewport，它似乎可以正常工作。

但是，在该组件的单元测试中，项目无法显示。

我制作了一个示例应用程序based on this example，尽管在您为该应用程序提供服务时该示例有效，但我编写的测试失败了。

app.module.ts

cdkVirtualFor

app.component.ts

import { ScrollingModule } from '@angular/cdk/scrolling';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ScrollingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

app.component.spec.ts

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
</cdk-virtual-scroll-viewport>

Answer 1

将单元测试（请参见问题）更改为可以解决以下问题：

it('should render at least 4 items', fakeAsync(() => { // <---
  const fixture = TestBed.createComponent(AppComponent);
  fixture.autoDetectChanges(); // <--- 
  tick(500); // <---
  const compiled = fixture.debugElement.nativeElement as HTMLElement;
  expect(compiled.querySelectorAll('.example-item').length).toBeGreaterThanOrEqual(4);
}));

Answer 2

以某种方式，上一个答案的解决方案不适用于我的情况。同样在github中用flush()提出的替代解决方案也不起作用。

所以我最后的方法是检查Google如何编写虚拟视口组件的单元测试。我注意到他们在单元测试中使用了函数finishInit，这是本地函数。

/** Finish initializing the virtual scroll component at the beginning of a test. */
function finishInit(fixture: ComponentFixture<any>) {
  // On the first cycle we render and measure the viewport.
  fixture.detectChanges();
  flush();

  // On the second cycle we render the items.
  fixture.detectChanges();
  flush();

  // Flush the initial fake scroll event.
  animationFrameScheduler.flush();
  flush();
  fixture.detectChanges();
}

将其复制到我的单元测试中，这似乎对我而言有效。还可以解释后端发生了什么。

Angular Material虚拟滚动无法在单元测试中渲染项目

app.module.ts

app.component.ts

app.component.html

app.component.spec.ts

2 个答案: