snapshot of https://github.com/mattermost/mattermost.git (master, 2026-09-16; blobs > 131072B omitted)

e2e-tests/cypress/tests/integration/channels/markdown/markdown_image_spec.js

@@ -0,0 +1,163 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Stage: @prod
+// Group: @channels @markdown @not_cloud
+
+import * as TIMEOUTS from '@/fixtures/timeouts';
+
+describe('Markdown', () => {
+    before(() => {
+        // # Update config
+        cy.apiUpdateConfig({
+            ImageProxySettings: {
+                Enable: true,
+                ImageProxyType: 'local',
+            },
+        });
+
+        // # Login as new user, create new team and off-topic
+        cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
+            cy.visit(offTopicUrl);
+        });
+    });
+
+    const baseUrl = Cypress.config('baseUrl');
+
+    it('with in-line images 1', () => {
+        // #  Post markdown message
+        cy.postMessageFromFile('markdown/markdown_inline_images_1.md');
+
+        // * Verify that HTML Content is correct.
+        // Note we check width and height to verify that img element is actually loaded
+        cy.getLastPostId().then((postId) => {
+            cy.get(`#postMessageText_${postId}`).find('div.markdown-inline-img__container').
+                should('contain', 'Mattermost/platform build status:  ');
+
+            cy.get(`#postMessageText_${postId}`).find('img').
+                should('have.class', 'markdown-inline-img').
+                and('have.class', 'markdown-inline-img--hover').
+                and('have.attr', 'alt', 'Build Status').
+                and('have.attr', 'src', `${baseUrl}/api/v4/image?url=https%3A%2F%2Fraw.githubusercontent.com%2Fmattermost%2Fmattermost%2Fmaster%2Fe2e-tests%2Fcypress%2Ftests%2Ffixtures%2Fmattermost-icon_128x128.png`).
+                and((inlineImg) => {
+                    expect(inlineImg.height()).to.be.closeTo(128, 2);
+                }).
+                and('have.css', 'width', '128px');
+        });
+    });
+
+    it('with in-line images 2', () => {
+        // #  Post markdown message
+        cy.postMessageFromFile('markdown/markdown_inline_images_2.md');
+
+        // * Verify that HTML Content is correct.
+        // Note we check width and height to verify that img element is actually loaded
+        cy.getLastPostId().then((postId) => {
+            cy.get(`#postMessageText_${postId}`).find('div').
+                should('have.text', 'GitHub favicon:  ').
+                and('have.class', 'markdown-inline-img__container');
+
+            cy.get(`#postMessageText_${postId}`).find('img').
+                should('have.class', 'markdown-inline-img').
+                and('have.class', 'markdown-inline-img--hover').
+                and('have.class', 'cursor--pointer').
+                and('have.class', 'a11y--active').
+                and('have.attr', 'alt', 'Github').
+                and('have.attr', 'src', `${baseUrl}/api/v4/image?url=https%3A%2F%2Fgithub.githubassets.com%2Ffavicon.ico`).
+                and('have.css', 'height', '32px').
+                and('have.css', 'width', '32px');
+        });
+    });
+
+    it('opens image preview window when image is clicked', () => {
+        // For example a png image
+
+        // #  Post markdown message
+        cy.postMessageFromFile('markdown/markdown_inline_images_6.md').wait(TIMEOUTS.TWO_SEC);
+
+        cy.uiGetPostBody().within(() => {
+            cy.get('.markdown-inline-img').
+                should('be.visible').
+                and((inlineImg) => {
+                    expect(inlineImg.height()).to.be.closeTo(25, 2);
+                    expect(inlineImg.width()).to.be.closeTo(340, 2);
+                }).
+                click();
+        });
+
+        // * Verify that the preview modal opens
+        cy.uiGetFilePreviewModal();
+
+        // # Close the modal
+        cy.uiCloseFilePreviewModal();
+    });
+
+    it('opens file preview window when icon image is clicked', () => {
+        // Icon (.ico) files are opened in a file preview window
+
+        // #  Post markdown message
+        cy.postMessageFromFile('markdown/markdown_inline_images_2.md');
+
+        cy.uiGetPostBody().within(() => {
+            cy.get('.markdown-inline-img').
+                should('be.visible').
+                and('have.css', 'height', '32px').
+                and('have.css', 'width', '32px').
+                click();
+        });
+
+        // * Verify that the preview modal opens
+        cy.uiGetFilePreviewModal();
+
+        // # Close the modal
+        cy.uiCloseFilePreviewModal();
+    });
+
+    it('channel header is markdown image', () => {
+        // # Update channel header
+        cy.updateChannelHeader('![MM Logo](https://raw.githubusercontent.com/mattermost/mattermost/master/e2e-tests/cypress/tests/fixtures/small-image.png)').wait(TIMEOUTS.TWO_SEC);
+
+        // * Verify image in header
+        cy.get('#channelHeaderDescription').find('span.markdown__paragraph-inline').as('imageDiv');
+
+        cy.get('@imageDiv').find('img.markdown-inline-img').
+            should('have.class', 'markdown-inline-img--hover').
+            and('have.class', 'cursor--pointer').
+            and('have.class', 'a11y--active').
+            and('have.css', 'height', '18px');
+
+        // * Verify image in system message
+        cy.uiGetPostBody().
+            find('img.markdown-inline-img').
+            should('have.class', 'markdown-inline-img--hover').
+            and('have.class', 'cursor--pointer').
+            and('have.class', 'a11y--active').
+            and('have.class', 'markdown-inline-img--scaled-down').
+            and('have.css', 'height', '18px');
+    });
+
+    it('channel header is markdown image that is also a link', () => {
+        // # Update channel header
+        cy.updateChannelHeader('[![Build Status](https://raw.githubusercontent.com/mattermost/mattermost/master/e2e-tests/cypress/tests/fixtures/small-image.png)](https://raw.githubusercontent.com/mattermost/mattermost/master/e2e-tests/cypress/tests/fixtures/small-image.png)').wait(TIMEOUTS.TWO_SEC);
+
+        // * Verify image in header
+        cy.get('#channelHeaderDescription').find('span.markdown__paragraph-inline').as('imageDiv');
+
+        cy.get('@imageDiv').find('img.markdown-inline-img').
+            should('have.class', 'markdown-inline-img--hover').
+            and('have.css', 'height', '18px');
+
+        // * Verify image in system message
+        cy.uiGetPostBody().
+            find('img.markdown-inline-img').
+            should('have.class', 'markdown-inline-img--hover').
+            and('have.class', 'markdown-inline-img--scaled-down').
+            and('have.css', 'height', '18px');
+    });
+});

e2e-tests/cypress/tests/integration/channels/markdown/markdown_text_spec.js

@@ -0,0 +1,70 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+// ***************************************************************
+// - [#] indicates a test step (e.g. # Go to a page)
+// - [*] indicates an assertion (e.g. * Check the title)
+// - Use element ID when selecting an element. Create one if none.
+// ***************************************************************
+
+// Group: @channels @markdown @not_cloud
+
+import * as TIMEOUTS from '@/fixtures/timeouts';
+
+const testCases = [
+    {name: 'Markdown - basic', fileKey: 'markdown_basic'},
+    {name: 'Markdown - text style', fileKey: 'markdown_text_style'},
+    {name: 'Markdown - carriage return', fileKey: 'markdown_carriage_return'},
+    {name: 'Markdown - code block', fileKey: 'markdown_code_block'},
+    {name: 'Markdown - should not render inside the code block', fileKey: 'markdown_not_in_code_block'},
+    {name: 'Markdown - should not auto-link or generate previews', fileKey: 'markdown_not_autolink'},
+    {name: 'Markdown - should appear as a carriage return separating two lines of text', fileKey: 'markdown_carriage_return_two_lines'},
+    {name: 'Markdown - in-line code', fileKey: 'markdown_inline_code'},
+    {name: 'Markdown - lines', fileKey: 'markdown_lines'},
+    {name: 'Markdown - headings', fileKey: 'markdown_headings'},
+    {name: 'Markdown - escape characters', fileKey: 'markdown_escape_characters'},
+    {name: 'Markdown - block quotes 1', fileKey: 'markdown_block_quotes_1'},
+];
+
+describe('Markdown message', () => {
+    before(() => {
+        // # Enable local image proxy so our expected URLs match
+        const newSettings = {
+            ImageProxySettings: {
+                Enable: true,
+                ImageProxyType: 'local',
+                RemoteImageProxyURL: '',
+                RemoteImageProxyOptions: '',
+            },
+        };
+        cy.apiUpdateConfig(newSettings);
+
+        // # Login as new user, create new team and visit off-topic
+        cy.apiInitSetup({loginAfter: true}).then(({offTopicUrl}) => {
+            cy.visit(offTopicUrl);
+        });
+    });
+
+    testCases.forEach((testCase) => {
+        it(testCase.name, () => {
+            // #  Post markdown message
+            cy.postMessageFromFile(`markdown/${testCase.fileKey}.md`).wait(TIMEOUTS.TWO_SEC);
+
+            // * Verify that HTML Content is correct
+            cy.compareLastPostHTMLContentFromFile(`markdown/${testCase.fileKey}.html`);
+        });
+    });
+
+    it('Markdown - block quotes 2', () => {
+        const baseUrl = Cypress.config('baseUrl');
+        const expectedHtml = `<h3 class="markdown__heading">Block Quotes</h3><p><strong>The following markdown should render within the block quote:</strong></p>\n<blockquote>\n<h4 class="markdown__heading">Heading 4</h4><p><em>Italics</em>, <em>Italics</em>, <strong>Bold</strong>, <strong><em>Bold-italics</em></strong>, <strong><em>Bold-italics</em></strong>, <del>Strikethrough</del>\n<span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" data-testid="postEmoji.:slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="slightly_smiling_face"><span alt=":slightly_smiling_face:" class="emoticon" data-testid="postEmoji.:slightly_smiling_face:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f642.png&quot;);">:slightly_smiling_face:</span></span> <span data-emoticon="wink"><span alt=":wink:" class="emoticon" data-testid="postEmoji.:wink:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f609.png&quot;);">:wink:</span></span> <span data-emoticon="scream"><span alt=":scream:" class="emoticon" data-testid="postEmoji.:scream:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f631.png&quot;);">:scream:</span></span> <span data-emoticon="bamboo"><span alt=":bamboo:" class="emoticon" data-testid="postEmoji.:bamboo:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38d.png&quot;);">:bamboo:</span></span> <span data-emoticon="gift_heart"><span alt=":gift_heart:" class="emoticon" data-testid="postEmoji.:gift_heart:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f49d.png&quot;);">:gift_heart:</span></span> <span data-emoticon="dolls"><span alt=":dolls:" class="emoticon" data-testid="postEmoji.:dolls:" style="background-image: url(&quot;${baseUrl}/static/emoji/1f38e.png&quot;);">:dolls:</span></span></p>\n</blockquote>`;
+
+        // #  Post markdown message
+        cy.postMessageFromFile('markdown/markdown_block_quotes_2.md').wait(TIMEOUTS.TWO_SEC);
+
+        // * Verify that HTML Content is correct
+        cy.getLastPostId().then((postId) => {
+            cy.get(`#postMessageText_${postId}`, {timeout: TIMEOUTS.TEN_SEC}).should('have.html', expectedHtml);
+        });
+    });
+});