diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 20095374d6de82..9d3a102832b646 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -108,7 +108,7 @@ export function testClassName( React.cloneElement(element, { className, 'data-testid': testId }), ); - expect(getByTestId(testId).getAttribute('class')).to.include(className); + expect(getByTestId(testId)).to.have.class(className); }); } @@ -172,7 +172,7 @@ export function testPropsSpread( React.cloneElement(element, { [testProp]: value, 'data-testid': testId }), ); - expect(getByTestId(testId).getAttribute(testProp)).to.equal(value); + expect(getByTestId(testId)).to.have.attribute(testProp, value); }); } @@ -230,14 +230,14 @@ export function testRootClass( // jump to the host component because some components pass the `root` class // to the `classes` prop of the root component. // https://github.com/mui/material-ui/blob/f9896bcd129a1209153106296b3d2487547ba205/packages/material-ui/src/OutlinedInput/OutlinedInput.js#L101 - expect(container.firstElementChild?.getAttribute('class')).to.include(className); - expect(container.firstElementChild?.getAttribute('class')).to.include(classes.root); + expect(container.firstChild).to.have.class(className); + expect(container.firstChild).to.have.class(classes.root); expect(document.querySelectorAll(`.${classes.root}`).length).to.equal(1); // classes test only for @mui/material if (!skip || !skip.includes('classesRoot')) { // Test that classes prop works - expect(container.firstElementChild?.getAttribute('class')).to.include(classesRootClassname); + expect(container.firstChild).to.have.class(classesRootClassname); // Test that `classes` does not spread to DOM expect(document.querySelectorAll('[classes]').length).to.equal(0); @@ -288,7 +288,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => Confo const renderedElement = queryByTestId('custom'); expect(renderedElement).not.to.equal(null); if (slotOptions.expectedClassName) { - expect(renderedElement?.getAttribute('class')).to.include(slotOptions.expectedClassName); + expect(renderedElement).to.have.class(slotOptions.expectedClassName); } }); @@ -319,7 +319,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => Confo expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement); if (slotOptions.expectedClassName) { - expect(renderedElement?.getAttribute('class')).to.include(slotOptions.expectedClassName); + expect(renderedElement).to.have.class(slotOptions.expectedClassName); } }); } @@ -343,7 +343,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => Confo const renderedElement = queryByTestId('custom'); expect(renderedElement).not.to.equal(null); if (slotOptions.expectedClassName) { - expect(renderedElement?.getAttribute('class')).to.include(slotOptions.expectedClassName); + expect(renderedElement).to.have.class(slotOptions.expectedClassName); } }); @@ -423,9 +423,7 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => Confo expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement); if (slotOptions.expectedClassName) { - expect(renderedElement?.getAttribute('class')).to.include( - slotOptions.expectedClassName, - ); + expect(renderedElement).to.have.class(slotOptions.expectedClassName); } }); } @@ -453,7 +451,7 @@ function testSlotPropsProp(element: React.ReactElement, getOptions: () => C expect(slotComponent).not.to.equal(null); if (slotOptions.expectedClassName) { - expect(slotComponent?.getAttribute('class')).to.include(slotOptions.expectedClassName); + expect(slotComponent).to.have.class(slotOptions.expectedClassName); } }); @@ -468,12 +466,8 @@ function testSlotPropsProp(element: React.ReactElement, getOptions: () => C const { getByTestId } = await render(React.cloneElement(element, { slotProps })); - expect(getByTestId('custom').getAttribute('class')).to.include( - slotOptions.expectedClassName, - ); - expect(getByTestId('custom').getAttribute('class')).to.include( - slotProps[slotName].className, - ); + expect(getByTestId('custom')).to.have.class(slotOptions.expectedClassName); + expect(getByTestId('custom')).to.have.class(slotProps[slotName].className); }); } @@ -490,7 +484,7 @@ function testSlotPropsProp(element: React.ReactElement, getOptions: () => C expect(slotComponent).not.to.equal(null); if (slotOptions.expectedClassName) { - expect(slotComponent?.getAttribute('class')).to.include(slotOptions.expectedClassName); + expect(slotComponent).to.have.class(slotOptions.expectedClassName); } }); @@ -513,9 +507,8 @@ function testSlotPropsProp(element: React.ReactElement, getOptions: () => C React.cloneElement(element, { componentsProps, slotProps }), ); const slotComponent = queryByTestId('custom'); - expect(slotComponent?.getAttribute('data-from-slot-props')).to.equal('true'); - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(slotComponent?.getAttribute('data-from-components-props')).to.be.null; + expect(slotComponent).to.have.attribute('data-from-slot-props', 'true'); + expect(slotComponent).not.to.have.attribute('data-from-components-props'); }); } }); @@ -615,7 +608,7 @@ function testThemeDefaultProps( const { container } = await render({element}); - expect(container.firstElementChild?.getAttribute(testProp)).to.equal('testProp'); + expect(container.firstChild).to.have.attribute(testProp, 'testProp'); }); }); }