From c17a6b201a3d2f7de65b22b44a8c164da8059c0c Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Thu, 21 Feb 2019 18:02:42 -0500 Subject: [PATCH] feat: first round of ratio component jest tests --- ...lt-ratio-w-o-shadow-dom-renders-1-snap.png | Bin 0 -> 5354 bytes .../__tests__/__snapshots__/ratio.js.snap | 10 +++ .../components/bolt-ratio/__tests__/ratio.js | 60 +++++++++++++++++- packages/components/bolt-ratio/src/ratio.js | 1 - packages/components/bolt-ratio/src/ratio.scss | 4 +- 5 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-default-bolt-ratio-w-o-shadow-dom-renders-1-snap.png diff --git a/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-default-bolt-ratio-w-o-shadow-dom-renders-1-snap.png b/packages/components/bolt-ratio/__tests__/__image_snapshots__/ratio-js-bolt-ratio-component-default-bolt-ratio-w-o-shadow-dom-renders-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..81aae8b09e1b01fbdfd00dcd224508b4b42bccf1 GIT binary patch literal 5354 zcmeH~>sM0w9>#ZBSyN_HC%c%E$2GOi%oxXtoGdlVG^eDjNCVNz@&W;sDT#tzPEi?I zYo^Olktq`u0?Psf6)LrIQt`qD6~)RN69l|*Q3TI+-kcX_{($qsS9`7B+UwcR{`|hr z@7ept0c4oVH>y#UONEb;>uaG0ibsN5&&2m zdJ$Uol|2B)i{UY`QB=ExK$N*nni_Hxm$wd;o~GQBWxC(D(=K z&_C9nPJOdHu2LAv_;+U^Q$y~tn_jijgs8GBF#o2BF2d>Z;aj2G# zO8n`8RywyONl_B%e4fFJ9zV&mgDD7NS1>ky@BJUSte~-I#!BC+b+=$xr+I@)ljhL= z0IbgM^iwDER1M|y`0o-Oe|PGaUu(3fW$qHNH~RTVy~Lui;lDO}A(B5=_}ms16^YRp z3}uWAQN`9H=e}PruP)gz+5dy~PPntG+!@BNwrIG-e7mW$-^DvE$=+Jzs=7sHqM1yl zpoeBtKCW|ByzUJJMSSU#d9FnD2}hK4qOtSY@px)~oa`V9&bqhNpf{F6pwPqZ9w1ls z;X!#mwP`LQ=>P^h3@+4)`;}mWg&Aw#9+;u}8tF_#?ARdtoa=8h21SwlPi6)imaher4jLa zQv@#;4G#A#1Aw&U*jeS~C=Z0~8jRq3yx#7brY=ZH$-rg~pi+(4ppwYK#U%`PKX5E4 zBa4}8PSi8gM7+hMSyq%wDbiWeli3UK%BQ?P zF3If06r~@Z+gl84Gqn|8a&lHIF#g03blg~2Is16V{U47WnVv$HZLkBIg27<4%=J~g zrm3+Ny4GyD{^pgQhm^5Tf`rCS$&|wx4^1v2!Y#=M2k}^eZUE*hslOwep4q8N{QU@Dc37Y~r z94XnJukEfR+v`{|0f$2|X;JH|dI<>Hr0jg2s;f1|$EQ(kcL2b%A9NBIBNP$En+#e- zoi6_cQZM{?H!Mn#pQqNDY@V&A3B~vW1v^5n%0=MghMi#P=Xaa*YSH3t=XZ*R3v=>g z^885rd)$J~6OGM}cHz1zu4vcm$r;lRh!;RhS}4z*p)6))!vB54}BC; z%pC}@<++r-Z|h4nZJqS&X@O9v@Xpz;L71!lM?GXu=R)~>~S4T~wbWd*jsGH(tye0+;UgSVq z@qQjw-9muLgQj*8I>$2gLNzHU-ZHgyS9ySa!o*|b6=c<=69_y3(S9u|-x&ZZIi5k+ zhkm`^Cad>p!y*m`(?*bOzc@a4A8f~i8PP|{$ z4^E#&Zy9+whu)%y=#ibGD~-~Oz07kX;i&@;5h&&Gm|pZNy2)@phZE;G7lF;J zzh}Cid`M!rEGR_gp3Ow~xjxN?i_2pv14V!O`66BcmY>QwpJy3gC_^W*M#cX%eb?Jk z2J1SX+Q{4{d%J%--@I}Q|F*5oqVOPhRo2+7twsId>)yqjaJsbGyoPorf@wDR_kAIQ z16kyeEvjj3noO&gsrDCHNw0=-SY;g(!4Bp4#2pQTA;juB-83hb)tYS5K!-=hBKIhp zKI?*uyD$tJpnF_E>s!6Of|rnG{C%P+)lYHfQ9NGpu+*f`7VCQZGb_|p;uKODtZ6(v z$KnbNz)f~&d_OBi15LKSlE*#1%hGPZJ`ol{Mbx%G2vb8hj^8B9C$QT`8?wMVUIegM zjtn9{S4-!);JURI{nzL?nZr~@{)&cbuzk55IbGJx%K{t=+yLNJ)6%s7u;Ugq|G`5F{OamzNkIcyFHjkV-rV&LQ$F;K zPt$(70*Udt$(pKk&k#r_ pm?1DjV1~d9ff)k-{{$TFF35kqTX>KU{a64%_- Component compiles 1`] = ` `; + +exports[` Component Default w/o Shadow DOM renders 2`] = ` + + + + + +`; diff --git a/packages/components/bolt-ratio/__tests__/ratio.js b/packages/components/bolt-ratio/__tests__/ratio.js index 91e5db184b..05f1269ded 100644 --- a/packages/components/bolt-ratio/__tests__/ratio.js +++ b/packages/components/bolt-ratio/__tests__/ratio.js @@ -1,6 +1,32 @@ -const { render } = require('@bolt/twig-renderer'); +import { + render, + renderString, + stop as stopTwigRenderer, +} from '@bolt/twig-renderer'; +import { fixture as html } from '@open-wc/testing-helpers'; + +async function renderTwig(template, data) { + return await render(template, data, true); +} + +const timeout = 60000; describe(' Component', async () => { + let page; + + afterAll(async () => { + await stopTwigRenderer(); + }, timeout); + + beforeEach(async () => { + page = await global.__BROWSER__.newPage(); + await page.goto('http://127.0.0.1:4444/', { + timeout: 0, + waitLoad: true, + waitNetworkIdle: true, // defaults to false + }); + }, timeout); + test(' compiles', async () => { const results = await render('@bolt-components-ratio/ratio.twig', { children: '', @@ -9,4 +35,36 @@ describe(' Component', async () => { expect(results.ok).toBe(true); expect(results.html).toMatchSnapshot(); }); + + test('Default w/o Shadow DOM renders', async function() { + const renderedRatioHTML = await page.evaluate(() => { + const ratio = document.createElement('bolt-ratio'); + const img = document.createElement('img'); + img.setAttribute('src', 'http://127.0.0.1:4444/fixtures/1200x660.jpg'); + + ratio.setAttribute('ratio', '1200/660'); + ratio.appendChild(img); + + document.body.appendChild(ratio); + ratio.useShadow = false; + ratio.updated(); + return ratio.outerHTML; + }); + + const image = await page.screenshot(); + + const renderedRatioStyles = await page.evaluate(() => { + const ratio = document.querySelector('bolt-ratio'); + return ratio.style.getPropertyValue('--aspect-ratio').trim(); + }); + + expect(renderedRatioStyles).toMatch('1200/660'); + + expect(image).toMatchImageSnapshot({ + failureThreshold: '0.01', + failureThresholdType: 'percent', + }); + + expect(renderedRatioHTML).toMatchSnapshot(); + }); }); diff --git a/packages/components/bolt-ratio/src/ratio.js b/packages/components/bolt-ratio/src/ratio.js index 60ce6ddd15..0f54386141 100644 --- a/packages/components/bolt-ratio/src/ratio.js +++ b/packages/components/bolt-ratio/src/ratio.js @@ -16,7 +16,6 @@ function BoltRatio() { constructor(self) { self = super(self); - this.useShadow = hasNativeShadowDomSupport; this.useCssVars = supportsCSSVars; return self; } diff --git a/packages/components/bolt-ratio/src/ratio.scss b/packages/components/bolt-ratio/src/ratio.scss index 637c145f2d..fdf113ef7b 100644 --- a/packages/components/bolt-ratio/src/ratio.scss +++ b/packages/components/bolt-ratio/src/ratio.scss @@ -35,8 +35,7 @@ bolt-ratio > * { left: 0; width: 100%; min-width: 100%; // workaround for content w/ hard-coded height & width - height: 100%; - min-height: 100%; // workaround for content w/ hard-coded height & width + min-height: 100%; } :host { @@ -48,5 +47,4 @@ bolt-ratio > * { top: 0; left: 0; width: 100%; - height: 100%; }