mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

[MM-62074] Move tooltips with withTooltip to new Tooltip component (#29528)

Просмотр исходного кода 
* replace inside of comp/withtooltip

* remove overlay trigger eslint rl

* update location of prev migrated new tooltips

* copy button

* shared_channel_indicator, shared_user_indicator.tsx, size_aware_image

* actions_menu, old_admin_settings, schema_admin_settings, admin_settings

* billing_summary, brand_image_setting, edit_section_edit_table_row, elapsed_duration_cell

* permissions_scheme_summary,secure_connections/controls,system_users_column_toggler_menu,system_users_export,group/group_users/users_to_remove_groups

* team_profile,user_grid_role_dropdown,priority_labels,toggle_formatting_bar,use_emoji_picker,formatting_icon

* show_formatting,alert_banner others

* more

* snap fix

* add disabled prop to menu

* test fix for avatar

feat: Add id to WithTooltip in Avatars component to fix test failures

* combine refs in withtooltip

* channel header title favorite test fix

* priority label comp changes

* types check for children

* Update avatar.tsx

* e2e fixes

* fix E2E tests

* Remove memo from WithTooltip

I found that the web app leaks a fair bit less memory when this is removed. See https://community.mattermost.com/core/pl/gwyyoww9gtbg8fddoic9meq84y for more information

* e2e lint fixes

* e2e fixes

* Fix test style issue

---------

Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>
Co-authored-by: Harrison Healey <harrisonmhealey@gmail.com>
Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
M-ZubairAhmed
2024-12-19 03:26:30 +05:30
коммит произвёл GitHub
родитель 371e1b9bad
Коммит fd6a662d76
227 изменённых файлов: 1676 добавлений и 4835 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

24
e2e-tests/cypress/tests/integration/channels/channel/channel_info_rhs_spec.ts
Просмотреть файл

@@ -99,21 +99,21 @@ describe('Channel Info RHS', () => {
cy.get('#channel-info-btn').click();
// * Verify tooltips appear with correct text
cy.uiGetRHS().findByText('Favorite').trigger('mouseover');
cy.get('#favorite-tooltip').should('be.visible').and('have.text', 'Add this channel to favorites');
cy.uiGetRHS().findByText('Favorite').trigger('mouseout');
cy.uiGetRHS().findByText('Favorite').trigger('mouseenter');
cy.findByText('Add this channel to favorites').should('be.visible');
cy.uiGetRHS().findByText('Favorite').trigger('mouseleave');
cy.uiGetRHS().findByText('Mute').trigger('mouseover');
cy.get('#mute-tooltip').should('be.visible').and('have.text', 'Mute notifications for this channel');
cy.uiGetRHS().findByText('Mute').trigger('mouseout');
cy.uiGetRHS().findByText('Mute').trigger('mouseenter');
cy.findByText('Mute notifications for this channel').should('be.visible');
cy.uiGetRHS().findByText('Mute').trigger('mouseleave');
cy.uiGetRHS().findByText('Add People').trigger('mouseover');
cy.get('#add-people-tooltip').should('be.visible').and('have.text', 'Add team members to this channel');
cy.uiGetRHS().findByText('Add People').trigger('mouseout');
cy.uiGetRHS().findByText('Add People').trigger('mouseenter');
cy.findByText('Add team members to this channel').should('be.visible');
cy.uiGetRHS().findByText('Add People').trigger('mouseleave');
cy.uiGetRHS().findByText('Copy Link').trigger('mouseover');
cy.get('#copy-link-tooltip').should('be.visible').and('have.text', 'Copy link to this channel');
cy.uiGetRHS().findByText('Copy Link').trigger('mouseout');
cy.uiGetRHS().findByText('Copy Link').trigger('mouseenter');
cy.findByText('Copy link to this channel').should('be.visible');
cy.uiGetRHS().findByText('Copy Link').trigger('mouseleave');
});
it('should be able to toggle favorite on a channel', () => {

2
e2e-tests/cypress/tests/integration/channels/channel/channel_members_rhs_spec.ts
Просмотреть файл

@@ -235,6 +235,8 @@ describe('Channel members RHS', () => {
// # Click on the Manage button
cy.uiGetRHS().findByText('Manage').should('be.visible').click();
cy.wait(500);
// * Can see user with their roles, and change it
cy.uiGetRHS().findByTestId(`memberline-${user.id}`).should('be.visible').within(() => {
cy.contains(`${user.username}`).should('be.visible');

44
e2e-tests/cypress/tests/integration/channels/channel/channel_name_tooltips_spec.ts
Просмотреть файл

@@ -17,26 +17,6 @@ import * as TIMEOUTS from '../../../fixtures/timeouts';
const timestamp = Date.now();
function verifyChannel(channel: Channel, verifyExistence = true) {
// # Wait for Channel to be created
cy.wait(TIMEOUTS.HALF_SEC);
// # Hover on the channel name
cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseover');
// * Verify that the tooltip is displayed
if (verifyExistence) {
cy.get('div.tooltip-inner').
should('be.visible').
and('contain', channel.display_name);
} else {
cy.get('div.tooltip-inner').should('not.exist');
}
// # Move cursor away from channel
cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseout');
}
describe('channel name tooltips', () => {
let loggedUser: UserProfile;
let longUser: UserProfile;
@@ -122,12 +102,30 @@ describe('channel name tooltips', () => {
cy.uiGetButton('Go').click();
// # Hover on the channel name
cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseover');
cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseenter');
// * Verify that the tooltip is displayed
cy.get('div.tooltip-inner').should('be.visible');
cy.findByRole('tooltip').should('be.visible');
// # Move cursor away from channel
cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseout');
cy.get(`#sidebarItem_${Cypress._.sortBy([loggedUser.id, longUser.id]).join('__')}`).scrollIntoView().should('be.visible').trigger('mouseleave');
});
});
function verifyChannel(channel: Channel, verifyExistence = true) {
// # Wait for Channel to be created
cy.wait(TIMEOUTS.HALF_SEC);
// # Hover on the channel name
cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseenter');
// * Verify that the tooltip is displayed
if (verifyExistence) {
cy.findByRole('tooltip').should('be.visible').and('have.text', channel.display_name);
} else {
cy.findByRole('tooltip').should('not.exist');
}
// # Move cursor away from channel
cy.get(`#sidebarItem_${channel.name}`).should('be.visible').trigger('mouseleave');
}

14
e2e-tests/cypress/tests/integration/channels/custom_status/custom_status_expiry/custom_status_expiry_2_spec.ts
Просмотреть файл

@@ -104,14 +104,16 @@ describe('MM-T4064 Status expiry visibility', () => {
// # Post a message in the channel
cy.postMessage('Hello World!');
// # Hover on the custom status emoji present in the post header
cy.get('.post.current--user .post__header span.emoticon').trigger('mouseover');
// # Get the last post
cy.getLastPostId().then((postId) => {
// # Hover on the custom status emoji present in the post header
cy.get(`#post_${postId}`).find('.emoticon').should('exist').trigger('mouseenter');
// * Custom status tooltip should be visible
cy.get('#custom-status-tooltip').should('exist');
// * Custom status tooltip should be visible and contain the correct custom status expiry time
cy.findByRole('tooltip').should('exist').and('contain.text', expiresAt.format(expiryTimeFormat));
// * Tooltip should contain the correct custom status expiry time
cy.get('#custom-status-tooltip .custom-status-expiry time').should('have.text', expiresAt.format(expiryTimeFormat));
cy.get(`#post_${postId}`).find('.emoticon').trigger('mouseleave');
});
});
it('MM-T4064_7 should show custom status expiry time in the user popover', () => {

12
e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_audio_spec.js
Просмотреть файл

@@ -126,14 +126,16 @@ function testAudioFile(properties) {
cy.get('@filePreviewModal').get('video').should('exist');
}
cy.get('.file-preview-modal__file-name').should('have.text', fileName);
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(fileName);
cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
});
});
// # Close modal

10
e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_generic_spec.js
Просмотреть файл

@@ -114,12 +114,12 @@ function testGenericFile(properties) {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(fileName);
cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
});
});
// # Close modal

10
e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_image_spec.js
Просмотреть файл

@@ -145,12 +145,12 @@ function testImage(properties) {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(fileName);
cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
});
});
// # Close modal

10
e2e-tests/cypress/tests/integration/channels/files_and_attachments/file_preview_video_spec.js
Просмотреть файл

@@ -126,12 +126,12 @@ export function testVideoFile(properties) {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(fileName);
cy.wrap(downloadLink).parent().should('have.attr', 'download', fileName).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, fileName, 'attachment');
});
});
// # Close modal

8
e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_not_cloud_spec.js
Просмотреть файл

@@ -71,8 +71,8 @@ describe('Upload Files', () => {
cy.uiGetFilePreviewModal();
// # Hover over the downlink button and verify that tooltip is shown
cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseover');
cy.uiGetToolTip('Get a public link');
cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseenter');
cy.findByText('Get a public link').should('exist');
// # Copy download link
cy.uiGetDownloadLinkFilePreviewModal().click();
@@ -178,8 +178,8 @@ describe('Upload Files', () => {
cy.uiGetFilePreviewModal();
// # Hover over the downlink button and verify that tooltip is shown
cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseover');
cy.uiGetToolTip('Get a public link');
cy.uiGetDownloadLinkFilePreviewModal().trigger('mouseenter');
cy.findByText('Get a public link').should('exist');
// # Click to copy download link
cy.uiGetDownloadLinkFilePreviewModal().click({force: true});

30
e2e-tests/cypress/tests/integration/channels/files_and_attachments/upload_files_spec.js
Просмотреть файл

@@ -140,12 +140,12 @@ describe('Upload Files', () => {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(file.filename);
cy.wrap(downloadLink).parent().should('have.attr', 'download', file.filename).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, file.filename, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, file.filename, 'attachment');
});
});
// # Close the modal
@@ -174,12 +174,12 @@ describe('Upload Files', () => {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(filename);
cy.wrap(downloadLink).parent().should('have.attr', 'download', filename).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
});
});
// # Close the modal
@@ -405,12 +405,12 @@ describe('Upload Files', () => {
// * Download button should exist
cy.get('@filePreviewModal').uiGetDownloadFilePreviewModal().then((downloadLink) => {
expect(downloadLink.attr('download')).to.equal(filename);
cy.wrap(downloadLink).parent().should('have.attr', 'download', filename).then((link) => {
const fileAttachmentURL = link.attr('href');
const fileAttachmentURL = downloadLink.attr('href');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
// * Verify that download link has correct name
downloadAttachmentAndVerifyItsProperties(fileAttachmentURL, filename, 'attachment');
});
});
// # Close modal

4
e2e-tests/cypress/tests/integration/playbooks/channels/app_bar_spec.js
Просмотреть файл

@@ -60,10 +60,10 @@ describe('channels > App Bar', {testIsolation: true}, () => {
cy.visit(`/${testTeam.name}/channels/town-square`);
// # Hover over the channel header icon
cy.getPlaybooksAppBarIcon().trigger('mouseover');
cy.getPlaybooksAppBarIcon().trigger('mouseenter');
// * Verify tooltip text
cy.findByRole('tooltip', {name: 'Playbooks'}).should('be.visible');
cy.findByRole('tooltip').should('be.visible').and('contain', 'Playbooks');
});
});
});

8
e2e-tests/cypress/tests/support/ui/file_preview.js
Просмотреть файл

@@ -51,17 +51,17 @@ Cypress.Commands.add('uiGetContentFilePreviewModal', () => {
});
Cypress.Commands.add('uiGetDownloadLinkFilePreviewModal', () => {
return cy.uiGetFilePreviewModal().find('.icon-link-variant').parent();
return cy.uiGetFilePreviewModal().find('.icon-link-variant');
});
Cypress.Commands.add('uiGetDownloadFilePreviewModal', () => {
return cy.uiGetFilePreviewModal().find('.icon-download-outline').parent();
return cy.uiGetFilePreviewModal().find('.icon-download-outline');
});
Cypress.Commands.add('uiGetArrowLeftFilePreviewModal', () => {
return cy.uiGetFilePreviewModal().find('.icon-chevron-left').parent();
return cy.uiGetFilePreviewModal().find('.icon-chevron-left');
});
Cypress.Commands.add('uiGetArrowRightFilePreviewModal', () => {
return cy.uiGetFilePreviewModal().find('.icon-chevron-right').parent();
return cy.uiGetFilePreviewModal().find('.icon-chevron-right');
});

2
e2e-tests/cypress/tests/support/ui/tooltip.js
Просмотреть файл

@@ -2,5 +2,5 @@
// See LICENSE.txt for license information.
Cypress.Commands.add('uiGetToolTip', (text) => {
cy.findByRole('tooltip').should('contain', text);
cy.findByRole('tooltip').should('exist').and('contain', text);
});