feat: first round of ratio component jest tests

packages/components/bolt-ratio/__tests__/__snapshots__/ratio.js.snap

@@ -9,3 +9,13 @@ exports[`<bolt-ratio> Component <bolt-ratio> compiles 1`] = `
 </bolt-ratio>
 
 `;
+
+exports[`<bolt-ratio> Component Default <bolt-ratio> w/o Shadow DOM renders 2`] = `
+
+<bolt-ratio ratio="1200/660"
+            style="--aspect-ratio:1200/660;"
+>
+  <img src="/fixtures/1200x660.jpg">
+</bolt-ratio>
+
+`;

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('<bolt-ratio> 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('<bolt-ratio> compiles', async () => {
     const results = await render('@bolt-components-ratio/ratio.twig', {
       children: '<img src="/fixtures/1200x660.jpg">',
@@ -9,4 +35,36 @@ describe('<bolt-ratio> Component', async () => {
     expect(results.ok).toBe(true);
     expect(results.html).toMatchSnapshot();
   });
+
+  test('Default <bolt-ratio> 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();
+  });
 });

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;
     }

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%;
 }