refactor: update tests to use .toHaveClass matchers

PiperOrigin-RevId: 554292715
material-components · Aug 7, 2023 · b19cbe4 · b19cbe4
1 parent bc9ae6c
commit b19cbe4
Show file tree

Hide file tree

Showing 32 changed files with 142 additions and 176 deletions.
diff --git a/packages/mdc-banner/test/component.test.ts b/packages/mdc-banner/test/component.test.ts
@@ -152,13 +152,13 @@ describe('MDCBanner', () => {
        component.listen(events.OPENED, openedHandler);
        component.open();
        expect(openingHandler).toHaveBeenCalled();
-       expect(fixture.classList.contains(cssClasses.OPENING)).toBe(true);
-       expect(fixture.classList.contains(cssClasses.CLOSING)).toBe(false);
+       expect(fixture).toHaveClass(cssClasses.OPENING);
+       expect(fixture).not.toHaveClass(cssClasses.CLOSING);
        jasmine.clock().tick(1);
-       expect(fixture.classList.contains(cssClasses.OPEN)).toBe(true);
+       expect(fixture).toHaveClass(cssClasses.OPEN);
        jasmine.clock().tick(numbers.BANNER_ANIMATION_OPEN_TIME_MS);
        expect(openedHandler).toHaveBeenCalled();
-       expect(fixture.classList.contains(cssClasses.OPENING)).toBe(false);
+       expect(fixture).not.toHaveClass(cssClasses.OPENING);
        component.unlisten(events.OPENING, openingHandler);
        component.unlisten(events.OPENED, openedHandler);
      });
@@ -174,12 +174,12 @@ describe('MDCBanner', () => {
        component.listen(events.CLOSED, closedHandler);
        component.close(CloseReason.UNSPECIFIED);
        expect(closingHandler).toHaveBeenCalled();
-       expect(fixture.classList.contains(cssClasses.CLOSING)).toBe(true);
-       expect(fixture.classList.contains(cssClasses.OPEN)).toBe(false);
-       expect(fixture.classList.contains(cssClasses.OPENING)).toBe(false);
+       expect(fixture).toHaveClass(cssClasses.CLOSING);
+       expect(fixture).not.toHaveClass(cssClasses.OPEN);
+       expect(fixture).not.toHaveClass(cssClasses.OPENING);
        jasmine.clock().tick(numbers.BANNER_ANIMATION_CLOSE_TIME_MS);
        expect(closedHandler).toHaveBeenCalled();
-       expect(fixture.classList.contains(cssClasses.CLOSING)).toBe(false);
+       expect(fixture).not.toHaveClass(cssClasses.CLOSING);
        component.unlisten(events.CLOSING, closingHandler);
        component.unlisten(events.CLOSED, closedHandler);
      });

diff --git a/packages/mdc-checkbox/test/component.test.ts b/packages/mdc-checkbox/test/component.test.ts
@@ -75,15 +75,15 @@ describe('MDCCheckbox', () => {
     it('#constructor initializes the root element with a ripple', () => {
       const {root} = setupTest();
       jasmine.clock().tick(1);
-      expect(root.classList.contains('mdc-ripple-upgraded')).toBeTruthy();
+      expect(root).toHaveClass('mdc-ripple-upgraded');
     });
 
     it('#destroy removes the ripple', () => {
       const {root, component} = setupTest();
       jasmine.clock().tick(1);
       component.destroy();
       jasmine.clock().tick(1);
-      expect(root.classList.contains('mdc-ripple-upgraded')).toBeFalsy();
+      expect(root).not.toHaveClass('mdc-ripple-upgraded');
     });
 
     it('(regression) activates ripple on keydown when the input element surface is active',
@@ -96,13 +96,11 @@ describe('MDCCheckbox', () => {
          fakeMatches.and.returnValue(true);
          input.matches = fakeMatches;
 
-         expect(root.classList.contains('mdc-ripple-upgraded')).toBe(true);
+         expect(root).toHaveClass('mdc-ripple-upgraded');
          emitEvent(input, 'keydown');
          jasmine.clock().tick(1);
 
-         expect(root.classList.contains(
-                    'mdc-ripple-upgraded--foreground-activation'))
-             .toBe(true);
+         expect(root).toHaveClass('mdc-ripple-upgraded--foreground-activation');
        });
   }
 
@@ -208,14 +206,14 @@ describe('MDCCheckbox', () => {
   it('adapter#addClass adds a class to the root element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBeTruthy();
+    expect(root).toHaveClass('foo');
   });
 
   it('adapter#removeClass removes a class from the root element', () => {
     const {root, component} = setupTest();
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBeFalsy();
+    expect(root).not.toHaveClass('foo');
   });
 
   it('adapter#setNativeControlAttr sets an attribute on the input element',

diff --git a/packages/mdc-chips/chip-set/test/component.test.ts b/packages/mdc-chips/chip-set/test/component.test.ts
@@ -563,6 +563,6 @@ describe('MDCChipSet', () => {
 
     const chip0 = root.querySelector<HTMLElement>('#c0')!;
     component.addChip(0);
-    expect(chip0.classList.contains(MDCChipCssClasses.ENTER)).toBeTrue();
+    expect(chip0).toHaveClass(MDCChipCssClasses.ENTER);
   });
 });
diff --git a/packages/mdc-chips/chip/test/component.test.ts b/packages/mdc-chips/chip/test/component.test.ts
@@ -272,6 +272,6 @@ describe('MDCChipAction', () => {
     });
 
     component.startAnimation(MDCChipAnimation.ENTER);
-    expect(root.classList.contains(MDCChipCssClasses.ENTER)).toBeTrue();
+    expect(root).toHaveClass(MDCChipCssClasses.ENTER);
   });
 });
diff --git a/packages/mdc-chips/deprecated/chip/test/component.test.ts b/packages/mdc-chips/deprecated/chip/test/component.test.ts
@@ -242,14 +242,14 @@ describe('MDCChip', () => {
   it('adapter#addClass adds a class to the root element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBe(true);
+    expect(root).toHaveClass('foo');
   });
 
   it('adapter#removeClass removes a class from the root element', () => {
     const {root, component} = setupTest();
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBe(false);
+    expect(root).not.toHaveClass('foo');
   });
 
   it('adapter#addClassToLeadingIcon adds a class to the leading icon element',
@@ -260,7 +260,7 @@ describe('MDCChip', () => {
 
        (component.getDefaultFoundation() as any)
            .adapter.addClassToLeadingIcon('foo');
-       expect(leadingIcon.classList.contains('foo')).toBe(true);
+       expect(leadingIcon).toHaveClass('foo');
      });
 
   it('adapter#addClassToLeadingIcon does nothing if no leading icon element is present',
@@ -281,7 +281,7 @@ describe('MDCChip', () => {
        leadingIcon.classList.add('foo');
        (component.getDefaultFoundation() as any)
            .adapter.removeClassFromLeadingIcon('foo');
-       expect(leadingIcon.classList.contains('foo')).toBe(false);
+       expect(leadingIcon).not.toHaveClass('foo');
      });
 
   it('adapter#removeClassFromLeadingIcon does nothing if no leading icon element is present',

diff --git a/packages/mdc-circular-progress/test/component.test.ts b/packages/mdc-circular-progress/test/component.test.ts
@@ -129,8 +129,7 @@ describe('MDCCircularProgress', () => {
     const {root, component} = setupTest();
 
     component.determinate = false;
-    expect(root.classList.contains('mdc-circular-progress--indeterminate'))
-        .toBeTruthy();
+    expect(root).toHaveClass('mdc-circular-progress--indeterminate');
     expect(
         root.getAttribute(MDCCircularProgressFoundation.strings.ARIA_VALUENOW))
         .toEqual(null);
@@ -157,13 +156,11 @@ describe('MDCCircularProgress', () => {
     const {root, component} = setupTest();
 
     component.close();
-    expect(root.classList.contains('mdc-circular-progress--closed'))
-        .toBeTruthy();
+    expect(root).toHaveClass('mdc-circular-progress--closed');
     expect(component.isClosed).toBe(true);
 
     component.open();
-    expect(root.classList.contains('mdc-circular-progress--closed'))
-        .toBeFalsy();
+    expect(root).not.toHaveClass('mdc-circular-progress--closed');
     expect(component.isClosed).toBe(false);
   });
 });
diff --git a/packages/mdc-data-table/test/component.test.ts b/packages/mdc-data-table/test/component.test.ts
@@ -352,8 +352,7 @@ describe('MDCDataTable', () => {
     const {component, adapter} = setupTest();
 
     adapter.addClassAtRowIndex(1, 'test-class-name');
-    expect(component.getRows()[1].classList.contains('test-class-name'))
-        .toBe(true);
+    expect(component.getRows()[1]).toHaveClass('test-class-name');
 
     component.destroy();
   });
@@ -364,9 +363,7 @@ describe('MDCDataTable', () => {
 
        adapter.addClassAtRowIndex(1, 'test-remove-class-name');
        adapter.removeClassAtRowIndex(1, 'test-remove-class-name');
-       expect(
-           component.getRows()[1].classList.contains('test-remove-class-name'))
-           .toBe(false);
+       expect(component.getRows()[1]).not.toHaveClass('test-remove-class-name');
 
        component.destroy();
      });
@@ -778,7 +775,7 @@ describe('MDCDataTable', () => {
 
          component.showProgress();
          expect(progressIndicator!.style.cssText).toMatch(/(height|top)/);
-         expect(root.classList.contains(cssClasses.IN_PROGRESS)).toBe(true);
+         expect(root).toHaveClass(cssClasses.IN_PROGRESS);
 
          destroyProgress(component, root);
          component.destroy();
@@ -789,7 +786,7 @@ describe('MDCDataTable', () => {
 
       component.showProgress();
       component.hideProgress();
-      expect(root.classList.contains(cssClasses.IN_PROGRESS)).toBe(false);
+      expect(root).not.toHaveClass(cssClasses.IN_PROGRESS);
 
       destroyProgress(component, root);
       component.destroy();

diff --git a/packages/mdc-dialog/test/component.test.ts b/packages/mdc-dialog/test/component.test.ts
@@ -182,9 +182,9 @@ describe('MDCDialog', () => {
     const {yesButton, noButton, cancelButton} = setupTest();
     jasmine.clock().tick(1);
 
-    expect(yesButton.classList.contains('mdc-ripple-upgraded')).toBe(true);
-    expect(noButton.classList.contains('mdc-ripple-upgraded')).toBe(true);
-    expect(cancelButton.classList.contains('mdc-ripple-upgraded')).toBe(true);
+    expect(yesButton).toHaveClass('mdc-ripple-upgraded');
+    expect(noButton).toHaveClass('mdc-ripple-upgraded');
+    expect(cancelButton).toHaveClass('mdc-ripple-upgraded');
   });
 
   it('#destroy cleans up all ripples on footer buttons', () => {
@@ -198,9 +198,9 @@ describe('MDCDialog', () => {
     component.destroy();
     jasmine.clock().tick(1);
 
-    expect(yesButton.classList.contains('mdc-ripple-upgraded')).toBe(false);
-    expect(noButton.classList.contains('mdc-ripple-upgraded')).toBe(false);
-    expect(cancelButton.classList.contains('mdc-ripple-upgraded')).toBe(false);
+    expect(yesButton).not.toHaveClass('mdc-ripple-upgraded');
+    expect(noButton).not.toHaveClass('mdc-ripple-upgraded');
+    expect(cancelButton).not.toHaveClass('mdc-ripple-upgraded');
   });
 
   it('#open forwards to MDCDialogFoundation#open', () => {
@@ -297,7 +297,7 @@ describe('MDCDialog', () => {
       jasmine.clock().tick(1);
       jasmine.clock().tick(1);
 
-      expect(root.classList.contains('mdc-dialog--scrollable')).toBe(true);
+      expect(root).toHaveClass('mdc-dialog--scrollable');
     } finally {
       document.body.removeChild(fixture);
     }
@@ -306,14 +306,14 @@ describe('MDCDialog', () => {
   it('adapter#addClass adds a class to the root element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBe(true);
+    expect(root).toHaveClass('foo');
   });
 
   it('adapter#removeClass removes a class from the root element', () => {
     const {root, component} = setupTest();
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBe(false);
+    expect(root).not.toHaveClass('foo');
   });
 
   it('adapter#hasClass returns whether a class exists on the root element',
@@ -331,9 +331,8 @@ describe('MDCDialog', () => {
     const {component} = setupTest();
     (component.getDefaultFoundation() as any)
         .adapter.addBodyClass('mdc-dialog--scroll-lock');
-    expect((document.querySelector<HTMLElement>('body')!
-            ).classList.contains('mdc-dialog--scroll-lock'))
-        .toBe(true);
+    expect((document.querySelector<HTMLElement>('body')!))
+        .toHaveClass('mdc-dialog--scroll-lock');
   });
 
   it('adapter#removeBodyClass removes a class from the body', () => {
@@ -343,7 +342,7 @@ describe('MDCDialog', () => {
     body.classList.add('mdc-dialog--scroll-lock');
     (component.getDefaultFoundation() as any)
         .adapter.removeBodyClass('mdc-dialog--scroll-lock');
-    expect(body.classList.contains('mdc-dialog--scroll-lock')).toBe(false);
+    expect(body).not.toHaveClass('mdc-dialog--scroll-lock');
   });
 
   it('adapter#eventTargetMatches returns whether or not the target matches the selector',

diff --git a/packages/mdc-drawer/test/component.test.ts b/packages/mdc-drawer/test/component.test.ts
@@ -222,15 +222,15 @@ describe('MDCDrawer', () => {
   it('adapter#addClass adds class to drawer', () => {
     const {component, drawer} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('test-class');
-    expect(drawer.classList.contains('test-class')).toBe(true);
+    expect(drawer).toHaveClass('test-class');
   });
 
   it('adapter#removeClass removes class from drawer', () => {
     const {component, drawer} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('test-class');
 
     (component.getDefaultFoundation() as any).adapter.removeClass('test-class');
-    expect(drawer.classList.contains('test-class')).toBe(false);
+    expect(drawer).not.toHaveClass('test-class');
   });
 
   it('adapter#hasClass returns true when class is on drawer element', () => {

diff --git a/packages/mdc-floating-label/test/component.test.ts b/packages/mdc-floating-label/test/component.test.ts
@@ -70,14 +70,14 @@ describe('MDCFloatingLabel', () => {
   it('#adapter.addClass adds a class to the element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBe(true);
+    expect(root).toHaveClass('foo');
   });
 
   it('#adapter.removeClass removes a class from the element', () => {
     const {root, component} = setupTest();
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBe(false);
+    expect(root).not.toHaveClass('foo');
   });
 
   it('#adapter.hasClass returns presence of a class', () => {

diff --git a/packages/mdc-icon-button/test/component.test.ts b/packages/mdc-icon-button/test/component.test.ts
@@ -61,15 +61,15 @@ describe('MDCIconButtonToggle', () => {
     it('#constructor initializes the ripple on the root element', () => {
       const {root} = setupTest();
       jasmine.clock().tick(1);
-      expect(root.classList.contains('mdc-ripple-upgraded')).toBe(true);
+      expect(root).toHaveClass('mdc-ripple-upgraded');
     });
 
     it('#destroy removes the ripple', () => {
       const {root, component} = setupTest();
       jasmine.clock().tick(1);
       component.destroy();
       jasmine.clock().tick(1);
-      expect(root.classList.contains('mdc-ripple-upgraded')).toBe(false);
+      expect(root).not.toHaveClass('mdc-ripple-upgraded');
     });
   }
 
@@ -92,14 +92,14 @@ describe('MDCIconButtonToggle', () => {
   it('#adapter.addClass adds a class to the root element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBe(true);
+    expect(root).toHaveClass('foo');
   });
 
   it('#adapter.removeClass removes a class from the root element', () => {
     const {root, component} = setupTest();
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBe(false);
+    expect(root).not.toHaveClass('foo');
   });
 
   it('#adapter.setAttr sets an attribute on the root element', () => {
@@ -123,13 +123,13 @@ describe('MDCIconButtonToggle', () => {
   it('assert keydown does not trigger ripple', () => {
     const {root} = setupTest();
     emitEvent(root, 'keydown');
-    expect(root.classList.contains(cssClasses.FG_ACTIVATION)).toBe(false);
+    expect(root).not.toHaveClass(cssClasses.FG_ACTIVATION);
   });
 
   it('assert keyup does not trigger ripple', () => {
     const {root} = setupTest();
     emitEvent(root, 'keyup');
-    expect(root.classList.contains(cssClasses.FG_ACTIVATION)).toBe(false);
+    expect(root).not.toHaveClass(cssClasses.FG_ACTIVATION);
   });
 
   it('click handler is added to root element', () => {

diff --git a/packages/mdc-line-ripple/test/component.test.ts b/packages/mdc-line-ripple/test/component.test.ts
@@ -47,15 +47,15 @@ describe('MDCLineRipple', () => {
   it('#adapter.addClass adds a class to the element', () => {
     const {root, component} = setupTest();
     (component.getDefaultFoundation() as any).adapter.addClass('foo');
-    expect(root.classList.contains('foo')).toBe(true);
+    expect(root).toHaveClass('foo');
   });
 
   it('#adapter.removeClass removes a class from the element', () => {
     const {root, component} = setupTest();
 
     root.classList.add('foo');
     (component.getDefaultFoundation() as any).adapter.removeClass('foo');
-    expect(root.classList.contains('foo')).toBe(false);
+    expect(root).not.toHaveClass('foo');
   });
   it('#adapter.hasClass returns true if a class is on the element', () => {
     const {root, component} = setupTest();