From 6a16269b41166505942f94dcb3eca69307ea17d8 Mon Sep 17 00:00:00 2001 From: Habib Date: Fri, 28 Jun 2024 14:58:29 +0200 Subject: [PATCH] add e2e tests for all image tools --- .../change-colors-in-png.e2e.spec.ts | 41 ++++++++++++++++++ .../image/png/change-colors-in-png/index.tsx | 2 + .../image/png/change-colors-in-png/test.png | Bin 0 -> 3649 bytes .../create-transparent.e2e.spec.ts | 40 +++++++++++++++++ .../image/png/create-transparent/index.tsx | 1 + .../image/png/create-transparent/test.png | Bin 0 -> 3649 bytes 6 files changed, 84 insertions(+) create mode 100644 src/pages/image/png/change-colors-in-png/change-colors-in-png.e2e.spec.ts create mode 100644 src/pages/image/png/change-colors-in-png/test.png create mode 100644 src/pages/image/png/create-transparent/create-transparent.e2e.spec.ts create mode 100644 src/pages/image/png/create-transparent/test.png 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' }} /> OrsHuzA|a!UdG`4jLV48M5RSa;u4~c+nAiGOG9Z&t940fm6oP1 zqeY4oL0no5HQEtvT{4}i(nzL)p(u?|2QjS_bDlWoyuZBv!ucWl*?VQ}=d#v!eZOnx z`jR~0T83I`YHDyVPl7)fg{q&X2Dml{x7-1P`Wb(ZBWf*!U&w&dCoh5<x8)^&3h+MlHR548`! zFt9kY-%=hN$G~QpJt-#Ll5#xK6LP-ofvzXS3mA8)r!Cm0^>eTFso#}tDugQ&i&6}o z<>-m3fv+a~DtkoNXnqKPr4f_$?HFcxd0Aneru>b!{l_+4v9!n5L{f5HPLK*62ttHYZr{>#=3+w$7V% zRORxKrpej@Xd(W9rm2E%Y{~++sry!$_!QQAObS%-GX-qrmB#rFx4Mkk&m%5QDtx+> zqObY=TVakb>}{m`+5;-iPRE6=J8g$q`}pQIZr9~j<%_ruWtEQc*!K(^KOyhIG$&CU z0U33ppqzXt^l`>Gv~5j~XCl$I`zEh0w+!FGq=w$3r+bk>NDA<(v*Yo(LpsM#u9UH- z$2CqoyFCfDV9~4eOZyztl;^-qj4mT(vFA+eOjlNu*RjO-tfn{P8lz7VQcqiVG{8A( z3#QZz5n<>TiN>&Yv+LfUPG!BjF>bY2)cboURVPHAw!X>e@zxFe#7k^HXjm$^R;$g` z9qDW(^-y2hG8a#EItm@_i2Ko+FoMT~^xBc7oF7CQ&a$L(d~qR+25(@K1z7b6SKP#{ zRD)abZT<8tRfLJrX4jPg9CKDtxSG{a>*4AMR{`{u*%q@$ap5!e5SS}0h2>C#jXK+# z`V@l>CO*9rwXP>;O?6M831oDt{qWsvt6&r-IV5M!DJ}VTtUZohAClA0ZuuVDGMzO4 zb>fxl+M9!~WtZBGfD5p#t7|G>s~-1HBXVxIFIg+?`Xms_4V#DiG!U4&Be3iC!~z$0i|RxzXqj})Sr z0E4s4Or+bgzo;m5tAVXe?5lOTYCMUaMfej(+(}P@XUtVVoz1NZ#wc|!FCYl%LYnf$ zV~yXvYLZhw4Bsv27pFSlmIfHmWDdmtCaI4 z_|Gfz%vf|a{Za?#i`xvy?PK=LZxKUqZjlqSfDby0pIzVhTzoGZL(xq$@O5*Nl~rjwpwwUJAA=D4~c7S~DE?BcS@Y0lYydrBi-kP~CF_-@6& zPM*nnmjw&F$7$XUpCHKtUBFZg?0zw-dlONWj$QqiD``tL2(J^&VnhH_~9U9hE6*yLfmgwCH*;d9MA+( zsOw;%;tQm3Qd6NPuVD`9#G#l6)@+czFK4NvmMi~R!X@e}WNMd@w3D~U4{sM?M=GT; z;|Uh5gCF%Xw%$KyxHERgrAs5%x$Ci^X;131C7UCYybtbjUlqCfR72a6Px@{$PS@ki zx}|0;whj+I3~MGtXEnjCcP!APclVP$nu;{c=Koshz6HyLK&6z^)1cer=`jsANQ2##N`BE z{WI{RtY_I((=qAgVxxv_-Ii>I&O%oU1cHDY>+nWMGhAX)E{#EBzpImXTH%bDpMP2- zms;*q<;l`2;^T7G<5Z)Ndy<>@;@GidV)RmuQq)vp3#08BhH@y!G5et5VKS@^Uq$=x zHTiB*j9@mc;6N@TvH@4pu067o(gy~2T>C;U6yRL%GdQG!>KF3F-~ZvB(hvh#Ad)e0 zrQ0&5Schj4%(j!W=ze>W`1Z>u7ZYh?}3SI7!4KVdb>W%qsd*db!r?%gO)pRl@j{qL5&q;uKr!xa$IS2BE>5rTP_-i z*uLtpMU8JQ`zR_>(Gn4ARyD^>7J;+48uA1&6$5`AzWO<*Cpt@2^IViuSOR497=~G) zKo~I>5r~rWVhj-jgIX%Nx8rTh_;*Z4CKW1+Df3%5RpS7_a2PRUa!DH2u5`e)2b9#~ z`f7o6uWDU)oV9WRi5@-I^#}A-K$Cl^w^=0Q#061n)~Z#-qb$ar;kSv=J%_3z!ZFIY z41l6BSt($?7vz}(Q3m_ve%|tPXCK8FsrTk&4+;$AR#heSFj~1Gb=?O@OP`51WFrBI z14)fg_f|CqnRgJ_D7NBt@Z|=$-=p^!mm7c6$MZ$%6KL9=A!yRz+=6!7IlTbRf|lf$ z>cqsz`zJtACB6IKauB+TuUF3Y)Q17X)3KTO*Px-|yWR0LXKs4z=6vr<(ZnFge;xi`9Q?ncG2ZO! zh<>u8mFz+CRt$P!*~&#<$VlH@!)PfOM#Sjd#{f=&=0rRwpDX#H2%pR%Vu;me7Lh{j zLF`Jq&w?%U5NH0i84C*9z}-!JN;OZwTLe|)g&~iWsv2l7%z%MHanpTEHeACE9=M<^ zA*)zSRjezc)w&U`Jb~j?xNveiFoT9su0#~SlSp;<$)F4 zwSbDB3ZQN91|-nK2xzR>n<){udh9p5F5wcypufoHty>NL>m3!l(pgNCAFTo` z02;j-k`1X#_AMmqe4cK^R!q7m5$xEdxpWy*776N_h~j)h)(u=MFW{|{#z2&5Ivb8c z<4l9JZ { + 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' }} /> OrsHuzA|a!UdG`4jLV48M5RSa;u4~c+nAiGOG9Z&t940fm6oP1 zqeY4oL0no5HQEtvT{4}i(nzL)p(u?|2QjS_bDlWoyuZBv!ucWl*?VQ}=d#v!eZOnx z`jR~0T83I`YHDyVPl7)fg{q&X2Dml{x7-1P`Wb(ZBWf*!U&w&dCoh5<x8)^&3h+MlHR548`! zFt9kY-%=hN$G~QpJt-#Ll5#xK6LP-ofvzXS3mA8)r!Cm0^>eTFso#}tDugQ&i&6}o z<>-m3fv+a~DtkoNXnqKPr4f_$?HFcxd0Aneru>b!{l_+4v9!n5L{f5HPLK*62ttHYZr{>#=3+w$7V% zRORxKrpej@Xd(W9rm2E%Y{~++sry!$_!QQAObS%-GX-qrmB#rFx4Mkk&m%5QDtx+> zqObY=TVakb>}{m`+5;-iPRE6=J8g$q`}pQIZr9~j<%_ruWtEQc*!K(^KOyhIG$&CU z0U33ppqzXt^l`>Gv~5j~XCl$I`zEh0w+!FGq=w$3r+bk>NDA<(v*Yo(LpsM#u9UH- z$2CqoyFCfDV9~4eOZyztl;^-qj4mT(vFA+eOjlNu*RjO-tfn{P8lz7VQcqiVG{8A( z3#QZz5n<>TiN>&Yv+LfUPG!BjF>bY2)cboURVPHAw!X>e@zxFe#7k^HXjm$^R;$g` z9qDW(^-y2hG8a#EItm@_i2Ko+FoMT~^xBc7oF7CQ&a$L(d~qR+25(@K1z7b6SKP#{ zRD)abZT<8tRfLJrX4jPg9CKDtxSG{a>*4AMR{`{u*%q@$ap5!e5SS}0h2>C#jXK+# z`V@l>CO*9rwXP>;O?6M831oDt{qWsvt6&r-IV5M!DJ}VTtUZohAClA0ZuuVDGMzO4 zb>fxl+M9!~WtZBGfD5p#t7|G>s~-1HBXVxIFIg+?`Xms_4V#DiG!U4&Be3iC!~z$0i|RxzXqj})Sr z0E4s4Or+bgzo;m5tAVXe?5lOTYCMUaMfej(+(}P@XUtVVoz1NZ#wc|!FCYl%LYnf$ zV~yXvYLZhw4Bsv27pFSlmIfHmWDdmtCaI4 z_|Gfz%vf|a{Za?#i`xvy?PK=LZxKUqZjlqSfDby0pIzVhTzoGZL(xq$@O5*Nl~rjwpwwUJAA=D4~c7S~DE?BcS@Y0lYydrBi-kP~CF_-@6& zPM*nnmjw&F$7$XUpCHKtUBFZg?0zw-dlONWj$QqiD``tL2(J^&VnhH_~9U9hE6*yLfmgwCH*;d9MA+( zsOw;%;tQm3Qd6NPuVD`9#G#l6)@+czFK4NvmMi~R!X@e}WNMd@w3D~U4{sM?M=GT; z;|Uh5gCF%Xw%$KyxHERgrAs5%x$Ci^X;131C7UCYybtbjUlqCfR72a6Px@{$PS@ki zx}|0;whj+I3~MGtXEnjCcP!APclVP$nu;{c=Koshz6HyLK&6z^)1cer=`jsANQ2##N`BE z{WI{RtY_I((=qAgVxxv_-Ii>I&O%oU1cHDY>+nWMGhAX)E{#EBzpImXTH%bDpMP2- zms;*q<;l`2;^T7G<5Z)Ndy<>@;@GidV)RmuQq)vp3#08BhH@y!G5et5VKS@^Uq$=x zHTiB*j9@mc;6N@TvH@4pu067o(gy~2T>C;U6yRL%GdQG!>KF3F-~ZvB(hvh#Ad)e0 zrQ0&5Schj4%(j!W=ze>W`1Z>u7ZYh?}3SI7!4KVdb>W%qsd*db!r?%gO)pRl@j{qL5&q;uKr!xa$IS2BE>5rTP_-i z*uLtpMU8JQ`zR_>(Gn4ARyD^>7J;+48uA1&6$5`AzWO<*Cpt@2^IViuSOR497=~G) zKo~I>5r~rWVhj-jgIX%Nx8rTh_;*Z4CKW1+Df3%5RpS7_a2PRUa!DH2u5`e)2b9#~ z`f7o6uWDU)oV9WRi5@-I^#}A-K$Cl^w^=0Q#061n)~Z#-qb$ar;kSv=J%_3z!ZFIY z41l6BSt($?7vz}(Q3m_ve%|tPXCK8FsrTk&4+;$AR#heSFj~1Gb=?O@OP`51WFrBI z14)fg_f|CqnRgJ_D7NBt@Z|=$-=p^!mm7c6$MZ$%6KL9=A!yRz+=6!7IlTbRf|lf$ z>cqsz`zJtACB6IKauB+TuUF3Y)Q17X)3KTO*Px-|yWR0LXKs4z=6vr<(ZnFge;xi`9Q?ncG2ZO! zh<>u8mFz+CRt$P!*~&#<$VlH@!)PfOM#Sjd#{f=&=0rRwpDX#H2%pR%Vu;me7Lh{j zLF`Jq&w?%U5NH0i84C*9z}-!JN;OZwTLe|)g&~iWsv2l7%z%MHanpTEHeACE9=M<^ zA*)zSRjezc)w&U`Jb~j?xNveiFoT9su0#~SlSp;<$)F4 zwSbDB3ZQN91|-nK2xzR>n<){udh9p5F5wcypufoHty>NL>m3!l(pgNCAFTo` z02;j-k`1X#_AMmqe4cK^R!q7m5$xEdxpWy*776N_h~j)h)(u=MFW{|{#z2&5Ivb8c z<4l9JZ