From 54ad650f37cd5c8ef3d09a038d74deb7914abc73 Mon Sep 17 00:00:00 2001 From: kiesha Date: Tue, 23 Feb 2021 10:51:32 -0800 Subject: [PATCH] feat(e2e): change Responsive to custom iframe --- .../components/CartesianResponsiveImage.jsx | 61 ++++++++++++++----- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/e2e/visual/components/CartesianResponsiveImage.jsx b/e2e/visual/components/CartesianResponsiveImage.jsx index c0ea1b713c..51f41ea909 100644 --- a/e2e/visual/components/CartesianResponsiveImage.jsx +++ b/e2e/visual/components/CartesianResponsiveImage.jsx @@ -1,20 +1,37 @@ /* eslint-disable react/no-children-prop */ import React from 'react' - -import { Cartesian, Responsive } from '@compositor/kit' +import { renderToString } from 'react-dom/server' +import { Cartesian } from '@compositor/kit' import ResponsiveImage from '../../../packages/ResponsiveImage' -const ResponsiveImageContainer = props => ( - +const viewports = [ + { width: 320, height: 568 }, + { width: 640, height: 360 }, + { width: 768, height: 1024 }, + { width: 1024, height: 543 }, + { width: 1440, height: 880 }, +] + +const ResponsiveImageContainer = props => { + // "Responsive" component from "@compositor/kit" does not take in a title attribute for + // iframe, failing the accessibility scan. iframe used to test different window sizes + const html = innerHtml => ` + + + + + + + Document + + + ${innerHtml} + + + ` + + const CartesianResponsiveImage = renderToString( ( fallbackSrc="https://tds.telus.com/components/responsive-image/mountains_desktop.jpg" alt="mountains background" /> - -) + ) + + return ( + <> + {viewports.map((viewport, i) => ( +