diff --git a/.playwright/mainUIConsistency.spec.ts b/.playwright/mainUIConsistency.spec.ts index 8015e58a..2a980af7 100644 --- a/.playwright/mainUIConsistency.spec.ts +++ b/.playwright/mainUIConsistency.spec.ts @@ -82,10 +82,14 @@ test.describe('Socialify UI:', () => { // Wait for the page to load/hydrate completely. await page.waitForLoadState('networkidle', customPageLoadTimeout) - await page.getByRole('textbox', { name: 'Optional' }).fill('a'.repeat(1601)) + await page + .locator('[data-input-key="logo"] input') + .fill( + 'data:image/svg+xml,%3Csvg%20width%3D%22800px%22%20height%3D%22800px%22%20viewBox%3D%220%200%201024%201024%22%20class%3D%22icon%22%20%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M373.2%20600.3h278.7v8H373.2z%22%20fill%3D%22%23999999%22%20%2F%3E%3Cpath%20d%3D%22M512.6%20948.3h-9.8c-58.7%200-106.7-48-106.7-106.7v-212h259v176.2c0%2078.4-64.2%20142.5-142.5%20142.5z%22%20fill%3D%22%23F9C0C0%22%20%2F%3E%3Cpath%20d%3D%22M511.7%20958.8c-40.7%200-79-15.9-108-44.9s-44.9-67.3-44.9-108V209.2h-32.2c-11.4%200-20.7-9.3-20.7-20.7v-17.6c0-11.4%209.3-20.7%2020.7-20.7h370.1c11.4%200%2020.7%209.3%2020.7%2020.7v17.6c0%2011.4-9.3%2020.7-20.7%2020.7h-32.2v596.7c0%2040.7-15.9%2079-44.9%20108-28.9%2028.9-67.2%2044.9-107.9%2044.9zM326.6%20165.1c-3.2%200-5.7%202.6-5.7%205.7v17.6c0%203.2%202.6%205.7%205.7%205.7h47.2v611.7c0%2036.7%2014.4%2071.3%2040.5%2097.4%2026.1%2026.1%2060.7%2040.5%2097.4%2040.5s71.3-14.4%2097.4-40.5c26.1-26.1%2040.5-60.7%2040.5-97.4V194.2h47.2c3.2%200%205.7-2.6%205.7-5.7v-17.6c0-3.2-2.6-5.7-5.7-5.7l-370.2-0.1z%22%20fill%3D%22%23999999%22%20%2F%3E%3Cpath%20d%3D%22M373.2%20193.8h50.7v8h-50.7zM466.8%20193.8h185.1v8H466.8z%22%20fill%3D%22%23999999%22%20%2F%3E%3Cpath%20d%3D%22M535.7%20558.5c-14.1%200-25.5-11.4-25.5-25.5s11.4-25.5%2025.5-25.5%2025.5%2011.4%2025.5%2025.5c0%2014-11.4%2025.5-25.5%2025.5z%20m0-43c-9.6%200-17.5%207.8-17.5%2017.5%200%209.6%207.8%2017.5%2017.5%2017.5s17.5-7.8%2017.5-17.5-7.9-17.5-17.5-17.5zM458.1%20417.6c-21.3%200-38.6-17.3-38.6-38.6s17.3-38.6%2038.6-38.6%2038.6%2017.3%2038.6%2038.6-17.3%2038.6-38.6%2038.6z%20m0-69.2c-16.9%200-30.6%2013.7-30.6%2030.6s13.7%2030.6%2030.6%2030.6%2030.6-13.7%2030.6-30.6-13.7-30.6-30.6-30.6zM566.7%20107.3c-11.4%200-20.7-9.3-20.7-20.7s9.3-20.7%2020.7-20.7%2020.7%209.3%2020.7%2020.7-9.2%2020.7-20.7%2020.7z%20m0-33.4c-7%200-12.7%205.7-12.7%2012.7s5.7%2012.7%2012.7%2012.7%2012.7-5.7%2012.7-12.7-5.7-12.7-12.7-12.7zM540.5%20299.5c-16.7%200-30.3-13.6-30.3-30.3s13.6-30.3%2030.3-30.3%2030.3%2013.6%2030.3%2030.3-13.6%2030.3-30.3%2030.3z%20m0-52.6c-12.3%200-22.3%2010-22.3%2022.3s10%2022.3%2022.3%2022.3%2022.3-10%2022.3-22.3-10-22.3-22.3-22.3z%22%20fill%3D%22%23CE0202%22%20%2F%3E%3C%2Fsvg%3E' + ) const errorMessage = await page - .locator('.label-text-alt.text-red-400') + .locator('[data-input-key="logo"] .label-text-alt.text-red-400') .textContent() expect(errorMessage).toBe( 'URI is too long, please use an SVG image URL instead.' diff --git a/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png b/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png index a55dd1db..18fea9f6 100644 Binary files a/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png and b/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-Mobile-Chrome-linux.png differ diff --git a/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png b/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png index 4ba122b6..4d4addb7 100644 Binary files a/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png and b/.playwright/mainUIConsistency.spec.ts-snapshots/Socialify-UI-shows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png differ diff --git a/src/components/configuration/config.tsx b/src/components/configuration/config.tsx index f470bebf..a0418ac0 100644 --- a/src/components/configuration/config.tsx +++ b/src/components/configuration/config.tsx @@ -170,7 +170,6 @@ const Config = ({ repository }: ConfigProp) => { placeholder="Optional" value={config.logo} handleChange={handleChange} - maxlen={1601} />
diff --git a/src/components/configuration/inputWrapper.test.tsx b/src/components/configuration/inputWrapper.test.tsx index 6c8d7bf1..fb21477e 100644 --- a/src/components/configuration/inputWrapper.test.tsx +++ b/src/components/configuration/inputWrapper.test.tsx @@ -1,13 +1,13 @@ import { fireEvent, render, screen } from '@testing-library/react' import '@testing-library/jest-dom' -import InputWrapper from './inputWrapper' +import InputWrapper, { type InputProps } from './inputWrapper' describe('Renders input wrapper correctly', () => { const mockHandleChange = jest.fn() - const baseProps = { + const baseProps: InputProps = { title: 'Test Input Label', - keyName: 'testKeyName' as any, + keyName: 'name', value: '', placeholder: 'Test Placeholder', handleChange: mockHandleChange, @@ -50,7 +50,7 @@ describe('Renders input wrapper correctly', () => { fireEvent.change(inputElement, { target: { value: 'Test Input' } }) expect(mockHandleChange).toHaveBeenCalledWith( { val: 'Test Input', required: true }, - 'testKeyName' + 'name' ) }) diff --git a/src/components/configuration/inputWrapper.tsx b/src/components/configuration/inputWrapper.tsx index dc748dbf..921451d7 100644 --- a/src/components/configuration/inputWrapper.tsx +++ b/src/components/configuration/inputWrapper.tsx @@ -1,6 +1,6 @@ import type ConfigType from '@/common/types/configType' -type InputProps = { +export type InputProps = { title: string alt?: string keyName: keyof ConfigType @@ -24,13 +24,13 @@ const InputWrapper = ({ maxlen, }: InputProps) => { return ( -
+
{ const mockHandleChange = jest.fn() - const baseProps = { + const baseProps: InputProps = { title: 'Test Input Label', - keyName: 'testKeyName' as any, + keyName: 'logo', value: '', placeholder: 'Test Placeholder', handleChange: mockHandleChange, @@ -16,10 +17,9 @@ describe('Renders logo input correctly', () => { } test('renders error message when uri is greater than 1600 characters', () => { - render() + render() const inputElement = screen.getByPlaceholderText('Test Placeholder') - fireEvent.change(inputElement, { target: { value: 'a'.repeat(1601) } }) expect(inputElement).toHaveClass('input-error') const errorElement = screen.getByText( 'URI is too long, please use an SVG image URL instead.' @@ -28,10 +28,9 @@ describe('Renders logo input correctly', () => { }) test('does not renders error message when uri is less than 1601 characters', () => { - render() + render() const inputElement = screen.getByPlaceholderText('Test Placeholder') - fireEvent.change(inputElement, { target: { value: 'a'.repeat(1600) } }) expect(inputElement).not.toHaveClass('input-error') const errorElement = screen.queryByText( 'URI is too long, please use an SVG image URL instead.' diff --git a/src/components/configuration/logoInput.tsx b/src/components/configuration/logoInput.tsx index e6031285..58b86752 100644 --- a/src/components/configuration/logoInput.tsx +++ b/src/components/configuration/logoInput.tsx @@ -1,55 +1,15 @@ -import type ConfigType from '@/common/types/configType' -import { useState } from 'react' -import InputWrapper from './inputWrapper' - -type LogoInputProps = { - title: string - alt?: string - keyName: keyof ConfigType - value: string - placeholder: string - disabled?: boolean - handleChange: (value: any, key: keyof ConfigType) => void - error?: string - maxlen?: number -} - -const LogoInput = ({ - title, - alt, - keyName, - value, - placeholder, - disabled, - handleChange, - maxlen, -}: LogoInputProps) => { - const [error, setError] = useState(undefined) - - const validateLogo = (inputString: string) => { - setError(undefined) - - if (inputString?.length === 1601) { - setError('URI is too long, please use an SVG image URL instead.') - } - } - - const handleLogoChange = (value: any, key: keyof ConfigType) => { - validateLogo(value?.val) - handleChange(value, key) - } +import InputWrapper, { type InputProps } from './inputWrapper' +const LogoInput = (props: InputProps) => { return ( = 1601 + ? 'URI is too long, please use an SVG image URL instead.' + : undefined + } /> ) }