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

[TextareaAutosize] Convert code to TypeScript #35862

Merged
merged 20 commits into from
Feb 16, 2023
Merged

[TextareaAutosize] Convert code to TypeScript #35862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
6d41eb0
initial refactoring
sai6855 Jan 18, 2023
2fce294
refactor
sai6855 Jan 18, 2023
360804a
refactor
sai6855 Jan 18, 2023
f646861
refactor test.js
sai6855 Jan 18, 2023
a1d4ccf
test refactor
sai6855 Jan 18, 2023
7f4df48
test refactor
sai6855 Jan 18, 2023
9f58cf1
test refactor
sai6855 Jan 18, 2023
9dd9d7a
further refactor
sai6855 Jan 18, 2023
664e49c
added kebabcase types
sai6855 Jan 18, 2023
fba5039
docs
sai6855 Jan 18, 2023
2282019
moved kebabcase to mui/types
sai6855 Jan 18, 2023
32a77ec
moved kebabcase to mui/types
sai6855 Jan 18, 2023
beb368e
prettier
sai6855 Jan 18, 2023
2b32d3b
moved to Map from object
sai6855 Jan 20, 2023
dfd1cea
olivier req changes
sai6855 Jan 30, 2023
c994e23
changed any to number
sai6855 Jan 30, 2023
14fd717
removed kebabtypes
sai6855 Feb 15, 2023
cb83064
removed defensive checks
sai6855 Feb 15, 2023
52531d2
prettier
sai6855 Feb 15, 2023
b734b86
Merge branch 'master' into testarea-typescript
sai6855 Feb 16, 2023
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
2 changes: 1 addition & 1 deletion docs/pages/base/api/textarea-autosize.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"styles": { "classes": [], "globalClasses": {}, "name": null },
"spread": false,
"forwardsRefTo": "HTMLTextAreaElement",
"filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js",
"filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx",
"inheritance": null,
"demos": "<ul><li><a href=\"/base/react-textarea-autosize/\">Textarea Autosize</a></li>\n<li><a href=\"/material-ui/react-textarea-autosize/\">Textarea Autosize</a></li></ul>",
"cssComponent": false
Expand Down
103 changes: 57 additions & 46 deletions ...TextareaAutosize/TextareaAutosize.test.js → ...extareaAutosize/TextareaAutosize.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import TextareaAutosize from '@mui/base/TextareaAutosize';

describe('<TextareaAutosize />', () => {
const { clock, render } = createRenderer();
const mount = createMount;
const mount = createMount();

describeConformanceUnstyled(<TextareaAutosize />, () => ({
render,
Expand All @@ -28,21 +28,28 @@ describe('<TextareaAutosize />', () => {
'ownerStatePropagation',
'propsSpread',
'refForwarding',
'rootClass',
Copy link
Contributor Author

@sai6855 sai6855 Jan 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'rootClass' is not present in fullSuite, hence removed to make typescript happy.

material-ui/test/utils/describeConformanceUnstyled.tsx

Lines 321 to 332 in f13e534

const fullSuite = {
componentProp: testComponentProp,
slotsProp: testSlotsProp,
slotPropsProp: testSlotPropsProp,
slotPropsCallbacks: testSlotPropsCallbacks,
mergeClassName: testClassName,
propsSpread: testPropForwarding,
reactTestRenderer: testReactTestRenderer,
refForwarding: describeRef,
ownerStatePropagation: testOwnerStatePropagation,
};

'slotsProp',
],
}));

describe('layout', () => {
const getComputedStyleStub = {};
const getComputedStyleStub = new Map<Element, Partial<CSSStyleDeclaration>>();
function setLayout(
input,
shadow,
{ getComputedStyle, scrollHeight, lineHeight: lineHeightArg },
input: HTMLTextAreaElement,
shadow: Element,
{
getComputedStyle,
scrollHeight,
lineHeight: lineHeightArg,
}: {
getComputedStyle: Partial<CSSStyleDeclaration>;
scrollHeight?: number;
lineHeight?: number | (() => number);
},
) {
const lineHeight = typeof lineHeightArg === 'function' ? lineHeightArg : () => lineHeightArg;

getComputedStyleStub[input] = getComputedStyle;
getComputedStyleStub.set(input, getComputedStyle);

let index = 0;
stub(shadow, 'scrollHeight').get(() => {
Expand All @@ -57,7 +64,9 @@ describe('<TextareaAutosize />', () => {
this.skip();
}

stub(window, 'getComputedStyle').value((node) => getComputedStyleStub[node] || {});
stub(window, 'getComputedStyle').value(
(node: Element) => getComputedStyleStub.get(node) || {},
);
});

after(() => {
Expand All @@ -69,14 +78,15 @@ describe('<TextareaAutosize />', () => {

it('should handle the resize event', () => {
const { container } = render(<TextareaAutosize />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
expect(input.style).to.have.property('height', '');
expect(input.style).to.have.property('overflow', '');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;

expect(input.style).to.have.property('height', '0px');
expect(input.style).to.have.property('overflow', 'hidden');

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -93,21 +103,22 @@ describe('<TextareaAutosize />', () => {
it('should update when uncontrolled', () => {
const handleChange = spy();
const { container } = render(<TextareaAutosize onChange={handleChange} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
expect(input.style).to.have.property('height', '0px');
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight: 15,
});
act(() => {
input.focus();
});
fireEvent.change(document.activeElement, { target: { value: 'a' } });
const activeElement = document.activeElement!;
fireEvent.change(activeElement, { target: { value: 'a' } });
expect(input.style).to.have.property('height', '30px');
expect(input.style).to.have.property('overflow', 'hidden');
expect(handleChange.callCount).to.equal(1);
Expand All @@ -116,14 +127,14 @@ describe('<TextareaAutosize />', () => {
it('should take the border into account with border-box', () => {
const border = 5;
const { container, forceUpdate } = render(<TextareaAutosize />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
expect(input.style).to.have.property('height', '0px');
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
'border-bottom-width': `${border}px`,
boxSizing: 'border-box',
borderBottomWidth: `${border}px`,
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -136,12 +147,12 @@ describe('<TextareaAutosize />', () => {
it('should take the padding into account with content-box', () => {
const padding = 5;
const { container, forceUpdate } = render(<TextareaAutosize />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
'padding-top': `${padding}px`,
boxSizing: 'border-box',
paddingTop: `${padding}px`,
},
scrollHeight: 30,
lineHeight: 15,
Expand All @@ -155,11 +166,11 @@ describe('<TextareaAutosize />', () => {
const minRows = 3;
const lineHeight = 15;
const { container, forceUpdate } = render(<TextareaAutosize minRows={minRows} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 30,
lineHeight,
Expand All @@ -173,11 +184,11 @@ describe('<TextareaAutosize />', () => {
const maxRows = 3;
const lineHeight = 15;
const { container, forceUpdate } = render(<TextareaAutosize maxRows={maxRows} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight,
Expand All @@ -191,11 +202,11 @@ describe('<TextareaAutosize />', () => {
const maxRows = 3;
const lineHeight = 15;
const { container, forceUpdate } = render(<TextareaAutosize maxRows={maxRows} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 2,
lineHeight,
Expand All @@ -205,7 +216,7 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 3,
lineHeight,
Expand All @@ -215,7 +226,7 @@ describe('<TextareaAutosize />', () => {
expect(input.style).to.have.property('overflow', 'hidden');
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'border-box',
boxSizing: 'border-box',
},
scrollHeight: lineHeight * 4,
lineHeight,
Expand All @@ -228,11 +239,11 @@ describe('<TextareaAutosize />', () => {
it('should update its height when the "maxRows" prop changes', () => {
const lineHeight = 15;
const { container, forceUpdate, setProps } = render(<TextareaAutosize maxRows={3} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight,
Expand All @@ -248,12 +259,12 @@ describe('<TextareaAutosize />', () => {
it('should not sync height if container width is 0px', () => {
const lineHeight = 15;
const { container, forceUpdate } = render(<TextareaAutosize />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: lineHeight * 2,
lineHeight,
Expand All @@ -265,7 +276,7 @@ describe('<TextareaAutosize />', () => {

setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
width: '0px',
},
scrollHeight: lineHeight * 3,
Expand All @@ -280,12 +291,12 @@ describe('<TextareaAutosize />', () => {
describe('warnings', () => {
it('warns if layout is unstable but not crash', () => {
const { container, forceUpdate } = render(<TextareaAutosize maxRows={3} />);
const input = container.querySelector('textarea[aria-hidden=null]');
const shadow = container.querySelector('textarea[aria-hidden=true]');
const input = container.querySelector<HTMLTextAreaElement>('textarea[aria-hidden=null]')!;
const shadow = container.querySelector('textarea[aria-hidden=true]')!;
let index = 0;
setLayout(input, shadow, {
getComputedStyle: {
'box-sizing': 'content-box',
boxSizing: 'content-box',
},
scrollHeight: 100,
lineHeight: () => {
Expand Down
Loading