Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core] ESLint fixes for tests #34924

Merged
merged 7 commits into from
Nov 9, 2022
Merged

[core] ESLint fixes for tests #34924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2d97088
WIP
Janpot Oct 28, 2022
484de40
fixes
Janpot Oct 29, 2022
ab2b69b
dweljf
Janpot Oct 29, 2022
d649300
spec
Janpot Oct 29, 2022
3caf012
redo these
Janpot Oct 29, 2022
c11a56f
prettier
Janpot Oct 29, 2022
fd94f85
Merge branch 'master' into eslint-fixes
Janpot Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/data/material/getting-started/supported-components/MaterialUIComponents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,9 +254,7 @@ export default function MaterialUIComponents() {
Support in MUI X
</Link>
) : null}
{component.materialUI === 'Composable' ? (
<React.Fragment>{'Composable'}</React.Fragment>
) : null}
{component.materialUI === 'Composable' ? 'Composable' : null}
{component.materialUI == null ? '❌ No support' : null}
</TableCell>
</TableRow>
Expand Down
16 changes: 8 additions & 8 deletions packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ describe('useAutocomplete', () => {
const { render } = createRenderer();

it('should preserve DOM nodes of options when re-ordering', () => {
const Test = (props) => {
function Test(props) {
const { options } = props;
const {
groupedOptions,
Expand Down Expand Up @@ -37,7 +37,7 @@ describe('useAutocomplete', () => {
) : null}
</div>
);
};
}

const { rerender } = render(<Test options={['foo', 'bar']} />);
const [fooOptionAsFirst, barOptionAsSecond] = screen.getAllByRole('option');
Expand Down Expand Up @@ -235,7 +235,7 @@ describe('useAutocomplete', () => {
this.skip();
}

const Test = (props) => {
function Test(props) {
const { options } = props;
const {
groupedOptions,
Expand Down Expand Up @@ -263,7 +263,7 @@ describe('useAutocomplete', () => {
) : null}
</div>
);
};
}

const node16ErrorMessage =
"Error: Uncaught [TypeError: Cannot read properties of null (reading 'removeAttribute')]";
Expand Down Expand Up @@ -299,12 +299,12 @@ describe('useAutocomplete', () => {

describe('prop: freeSolo', () => {
it('should not reset if the component value does not change on blur', () => {
const Test = (props) => {
function Test(props) {
const { options } = props;
const { getInputProps } = useAutocomplete({ options, open: true, freeSolo: true });

return <input {...getInputProps()} />;
};
}
render(<Test options={['foo', 'bar']} />);
const input = screen.getByRole('combobox');

Expand All @@ -318,7 +318,7 @@ describe('useAutocomplete', () => {
});

it('should allow tuples or arrays as value when multiple=false', () => {
const Test = () => {
function Test() {
const defaultValue = ['bar'];

const { getClearProps, getInputProps } = useAutocomplete({
Expand All @@ -341,7 +341,7 @@ describe('useAutocomplete', () => {
<button data-testid="button" {...getClearProps()} />;
</div>
);
};
}

const { getByTestId } = render(<Test />);

Expand Down
5 changes: 4 additions & 1 deletion packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ const Badge = React.forwardRef(function Badge(
const styledBadge = <BadgeUnstyled slots={{ root: Root, badge: Badge }} />;

const polymorphicComponentTest = () => {
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
function CustomComponent() {
return <div />;
};

return (
<div>
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ function ButtonWithCustomRoot(props: ButtonUnstyledProps) {
}

const polymorphicComponentTest = () => {
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
function CustomComponent() {
return <div />;
};

return (
<div>
Expand Down
28 changes: 14 additions & 14 deletions packages/mui-base/src/ButtonUnstyled/useButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ describe('useButton', () => {
describe('state: active', () => {
describe('when using a button element', () => {
it('is set when triggered by mouse', () => {
const TestComponent = () => {
function TestComponent() {
const buttonRef = React.useRef(null);
const { active, getRootProps } = useButton({ ref: buttonRef });

return <button {...getRootProps()} className={active ? 'active' : ''} />;
};
}

const { getByRole } = render(<TestComponent />);
const button = getByRole('button');
Expand All @@ -26,12 +26,12 @@ describe('useButton', () => {
});

it('is set when triggered by keyboard', () => {
const TestComponent = () => {
function TestComponent() {
const buttonRef = React.useRef(null);
const { active, getRootProps } = useButton({ ref: buttonRef });

return <button {...getRootProps()} className={active ? 'active' : ''} />;
};
}

const { getByRole } = render(<TestComponent />);
const button = getByRole('button');
Expand All @@ -45,12 +45,12 @@ describe('useButton', () => {

describe('when using a span element', () => {
it('is set when triggered by mouse', () => {
const TestComponent = () => {
function TestComponent() {
const buttonRef = React.useRef(null);
const { active, getRootProps } = useButton({ ref: buttonRef });

return <span {...getRootProps()} className={active ? 'active' : ''} />;
};
}

const { getByRole } = render(<TestComponent />);
const button = getByRole('button');
Expand All @@ -61,12 +61,12 @@ describe('useButton', () => {
});

it('is set when triggered by keyboard', () => {
const TestComponent = () => {
function TestComponent() {
const buttonRef = React.useRef(null);
const { active, getRootProps } = useButton({ ref: buttonRef });

return <span {...getRootProps()} className={active ? 'active' : ''} />;
};
}

const { getByRole } = render(<TestComponent />);
const button = getByRole('button');
Expand All @@ -84,11 +84,11 @@ describe('useButton', () => {
}

it('calls them when provided in props', () => {
const TestComponent = (props: WithClickHandler) => {
function TestComponent(props: WithClickHandler) {
const ref = React.useRef(null);
const { getRootProps } = useButton({ ...props, ref });
return <button {...getRootProps()} />;
};
}

const handleClick = spy();

Expand All @@ -101,11 +101,11 @@ describe('useButton', () => {
it('calls them when provided in getRootProps()', () => {
const handleClick = spy();

const TestComponent = () => {
function TestComponent() {
const ref = React.useRef(null);
const { getRootProps } = useButton({ ref });
return <button {...getRootProps({ onClick: handleClick })} />;
};
}

const { getByRole } = render(<TestComponent />);
fireEvent.click(getByRole('button'));
Expand All @@ -117,11 +117,11 @@ describe('useButton', () => {
const handleClickExternal = spy();
const handleClickInternal = spy();

const TestComponent = (props: WithClickHandler) => {
function TestComponent(props: WithClickHandler) {
const ref = React.useRef(null);
const { getRootProps } = useButton({ ...props, ref });
return <button {...getRootProps({ onClick: handleClickInternal })} />;
};
}

const { getByRole } = render(<TestComponent onClick={handleClickExternal} />);
fireEvent.click(getByRole('button'));
Expand Down
22 changes: 12 additions & 10 deletions packages/mui-base/src/FocusTrap/FocusTrap.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,16 +368,18 @@ describe('<FocusTrap />', () => {
});

it('should restore the focus', () => {
const Test = (props) => (
<div>
<input data-testid="outside-input" />
<FocusTrap open disableAutoFocus {...props}>
<div tabIndex={-1} data-testid="root">
<input data-testid="focus-input" />
</div>
</FocusTrap>
</div>
);
function Test(props) {
return (
<div>
<input data-testid="outside-input" />
<FocusTrap open disableAutoFocus {...props}>
<div tabIndex={-1} data-testid="root">
<input data-testid="focus-input" />
</div>
</FocusTrap>
</div>
);
}

const { setProps } = render(<Test />);

Expand Down
67 changes: 36 additions & 31 deletions packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,42 @@ import FormControlUnstyled from '@mui/base/FormControlUnstyled';
import { expectType } from '@mui/types';
import { FormControlUnstyledRootSlotProps } from './FormControlUnstyled.types';

const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;

const FormControlUnstyledTest = () => (
<div>
<FormControlUnstyled required />
{/* @ts-expect-error */}
<FormControlUnstyled invalidProp={0} />

<FormControlUnstyled component="a" href="#" />

<FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
{/* @ts-expect-error */}
<FormControlUnstyled component={CustomComponent} />

<FormControlUnstyled
component="button"
onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
/>

<FormControlUnstyled<'button'>
component="button"
ref={(elem) => {
expectType<HTMLButtonElement | null, typeof elem>(elem);
}}
onClick={(e) => {
expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
e.currentTarget.checkValidity();
}}
/>
</div>
);
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
function CustomComponent() {
return <div />;
};

function FormControlUnstyledTest() {
return (
<div>
<FormControlUnstyled required />
{/* @ts-expect-error */}
<FormControlUnstyled invalidProp={0} />

<FormControlUnstyled component="a" href="#" />

<FormControlUnstyled component={CustomComponent} stringProp="test" numberProp={0} />
{/* @ts-expect-error */}
<FormControlUnstyled component={CustomComponent} />

<FormControlUnstyled
component="button"
onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.checkValidity()}
/>

<FormControlUnstyled<'button'>
component="button"
ref={(elem) => {
expectType<HTMLButtonElement | null, typeof elem>(elem);
}}
onClick={(e) => {
expectType<React.MouseEvent<HTMLButtonElement, MouseEvent>, typeof e>(e);
e.currentTarget.checkValidity();
}}
/>
</div>
);
}

function Root(props: FormControlUnstyledRootSlotProps) {
const { ownerState, children, ...other } = props;
Expand Down
5 changes: 4 additions & 1 deletion packages/mui-base/src/InputUnstyled/InputUnstyled.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ const InputInput = React.forwardRef(function InputInput(
const styledInput = <InputUnstyled slots={{ root: InputRoot, input: InputInput }} />;

const polymorphicComponentTest = () => {
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> =
function CustomComponent() {
return <div />;
};

return (
<div>
Expand Down
16 changes: 8 additions & 8 deletions packages/mui-base/src/ListboxUnstyled/useControllableReducer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('useControllableReducer', () => {
});

const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
const TestComponent = () => {
function TestComponent() {
const props: UseListboxPropsWithDefaults<string> = {
options: ['a', 'b', 'c'],
defaultValue: 'a',
Expand All @@ -35,7 +35,7 @@ describe('useControllableReducer', () => {
const [, dispatch] = useControllableReducer(reducer, undefined, props);
React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
return null;
};
}

render(<TestComponent />);
expect(reducer.getCalls()[0].args[1]).to.equal(actionToDispatch);
Expand All @@ -53,7 +53,7 @@ describe('useControllableReducer', () => {
});

const actionToDispatch = { type: ActionTypes.setValue as const, value: 'b', event: null };
const TestComponent = () => {
function TestComponent() {
const props: UseListboxPropsWithDefaults<string> = {
options: ['a', 'b', 'c'],
defaultValue: 'a',
Expand All @@ -67,7 +67,7 @@ describe('useControllableReducer', () => {
const [, dispatch] = useControllableReducer(internalReducer, externalReducer, props);
React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
return null;
};
}

render(<TestComponent />);
expect(internalReducer.notCalled).to.equal(true);
Expand All @@ -86,7 +86,7 @@ describe('useControllableReducer', () => {
const handleChange = spy();
const handleHighlightChange = spy();

const TestComponent = () => {
function TestComponent() {
const props: UseListboxPropsWithDefaults<string> = {
options: ['a', 'b', 'c'],
defaultValue: 'a',
Expand All @@ -102,7 +102,7 @@ describe('useControllableReducer', () => {
const [, dispatch] = useControllableReducer(reducer, undefined, props);
React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
return null;
};
}

render(<TestComponent />);
expect(handleChange.getCalls()[0].args[1]).to.equal('b');
Expand All @@ -125,7 +125,7 @@ describe('useControllableReducer', () => {
const handleChange = spy();
const handleHighlightChange = spy();

const TestComponent = () => {
function TestComponent() {
const props: UseListboxPropsWithDefaults<string> = {
options: ['a', 'b', 'c'],
defaultValue: 'a',
Expand All @@ -141,7 +141,7 @@ describe('useControllableReducer', () => {
const [, dispatch] = useControllableReducer(reducer, undefined, props);
React.useEffect(() => dispatch(actionToDispatch), [dispatch]);
return null;
};
}

render(<TestComponent />);
expect(handleHighlightChange.getCalls()[0].args[1]).to.equal('b');
Expand Down
Loading