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

docs(PPDSC-2449): Add support to TextArea & TextField for users going over the set max length #465

Merged
merged 16 commits into from
Nov 21, 2022
Merged

docs(PPDSC-2449): Add support to TextArea & TextField for users going over the set max length #465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
ec2410e
feat(PPDSC-2396): overlimit maxlength support
Nov 8, 2022
455af23
feat(PPDSC-2396): overlimit maxlength support
Nov 8, 2022
f894cab
feat(PPDSC-2396): overlimit maxlength support
Nov 8, 2022
a4f38b5
feat(PPDSC-2396): overlimit maxlength condition correction
Nov 8, 2022
e1b673d
feat(PPDSC-2396): maxLength value change
Nov 8, 2022
428e9bf
feat(PPDSC-2396): updated character when diff falls to one
Nov 10, 2022
ebde9ea
feat(PPDSC-2396): design feedback changes
Nov 10, 2022
1d733cd
feat(PPDSC-2396): updated 0 character remanining
Nov 10, 2022
711e179
feat(PPDSC-2396): updated 0 character remanining
Nov 14, 2022
36e3829
feat(PPDSC-2396): removed ID
Nov 15, 2022
f229891
feat(PPDSC-2396): renamed story name
Nov 16, 2022
4f28edc
feat(PPDSC-2396): renamed story name
Nov 16, 2022
7358c34
feat(PPDSC-2396): updated snapshots
Nov 17, 2022
cef5d6c
feat(PPDSC-2396): updated snapshots
Nov 18, 2022
8dc82f8
feat(PPDSC-2396): test case updated
Nov 18, 2022
e1588a4
feat(PPDSC-2396): test case updated
Nov 18, 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: 0 additions & 4 deletions src/character-count/__tests__/__snapshots__/character-count.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,6 @@ exports[`CharacterCount displays no message if no max or min specified 1`] = `
padding: 0.5px 0px;
min-height: 12px;
margin-block-end: 8px;
padding-inline: 8px;
}

.emotion-0::before {
Expand Down Expand Up @@ -456,7 +455,6 @@ exports[`CharacterCount displays state passed 1`] = `
padding: 0.5px 0px;
min-height: 12px;
margin-block-end: 8px;
padding-inline: 8px;
}

.emotion-0::before {
Expand Down Expand Up @@ -616,7 +614,6 @@ exports[`CharacterCount with maxLength displays starting number of characters re
padding: 0.5px 0px;
min-height: 12px;
margin-block-end: 8px;
padding-inline: 8px;
}

.emotion-0::before {
Expand Down Expand Up @@ -776,7 +773,6 @@ exports[`CharacterCount with minLength displays starting number of characters re
padding: 0.5px 0px;
min-height: 12px;
margin-block-end: 8px;
padding-inline: 8px;
}

.emotion-0::before {
Expand Down
34 changes: 31 additions & 3 deletions src/character-count/__tests__/character-count.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import {useRef} from 'react';

import {useRef, useState} from 'react';
import {CharacterCount, CharacterCountProps} from '..';
import {
Form,
Expand Down Expand Up @@ -142,6 +141,36 @@ export const CharacterCountMaxLength = () => {
};
CharacterCountMaxLength.storyName = 'Max length';

export const CharacterCountExceedMaxLength = () => {
const ref = useRef<HTMLTextAreaElement>(null);
const [textareavalue, setValue] = useState('');
const maxLength = 200;
function validationLimit() {
return textareavalue.length > maxLength ? 'invalid' : 'valid';
}
return (
<StorybookPage>
<StorybookCase title="Text area">
<Label htmlFor="textArea-overlimit">Label</Label>
<TextArea
placeholder="Placeholder"
ref={ref}
state={validationLimit()}
value={textareavalue}
onChange={({target: {value}}) => setValue(value)}
/>
<CharacterCount
inputRef={ref}
maxLength={maxLength}
state={validationLimit()}
/>
</StorybookCase>
</StorybookPage>
);
};

CharacterCountExceedMaxLength.storyName = 'Max length over limit';

export const CharacterCountMinLength = () => {
const textArea = useRef<HTMLTextAreaElement>(null);
const textField = useRef<HTMLInputElement>(null);
Expand Down Expand Up @@ -199,7 +228,6 @@ export const CharacterCountMinAndMaxLength = () => {
/>
<CharacterCount inputRef={textField} />
</StorybookCase>
<StorybookCase title="default" />
</StorybookPage>
);
};
Expand Down
46 changes: 46 additions & 0 deletions src/character-count/__tests__/character-count.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,52 @@ describe('CharacterCount', () => {
`You have 1 character remaining`,
);
});

test('uses singular when only one character too many', async () => {
const {getByTestId} = renderWithImplementation(InputWithCharacterCount, {
children: ref => (
<>
<TextArea ref={ref} data-testid="text-area" />
<CharacterCount
inputRef={ref}
maxLength={MAX_LENGTH}
data-testid="character-count"
/>
</>
),
});
const characterCount = getByTestId('character-count');
const textArea = getByTestId('text-area');
await act(async () => {
await userEvent.type(textArea, generateString(MAX_LENGTH + 1));
});
expect(characterCount.textContent).toEqual(
`You have 1 character too many`,
);
});

test('updates number of characters too many', async () => {
const {getByTestId} = renderWithImplementation(InputWithCharacterCount, {
children: ref => (
<>
<TextArea ref={ref} data-testid="text-area" />
<CharacterCount
inputRef={ref}
maxLength={MAX_LENGTH}
data-testid="character-count"
/>
</>
),
});
const characterCount = getByTestId('character-count');
const textArea = getByTestId('text-area');
await act(async () => {
await userEvent.type(textArea, generateString(MAX_LENGTH + MSG.length));
});
expect(characterCount.textContent).toEqual(
`You have ${MSG.length + MAX_LENGTH - MAX_LENGTH} characters too many`,
);
});
});

describe('with minLength', () => {
Expand Down
7 changes: 4 additions & 3 deletions src/character-count/character-count.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const defaultFormat: Format = ({currentLength, minLength, maxLength}) => {
}
if (maxLength) {
const diff = maxLength - currentLength;
return `You have ${diff} character${diff === 1 ? '' : 's'} remaining`;
return `You have ${Math.abs(diff)} character${
diff === 1 || diff === -1 ? '' : 's'
} ${diff >= 0 ? 'remaining' : 'too many'}`;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think you're unit test coverage check is failing because you have added branching logic here.

There are four scenarios that need tests:

  1. diff > 1
  2. diff === 1
  3. diff === -1
  4. diff < -1

You can check this by running the unit tests locally and looking at the coverage report generated.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

will do that @mstuartf

Copy link
Contributor Author

@jannuk59 jannuk59 Nov 18, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

@mstuartf diff > 1 and diff === 1 test scenarios already in place. So, I have done with the tests for diff === -1 and diff < -1. Checked the test coverages as well and its passing 100%. Please have a look at it and let me know yours thoughts if any.

}
return '';
};
Expand Down Expand Up @@ -70,15 +72,14 @@ const ThemelessCharacterCount = React.forwardRef<
setMinLength(inputEl.minLength);
}
}

return () => {
if (inputEl) {
inputEl.removeEventListener('input', onInput);
}
};
}, [inputRef, onInput]);

const format: Format = customFormat || defaultFormat;

return (
<StyledCharacterCount
ref={ref}
Expand Down
3 changes: 0 additions & 3 deletions src/character-count/defaults.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,18 @@ export default {
typographyPreset: 'utilityBody010',
minHeight: 'sizing030',
marginBlockEnd: 'space020',
paddingInline: 'space020',
mstuartf marked this conversation as resolved.
Show resolved Hide resolved
},
medium: {
stylePreset: 'characterCount',
typographyPreset: 'utilityBody020',
minHeight: 'sizing030',
marginBlockEnd: 'space020',
paddingInline: 'space020',
},
large: {
stylePreset: 'characterCount',
typographyPreset: 'utilityBody030',
minHeight: 'sizing030',
marginBlockEnd: 'space020',
paddingInline: 'space020',
},
},
};
3 changes: 0 additions & 3 deletions src/theme/__tests__/__snapshots__/theme.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1684,21 +1684,18 @@ Object {
"large": Object {
"marginBlockEnd": "space020",
"minHeight": "sizing030",
"paddingInline": "space020",
"stylePreset": "characterCount",
"typographyPreset": "utilityBody030",
},
"medium": Object {
"marginBlockEnd": "space020",
"minHeight": "sizing030",
"paddingInline": "space020",
"stylePreset": "characterCount",
"typographyPreset": "utilityBody020",
},
"small": Object {
"marginBlockEnd": "space020",
"minHeight": "sizing030",
"paddingInline": "space020",
"stylePreset": "characterCount",
"typographyPreset": "utilityBody010",
},
Expand Down