Add a test for the parentheses problem

Ionaru · Feb 17, 2025 · e7a56e1 · e7a56e1
1 parent f20ff16
commit e7a56e1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 0 deletions.
diff --git a/cypress/e2e/4.image-rendering/image-rendering.cy.js b/cypress/e2e/4.image-rendering/image-rendering.cy.js
@@ -0,0 +1,43 @@
+/// <reference types="cypress" />
+
+describe('Image rendering', () => {
+
+    const imageUrl = 'https://picsum.photos/id/237/150';
+
+    beforeEach(() => {
+        cy.visit(__dirname + '/index.html');
+        cy.intercept('GET', imageUrl).as('image');
+    });
+
+    it('must render an image inside the editor', () => {
+        cy.get('.EasyMDEContainer').should('be.visible');
+        cy.get('#textarea').should('not.be.visible');
+
+        cy.get('.EasyMDEContainer .CodeMirror').type(imageUrl);
+        cy.get('.EasyMDEContainer .CodeMirror').type('{home}![Dog!]({end})');
+
+        cy.wait('@image');
+
+        cy.get(`.EasyMDEContainer [data-img-src="${imageUrl}"]`).should('be.visible');
+
+        cy.previewOn();
+
+        cy.get('.EasyMDEContainer .editor-preview').should('contain.html', `<p><img src="${imageUrl}" alt="Dog!"></p>`);
+    });
+
+    it('must be able to handle parentheses inside image alt text', () => {
+        cy.get('.EasyMDEContainer').should('be.visible');
+        cy.get('#textarea').should('not.be.visible');
+
+        cy.get('.EasyMDEContainer .CodeMirror').type(imageUrl);
+        cy.get('.EasyMDEContainer .CodeMirror').type('{home}![Dog! (He\'s a good boy!)]({end})');
+
+        cy.wait('@image');
+
+        cy.get(`.EasyMDEContainer [data-img-src="${imageUrl}"]`).should('be.visible');
+
+        cy.previewOn();
+
+        cy.get('.EasyMDEContainer .editor-preview').should('contain.html', `<p><img src="${imageUrl}" alt="Dog! (He's a good boy!)"></p>`);
+    });
+});
diff --git a/cypress/e2e/4.image-rendering/index.html b/cypress/e2e/4.image-rendering/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Default</title>
+    <link rel="stylesheet" href="../../../dist/easymde.min.css">
+    <script src="../../../dist/easymde.min.js"></script>
+</head>
+
+<body>
+    <textarea id="textarea"></textarea>
+    <script>
+        const easyMDE = new EasyMDE({
+            previewImagesInEditor: true,
+        });
+    </script>
+</body>
+
+</html>