docs: use StackBlitz WebContainers for live examples (#3321)

Closes #3261

projects/ngrx.io/content/examples/testing-store/src/app/app.component.spec.ts

@@ -1,24 +1,15 @@
-import { MemoizedSelector } from '@ngrx/store';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 import { AppState } from './state/app.state';
 import { AppComponent } from './app.component';
-import {
-  addBook,
-  removeBook,
-  retrievedBookList,
-} from './state/books.actions';
+import { addBook, removeBook } from './state/books.actions';
 import { BookListComponent } from './book-list/book-list.component';
 import { BookCollectionComponent } from './book-collection/book-collection.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import {
-  selectBooks,
-  selectCollectionIds,
-  selectBookCollection,
-} from './state/books.selectors';
+import { selectBooks, selectBookCollection } from './state/books.selectors';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
@@ -84,11 +75,13 @@ describe('AppComponent', () => {
     spyOn(store, 'dispatch').and.callFake(() => {});
   });
 
+  afterEach(() => {
+    TestBed.inject(MockStore)?.resetSelectors();
+  });
+
   it('add method should dispatch add action', () => {
     component.onAdd('firstId');
-    expect(store.dispatch).toHaveBeenCalledWith(
-      addBook({ bookId: 'firstId' })
-    );
+    expect(store.dispatch).toHaveBeenCalledWith(addBook({ bookId: 'firstId' }));
   });
 
   it('remove method should dispatch remove action', () => {

projects/ngrx.io/content/examples/testing-store/src/app/integration.spec.ts

@@ -1,12 +1,5 @@
-import {
-  TestBed,
-  async,
-  ComponentFixture,
-  fakeAsync,
-  tick,
-} from '@angular/core/testing';
+import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { of } from 'rxjs';
 import { StoreModule } from '@ngrx/store';
 import {
   HttpClientTestingModule,
@@ -23,54 +16,58 @@ import { booksReducer } from './state/books.reducer';
 describe('AppComponent Integration Test', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
-  let booksService: GoogleBooksService;
   let httpMock: HttpTestingController;
 
-  beforeEach(async((done: any) => {
-    TestBed.configureTestingModule({
-      declarations: [AppComponent, BookListComponent, BookCollectionComponent],
-      imports: [
-        HttpClientTestingModule,
-        StoreModule.forRoot({
-          books: booksReducer,
-          collection: collectionReducer,
-        }),
-      ],
-      providers: [GoogleBooksService],
-    }).compileComponents();
-
-    booksService = TestBed.get(GoogleBooksService);
-    httpMock = TestBed.get(HttpTestingController);
-
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.debugElement.componentInstance;
-
-    fixture.detectChanges();
-
-    const req = httpMock.expectOne(
-      'https://www.googleapis.com/books/v1/volumes?maxResults=5&orderBy=relevance&q=oliver%20sacks'
-    );
-    req.flush({
-      items: [
-        {
-          id: 'firstId',
-          volumeInfo: {
-            title: 'First Title',
-            authors: ['First Author'],
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [
+          AppComponent,
+          BookListComponent,
+          BookCollectionComponent,
+        ],
+        imports: [
+          HttpClientTestingModule,
+          StoreModule.forRoot({
+            books: booksReducer,
+            collection: collectionReducer,
+          }),
+        ],
+        providers: [GoogleBooksService],
+      }).compileComponents();
+
+      httpMock = TestBed.inject(HttpTestingController);
+
+      fixture = TestBed.createComponent(AppComponent);
+      component = fixture.debugElement.componentInstance;
+
+      fixture.detectChanges();
+
+      const req = httpMock.expectOne(
+        'https://www.googleapis.com/books/v1/volumes?maxResults=5&orderBy=relevance&q=oliver%20sacks'
+      );
+      req.flush({
+        items: [
+          {
+            id: 'firstId',
+            volumeInfo: {
+              title: 'First Title',
+              authors: ['First Author'],
+            },
           },
-        },
-        {
-          id: 'secondId',
-          volumeInfo: {
-            title: 'Second Title',
-            authors: ['Second Author'],
+          {
+            id: 'secondId',
+            volumeInfo: {
+              title: 'Second Title',
+              authors: ['Second Author'],
+            },
           },
-        },
-      ],
-    });
+        ],
+      });
 
-    fixture.detectChanges();
-  }));
+      fixture.detectChanges();
+    })
+  );
 
   afterEach(() => {
     httpMock.verify();

projects/ngrx.io/content/examples/testing-store/src/app/state/books.selectors.ts

@@ -1,20 +1,15 @@
-import { createSelector, createFeatureSelector } from "@ngrx/store";
-import { AppState } from "./app.state";
-import { Book } from "../book-list/books.model";
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import { Book } from '../book-list/books.model';
 
-export const selectBooks = createSelector(
-  (state: AppState) => state.books,
-  (books: Array<Book>) => books
-);
+export const selectBooks = createFeatureSelector<ReadonlyArray<Book>>('books');
 
-export const selectCollectionState = createFeatureSelector<
-  ReadonlyArray<string>
->("collection");
+export const selectCollectionState =
+  createFeatureSelector<ReadonlyArray<string>>('collection');
 
 export const selectBookCollection = createSelector(
   selectBooks,
   selectCollectionState,
-  (books: Array<Book>, collection: Array<string>) => {
+  (books, collection) => {
     return collection.map((id) => books.find((book) => book.id === id));
   }
 );

projects/ngrx.io/content/examples/testing-store/src/index.html

@@ -1,8 +1,13 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <title>Angular App</title>
+    <meta charset="utf-8" />
+    <title>NgRx Tutorial</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-  <!-- Intentionally empty -->
+    <app-root></app-root>
   </body>
-</html>
+</html>

projects/ngrx.io/content/examples/testing-store/src/main.ts

@@ -1,45 +1,12 @@
-import './global-jasmine';
-import 'jasmine-core/lib/jasmine-core/jasmine-html.js';
-import 'jasmine-core/lib/jasmine-core/boot.js';
+// main app entry point
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import './polyfills';
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-
-// Requires 'zone.js/dist/proxy.js' and 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-
-import './app/state/books.reducer.spec.ts';
-import './app/state/collection.reducer.spec.ts';
-import './app/state/books.selectors.spec.ts';
-import './app/app.component.spec.ts';
-import './app/integration.spec.ts';
-
-jasmine.getEnv().configure({ random: false });
-bootstrap();
-
-function bootstrap() {
-  if (window.jasmineRef) {
-    location.reload();
-    return;
-  } else {
-    window.onload();
-    window.jasmineRef = jasmine.getEnv();
-  }
-
-  getTestBed().initTestEnvironment(
-    BrowserDynamicTestingModule,
-    platformBrowserDynamicTesting()
-  );
+if (environment.production) {
+  enableProdMode();
 }
+
+platformBrowserDynamic().bootstrapModule(AppModule);

projects/ngrx.io/content/examples/testing-store/stackblitz.json

@@ -1,4 +1,5 @@
 {
   "description": "Store Testing Tutorial",
-  "files": ["!**/*.d.ts", "!**/*.js", "**/*.spec.ts"]
+  "files": ["!**/*.d.ts", "**/*.spec.ts"],
+  "type": "testing"
 }

projects/ngrx.io/tools/examples/shared/boilerplate/cli/angular.json

@@ -19,14 +19,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "aot": true,
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -36,13 +37,13 @@
                   "with": "src/environments/environment.prod.ts"
                 }
               ],
+              "vendorChunk": false,
+              "extractLicenses": true,
+              "buildOptimizer": true,
+              "sourceMap": false,
               "optimization": true,
               "outputHashing": "all",
-              "sourceMap": false,
               "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -82,39 +83,31 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
+        }
+      },
+      "e2e": {
+        "builder": "@angular-devkit/build-angular:protractor",
+        "options": {
+          "protractorConfig": "e2e/protractor.conf.js",
+          "devServerTarget": "ngrx.io-example:serve"
         },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "ngrx.io-example:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "ngrx.io-example:serve:production"
-            }
+        "configurations": {
+          "production": {
+            "devServerTarget": "ngrx.io-example:serve:production"
           }
         }
       }
+    }
   },
   "defaultProject": "dummy"
 }