-
-
Notifications
You must be signed in to change notification settings - Fork 111
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ Better warning for long logo data uri (#440)
* 🥅 Feat: handle long svg data uri feat: handle long svg data uri * 🎨 Refactor: svg uri error handling refactor: svg uri error handling * ✅ Test: playwright test for long svg data uri test: playwright test for long svg data uri * 🎨 Refactor: input component and tests refactor: input component and tests * ✅ Update logo input logic and tests --------- Co-authored-by: Wei He <github@weispot.com>
- Loading branch information
Showing
10 changed files
with
174 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "socialify": minor | ||
| --- | ||
|
|
||
| Added error handling for long svg data uri input, also added jest unit test cases for this. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+196 KB
...rror-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+191 KB
...ows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { fireEvent, render, screen } from '@testing-library/react' | ||
| import '@testing-library/jest-dom' | ||
| import InputWrapper, { type InputProps } from './inputWrapper' | ||
|
|
||
| describe('Renders input wrapper correctly', () => { | ||
| const mockHandleChange = jest.fn() | ||
|
|
||
| const baseProps: InputProps = { | ||
| title: 'Test Input Label', | ||
| keyName: 'name', | ||
| value: '', | ||
| placeholder: 'Test Placeholder', | ||
| handleChange: mockHandleChange, | ||
| } | ||
|
|
||
| test('renders the label correctly', () => { | ||
| render(<InputWrapper {...baseProps} />) | ||
|
|
||
| const labelElement = screen.getByText('Test Input Label') | ||
| expect(labelElement).toBeInTheDocument() | ||
| expect(labelElement).toHaveClass('label-text') | ||
| }) | ||
|
|
||
| test('renders the alt label correctly', () => { | ||
| render(<InputWrapper {...baseProps} alt="Test Alt Label" />) | ||
|
|
||
| const altLabelElement = screen.getByText('Test Alt Label') | ||
| expect(altLabelElement).toBeInTheDocument() | ||
| expect(altLabelElement).toHaveClass('label-text-alt') | ||
| }) | ||
|
|
||
| test('renders the placeholder correctly', () => { | ||
| render(<InputWrapper {...baseProps} />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| expect(inputElement).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('renders disabled input correctly', () => { | ||
| render(<InputWrapper {...baseProps} disabled />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| expect(inputElement).toBeDisabled() | ||
| }) | ||
|
|
||
| test('renders input changes correctly', () => { | ||
| render(<InputWrapper {...baseProps} />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| fireEvent.change(inputElement, { target: { value: 'Test Input' } }) | ||
| expect(mockHandleChange).toHaveBeenCalledWith( | ||
| { val: 'Test Input', required: true }, | ||
| 'name' | ||
| ) | ||
| }) | ||
|
|
||
| test('renders error correctly', () => { | ||
| render(<InputWrapper {...baseProps} error="Test Error" />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| expect(inputElement).toHaveClass('input-error') | ||
| const errorElement = screen.getByText('Test Error') | ||
| expect(errorElement).toBeInTheDocument() | ||
| expect(errorElement).toHaveClass('text-red-400') | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { render, screen } from '@testing-library/react' | ||
| import '@testing-library/jest-dom' | ||
| import type { InputProps } from './inputWrapper' | ||
| import LogoInput from './logoInput' | ||
|
|
||
| describe('Renders logo input correctly', () => { | ||
| const mockHandleChange = jest.fn() | ||
|
|
||
| const baseProps: InputProps = { | ||
| title: 'Test Input Label', | ||
| keyName: 'logo', | ||
| value: '', | ||
| placeholder: 'Test Placeholder', | ||
| handleChange: mockHandleChange, | ||
| error: 'URI is too long, please use an SVG image URL instead.', | ||
| maxlen: 1601, | ||
| } | ||
|
|
||
| test('renders error message when uri is greater than 1600 characters', () => { | ||
| render(<LogoInput {...baseProps} value={'a'.repeat(1601)} />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| expect(inputElement).toHaveClass('input-error') | ||
| const errorElement = screen.getByText( | ||
| 'URI is too long, please use an SVG image URL instead.' | ||
| ) | ||
| expect(errorElement).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('does not renders error message when uri is less than 1601 characters', () => { | ||
| render(<LogoInput {...baseProps} value={'a'.repeat(1600)} />) | ||
|
|
||
| const inputElement = screen.getByPlaceholderText('Test Placeholder') | ||
| expect(inputElement).not.toHaveClass('input-error') | ||
| const errorElement = screen.queryByText( | ||
| 'URI is too long, please use an SVG image URL instead.' | ||
| ) | ||
| expect(errorElement).not.toBeInTheDocument() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import InputWrapper, { type InputProps } from './inputWrapper' | ||
|
|
||
| const LogoInput = (props: InputProps) => { | ||
| return ( | ||
| <InputWrapper | ||
| {...props} | ||
| maxlen={1601} | ||
| error={ | ||
| props.value?.length >= 1601 | ||
| ? 'URI is too long, please use an SVG image URL instead.' | ||
| : undefined | ||
| } | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| export default LogoInput |