diff --git a/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts b/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts new file mode 100644 index 0000000..83eda93 --- /dev/null +++ b/src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts @@ -0,0 +1,41 @@ +import { expect, test } from '@playwright/test'; +import { Buffer } from 'buffer'; +import path from 'path'; +import Jimp from 'jimp'; + +test.describe('Change colors in png', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/png/change-colors-in-png'); + }); + + test('should change pixel color', async ({ page }) => { + // Upload image + const fileInput = page.locator('input[type="file"]'); + const imagePath = path.join(__dirname, 'test.png'); + await fileInput?.setInputFiles(imagePath); + + await page.getByTestId('from-color-input').fill('#FF0000'); + await page.getByTestId('to-color-input').fill('#0000FF'); + + // Click on download + const downloadPromise = page.waitForEvent('download'); + await page.getByText('Save as').click(); + + // Intercept and read downloaded PNG + const download = await downloadPromise; + const downloadStream = await download.createReadStream(); + + const chunks = []; + for await (const chunk of downloadStream) { + chunks.push(chunk); + } + const fileContent = Buffer.concat(chunks); + + expect(fileContent.length).toBeGreaterThan(0); + + // Check that the first pixel is transparent + const image = await Jimp.read(fileContent); + const color = image.getPixelColor(0, 0); + expect(color).toBe(0x0000ffff); + }); +}); diff --git a/src/pages/image/png/change-colors-in-png/index.tsx b/src/pages/image/png/change-colors-in-png/index.tsx index 77d32ab..e2a37d3 100644 --- a/src/pages/image/png/change-colors-in-png/index.tsx +++ b/src/pages/image/png/change-colors-in-png/index.tsx @@ -127,11 +127,13 @@ export default function ChangeColorsInPng() { value={values.fromColor} onColorChange={(val) => updateField('fromColor', val)} description={'Replace this color (from color)'} + inputProps={{ 'data-testid': 'from-color-input' }} /> updateField('toColor', val)} description={'With this color (to color)'} + inputProps={{ 'data-testid': 'to-color-input' }} /> { + test.beforeEach(async ({ page }) => { + await page.goto('/png/create-transparent'); + }); + + test('should make png color transparent', async ({ page }) => { + // Upload image + const fileInput = page.locator('input[type="file"]'); + const imagePath = path.join(__dirname, 'test.png'); + await fileInput?.setInputFiles(imagePath); + + await page.getByTestId('color-input').fill('#FF0000'); + + // Click on download + const downloadPromise = page.waitForEvent('download'); + await page.getByText('Save as').click(); + + // Intercept and read downloaded PNG + const download = await downloadPromise; + const downloadStream = await download.createReadStream(); + + const chunks = []; + for await (const chunk of downloadStream) { + chunks.push(chunk); + } + const fileContent = Buffer.concat(chunks); + + expect(fileContent.length).toBeGreaterThan(0); + + // Check that the first pixel is transparent + const image = await Jimp.read(fileContent); + const color = image.getPixelColor(0, 0); + expect(color).toBe(0); + }); +}); diff --git a/src/pages/image/png/create-transparent/index.tsx b/src/pages/image/png/create-transparent/index.tsx index d17658f..e55ec98 100644 --- a/src/pages/image/png/create-transparent/index.tsx +++ b/src/pages/image/png/create-transparent/index.tsx @@ -120,6 +120,7 @@ export default function ChangeColorsInPng() { value={values.fromColor} onColorChange={(val) => updateField('fromColor', val)} description={'Replace this color (from color)'} + inputProps={{ 'data-testid': 'color-input' }} />