describe('MyDataComponent (DOM)', () => {
const installProvider = useFakeGlobalProvider();
it('renders the loaded rows', async () => {
installProvider({ runViewResults: ROWS });
const f = renderComponentFixture(MyDataComponent);
await new Promise((r) => setTimeout(r, 0)); // let the async ngOnInit load settle
f.detectChanges();
expect(queryAll(f, '.row').length).toBe(ROWS.length);
});
});
Install a fake GLOBAL provider for DOM specs of data-bound components that load through the process-global provider rather than an injectable
@Input() Provider— i.e. components that call a barenew RunView()(which readsRunView.Provider) and/ornew Metadata()/Metadata.Provider(EntityByName,GetEntityObject).Call ONCE at the top of a
describe. It registersbeforeEach/afterEachto save and restore BOTH globals (RunView.ProviderandMetadata.Provider) so nothing leaks into other tests, and returns aninstallfunction you call — typically inside a per-test render helper — to swap in a fake whoseRunView/RunViewsreturn your canned rows. The fake is exactly what createFakeProvider builds, so the options are identical.PREFER passing
createFakeProvider(...)through the component's[Provider]input when the component readsProviderToUse. Use this only for components that reach the GLOBAL provider and that you do not want to refactor — the save/restore is what keeps the global swap safe. Seeguides/ANGULAR_TESTING_GUIDE.md.