test(multiple): switch to non-deprecated test assertion context API (#23326)

Passing in a context as the last parameter of the various test assertion functions is deprecated. These changes switch all of the tests to the new `.withContext` helper.

Author: crisbeto

src/cdk-experimental/dialog/dialog.spec.ts

@@ -209,8 +209,8 @@ describe('Dialog', () => {
 
     // beforeClose should emit before dialog container is destroyed
     const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => {
-      expect(overlayContainerElement.querySelector('cdk-dialog-container'))
-          .not.toBeNull('dialog container exists when beforeClose is called');
+      expect(overlayContainerElement.querySelector('cdk-dialog-container')).not
+        .withContext('dialog container exists when beforeClose is called').toBeNull();
     });
 
     dialogRef.beforeClosed().subscribe(beforeCloseHandler);
@@ -261,15 +261,15 @@ describe('Dialog', () => {
     flushMicrotasks();
 
     expect(overlayContainerElement.querySelectorAll('cdk-dialog-container').length)
-        .toBe(1, 'Expected one open dialog.');
+      .withContext('Expected one open dialog.').toBe(1);
 
     dialogRef.close();
     flushMicrotasks();
     onPushFixture.detectChanges();
     tick(500);
 
     expect(overlayContainerElement.querySelectorAll('cdk-dialog-container').length)
-        .toBe(0, 'Expected no open dialogs.');
+      .withContext('Expected no open dialogs.').toBe(0);
   }));
 
   it('should close when clicking on the overlay backdrop', fakeAsync(() => {
@@ -403,8 +403,8 @@ describe('Dialog', () => {
 
     let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
 
-    expect(overlayPane.style.maxWidth).toBe('80vw',
-      'Expected dialog to set a default max-width on overlay pane');
+    expect(overlayPane.style.maxWidth)
+      .withContext('Expected dialog to set a default max-width on overlay pane').toBe('80vw');
 
     dialogRef.close();
 
@@ -716,7 +716,8 @@ describe('Dialog', () => {
     viewContainerFixture.detectChanges();
     flush();
 
-    expect(dialogRef.componentInstance).toBeFalsy('Expected reference to have been cleared.');
+    expect(dialogRef.componentInstance)
+      .withContext('Expected reference to have been cleared.').toBeFalsy();
   }));
 
   it('should assign a unique id to each dialog', () => {
@@ -892,7 +893,8 @@ describe('Dialog', () => {
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+        .withContext('Expected first tabbable element (input) in the dialog to be focused.')
+        .toBe('INPUT');
     }));
 
     it('should focus the dialog element on open', fakeAsync(() => {
@@ -907,7 +909,8 @@ describe('Dialog', () => {
       let container =
         overlayContainerElement.querySelector('cdk-dialog-container') as HTMLInputElement;
 
-      expect(document.activeElement).toBe(container, 'Expected container to be focused on open');
+      expect(document.activeElement)
+        .withContext('Expected container to be focused on open').toBe(container);
     }));
 
     it('should focus the first header element on open', fakeAsync(() => {
@@ -923,7 +926,7 @@ describe('Dialog', () => {
         overlayContainerElement.querySelector('h1[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstHeader, 'Expected first header to be focused on open');
+        .withContext('Expected first header to be focused on open').toBe(firstHeader);
     }));
 
     it('should focus the first element that matches the css selector from autoFocus on open',
@@ -940,7 +943,7 @@ describe('Dialog', () => {
         overlayContainerElement.querySelector('p[tabindex="-1"]') as HTMLInputElement;
 
       expect(document.activeElement)
-        .toBe(firstParagraph, 'Expected first paragraph to be focused on open');
+        .withContext('Expected first paragraph to be focused on open').toBe(firstParagraph);
     }));
 
     it('should re-focus trigger element when dialog closes', fakeAsync(() => {
@@ -968,8 +971,9 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flush();
 
-      expect(document.activeElement!.id).toBe('dialog-trigger',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('dialog-trigger');
 
       document.body.removeChild(button);
     }));
@@ -1027,14 +1031,14 @@ describe('Dialog', () => {
       otherButton.focus();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to be on the alternate button.');
+        .withContext('Expected focus to be on the alternate button.').toBe('other-button');
 
       flushMicrotasks();
       viewContainerFixture.detectChanges();
       flush();
 
       expect(document.activeElement!.id)
-          .toBe('other-button', 'Expected focus to stay on the alternate button.');
+        .withContext('Expected focus to stay on the alternate button.').toBe('other-button');
 
       body.removeChild(button);
       body.removeChild(otherButton);
@@ -1065,8 +1069,9 @@ describe('Dialog', () => {
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
-      expect(document.activeElement!.id).toBe('input-to-be-focused',
-          'Expected that the trigger was refocused after the dialog is closed.');
+      expect(document.activeElement!.id)
+        .withContext('Expected that the trigger was refocused after the dialog is closed.')
+        .toBe('input-to-be-focused');
 
       document.body.removeChild(button);
       document.body.removeChild(input);
@@ -1081,7 +1086,7 @@ describe('Dialog', () => {
         flushMicrotasks();
 
         expect(document.activeElement!.tagName.toLowerCase())
-            .toBe('cdk-dialog-container', 'Expected dialog container to be focused.');
+          .withContext('Expected dialog container to be focused.').toBe('cdk-dialog-container');
       }));
 
   });
@@ -1154,14 +1159,14 @@ describe('Dialog with a parent Dialog', () => {
       flush();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       childDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on child Dialog to close dialog opened by parent');
+        .withContext('Expected closeAll on child Dialog to close dialog opened by parent').toBe('');
     }));
 
   it('should close dialogs opened by a child when calling closeAll on a parent Dialog',
@@ -1170,14 +1175,14 @@ describe('Dialog with a parent Dialog', () => {
       fixture.detectChanges();
 
       expect(overlayContainerElement.textContent)
-          .toContain('Pizza', 'Expected a dialog to be opened');
+        .withContext('Expected a dialog to be opened').toContain('Pizza');
 
       parentDialog.closeAll();
       fixture.detectChanges();
       flush();
 
       expect(overlayContainerElement.textContent!.trim())
-          .toBe('', 'Expected closeAll on parent Dialog to close dialog opened by child');
+        .withContext('Expected closeAll on parent Dialog to close dialog opened by child').toBe('');
     }));
 
   it('should not close the parent dialogs, when a child is destroyed', fakeAsync(() => {
@@ -1186,14 +1191,14 @@ describe('Dialog with a parent Dialog', () => {
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to be opened');
+      .withContext('Expected a dialog to be opened').toContain('Pizza');
 
     childDialog.ngOnDestroy();
     fixture.detectChanges();
     flush();
 
     expect(overlayContainerElement.textContent)
-        .toContain('Pizza', 'Expected a dialog to remain opened');
+      .withContext('Expected a dialog to remain opened').toContain('Pizza');
   }));
 
   it('should close the top dialog via the escape key', fakeAsync(() => {

src/cdk-experimental/listbox/listbox.spec.ts

@@ -620,23 +620,23 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should be able to set the disabled state via setDisabledState', () => {
       expect(listboxInstance.disabled)
-          .toBe(false, 'Expected the selection list to be enabled.');
+        .withContext('Expected the selection list to be enabled.').toBe(false);
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       listboxInstance.setDisabledState(true);
       fixture.detectChanges();
 
       expect(listboxInstance.disabled)
-          .toBe(true, 'Expected the selection list to be disabled.');
+        .withContext('Expected the selection list to be disabled.').toBe(true);
       for (const option of optionElements) {
         expect(option.getAttribute('aria-disabled')).toBe('true');
       }
     });
 
     it('should be able to select options via writeValue', () => {
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       listboxInstance.writeValue('arc');
       fixture.detectChanges();
@@ -651,7 +651,7 @@ describe('CdkOption and CdkListbox', () => {
 
     it('should be select multiple options by their values', () => {
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.isMultiselectable = true;
       fixture.detectChanges();
@@ -676,7 +676,7 @@ describe('CdkOption and CdkListbox', () => {
     it('should be able to disable options from the control', () => {
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.form.disable();
       fixture.detectChanges();
@@ -690,7 +690,7 @@ describe('CdkOption and CdkListbox', () => {
     it('should be able to toggle disabled state after form control is disabled',  () => {
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
 
       testComponent.form.disable();
       fixture.detectChanges();
@@ -705,7 +705,7 @@ describe('CdkOption and CdkListbox', () => {
 
       expect(testComponent.listbox.disabled).toBeFalse();
       expect(optionInstances.every(option => !option.disabled))
-          .toBe(true, 'Expected every list option to be enabled.');
+        .withContext('Expected every list option to be enabled.').toBe(true);
     });
 
     it('should be able to select options via setting the value in form control', () => {

src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts

@@ -29,7 +29,7 @@ describe('CdkVirtualScrollViewport', () => {
       const contentWrapper =
           viewport.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper')!;
       expect(contentWrapper.children.length)
-          .toBe(4, 'should render 4 50px items to fill 200px space');
+        .withContext('should render 4 50px items to fill 200px space').toBe(4);
     }));
 
     it('should render extra content if first item is smaller than average', fakeAsync(() => {
@@ -38,8 +38,9 @@ describe('CdkVirtualScrollViewport', () => {
 
       const contentWrapper =
           viewport.elementRef.nativeElement.querySelector('.cdk-virtual-scroll-content-wrapper')!;
-      expect(contentWrapper.children.length).toBe(4,
-          'should render 4 items to fill 200px space based on 50px estimate from first item');
+      expect(contentWrapper.children.length)
+        .withContext('should render 4 items to fill 200px space based on 50px ' +
+                     'estimate from first item').toBe(4);
     }));
 
     it('should throw if maxBufferPx is less than minBufferPx', fakeAsync(() => {

src/cdk/a11y/aria-describer/aria-describer.spec.ts

@@ -128,38 +128,44 @@ describe('AriaDescriber', () => {
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
 
     expect(document.body.contains(descriptionNode))
-        .toBe(true, 'Expected node to be inside the document to begin with.');
-    expect(getMessagesContainer()).toBeNull('Expected no messages container on init.');
+      .withContext('Expected node to be inside the document to begin with.')
+      .toBe(true);
+    expect(getMessagesContainer())
+      .withContext('Expected no messages container on init.').toBeNull();
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
     expectMessage(component.element1, 'Hello');
     expect(getMessagesContainer())
-        .toBeNull('Expected no messages container after the element was described.');
+      .withContext('Expected no messages container after the element was described.')
+      .toBeNull();
 
     ariaDescriber.removeDescription(component.element1, descriptionNode);
 
-    expect(document.body.contains(descriptionNode)).toBe(true,
-        'Expected description node to still be in the DOM after it is no longer being used.');
+    expect(document.body.contains(descriptionNode))
+      .withContext('Expected description node to still be in the DOM after it is' +
+                   'no longer being used.').toBe(true);
   });
 
   it('should keep nodes set as descriptions inside their original position in the DOM', () => {
     createFixture();
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
     const initialParent = descriptionNode.parentNode;
 
-    expect(initialParent).toBeTruthy('Expected node to have a parent initially.');
+    expect(initialParent).withContext('Expected node to have a parent initially.').toBeTruthy();
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
     expectMessage(component.element1, 'Hello');
-    expect(descriptionNode.parentNode).toBe(initialParent,
-        'Expected node to stay inside the same parent when used as a description.');
+    expect(descriptionNode.parentNode)
+      .withContext('Expected node to stay inside the same parent when used as a description.')
+      .toBe(initialParent);
 
     ariaDescriber.removeDescription(component.element1, descriptionNode);
 
-    expect(descriptionNode.parentNode).toBe(initialParent,
-      'Expected node to stay inside the same parent after not being used as a description.');
+    expect(descriptionNode.parentNode)
+      .withContext('Expected node to stay inside the same parent after not ' +
+                   'being used as a description.').toBe(initialParent);
   });
 
   it('should be able to unregister messages while having others registered', () => {
@@ -247,7 +253,8 @@ describe('AriaDescriber', () => {
     const descriptionNode = fixture.nativeElement.querySelector('#description-with-existing-id');
 
     expect(document.body.contains(descriptionNode))
-        .toBe(true, 'Expected node to be inside the document to begin with.');
+      .withContext('Expected node to be inside the document to begin with.')
+      .toBe(true);
 
     ariaDescriber.describe(component.element1, descriptionNode);
 
@@ -257,8 +264,9 @@ describe('AriaDescriber', () => {
     ariaDescriber.ngOnDestroy();
 
     expect(component.element1.hasAttribute(CDK_DESCRIBEDBY_HOST_ATTRIBUTE)).toBe(false);
-    expect(document.body.contains(descriptionNode)).toBe(true,
-        'Expected description node to still be in the DOM after it is no longer being used.');
+    expect(document.body.contains(descriptionNode))
+      .withContext('Expected description node to still be in the DOM after ' +
+                   'it is no longer being used.').toBe(true);
   });
 
   it('should remove the aria-describedby attribute if there are no more messages', () => {