build(docs-infra): fix linting warnings (#42359)

This commit fixes some linting warning that were printed when running
`ng lint`. The warnings can be seen in the `lint` step of
[this CI job][1].

Most of the warnings were related to the deprecation of passing context
to Jasmine matchers in favor of using the [withContext()][2] matcher
(introduced in Jasmine v3.3.0).

[1]: https://circleci.com/gh/angular/angular/995543
[2]: https://jasmine.github.io/api/3.3/matchers.html#withContext

PR Close #42359

aio/src/app/app.component.spec.ts

@@ -1120,8 +1120,9 @@ describe('AppComponent', () => {
         const host = fixture.debugElement;
         const classes: string = host.properties.className;
         const classArray = classes.split(' ').filter(c => c.indexOf(`${type}-`) === 0);
-        expect(classArray.length).toBeLessThanOrEqual(1, `"${classes}" should have only one class matching ${type}-*`);
-        expect(classArray).toEqual([`${type}-${value}`], `"${classes}" should contain ${type}-${value}`);
+        expect(classArray.length).withContext(`"${classes}" should have only one class matching ${type}-*`)
+            .toBeLessThanOrEqual(1);
+        expect(classArray).withContext(`"${classes}" should contain ${type}-${value}`).toEqual([`${type}-${value}`]);
       }
     });
 

aio/src/app/custom-elements/api/api-list.component.spec.ts

@@ -37,8 +37,8 @@ describe('ApiListComponent', () => {
   function expectFilteredResult(label: string, itemTest: (item: ApiItem) => boolean) {
     component.filteredSections.subscribe(filtered => {
       filtered = filtered.filter(section => section.items);
-      expect(filtered.length).toBeGreaterThan(0, 'expected something');
-      expect(filtered.every(section => section.items?.every(itemTest))).toBe(true, label);
+      expect(filtered.length).withContext('expected something').toBeGreaterThan(0);
+      expect(filtered.every(section => section.items?.every(itemTest))).withContext(label).toBe(true);
     });
   }
 
@@ -64,7 +64,7 @@ describe('ApiListComponent', () => {
       component.setQuery('core');
       component.filteredSections.subscribe(filtered => {
         filtered = filtered.filter(section => Array.isArray(section.items));
-        expect(filtered.length).toBe(1, 'only one section');
+        expect(filtered.length).withContext('only one section').toBe(1);
         expect(filtered[0].name).toBe('core');
         expect(filtered[0].items).toEqual(sections.find(section => section.name === 'core')?.items as ApiItem[]);
       });
@@ -115,17 +115,17 @@ describe('ApiListComponent', () => {
 
       component.filteredSections.subscribe(filtered => {
         filtered = filtered.filter(s => s.items);
-        expect(filtered.length).toBe(1, 'sections');
-        expect(filtered[0].name).toBe(section, 'section name');
+        expect(filtered.length).withContext('sections').toBe(1);
+        expect(filtered[0].name).withContext('section name').toBe(section);
         const items = filtered[0].items as ApiItem[];
-        expect(items.length).toBe(1, 'items');
+        expect(items.length).withContext('items').toBe(1);
 
         const item = items[0];
         const badItem = 'Wrong item: ' + JSON.stringify(item, null, 2);
 
-        expect(item.docType).toBe(type, badItem);
-        expect(item.stability).toBe(stability, badItem);
-        expect(item.name).toBe(name, badItem);
+        expect(item.docType).withContext(badItem).toBe(type);
+        expect(item.stability).withContext(badItem).toBe(stability);
+        expect(item.name).withContext(badItem).toBe(name);
       });
     }
 

aio/src/app/custom-elements/api/api.service.spec.ts

@@ -104,7 +104,7 @@ describe('ApiService', () => {
         // called twice during this test
         // (1) during subscribe
         // (2) after refresh
-        expect(sections).toEqual(data, 'call ' + call++);
+        expect(sections).withContext('call ' + call++).toEqual(data);
       });
 
       httpMock.expectOne({}).flush(data);
@@ -114,7 +114,7 @@ describe('ApiService', () => {
       service.fetchSections();
       httpMock.expectOne({}).flush(data);
 
-      expect(call).toBe(2, 'should be called twice');
+      expect(call).withContext('should be called twice').toBe(2);
     });
   });
 });

aio/src/app/custom-elements/code/code-tabs.component.spec.ts

@@ -48,7 +48,8 @@ describe('CodeTabsComponent', () => {
     // Second code pane expectations
     expect(tabs[1].class).toBe('class-B');
     expect(tabs[1].language).toBe('language-B');
-    expect(tabs[1].linenums).toBe('default-linenums', 'Default linenums should have been used');
+    expect(tabs[1].linenums).withContext('Default linenums should have been used')
+        .toBe('default-linenums');
     expect(tabs[1].path).toBe('path-B');
     expect(tabs[1].region).toBe('region-B');
     expect(tabs[1].header).toBe('header-B');

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -159,7 +159,7 @@ describe('CodeComponent', () => {
 
       // `<li>`s are a tell-tale for line numbers
       const lis = fixture.nativeElement.querySelectorAll('li');
-      expect(lis.length).toBe(0, 'should be no linenums');
+      expect(lis.length).withContext('should be no linenums').toBe(0);
     });
   });
 
@@ -171,7 +171,7 @@ describe('CodeComponent', () => {
     }
 
     it('should not display "code-missing" class when there is some code', () => {
-      expect(getErrorMessage()).toBeNull('should not have element with "code-missing" class');
+      expect(getErrorMessage()).withContext('should not have element with "code-missing" class').toBeNull();
     });
 
     it('should display error message when there is no code (after trimming)', () => {
@@ -232,16 +232,16 @@ describe('CodeComponent', () => {
     it('should call copier service when clicked', () => {
       const clipboard = TestBed.inject(Clipboard);
       const spy = spyOn(clipboard, 'copy');
-      expect(spy.calls.count()).toBe(0, 'before click');
+      expect(spy.calls.count()).withContext('before click').toBe(0);
       getButton().click();
-      expect(spy.calls.count()).toBe(1, 'after click');
+      expect(spy.calls.count()).withContext('after click').toBe(1);
     });
 
     it('should copy code text when clicked', () => {
       const clipboard = TestBed.inject(Clipboard);
       const spy = spyOn(clipboard, 'copy');
       getButton().click();
-      expect(spy.calls.argsFor(0)[0]).toBe(oneLineCode, 'after click');
+      expect(spy.calls.argsFor(0)[0]).withContext('after click').toBe(oneLineCode);
     });
 
     it('should preserve newlines in the copied code', () => {
@@ -258,7 +258,7 @@ describe('CodeComponent', () => {
         getButton().click();
         actualCode = spy.calls.mostRecent().args[0];
 
-        expect(actualCode).toBe(expectedCode, `when linenums=${linenums}`);
+        expect(actualCode).withContext(`when linenums=${linenums}`).toBe(expectedCode);
         expect(actualCode.match(/\r?\n/g)?.length).toBe(5);
 
         spy.calls.reset();

aio/src/app/custom-elements/contributor/contributor.service.spec.ts

@@ -44,7 +44,7 @@ describe('ContributorService', () => {
     it('contributors observable should complete', () => {
       let completed = false;
       contribService.contributors.subscribe({complete: () => completed = true});
-      expect(completed).toBe(true, 'observable completed');
+      expect(completed).withContext('observable completed').toBe(true);
     });
 
     it('should reshape the contributor json to expected result', () => {

aio/src/app/custom-elements/live-example/live-example.component.spec.ts

@@ -65,7 +65,7 @@ describe('LiveExampleComponent', () => {
 
     it('should create LiveExampleComponent', () => {
       testComponent(() => {
-        expect(liveExampleComponent).toBeTruthy('LiveExampleComponent');
+        expect(liveExampleComponent).withContext('LiveExampleComponent').toBeTruthy();
       });
     });
 
@@ -138,7 +138,7 @@ describe('LiveExampleComponent', () => {
       setHostTemplate('<live-example noDownload></live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
-        expect(hrefs.length).toBe(1, 'only the stackblitz live-example anchor');
+        expect(hrefs.length).withContext('only the stackblitz live-example anchor').toBe(1);
         expect(hrefs[0]).toContain('stackblitz.html');
       });
     });
@@ -147,7 +147,7 @@ describe('LiveExampleComponent', () => {
       setHostTemplate('<live-example downloadOnly>download this</live-example>');
       testComponent(() => {
         const hrefs = getHrefs();
-        expect(hrefs.length).toBe(1, 'only the zip anchor');
+        expect(hrefs.length).withContext('only the zip anchor').toBe(1);
         expect(hrefs[0]).toContain('.zip');      });
     });
 
@@ -156,8 +156,8 @@ describe('LiveExampleComponent', () => {
       testComponent(() => {
         const expectedTitle = 'live example';
         const anchor = getLiveExampleAnchor();
-        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
-        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
+        expect(anchor.textContent).withContext('anchor content').toBe(expectedTitle);
+        expect(anchor.getAttribute('title')).withContext('title').toBe(expectedTitle);
       });
     });
 
@@ -166,8 +166,8 @@ describe('LiveExampleComponent', () => {
       setHostTemplate(`<live-example title="${expectedTitle}"></live-example>`);
       testComponent(() => {
         const anchor = getLiveExampleAnchor();
-        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
-        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
+        expect(anchor.textContent).withContext('anchor content').toBe(expectedTitle);
+        expect(anchor.getAttribute('title')).withContext('title').toBe(expectedTitle);
       });
     });
 
@@ -176,8 +176,8 @@ describe('LiveExampleComponent', () => {
       setHostTemplate(`<live-example title="ignore this title">${expectedTitle}</live-example>`);
       testComponent(() => {
         const anchor = getLiveExampleAnchor();
-        expect(anchor.textContent).toBe(expectedTitle, 'anchor content');
-        expect(anchor.getAttribute('title')).toBe(expectedTitle, 'title');
+        expect(anchor.textContent).withContext('anchor content').toBe(expectedTitle);
+        expect(anchor.getAttribute('title')).withContext('title').toBe(expectedTitle);
       });
     });
 
@@ -206,8 +206,8 @@ describe('LiveExampleComponent', () => {
     it('should have hidden, embedded stackblitz', () => {
       setHostTemplate('<live-example embedded></live-example>');
       testComponent(() => {
-        expect(liveExampleComponent.mode).toBe('embedded', 'component is embedded');
-        expect(getEmbeddedStackblitzComponent()).toBeTruthy('EmbeddedStackblitzComponent');
+        expect(liveExampleComponent.mode).withContext('component is embedded').toBe('embedded');
+        expect(getEmbeddedStackblitzComponent()).withContext('EmbeddedStackblitzComponent').toBeTruthy();
       });
     });
 

aio/src/app/custom-elements/resource/resource.service.spec.ts

@@ -44,7 +44,7 @@ describe('ResourceService', () => {
     it('categories observable should complete', () => {
       let completed = false;
       resourceService.categories.subscribe({complete: () => completed = true});
-      expect(completed).toBe(true, 'observable completed');
+      expect(completed).withContext('observable completed').toBe(true);
     });
 
     it('should reshape contributors.json to sorted category array', () => {
@@ -58,17 +58,17 @@ describe('ResourceService', () => {
       const sub = cat.subCategories[0];
       const res = sub.resources[0];
 
-      expect(cat.id).toBe('cat-3', 'category id');
-      expect(sub.id).toBe('cat3-subcat2', 'subcat id');
-      expect(res.id).toBe('cat3-subcat2-res1', 'resources id');
+      expect(cat.id).withContext('category id').toBe('cat-3');
+      expect(sub.id).withContext('subcat id').toBe('cat3-subcat2');
+      expect(res.id).withContext('resources id').toBe('cat3-subcat2-res1');
     });
 
     it('resource knows its category and sub-category titles', () => {
       const cat = categories[1];
       const sub = cat.subCategories[0];
       const res = sub.resources[0];
-      expect(res.category).toBe(cat.title, 'category title');
-      expect(res.subCategory).toBe(sub.title, 'subcategory title');
+      expect(res.category).withContext('category title').toBe(cat.title);
+      expect(res.subCategory).withContext('subcategory title').toBe(sub.title);
     });
 
     it('should have expected SubCategories of "Cat 3"', () => {

aio/src/app/custom-elements/toc/toc.component.spec.ts

@@ -122,12 +122,12 @@ describe('TocComponent', () => {
         it('should not have secondary items', () => {
           expect(tocComponent.type).toEqual('EmbeddedSimple');
           const aSecond = page.listItems.find(item => item.classes.secondary);
-          expect(aSecond).toBeFalsy('should not find a secondary');
+          expect(aSecond).withContext('should not find a secondary').toBeFalsy();
         });
 
         it('should not display expando buttons', () => {
-          expect(page.tocHeadingButtonEmbedded).toBeFalsy('top expand/collapse button');
-          expect(page.tocMoreButton).toBeFalsy('bottom more button');
+          expect(page.tocHeadingButtonEmbedded).withContext('top expand/collapse button').toBeFalsy();
+          expect(page.tocMoreButton).withContext('bottom more button').toBeFalsy();
         });
       });
 
@@ -145,7 +145,7 @@ describe('TocComponent', () => {
         });
 
         it('should not display the h1 item', () => {
-          expect(page.listItems.find(item => item.classes.h1)).toBeFalsy('should not find h1 item');
+          expect(page.listItems.find(item => item.classes.h1)).withContext('should not find h1 item').toBeFalsy();
         });
 
         it('should be in "collapsed" (not expanded) state at the start', () => {
@@ -157,8 +157,8 @@ describe('TocComponent', () => {
         });
 
         it('should display expando buttons', () => {
-          expect(page.tocHeadingButtonEmbedded).toBeTruthy('top expand/collapse button');
-          expect(page.tocMoreButton).toBeTruthy('bottom more button');
+          expect(page.tocHeadingButtonEmbedded).withContext('top expand/collapse button').toBeTruthy();
+          expect(page.tocMoreButton).withContext('bottom more button').toBeTruthy();
         });
 
         it('should have secondary items', () => {
@@ -168,7 +168,7 @@ describe('TocComponent', () => {
         // CSS will hide items with the secondary class when collapsed
         it('should have secondary item with a secondary class', () => {
           const aSecondary = page.listItems.find(item => item.classes.secondary);
-          expect(aSecondary).toBeTruthy('should find a secondary');
+          expect(aSecondary).withContext('should find a secondary').toBeTruthy();
         });
 
         describe('after click tocHeading button', () => {
@@ -270,12 +270,12 @@ describe('TocComponent', () => {
     it('should not have secondary items', () => {
       expect(tocComponent.type).toEqual('Floating');
       const aSecond = page.listItems.find(item => item.classes.secondary);
-      expect(aSecond).toBeFalsy('should not find a secondary');
+      expect(aSecond).withContext('should not find a secondary').toBeFalsy();
     });
 
     it('should not display expando buttons', () => {
-      expect(page.tocHeadingButtonEmbedded).toBeFalsy('top expand/collapse button');
-      expect(page.tocMoreButton).toBeFalsy('bottom more button');
+      expect(page.tocHeadingButtonEmbedded).withContext('top expand/collapse button').toBeFalsy();
+      expect(page.tocMoreButton).withContext('bottom more button').toBeFalsy();
     });
 
     it('should display H1 title', () => {