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.

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

✨ Better warning for long logo data uri #440

Merged
merged 6 commits into from
Dec 17, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/lucky-terms-protect.md
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.
29 changes: 29 additions & 0 deletions .playwright/mainUIConsistency.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,33 @@ test.describe('Socialify UI:', () => {
const toastImage = await page.screenshot(customScreenshotOptions)
expect(toastImage).toMatchSnapshot(customDiffPixelRatio)
})

test('shows error when svg data uri input length exceeds the limit', async ({
page,
}: { page: Page }): Promise<void> => {
await page.goto(repoPreviewURL, customPageLoadTimeout)

// Wait for the page to load/hydrate completely.
await page.waitForLoadState('networkidle', customPageLoadTimeout)

await page.getByRole('textbox', { name: 'Optional' }).fill('a'.repeat(1601))

const errorMessage = await page
.locator('.label-text-alt.text-red-400')
.textContent()
expect(errorMessage).toBe(
'URI is too long, please use an SVG image URL instead.'
)

// To maintain consistency, de-select the 'Stars' checkbox,
// and selects the 'Description' checkbox.
await page.click('input[name="stargazers"]')
await page.click('input[name="description"]')

// Wait for the component transition/animation to finish completely.
await page.waitForTimeout(1000)

const image = await page.screenshot(customScreenshotOptions)
expect(image).toMatchSnapshot(customDiffPixelRatio)
})
})
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/components/configuration/config.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,11 @@ const Config = ({ repository }: ConfigProp) => {
placeholder="Optional"
value={config.logo}
handleChange={handleChange}
error={
config?.logo?.length > 1600
? 'URI is too long, please use an SVG image URL instead.'
: undefined
}
/>

<div className="columns-2">
Expand Down
48 changes: 48 additions & 0 deletions src/components/configuration/configuration.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { fireEvent, render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import InputWrapper from './inputWrapper'

describe('svg data uri error checking', () => {
const mockHandleChange = jest.fn()

const baseProps = {
title: 'SVG Logo',
keyName: 'logo' as any,
value: '',
placeholder: 'SVG Data URI',
handleChange: mockHandleChange,
}

test('shows error message for svg data uri having more that 1600 characters', () => {
const invalidInput = 'a'.repeat(1601)

render(
<InputWrapper
{...baseProps}
error="URI is too long, please use an SVG image URL instead."
/>
)

const input = screen.getByPlaceholderText('SVG Data URI')
fireEvent.change(input, { target: { value: invalidInput } })

const errorMessage = screen.getByText(
'URI is too long, please use an SVG image URL instead.'
)
expect(errorMessage).toBeInTheDocument()
})

test('does not show error message for svg data uri having less than 1601 characters', () => {
const validInput = 'a'.repeat(1600)

render(<InputWrapper {...baseProps} error={undefined} />)

const input = screen.getByPlaceholderText('SVG Data URI')
fireEvent.change(input, { target: { value: validInput } })

const errorMessage = screen.queryByText(
/URI is too long, please use an SVG image URL instead./i
)
expect(errorMessage).not.toBeInTheDocument()
})
})
9 changes: 8 additions & 1 deletion src/components/configuration/inputWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type InputProps = {
placeholder: string
disabled?: boolean
handleChange: (value: any, key: keyof ConfigType) => void
error?: string
}

const InputWrapper = ({
Expand All @@ -18,6 +19,7 @@ const InputWrapper = ({
placeholder,
disabled,
handleChange,
error,
}: InputProps) => {
return (
<div className="form-control w-full">
Expand All @@ -26,7 +28,7 @@ const InputWrapper = ({
{alt && <span className="label-text-alt font-semibold">{alt}</span>}
</label>
<input
className="input input-sm input-bordered font-semibold w-full"
className={`input input-sm input-bordered font-semibold w-full ${error && 'input-error'}`}
type="text"
value={value || ''}
disabled={!!disabled}
Expand All @@ -35,6 +37,11 @@ const InputWrapper = ({
handleChange({ val: e.target.value, required: true }, keyName)
}}
/>
{error && (
<div className="label">
<span className="label-text-alt text-red-400">{error}</span>
</div>
)}
</div>
)
}
Expand Down
Loading