Add a test to check that styles are being applied to iframe document

ValentinH · Sep 23, 2022 · 996534c · 996534c
1 parent 95df797
commit 996534c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/cypress/integration/iframe_spec.js b/cypress/integration/iframe_spec.js
@@ -0,0 +1,22 @@
+describe('Iframed assertions', function () {
+  beforeEach(function () {
+    cy.viewport(1000, 600)
+    cy.visit('/?iframed=true')
+  })
+
+  const getIframeBody = () => {
+    return cy
+      .get('iframe[data-cy="iframe"]')
+      .its('0.contentDocument.body')
+      .should('not.be.empty')
+      .then(cy.wrap)
+  }
+
+  it('Display the crop area with correct styles applied to the iframe', () => {
+    getIframeBody()
+      .find('.reactEasyCrop_CropArea')
+      .should('exist')
+      .should('have.css', 'color')
+      .and('eq', 'rgba(0, 0, 0, 0.5)')
+  })
+})
diff --git a/examples/src/iframe.tsx b/examples/src/iframe.tsx
@@ -39,6 +39,7 @@ export default function Iframe({ children }: Props) {
         ref={iFrameRef}
         srcDoc="<!doctype html>"
         title="test iframed"
+        data-cy="iframe"
       >
         <>{iframeBody && createPortal(children, iframeBody)}</>
       </iframe>