From 2a5052f55f1c497d02c02005ccd7ba2af44abdb8 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 12 Aug 2021 16:40:08 -0400
Subject: [PATCH] Add another test for percent

---
 .../image-component/unicode/pages/index.js    |   7 ++++++
 .../image-component/unicode/public/50%.jpg    | Bin 0 -> 6765 bytes
 .../unicode/test/index.test.js                |  20 ++++++++++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 test/integration/image-component/unicode/public/50%.jpg

diff --git a/test/integration/image-component/unicode/pages/index.js b/test/integration/image-component/unicode/pages/index.js
index 3951610b33153..cc5a0a7f0e8e6 100644
--- a/test/integration/image-component/unicode/pages/index.js
+++ b/test/integration/image-component/unicode/pages/index.js
@@ -14,6 +14,13 @@ const Page = () => {
         width={400}
         height={400}
       />
+      <Image id="internal-precent" src="/50%.jpg" width={200} height={200} />
+      <Image
+        id="external-precent"
+        src="https://image-optimization-test.vercel.app/50%.jpg"
+        width={200}
+        height={200}
+      />
     </div>
   )
 }
diff --git a/test/integration/image-component/unicode/public/50%.jpg b/test/integration/image-component/unicode/public/50%.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d536c882412ed3df0dc162823ca5146bcc033499
GIT binary patch
literal 6765
zcmeHK2~-nT7rx0%2m%J#v>-x6R0=4dR1uMV3krk?xD*$JK%#*_5>`=Mq0&}Bt+uvD
zP_X#B;ZodCL7{GyilVZ(22r4jfQlku=6@4bJyo#&zvukt{4ZzTd~@G@_ulWmJMT@1
z3gSKt@o;6i0)+zLj($K$VTMaAKLo(j6N~{s5vUY(z!0LKA0+bumt%l2=ng>5q;^Xv
zX_;6rCI^WIuwwIs5}}wUj9^Y2Zw^+DEKi)YfSMeSmct>}M|@YA3WxCe6@z|!((1UJ
zsHWGkoSYW0Io__U87}ew=@o$y5dta`AS_%W;<!07XV00-q*nqJv_TnkKshi-9O1xb
z&me7*x^mlZbuVv{EC9;J{r&h`%I`iX2Xn<iC=rTiKo~3z3PU&+fc8sJgh&EF*F<uw
z7)b<)$rv<6C_sc4k~p*zqcPB2)QP{5>-ch<kj^g%GlF=5!3gg~*mO}Jd1xQp83WQl
zcHFq(ToFHrN#=qr5{B>vT=_s}*UxYt%@4saK@{RFZ~CZL5iglJ9o>x(_cg(R&Lkd>
z@ZO+6mzf9~B3u>C_xI|;vIvPI2Vqn#RD-A`ehvtux}v&=h+O>;Ms}zoUX*(`-Wt#I
zorUB>k^F4<A}{Z*xfMZTCzMMtKyn$6%Odlu2Y@m85|%H*$PQ*J5^_j=6ay9#%yo7_
z*c9QECBo@s49F&SL>xVnl#}sP#PgiUI7#{C#ep7dgmn<E<_g?MedG)4h>)<mV!-vn
z1zx0I<O_G^isgKf9b8Ys^L0mZ<QEr6M7~{f@w5=WE2~TY5KrVz%E`G^5dwLQqS$Cu
zQ51*dj(pL^2Z~(W5Jom>Y;L$8nNJc&gFht@xFCc@s1Jg0cmqt}fEzfXdjyEkNC@yj
zfFxWr%0&_`dg|60C!Z&VB}mSPX!)2J^=!Fj=ge+hCWInsIMm5?gTP5|CqyAjJa~en
zydIlOa6(T}NEZ4YJDsuAci9o*!*FwaBD$vHGw^A+6+Q)+xE*ef+v3hhIt8EFW1EfU
zbTcC3sYhNq?L;DvT)Cb<;(i8klt3WrrAR{v;vNfcWhG4~%BXi_m1qG!=t^o+pIq_L
z%q2Y<<KD`scYisj)zIo_H&9<myWL}hNxMb6jeeCVH@#ehz2jY3CRd7&R#f<w-n(nj
zt>u823gk1xP!{-zGq(@taeZx^PdNESueTfcv4Ap_^9dp0X*#`9G7H>fua{o1%CuK%
zUT)rCe#3mbdA9juY$KM3ox+Y|C$P)F#0s%9SOInp%f<40^gmQXJ!=nS<YZluag){6
z&9HB-QN=PG8N(T)7|slR#%RWj9xWzg7{h|$&KQeEhWD&nZ+$cSGDmrtgS>U;=kI-y
z?+U-i5?TYwU{nG8UXO3pfFFvO4>8E52<4lsw{VC<x_#fgE=IT>Zh^DjsctK>=DTex
zxF|R)H~>?@SYe8Sg@Ol(yWeGnv1n`x>RtNAhU%k7<1MCK2{)EJPrykS5hvn@@+8a&
z=H`=`4(RCPGFjn4<4u`?0s&J#BxZ`ZVy-Bf8$2G!bCaA0@SGz*4=F>h^vWcj0MnkL
zy|1)aHa7}juNYvMWv|Q#?Uh;?0LLZ;MTw$2?V*FZ1V9`zaf1ArqT-15ue${C9PMND
z4FGS_38H-mLA=RA_HP3e3W!2bQ>3I((lCkvP}L}y8ignZbktC26nX113=}Gc(-i26
zgOrq!Lf#PcVS-^)9HY_54+_dMG!D2LO?{+=gMx-nAl)ERbHd8>?TVuu51!HDTx~L(
zxJa~WkkZg$Uuf%$9y8YHOJmEgCQY`QV(sMY;_Bwk@|fxC=RXV43kv3jg!1@{#geG#
znAo`Z)oa!!C4aLnWy8izKWyIe<4;?6WM%LCHD}kqb{{(YTi%hQ$Bv&kTU7k}x$_q;
zUb<Fx{l?AmipnZ!^@Ey+k811c|7w2r{6)*lSFNwxNM01cI%%Q4li54G)DSN!j$=5T
z<VB&zki^w++DHopbq61MV5Ek@gq4b#j_KPEo*6W1BBx1fk?5+@P(w@U=w_0doY}yL
zt@=mIdWiM%x`hq{C3#a<Qc~AeS6A0I&_>O`#DHujmL~FM+12dijYT$2Pa}{K%HY9+
zwKTL0H8c$Ut<A0dKe`cj&<ChCQ3Wa(1r-yf26oWA)o8~GrT_9}N0fdhKUY7KpKG7V
zPuXYkbNw^<x$&9&-27-i`kEY1<Dwy^PaSuSVA)Wd53*GDsbuciZd}-cN4UgqDe_kR
zHvdTZ_*oW((dSg-rX^C^G8TKUTdv<ey6W-fOLz=!ni-wOC}<klwm!a;{=-!lP4F4`
zMIp*RF62|c*1yu(*I^yC>+(i(pN7A@59n^qn*XrrO3}Hh%Dh`U-_$%1FkgB#v}Tkp
zEv0Ak<D*V*%qhzGT6Ke#($wG<!}g6AvwX|;wS?J*+17B!aB?bI@TIFucvtQ9M=qYb
z?A(^bNf{CgLsQ@OHnk^i2D{3SCwMl!stVgOKQG`U7-q(Jm9%PHIeP8nq>tJ@K6Wdx
zR#mAJJ#IVcZ<1j)^`X$2o>BZlucgJ*!cC~|pw!^Z-kp_+t*}$7wxLO-JL;9i)&ykF
zThWkyDYq%N#g+h%Mjq@)F`{bkSRcD>(54CQJ7?>y(NoOboZz`*dgkJ16;`(MW1P>o
zrfpM|mbRy~9Xh73ADh^|#C`Il$FlUr%DH>S+j3=DcURbokQvg{KrW2<h@I%E4PDyU
zaB87v#PK6}#i?~A9VV^YybtU*Hp<@Wm&BZNdo9~~LoD@lcGKx({p1(1Pm<fpo?luP
zuri}ilF8VRVw6ekx>SF*iIX-y@eC-T5|DK##QDKmLB}7hQF`Z&#kXbsuA>_-OC6Vv
zUDmfTd>Q%6@@0b)@=Q5SCQe4ibsh(%Iq0g{s|=XnK)1j>RpA+tyYCg{%>C}-M4H~+
z>~_k<OjXy`P-$~abk)O4kE|FKD;vk=cHql%s!rWK{M#w(d#o~P*}f!oEv0E!INrx?
zZhjA%J}y0%mQ-K8!|vtuyz+6I6rU>2v2S3GNWAaVqT7-iv$tWU*U=lly?)W2zUe2A
zjG&6th`3DEbl#q-%^8t9@0H}-QDG@-*~-=|RlBg;av*Ogg&5!_{K_n8x!$CkCHwD~
zHI5w~NIw)KES9ald-7<JweAU7u2xFzAAi37`YNTic^duHvgs;5w~Eso^L;dpch$jt
z)w3(c{7veyi>Jr5E^V0fNABGH^Ff_GH7BHFQ0=Yy`NJ11D$x`dH_h0-!Ns`n1+&Q|
z;c#`B`aEpb<}+uWJwGwVu6RvTA|v@WTY;wOW8dGUPYmP)*#Dq#xt{FSO}t$B=OqE|
zvhVJlEm&96t^_SYN^C6egyZc$3+jh0oEj|J(_!+)yWm=WRc~!}*Qosdo|i2DFC*-M
zhsm+#+T?<RUx_W1WvNj=X{^^e{M<}>eW{MLuD^E=Bl<sK-r4CFaAFrYr53f>L_59V
zzkX=D-~P&d>sgx<CN{O^=ZA?NigoD%`&S#wWmLPF4f7j6m`dH+6icg?H+o+i(0{az
zWj%Rd)zPN&dhzV+B>yC~U+E7E<5yW3oW78&*t$hZz@d5jj|(#0A{;N#`S6$ks{XFp
zeGoUVpY_rw`Z?YH>CvEKXso$(TXu#hZlBJ3)~$Q5Ih^Ndeb2A#QQ3Z14%gT_Kra)$
zXJ{5yGj6)~v1^Tw%AO_}u1(2Ebe#50ji1gdvvsHS+C2|FzPV@13VaizzOsNC_p)tP
zQYpnnll{Jn-rt${czg4`lzr9iBlD}$cllARn$UZcAMm{<rILWNXPOf`WCYY$6|`=(
zlP+v6kR>KQ(_PTv8M%o~4<$gE{yPEB+X+akCZL)}z}nRaynaK#g~-I_ug>|{kI3jS
z)gMN{l}4G<w*;)qk_}Zw_u5wkj6`#b%e7q~I<e_M!U6*93SKkJWMfiWXWN<)ka4dg
z8BNp(;Qo)rGH>$w4nG?+ygV@d`kpUSY=*>+dRji}!=Evf|9{<o)F)8)zb(6g9xR{u
o@62vMd;6#V3$z=+-rLRnQ|@;C?SG$`ukP6F`rCf~V}2_C4IFjM`~Uy|

literal 0
HcmV?d00001

diff --git a/test/integration/image-component/unicode/test/index.test.js b/test/integration/image-component/unicode/test/index.test.js
index 55e4f735ebaf5..b72b3681aa6e4 100644
--- a/test/integration/image-component/unicode/test/index.test.js
+++ b/test/integration/image-component/unicode/test/index.test.js
@@ -44,6 +44,26 @@ function runTests() {
     const res = await fetch(src)
     expect(res.status).toBe(200)
   })
+
+  it('should load internal percent image', async () => {
+    const src = await browser
+      .elementById('internal-precent')
+      .getAttribute('src')
+    expect(src).toMatch('/_next/image?url=%2F50%25.jpg')
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
+
+  it('should load external percent image', async () => {
+    const src = await browser
+      .elementById('external-precent')
+      .getAttribute('src')
+    expect(src).toMatch(
+      '/_next/image?url=https%3A%2F%2Fimage-optimization-test.vercel.app%2F50%25.jpg'
+    )
+    const res = await fetch(src)
+    expect(res.status).toBe(200)
+  })
 }
 
 describe('Image Component Unicode Image URL', () => {