diff --git a/apps/demo/e2e/devtools.spec.ts b/apps/demo/e2e/devtools.spec.ts index a63b766..67cbd07 100644 --- a/apps/demo/e2e/devtools.spec.ts +++ b/apps/demo/e2e/devtools.spec.ts @@ -1,98 +1,112 @@ import { test, expect } from '@playwright/test'; import { Action } from '@ngrx/store'; -test('has title', async ({ page }) => { - await page.goto(''); +test.describe('DevTools', () => { + test('DevTools do not throw an error when not available', async ({ + page, + }) => { + await page.goto(''); + const errors = []; + page.on('pageerror', (error) => errors.push(error)); + await page.getByRole('link', { name: 'DevTools' }).click(); + await expect( + page.getByRole('row', { name: 'Go for a walk' }) + ).toBeVisible(); + }); - await page.evaluate(() => { - window['devtoolsSpy'] = []; + test('DevTools are syncing state changes', async ({ page }) => { + await page.goto(''); - window['__REDUX_DEVTOOLS_EXTENSION__'] = { - connect: () => { - return { - send: (data: Action) => { - window['devtoolsSpy'].push(data); - }, - }; - }, - }; - }); - await page.getByRole('link', { name: 'DevTools' }).click(); - await page - .getByRole('row', { name: 'Go for a walk' }) - .getByRole('checkbox') - .click(); - await page - .getByRole('row', { name: 'Exercise' }) - .getByRole('checkbox') - .click(); + await page.evaluate(() => { + window['devtoolsSpy'] = []; - await expect( - page.getByRole('region', { name: 'Go for a walk' }) - ).toBeVisible(); - await expect(page.getByRole('region', { name: 'Exercise' })).toBeVisible(); + window['__REDUX_DEVTOOLS_EXTENSION__'] = { + connect: () => { + return { + send: (data: Action) => { + window['devtoolsSpy'].push(data); + }, + }; + }, + }; + }); + await page.getByRole('link', { name: 'DevTools' }).click(); + await page + .getByRole('row', { name: 'Go for a walk' }) + .getByRole('checkbox') + .click(); + await page + .getByRole('row', { name: 'Exercise' }) + .getByRole('checkbox') + .click(); - await page - .getByRole('row', { name: 'Go for a walk' }) - .getByRole('checkbox') - .click(); - await page - .getByRole('row', { name: 'Exercise' }) - .getByRole('checkbox') - .click(); + await expect( + page.getByRole('region', { name: 'Go for a walk' }) + ).toBeVisible(); + await expect(page.getByRole('region', { name: 'Exercise' })).toBeVisible(); - await expect( - page.getByRole('region', { name: 'Go for a walk' }) - ).toBeHidden(); - await expect(page.getByRole('region', { name: 'Exercise' })).toBeHidden(); + await page + .getByRole('row', { name: 'Go for a walk' }) + .getByRole('checkbox') + .click(); + await page + .getByRole('row', { name: 'Exercise' }) + .getByRole('checkbox') + .click(); - const devtoolsActions = await page.evaluate(() => window['devtoolsSpy']); + await expect( + page.getByRole('region', { name: 'Go for a walk' }) + ).toBeHidden(); + await expect(page.getByRole('region', { name: 'Exercise' })).toBeHidden(); - expect(devtoolsActions).toEqual([ - { - type: 'add todo', - }, - { - type: 'select todo 1', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - { - type: 'select todo 4', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - { - type: 'select todo 1', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - { - type: 'select todo 4', - }, - { - type: 'Store Update', - }, - { - type: 'Store Update', - }, - ]); + const devtoolsActions = await page.evaluate(() => window['devtoolsSpy']); + + expect(devtoolsActions).toEqual([ + { + type: 'add todo', + }, + { + type: 'select todo 1', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + { + type: 'select todo 4', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + { + type: 'select todo 1', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + { + type: 'select todo 4', + }, + { + type: 'Store Update', + }, + { + type: 'Store Update', + }, + ]); + }); }); diff --git a/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts b/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts index fdc5594..56aee69 100644 --- a/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts +++ b/libs/ngrx-toolkit/src/lib/devtools/internal/devtools-syncer.service.ts @@ -63,7 +63,7 @@ export class DevtoolsSyncer implements OnDestroy { const isToolkitAvailable = Boolean(window.__REDUX_DEVTOOLS_EXTENSION__); if (!isToolkitAvailable) { - throw new Error( + console.info( 'NgRx Toolkit/DevTools: Redux DevTools Extension is not available.' ); } diff --git a/libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts b/libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts index 2e7dc9a..9034a72 100644 --- a/libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts +++ b/libs/ngrx-toolkit/src/lib/devtools/tests/connecting.spec.ts @@ -16,9 +16,10 @@ describe('connect & send', () => { expect(connectSpy).toHaveBeenCalledTimes(0); }); - it('should not connect if it runs on the server', () => { - const { connectSpy } = setupExtensions(false); - expect(connectSpy).toHaveBeenCalledTimes(0); + it('should not throw if it runs on the server', () => { + setupExtensions(true, false); + const Store = signalStore({ providedIn: 'root' }, withDevtools('flight')); + expect(() => TestBed.inject(Store)).not.toThrowError(); }); it('should only send when store is initialized', () => {