Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add new Custom Tooltip plugin #650

Merged
merged 14 commits into from
Oct 21, 2021
Merged

feat: add new Custom Tooltip plugin #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
8bb0a18
feat: add new Custom Tooltip plugin
ghiscoding Oct 13, 2021
44b141f
refactor: add async tooltip & auto-positioning
ghiscoding Oct 15, 2021
626bbdb
feat: add support to regular title tooltip
ghiscoding Oct 16, 2021
39fd27b
tooltip: add full docs & complete regular tooltip usage
ghiscoding Oct 16, 2021
48e20c2
tooltip: fix inverted static position
ghiscoding Oct 16, 2021
40c86a6
tooltip: add custom tooltip for column header as well
ghiscoding Oct 16, 2021
f8fa78f
tooltip: empty "title" attribute in every use case
ghiscoding Oct 16, 2021
8d57179
tooltip: fix small issues with regular tooltip reading title
ghiscoding Oct 19, 2021
9d98795
tooltip: add tooltip for header-row as well
ghiscoding Oct 19, 2021
3610f9f
tooltip: merge autotooltip code & make all regular tooltip work
ghiscoding Oct 20, 2021
c62d3cd
tooltip: add Cypress E2E tests
ghiscoding Oct 20, 2021
23b4e0d
tooltip: add more Cypress E2E tests
ghiscoding Oct 20, 2021
5fa23bd
tooltip: simplify css to create tooltip arrow & add more Cypress tests
ghiscoding Oct 21, 2021
9961dae
tests: fix failing Cypress E2E test
ghiscoding Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/integration/example-composite-editor-modal-dialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ describe('Example - Composite Editor Modal with Create/Edit/Mass-Update/Mass-Sel
cy.get(`[style="top:12500px"] > .slick-cell:nth(3)`).should('contain', '9 days');
cy.get(`[style="top:12500px"] > .slick-cell:nth(4)`).each($cell => {
const htmlText = $cell.html();
expect(htmlText).to.eq('<span class="percent-complete-bar" style="background:silver;width:44%"></span>');
expect(htmlText).to.eq('<span class="percent-complete-bar" style="background:silver;width:44%" title="44%"></span>');
});
cy.get(`[style="top:12500px"] > .slick-cell:nth(5)`).should('contain', '02/01/2020');
cy.get(`[style="top:12500px"] > .slick-cell:nth(6)`).should('contain', '');
Expand Down
192 changes: 192 additions & 0 deletions cypress/integration/example-plugin-custom-tooltip.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
/// <reference types="cypress" />

describe('Example - Custom Tooltip', () => {
const GRID_ROW_HEIGHT = 25;
const titles = ['', 'Title', 'Description', 'Description 2', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven'];

beforeEach(() => {
// create a console.log spy for later use
cy.window().then((win) => {
cy.spy(win.console, "log");
});
});

it('should display Example title', () => {
cy.visit(`${Cypress.config('baseExampleUrl')}/example-plugin-custom-tooltip.html`);
cy.get('h2').contains('Demonstrates: Slick.Plugins.CustomTooltip');
});

it('should have exact Column Titles in the grid', () => {
cy.get('#myGrid')
.find('.slick-header-columns')
.children()
.each(($child, index) => expect($child.text()).to.eq(titles[index]));
});

it('should change server delay to 10ms for faster testing', () => {
cy.get('#server-delay').type('{backspace}{backspace}{backspace}10');
cy.get('#set-delay-btn').click();
});

it('should mouse over 1st row checkbox column and NOT expect any tooltip to show since it is disabled on that column', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0)`).as('checkbox0-cell')
cy.get('@checkbox0-cell').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('not.exist');
cy.get('@checkbox0-cell').trigger('mouseleave');
});

it('should mouse over Task 1 cell and expect async tooltip to show', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).as('task1-cell')
cy.get('@task1-cell').should('contain', 'Task 1');
cy.get('@task1-cell').trigger('mouseover');
cy.get('.slick-custom-tooltip').contains('loading...');

cy.wait(10);
cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains('Task 1 - (async tooltip)');

cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(0)').contains('Lifespan:');
cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number

cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(0)').contains('Ratio:');
cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number

cy.get('@task1-cell').trigger('mouseleave');
});

it('should mouse over Task 5 cell and expect async tooltip to show', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(1)`).as('task5-cell')
cy.get('@task5-cell').should('contain', 'Task 5');
cy.get('@task5-cell').trigger('mouseover');
cy.get('.slick-custom-tooltip').contains('loading...');

cy.wait(10);
cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains('Task 5 - (async tooltip)');

cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(0)').contains('Lifespan:');
cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number

cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(0)').contains('Ratio:');
cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number

cy.get('@task5-cell').trigger('mouseleave');
});

it('should mouse over 6th row Description and expect full cell content to show in a tooltip because cell has ellipsis and is too long for the cell itself', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(2)`).as('desc5-cell')
cy.get('@desc5-cell').should('contain', 'This is a sample task description.');
cy.get('@desc5-cell').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').should('not.contain', `regular tooltip (from title attribute)\nTask 5 cell value:\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);
cy.get('.slick-custom-tooltip').should('contain', `This is a sample task description.\nIt can be multiline\n\nAnother line...`);

cy.get('@desc5-cell').trigger('mouseleave');
});

it('should mouse over 6th row Description 2 and expect regular tooltip title + concatenated full cell content when using "useRegularTooltipFromFormatterOnly: true"', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(3)`).as('desc2-5-cell')
cy.get('@desc2-5-cell').should('contain', 'This is a sample task description.');
cy.get('@desc2-5-cell').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').should('contain', `regular tooltip (from title attribute)\nTask 5 cell value:\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);

cy.get('@desc2-5-cell').trigger('mouseleave');
});

it('should mouse over 6th row Duration and expect a custom tooltip shown with 4 label/value pairs displayed', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(4)`).as('duration5-cell')
cy.get('@duration5-cell').should('contain', '5 days');
cy.get('@duration5-cell').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains('Custom Tooltip');

cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(0)').contains('Id:');
cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(1)').contains('5');

cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(0)').contains('Title:');
cy.get('.tooltip-2cols-row:nth(1)').find('div:nth(1)').contains('Task 5');

cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(0)').contains('Completion:');
cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').find('.percent-complete-bar').should('exist');

cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(0)').contains('Effort Driven:');
cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)')
.find('img').invoke('attr', 'src').then(src => expect(src).to.contain('tick.png'));

cy.get('@duration5-cell').trigger('mouseleave');
});

it('should mouse over % Complete cell of Task 5 and expect regular tooltip to show with content "x %" where x is a number', () => {
cy.get(`[style="top:${GRID_ROW_HEIGHT * 5}px"] > .slick-cell:nth(5)`).as('percentage-cell')
cy.get('@percentage-cell').find('.percent-complete-bar').should('exist');
cy.get('@percentage-cell').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains(/\d+\%$/);

cy.get('@percentage-cell').trigger('mouseleave');
});

it('should mouse over header-row (filter) 1st column checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(0)`).as('checkbox0-filter')
cy.get('@checkbox0-filter').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('not.exist');
cy.get('@checkbox0-filter').trigger('mouseleave');
});

it('should mouse over header-row (filter) 2nd column Title and expect a tooltip to show rendered from an headerRowFormatter', () => {
cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(1)`).as('checkbox0-filter')
cy.get('@checkbox0-filter').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains('Custom Tooltip - Header Row (filter)');

cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(0)').contains('Column:');
cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(1)').contains('title');

cy.get('@checkbox0-filter').trigger('mouseleave');
});

it('should mouse over header-row (filter) Finish column and NOT expect any tooltip to show since it is disabled on that column', () => {
cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(7)`).as('finish-filter')
cy.get('@finish-filter').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('not.exist');
cy.get('@finish-filter').trigger('mouseleave');
});

it('should mouse over header title on 1st column with checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
cy.get(`.slick-header-columns .slick-header-column:nth(0)`).as('checkbox-header')
cy.get('@checkbox-header').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('not.exist');
cy.get('@checkbox-header').trigger('mouseleave');
});

it('should mouse over header title on 2nd column with Title name and expect a tooltip to show rendered from an headerFormatter', () => {
cy.get(`.slick-header-columns .slick-header-column:nth(1)`).as('checkbox0-header')
cy.get('@checkbox0-header').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('be.visible');
cy.get('.slick-custom-tooltip').contains('Custom Tooltip - Header');

cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(0)').contains('Column:');
cy.get('.tooltip-2cols-row:nth(0)').find('div:nth(1)').contains('Title');

cy.get('@checkbox0-header').trigger('mouseleave');
});

it('should mouse over header title on 2nd column with Finish name and NOT expect any tooltip to show since it is disabled on that column', () => {
cy.get(`.slick-header-columns .slick-header-column:nth(7)`).as('finish-header')
cy.get('@finish-header').trigger('mouseover');

cy.get('.slick-custom-tooltip').should('not.exist');
cy.get('@finish-header').trigger('mouseleave');
});
});
Loading