add e2e tests

package.json

@@ -36,6 +36,7 @@
     "@types/omggif": "^1.0.5",
     "color": "^4.2.3",
     "formik": "^2.4.6",
+    "jimp": "^0.22.12",
     "lodash": "^4.17.21",
     "morsee": "^1.0.9",
     "notistack": "^3.0.1",

src/components/options/ColorSelector.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useRef, useState } from 'react';
-import { Box, Stack, TextField } from '@mui/material';
+import { Box, Stack, TextField, TextFieldProps } from '@mui/material';
 import PaletteIcon from '@mui/icons-material/Palette';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
@@ -7,14 +7,15 @@ import { globalDescriptionFontSize } from '../../config/uiConfig';
 
 interface ColorSelectorProps {
   value: string;
-  onChange: (val: string) => void;
+  onColorChange: (val: string) => void;
   description: string;
 }
 
-const ColorSelector: React.FC<ColorSelectorProps> = ({
+const ColorSelector: React.FC<ColorSelectorProps & TextFieldProps> = ({
   value = '#ffffff',
-  onChange,
-  description
+  onColorChange,
+  description,
+  ...props
 }) => {
   const [color, setColor] = useState<string>(value);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -22,7 +23,7 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
   const handleColorChange = (event: ChangeEvent<HTMLInputElement>) => {
     const val = event.target.value;
     setColor(val);
-    onChange(val);
+    onColorChange(val);
   };
 
   return (
@@ -32,6 +33,7 @@ const ColorSelector: React.FC<ColorSelectorProps> = ({
           sx={{ backgroundColor: 'white' }}
           value={color}
           onChange={handleColorChange}
+          {...props}
         />
         <IconButton onClick={() => inputRef.current?.click()}>
           <PaletteIcon />

src/pages/image/png/change-colors-in-png/index.tsx

@@ -125,12 +125,12 @@ export default function ChangeColorsInPng() {
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => updateField('fromColor', val)}
+                  onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <ColorSelector
                   value={values.toColor}
-                  onChange={(val) => updateField('toColor', val)}
+                  onColorChange={(val) => updateField('toColor', val)}
                   description={'With this color (to color)'}
                 />
                 <TextFieldWithDesc

src/pages/image/png/convert-jgp-to-png/convert-jgp-to-png.e2e.spec.ts

@@ -0,0 +1,72 @@
+import { expect, test } from '@playwright/test';
+import { Buffer } from 'buffer';
+import path from 'path';
+import Jimp from 'jimp';
+
+test.describe('Convert JPG to PNG tool', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/png/convert-jgp-to-png');
+  });
+
+  test('should convert jpg to png', async ({ page }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // 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 0x808080ff
+    const image = await Jimp.read(fileContent);
+    const color = image.getPixelColor(0, 0);
+    expect(color).toBe(0x808080ff);
+  });
+
+  test('should apply transparency before converting jpg to png', async ({
+    page
+  }) => {
+    // Upload image
+    const fileInput = page.locator('input[type="file"]');
+    const imagePath = path.join(__dirname, 'test.jpg');
+    await fileInput?.setInputFiles(imagePath);
+
+    // Enable transparency on color 0x808080
+    await page.getByLabel('Enable PNG Transparency').check();
+    await page.getByTestId('color-input').fill('#808080');
+
+    // 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);
+  });
+});

src/pages/image/png/convert-jgp-to-png/index.tsx

@@ -133,20 +133,21 @@ export default function ConvertJgpToPng() {
         compute={compute}
         getGroups={({ values, updateField }) => [
           {
-            title: 'From color and to color',
+            title: 'PNG Transparency Color',
             component: (
               <Box>
                 <CheckboxWithDesc
                   key="enableTransparency"
-                  title="PNG Transparency Color"
+                  title="Enable PNG Transparency"
                   checked={!!values.enableTransparency}
                   onChange={(value) => updateField('enableTransparency', value)}
                   description="Make the color below transparent."
                 />
                 <ColorSelector
                   value={values.color}
-                  onChange={(val) => updateField('color', val)}
+                  onColorChange={(val) => updateField('color', val)}
                   description={'With this color (to color)'}
+                  inputProps={{ 'data-testid': 'color-input' }}
                 />
                 <TextFieldWithDesc
                   value={values.similarity}

src/pages/image/png/create-transparent/index.tsx

@@ -118,7 +118,7 @@ export default function ChangeColorsInPng() {
               <Box>
                 <ColorSelector
                   value={values.fromColor}
-                  onChange={(val) => updateField('fromColor', val)}
+                  onColorChange={(val) => updateField('fromColor', val)}
                   description={'Replace this color (from color)'}
                 />
                 <TextFieldWithDesc