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

e2e-tests/cypress/tests/integration/channels/integrations/integrations_spec.js

@@ -0,0 +1,449 @@
+// 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 @integrations
+
+import {getRandomId} from '@/utils';
+import * as MESSAGES from '@/fixtures/messages';
+import * as TIMEOUTS from '@/fixtures/timeouts';
+
+describe('Integrations page', () => {
+    let testTeam;
+
+    before(() => {
+        // # Set ServiceSettings to expected values
+        const newSettings = {
+            ServiceSettings: {
+                EnableOAuthServiceProvider: true,
+                EnableIncomingWebhooks: true,
+                EnableOutgoingWebhooks: true,
+                EnableCommands: true,
+            },
+        };
+        cy.apiUpdateConfig(newSettings);
+
+        cy.apiInitSetup().then(({team}) => {
+            testTeam = team;
+
+            // # Go to integrations
+            cy.visit(`/${team.name}/integrations`);
+
+            // * Validate that all sections are enabled
+            cy.get('#incomingWebhooks').should('be.visible');
+            cy.get('#outgoingWebhooks').should('be.visible');
+            cy.get('#slashCommands').should('be.visible');
+            cy.get('#botAccounts').should('be.visible');
+            cy.get('#oauthApps').should('be.visible');
+        });
+    });
+
+    it('should display correct message when incoming webhook not found', () => {
+        // # Open incoming web hooks page
+        cy.get('#incomingWebhooks').click();
+
+        // # Add web 'include', '/newPage'hook
+        cy.get('#addIncomingWebhook').click();
+
+        // # Pick the channel
+        cy.get('#channelSelect').select('Town Square');
+
+        // # Save
+        cy.get('#saveWebhook').click();
+
+        // * Validate that save succeeded
+        cy.get('#formTitle').should('have.text', 'Setup Successful');
+
+        // # Close the Add dialog
+        cy.get('#doneButton').click();
+
+        // # Type random stuff into the search box
+        const searchString = `some random stuff ${Date.now()}`;
+        cy.get('#searchInput').type(`${searchString}{enter}`);
+
+        // * Validate that the correct empty message is shown
+        cy.get('#emptySearchResultsMessage').should('be.visible').and('have.text', `No incoming webhooks match ${searchString}`);
+    });
+
+    it('should display correct message when outgoing webhook not found', () => {
+        // # Open outgoing web hooks page
+        cy.get('#outgoingWebhooks').click();
+
+        // # Add web hook
+        cy.get('#addOutgoingWebhook').click();
+
+        // # Pick the channel and dummy callback
+        cy.get('#channelSelect').select('Town Square');
+        cy.get('#callbackUrls').type('https://dummy');
+
+        // # Save
+        cy.get('#saveWebhook').click();
+
+        // * Validate that save succeeded
+        cy.get('#formTitle').should('have.text', 'Setup Successful');
+
+        // # Close the Add dialog
+        cy.get('#doneButton').click();
+
+        // # Type random stuff into the search box
+        const searchString = `some random stuff ${Date.now()}`;
+        cy.get('#searchInput').type(`${searchString}{enter}`);
+
+        // * Validate that the correct empty message is shown
+        cy.get('#emptySearchResultsMessage').should('be.visible').and('have.text', `No outgoing webhooks match ${searchString}`);
+    });
+
+    it('should display correct message when slash command not found', () => {
+        // # Open slash command page
+        cy.get('#slashCommands').click();
+
+        // # Add new command
+        cy.get('#addSlashCommand').click();
+
+        // # Pick a dummy trigger and callback
+        cy.get('#trigger').type(`test-trigger${Date.now()}`);
+        cy.get('#url').type('https://dummy');
+
+        // # Save
+        cy.get('#saveCommand').click();
+
+        // * Validate that save succeeded
+        cy.get('#formTitle').should('have.text', 'Setup Successful');
+
+        // # Close the Add dialog
+        cy.get('#doneButton').click();
+
+        // # Type random stuff into the search box
+        const searchString = `some random stuff ${Date.now()}`;
+        cy.get('#searchInput').type(`${searchString}{enter}`);
+
+        // * Validate that the correct empty message is shown
+        cy.get('#emptySearchResultsMessage').should('be.visible').and('have.text', `No commands match ${searchString}`);
+    });
+
+    it('should display correct message when OAuth app not found', () => {
+        // # Open OAuth apps page
+        cy.get('#oauthApps').click();
+
+        // # Add new command
+        cy.get('#addOauthApp').click();
+
+        // # Fill in dummy details
+        cy.get('#name').type(`test-name${getRandomId()}`);
+        cy.get('#description').type(`test-descr${getRandomId()}`);
+        cy.get('#homepage').type(`https://dummy${getRandomId()}`);
+        cy.get('#callbackUrls').type('https://dummy');
+
+        // # Save
+        cy.get('#saveOauthApp').click();
+
+        // * Validate that save succeeded
+        cy.get('#formTitle').should('have.text', 'Setup Successful');
+
+        // # Close the Add dialog
+        cy.get('#doneButton').click();
+
+        // # Type random stuff into the search box
+        const searchString = `some random stuff ${Date.now()}`;
+        cy.get('#searchInput').type(`${searchString}{enter}`);
+
+        // * Validate that the correct empty message is shown
+        cy.get('#emptySearchResultsMessage').should('be.visible').and('have.text', `No OAuth 2.0 Applications match ${searchString}`);
+    });
+
+    it('should display correct message when bot account not found', () => {
+        // # Open  bot account page
+        cy.get('#botAccounts').click();
+
+        // # Add new bot
+        cy.get('#addBotAccount').click();
+
+        // # Fill in dummy details
+        cy.get('#username').type(`test-bot${getRandomId()}`);
+
+        // # Save
+        cy.get('#saveBot').click();
+
+        // # Click done button
+        cy.get('#doneButton').click();
+
+        // * Make sure we are done saving
+        cy.url().should('contain', '/integrations/bots');
+
+        // # Type random stuff into the search box
+        const searchString = `some random stuff ${Date.now()}`;
+        cy.get('#searchInput').type(`${searchString}{enter}`);
+
+        // * Validate that the correct empty message is shown
+        cy.get('#emptySearchResultsMessage').should('be.visible').and('have.text', `No bot accounts match ${searchString}`);
+    });
+
+    it('MM-T570 Integration Page titles are bolded', () => {
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        // # Open product menu and click 'Integrations'
+        cy.uiOpenProductMenu('Integrations');
+
+        cy.get('.integration-option__title').contains('Incoming Webhooks').click();
+
+        integrationPageTitleIsBold('Incoming Webhooks');
+        integrationPageTitleIsBold('Outgoing Webhooks');
+        integrationPageTitleIsBold('Slash Commands', false);
+        integrationPageTitleIsBold('OAuth 2.0 Applications');
+        integrationPageTitleIsBold('Bot Accounts');
+    });
+
+    it('MM-T572 Copy icon for Slash Command', () => {
+        // # Visit home channel
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        // # Click 'Integrations' at product menu
+        cy.uiOpenProductMenu('Integrations');
+
+        // * Verify we are at integrations page URL
+        cy.url().should('include', '/integrations');
+
+        // # Scan the area of integrations list
+        cy.get('.integrations-list').should('exist').within(() => {
+            // # Open Slash commands directory
+            cy.findByText('Slash Commands').should('exist').and('be.visible').click({force: true});
+        });
+
+        // * Verify we are at slash commands URL
+        cy.url().should('include', '/integrations/commands');
+
+        // # Hit create slash command button
+        cy.findByText('Add Slash Command').should('exist').and('be.visible').click();
+
+        // * Verify we are at slash commands add URL
+        cy.url().should('include', '/integrations/commands/add');
+
+        const customSlashName = MESSAGES.SMALL;
+
+        // # Enter a title for custom slash command
+        cy.findByLabelText('Title').should('exist').scrollIntoView().type(customSlashName);
+
+        // # Enter a trigger word for custom slash command
+        cy.findByLabelText('Command Trigger Word').should('exist').scrollIntoView().type('example');
+
+        // # Enter a request url for custom slash command
+        cy.findByLabelText('Request URL').should('exist').scrollIntoView().type('https://example.com');
+
+        // # Hit save to save the custom slash command
+        cy.findByText('Save').should('exist').scrollIntoView().click();
+
+        // * Verify we are at setup successful URL
+        cy.url().should('include', '/integrations/commands/confirm');
+
+        // * Verify slash was successfully created
+        cy.findByText('Setup Successful').should('exist').and('be.visible');
+
+        // * Verify token was created
+        cy.findByText('Token').should('exist').and('be.visible');
+
+        // * Verify copy icon is shown
+        cy.findByTestId('copyText').should('be.visible');
+
+        // # Hit done to move from confirm screen
+        cy.findByText('Done').should('exist').and('be.visible').click();
+
+        // * Verify we are back to installed slash commands screen
+        cy.url().should('include', '/integrations/commands/installed');
+
+        // * Verify our created command is in the list
+        cy.findByText(customSlashName).should('exist').and('be.visible').scrollIntoView();
+
+        // # Loop over all custom slash commands
+        cy.get('.backstage-list').children().each((el) => {
+            // # For each custom slash command was created
+            cy.wrap(el).within(() => {
+                // Verify copy icon for token is present
+                cy.findByTestId('copyText').should('be.visible');
+            });
+        });
+    });
+
+    it('MM-T702 Edit to invalid URL', () => {
+        // # Visit home channel
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        // # Click 'Integrations' at product menu
+        cy.uiOpenProductMenu('Integrations');
+
+        // * Verify we are at integrations page URL
+        cy.url().should('include', '/integrations');
+
+        // # Scan the area of integrations list
+        cy.get('.integrations-list').should('exist').within(() => {
+            // # Open Slash commands directory
+            cy.findByText('Slash Commands').should('exist').and('be.visible').click({force: true});
+        });
+
+        // * Verify we are at slash commands URL
+        cy.url().should('include', '/integrations/commands');
+
+        // # Hit create slash command button
+        cy.findByText('Add Slash Command').should('exist').and('be.visible').click();
+
+        // * Verify we are at slash commands add URL
+        cy.url().should('include', '/integrations/commands/add');
+
+        const customSlashName = `customSlash-${Date.now()}`;
+
+        // # Enter a title for custom slash command
+        cy.findByLabelText('Title').should('exist').scrollIntoView().type(customSlashName);
+
+        // # Enter a trigger word for custom slash command
+        cy.findByLabelText('Command Trigger Word').should('exist').scrollIntoView().type(customSlashName);
+
+        // # Enter a request url for custom slash command
+        cy.findByLabelText('Request URL').should('exist').scrollIntoView().type('https://example.com');
+
+        // # Hit save to save the custom slash command
+        cy.findByText('Save').should('exist').scrollIntoView().click();
+
+        // * Verify we are at setup successful URL
+        cy.url().should('include', '/integrations/commands/confirm');
+
+        // * Verify slash was successfully created
+        cy.findByText('Setup Successful').should('exist').and('be.visible');
+
+        // * Verify token was created
+        cy.findByText('Token').should('exist').and('be.visible');
+
+        // # Hit done to move from confirm screen
+        cy.findByText('Done').should('exist').and('be.visible').click();
+
+        // * Verify we are back to installed slash commands screen
+        cy.url().should('include', '/integrations/commands/installed');
+
+        // * Verify our created command is in the list
+        cy.findByText(customSlashName).should('exist').and('be.visible').scrollIntoView().
+            parents('.backstage-list__item').within(() => {
+                // # Click on the edit of slash command
+                cy.findByText('Edit').should('exist').and('be.visible').click();
+            });
+
+        // * Verify that we are on edit slash command page
+        cy.url().should('include', '/integrations/commands/edit');
+
+        // # Edit the request url field
+        cy.findByLabelText('Request URL').should('exist').and('be.visible').scrollIntoView().
+            clear().type('mattermost.com');
+
+        // # Hit save to save edited custom slash command
+        cy.findByText('Update').should('exist').scrollIntoView().click();
+
+        // * Verify that confirm modal is displayed to save the changes
+        cy.get('#confirmModal').should('exist').and('be.visible').within(() => {
+            // * Confirm that caution text is visible
+            cy.findByText('Your changes may break the existing slash command. Are you sure you would like to update it?').
+                should('exist').and('be.visible');
+
+            // # Press update button to confirm
+            cy.findByText('Update').should('exist').and('be.visible').click();
+        });
+
+        // * Verify that we get the error message
+        cy.findByText('Invalid URL. Must be a valid URL and start with http:// or https://.').
+            should('exist').and('be.visible').scrollIntoView();
+
+        // # Go back to home channel
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+    });
+
+    it('MM-T580 Custom slash command auto-complete displays trigger word and not command name', () => {
+        cy.visit(`/${testTeam.name}/channels/town-square`);
+
+        // # Click 'Integrations' at product menu
+        cy.uiOpenProductMenu('Integrations');
+
+        // * Verify we are at integrations page URL
+        cy.url().should('include', '/integrations');
+
+        // # Scan the area of integrations list
+        cy.get('.integrations-list').should('exist').within(() => {
+            // # Open Slash commands directory
+            cy.findByText('Slash Commands').should('exist').and('be.visible').click({force: true});
+        });
+
+        // * Verify we are at slash commands directory URL
+        cy.url().should('include', '/integrations/commands');
+
+        // # Hit create slash command button
+        cy.findByText('Add Slash Command').should('exist').and('be.visible').click();
+
+        // * Verify we are at slash commands add URL
+        cy.url().should('include', '/integrations/commands/add');
+
+        const commandTitle = `abc-${Date.now()}`;
+        const commandTrigger = `xyz-${Date.now()}`;
+
+        // # Enter a title for custom slash command
+        cy.findByLabelText('Title').should('exist').scrollIntoView().type(commandTitle);
+
+        // # Enter a trigger word for custom slash command different from slash title
+        cy.findByLabelText('Command Trigger Word').should('exist').scrollIntoView().type(commandTrigger);
+
+        // # Enter a request url for custom slash command
+        cy.findByLabelText('Request URL').should('exist').scrollIntoView().type('https://example.com');
+
+        // # Enter the desired request method
+        cy.findByLabelText('Request Method').should('exist').scrollIntoView().select('GET');
+
+        // # Check the option of autocomplete
+        cy.findByLabelText('Autocomplete').should('exist').scrollIntoView().click();
+
+        // # Hit save to save the custom slash command
+        cy.findByText('Save').should('exist').scrollIntoView().click();
+
+        // * Verify we are at setup successful URL
+        cy.url().should('include', '/integrations/commands/confirm');
+
+        // * Verify slash was successfully created
+        cy.findByText('Setup Successful').should('exist').and('be.visible');
+
+        // * Verify token was created
+        cy.findByText('Token').should('exist').and('be.visible');
+
+        // # Hit done to move from confirm screen
+        cy.findByText('Done').should('exist').and('be.visible').click();
+
+        // * Verify we are back to installed slash commands screen
+        cy.url().should('include', '/integrations/commands/installed');
+
+        // * Verify our created command is in the list
+        cy.findByText(commandTitle).should('exist').and('be.visible').scrollIntoView();
+
+        // # Return to channels
+        cy.visit(`${testTeam.name}/channels/town-square`);
+
+        const first2LettersOfCommandTrigger = commandTrigger.slice(0, 2);
+
+        // # Type first 2 letters of the command trigger word
+        cy.uiGetPostTextBox().should('be.visible').clear().type(`/${first2LettersOfCommandTrigger}`);
+
+        // # Scan inside of suggestion list
+        cy.get('#suggestionList').should('exist').and('be.visible').within(() => {
+            // * Verify that commands trigger is suggested
+            cy.findByText(commandTrigger).should('exist').and('be.visible');
+
+            // * Verify that commands title is not suggested
+            cy.findByText(commandTitle).should('not.exist');
+        });
+
+        // # Append Hello to custom slash command and hit enter
+        cy.uiGetPostTextBox().type('{enter}').wait(TIMEOUTS.HALF_SEC).type('Hello{enter}').wait(TIMEOUTS.HALF_SEC);
+        cy.uiGetPostTextBox().invoke('text').should('be.empty');
+    });
+});
+
+function integrationPageTitleIsBold(title, isBold = true) {
+    cy.get('.section-title__text').contains(title).click();
+    cy.get('.item-details__name').should('be.visible').and('have.css', 'font-weight', isBold ? '600' : '400');
+}