docs(store): show correct testing snippets (#5124)

Co-authored-by: Marko Stanimirović <markostanimirovic95@gmail.com>

Author: timdeschryver

projects/www/src/app/examples/testing-store/src/app/app.component.spec.ts

@@ -1,14 +1,13 @@
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 import { AppState } from './state/app.state';
 import { AppComponent } from './app.component';
-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, selectBookCollection } from './state/books.selectors';
 
 describe('AppComponent', () => {
@@ -18,88 +17,32 @@ describe('AppComponent', () => {
   let mockBookCollectionSelector;
   let mockBooksSelector;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [provideMockStore()],
-      imports: [HttpClientTestingModule],
-      declarations: [BookListComponent, BookCollectionComponent, AppComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    });
-
-    store = TestBed.inject(MockStore);
-    fixture = TestBed.createComponent(AppComponent);
-    component = fixture.componentInstance;
-
-    mockBooksSelector = store.overrideSelector(selectBooks, [
-      {
-        id: 'firstId',
-        volumeInfo: {
-          title: 'First Title',
-          authors: ['First Author'],
-        },
-      },
-      {
-        id: 'secondId',
-        volumeInfo: {
-          title: 'Second Title',
-          authors: ['Second Author'],
-        },
-      },
-      {
-        id: 'thirdId',
-        volumeInfo: {
-          title: 'Third Title',
-          authors: ['Third Author'],
-        },
-      },
-      {
-        id: 'fourthId',
-        volumeInfo: {
-          title: 'Fourth Title',
-          authors: ['Fourth Author'],
-        },
-      },
-    ]);
-
-    mockBookCollectionSelector = store.overrideSelector(selectBookCollection, [
-      {
-        id: 'thirdId',
-        volumeInfo: {
-          title: 'Third Title',
-          authors: ['Third Author'],
-        },
-      },
-    ]);
-
-    fixture.detectChanges();
-    spyOn(store, 'dispatch').and.callFake(() => {});
+  TestBed.configureTestingModule({
+    providers: [provideMockStore()],
+    imports: [HttpClientTestingModule],
+    declarations: [BookListComponent, BookCollectionComponent, AppComponent],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
   });
 
-  afterEach(() => {
-    TestBed.inject(MockStore)?.resetSelectors();
-  });
-
-  it('add method should dispatch add action', () => {
-    component.onAdd('firstId');
-    expect(store.dispatch).toHaveBeenCalledWith(addBook({ bookId: 'firstId' }));
-  });
+  store = TestBed.inject(MockStore);
+  fixture = TestBed.createComponent(AppComponent);
+  component = fixture.componentInstance;
+
+  //#docregion mockSelector
+  mockBooksSelector = store.overrideSelector(selectBooks, [
+    {
+      id: 'firstId',
+      volumeInfo: {
+        title: 'First Title',
+        authors: ['First Author'],
+      },
+    },
+  ]);
 
-  it('remove method should dispatch remove action', () => {
-    component.onRemove('thirdId');
-    expect(store.dispatch).toHaveBeenCalledWith(
-      removeBook({ bookId: 'thirdId' })
-    );
-  });
+  mockBookCollectionSelector = store.overrideSelector(selectBookCollection, []);
 
-  it('should render a book list and a book collection', () => {
-    expect(
-      fixture.debugElement.queryAll(By.css('.book-list .book-item')).length
-    ).toBe(4);
-    expect(
-      fixture.debugElement.queryAll(By.css('.book-collection .book-item'))
-        .length
-    ).toBe(1);
-  });
+  fixture.detectChanges();
+  spyOn(store, 'dispatch').and.callFake(() => {});
 
   it('should update the UI when the store changes', () => {
     mockBooksSelector.setResult([
@@ -117,13 +60,6 @@ describe('AppComponent', () => {
           authors: ['Second Author'],
         },
       },
-      {
-        id: 'thirdId',
-        volumeInfo: {
-          title: 'Third Title',
-          authors: ['Third Author'],
-        },
-      },
     ]);
 
     mockBookCollectionSelector.setResult([
@@ -134,25 +70,67 @@ describe('AppComponent', () => {
           authors: ['First Author'],
         },
       },
-      {
-        id: 'secondId',
-        volumeInfo: {
-          title: 'Second Title',
-          authors: ['Second Author'],
-        },
-      },
     ]);
 
     store.refreshState();
     fixture.detectChanges();
 
     expect(
       fixture.debugElement.queryAll(By.css('.book-list .book-item')).length
-    ).toBe(3);
+    ).toBe(2);
 
     expect(
       fixture.debugElement.queryAll(By.css('.book-collection .book-item'))
         .length
-    ).toBe(2);
+    ).toBe(1);
+  });
+  //#enddocregion mockSelector
+});
+
+//#docregion resetMockSelector
+describe('AppComponent reset selectors', () => {
+  let store: MockStore;
+
+  afterEach(() => {
+    store?.resetSelectors();
+  });
+
+  it('should return the mocked value', (done: any) => {
+    TestBed.configureTestingModule({
+      providers: [
+        provideMockStore({
+          selectors: [
+            {
+              selector: selectBooks,
+              value: [
+                {
+                  id: 'mockedId',
+                  volumeInfo: {
+                    title: 'Mocked Title',
+                    authors: ['Mocked Author'],
+                  },
+                },
+              ],
+            },
+          ],
+        }),
+      ],
+    });
+
+    store = TestBed.inject(MockStore);
+
+    store.select(selectBooks).subscribe((mockBooks) => {
+      expect(mockBooks).toEqual([
+        {
+          id: 'mockedId',
+          volumeInfo: {
+            title: 'Mocked Title',
+            authors: ['Mocked Author'],
+          },
+        },
+      ]);
+      done();
+    });
   });
 });
+//#enddocregion resetMockSelector

projects/www/src/app/examples/testing-store/src/app/integration.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, ComponentFixture, waitForAsync } from '@angular/core/testing';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { StoreModule } from '@ngrx/store';
 import {
@@ -16,9 +16,11 @@ import { booksReducer } from './state/books.reducer';
 describe('AppComponent Integration Test', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
+  let booksService: GoogleBooksService;
   let httpMock: HttpTestingController;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(() => {
+    //#docregion integrate
     TestBed.configureTestingModule({
       declarations: [AppComponent, BookListComponent, BookCollectionComponent],
       imports: [
@@ -31,12 +33,14 @@ describe('AppComponent Integration Test', () => {
       providers: [GoogleBooksService],
     }).compileComponents();
 
-    httpMock = TestBed.inject(HttpTestingController);
-
     fixture = TestBed.createComponent(AppComponent);
     component = fixture.debugElement.componentInstance;
 
     fixture.detectChanges();
+    //#enddocregion integrate
+
+    booksService = TestBed.get(GoogleBooksService);
+    httpMock = TestBed.get(HttpTestingController);
 
     const req = httpMock.expectOne(
       'https://www.googleapis.com/books/v1/volumes?maxResults=5&orderBy=relevance&q=oliver%20sacks'
@@ -61,7 +65,7 @@ describe('AppComponent Integration Test', () => {
     });
 
     fixture.detectChanges();
-  }));
+  });
 
   afterEach(() => {
     httpMock.verify();
@@ -70,27 +74,26 @@ describe('AppComponent Integration Test', () => {
   it('should create the component', () => {
     expect(component).toBeTruthy();
   });
-
+  //#docregion addTest
   describe('buttons should work as expected', () => {
     it('should add to collection when add button is clicked and remove from collection when remove button is clicked', () => {
       const addButton = getBookList()[1].query(
         By.css('[data-test=add-button]')
       );
 
       click(addButton);
-
       expect(getBookTitle(getCollection()[0])).toBe('Second Title');
 
       const removeButton = getCollection()[0].query(
         By.css('[data-test=remove-button]')
       );
-
       click(removeButton);
 
       expect(getCollection().length).toBe(0);
     });
   });
 
+  //functions used in the above test
   function getCollection() {
     return fixture.debugElement.queryAll(By.css('.book-collection .book-item'));
   }
@@ -108,4 +111,5 @@ describe('AppComponent Integration Test', () => {
     el.click();
     fixture.detectChanges();
   }
+  //#enddocregion addTest
 });

projects/www/src/app/pages/guide/store/testing.md

@@ -75,31 +75,29 @@ Usage:
 
 </ngrx-code-example>
 
-<ngrx-code-example header="src/app/app.component.spec.ts (Using Mock Selectors) " path="store-walkthrough/src/app/tests/app.component.1.spec.ts" region="mockSelector">
+<ngrx-code-example header="src/app/app.component.spec.ts (Using Mock Selectors)" path="testing-store/src/app/app.component.spec.ts" region="mockSelector">
 
 </ngrx-code-example>
 
 In this example based on the [walkthrough](guide/store/walkthrough), we mock the `selectBooks` selector by using `overrideSelector`, passing in the `selectBooks` selector with a default mocked return value of an array of books. Similarly, we mock the `selectBookCollection` selector and pass the selector together with another array. In the test, we use `setResult()` to update the mock selectors to return new array values, then we use `MockStore.refreshState()` to trigger an emission from the `selectBooks` and `selectBookCollection` selectors.
 
 You can reset selectors by calling the `MockStore.resetSelectors()` method in the `afterEach()` hook.
 
-<ngrx-code-example header="src/app/app.component.spec.ts (Reset Mock Selector) " path="store-walkthrough/src/app/tests/app.component.1.spec.ts" region="resetMockSelector">
+<ngrx-code-example header="src/app/app.component.spec.ts (Reset Mock Selector)" path="testing-store/src/app/app.component.spec.ts" region="resetMockSelector">
 
 </ngrx-code-example>
 
-Try the <ngrx-docs-stackblitz name="testing-store"></ngrx-docs-stackblitz>.
-
 ### Integration Testing
 
 An integration test should verify that the `Store` coherently works together with our components and services that inject `Store`. An integration test will not mock the store or individual selectors, as unit tests do, but will instead integrate a `Store` by using `StoreModule.forRoot` in your `TestBed` configuration. Here is part of an integration test for the `AppComponent` introduced in the [walkthrough](guide/store/walkthrough).
 
-<ngrx-code-example header="src/app/tests/integration.spec.ts (Integrate Store)" path="store-walkthrough/src/app/tests/integration.spec.ts" region="integrate">
+<ngrx-code-example header="src/app/tests/integration.spec.ts (Integrate Store)" path="testing-store/src/app/integration.spec.ts" region="integrate">
 
 </ngrx-code-example>
 
 The integration test sets up the dependent `Store` by importing the `StoreModule`. In this part of the example, we assert that clicking the `add` button dispatches the corresponding action and is correctly emitted by the `collection` selector.
 
-<ngrx-code-example header="src/app/tests/integration.spec.ts (addButton Test)" path="store-walkthrough/src/app/tests/integration.spec.ts" region="addTest">
+<ngrx-code-example header="src/app/tests/integration.spec.ts (addButton Test)" path="testing-store/src/app/integration.spec.ts" region="addTest">
 
 </ngrx-code-example>