angular-slickgrid 9.0.0 → 9.0.2

package/test/cypress/e2e/example07.cy.ts

@@ -1,384 +0,0 @@
-describe('Example 7 - Header Button Plugin', () => {
-  const titles = [
-    'Resize me!',
-    'Hover me!',
-    'Column C',
-    'Column D',
-    'Column E',
-    'Column F',
-    'Column G',
-    'Column H',
-    'Column I',
-    'Column J',
-  ];
-
-  beforeEach(() => {
-    // create a console.log spy for later use
-    cy.window().then((win) => {
-      cy.spy(win.console, 'log');
-    });
-  });
-
-  describe('Grid 1', () => {
-    it('should display Example title', () => {
-      cy.visit(`${Cypress.config('baseUrl')}/example07`);
-      cy.get('h2').should('contain', 'Example 7: Header Button Plugin');
-    });
-
-    it('should have exact Column Titles in the grid', () => {
-      cy.get('#grid7-1 .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(titles[index]));
-    });
-
-    it('should go over the 3rd column "Column C" and expect to see negative number in red after clicking on the red header button', () => {
-      cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(2)').should('contain', 'Column C');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(2)')
-        .find('.slick-header-button.mdi-lightbulb-outline.text-warning.faded')
-        .click();
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(2)')
-        .find('.slick-header-button.mdi-lightbulb-outline.text-warning.faded')
-        .should('not.exist'); // shouldn't be faded anymore
-
-      cy.window().then((win) => {
-        expect(win.console.log).to.have.callCount(1);
-        expect(win.console.log).to.be.calledWith(`execute a callback action to "toggle-highlight" on Column C`);
-      });
-
-      cy.get('#grid7-1 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return; // check only the first 10 rows is enough
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(2)')
-          .each(($cell) => {
-            const numberValue = $cell.text();
-            const htmlValue = $cell.html();
-            if (+numberValue < 0) {
-              expect(htmlValue).to.eq(`<div style="color:red; font-weight:bold;">${numberValue}</div>`);
-            } else {
-              expect(htmlValue).to.eq(numberValue);
-            }
-          });
-      });
-    });
-
-    it('should go over the 5th column "Column E" and not find the red header button', () => {
-      cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(4)').should('contain', 'Column E');
-
-      // column E should not have the icon
-      cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(4)').find('.slick-header-button').should('not.exist');
-    });
-
-    it('should go over the last "Column J" and expect to find the button to have the disabled class and clicking it should not turn the negative numbers to red neither expect console log after clicking the disabled button', () => {
-      cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left').scrollTo('right').wait(50);
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .should('contain', 'Column J')
-        .find('.slick-header-button-disabled')
-        .should('exist');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded')
-        .should('exist')
-        .click();
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded')
-        .should('exist'); // should still be faded after previous click
-
-      cy.get('#grid7-1 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return;
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(9)')
-          .each(($cell) => expect($cell.html()).to.eq($cell.text()));
-      });
-
-      cy.window().then((win) => {
-        expect(win.console.log).to.have.callCount(0);
-      });
-    });
-
-    it('should resize 1st column and make it wider', () => {
-      cy.get('#grid7-1 .slick-viewport-top.slick-viewport-left').scrollTo('left').wait(50);
-
-      cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(0)').should('contain', 'Resize me!');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(3)')
-        .should('be.hidden');
-
-      // Cypress does not yet support the .hover() method and because of that we need to manually resize the element
-      // this is not ideal since it only resizes the cell not the entire column but it's enough to test the functionality
-      cy.get('#grid7-1 .slick-header-column:nth(0)')
-        // resize the 1st column
-        .each(($elm) => $elm.width(140))
-        .find('.slick-resizable-handle')
-        .should('be.visible')
-        .invoke('show');
-
-      cy.get('#grid7-1 .slick-header-column:nth(0)').should(($el) => {
-        const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision
-        expect($el.width()).greaterThan(expectedWidth - 1);
-        expect($el.width()).lessThan(expectedWidth + 1);
-      });
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button')
-        .should('have.length', 4);
-    });
-
-    it('should resize column to its previous size and still expect some icons to be hidden', () => {
-      cy.get('#grid7-1 .slick-header-column:nth(0)')
-        // resize the 1st column
-        .each(($elm) => $elm.width(50))
-        .find('.slick-resizable-handle')
-        .should('be.visible')
-        .invoke('show');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(3)')
-        .should('be.hidden');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(1)')
-        .should('be.hidden');
-    });
-
-    it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => {
-      cy.get('#grid7-1 .slick-header-columns').children('.slick-header-column:nth(1)').should('contain', 'Hover me!');
-
-      cy.get('#grid7-1 .slick-header-columns')
-        .children('.slick-header-column:nth(1)')
-        .find('.slick-header-button.slick-header-button-hidden')
-        .should('be.hidden')
-        .should('have.css', 'visibility', 'hidden');
-    });
-  });
-
-  describe('Grid 2', () => {
-    it('should have exact Column Titles in the grid', () => {
-      cy.get('#grid7-2 .slick-header-columns')
-        .children()
-        .each(($child, index) => expect($child.text()).to.eq(titles[index]));
-    });
-
-    it('should go over the 3rd column "Column C" and expect to see negative number in red after clicking on the red header button', () => {
-      cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(2)').should('contain', 'Column C');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(2)')
-        .find('.slick-header-button.mdi-lightbulb-outline.text-warning.faded')
-        .click({ force: true });
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(2)')
-        .find('.slick-header-button.mdi-lightbulb-outline.text-warning.faded')
-        .should('not.exist'); // shouldn't be faded anymore
-
-      cy.window().then((win) => {
-        expect(win.console.log).to.have.callCount(1);
-        expect(win.console.log).to.be.calledWith(`execute a callback action to "toggle-highlight" on Column C`);
-      });
-
-      cy.get('#grid7-2 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return; // check only the first 10 rows is enough
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(2)')
-          .each(($cell) => {
-            const numberValue = $cell.text();
-            const htmlValue = $cell.html();
-            if (+numberValue < 0) {
-              expect(htmlValue).to.eq(`<div style="color:red; font-weight:bold;">${numberValue}</div>`);
-            } else {
-              expect(htmlValue).to.eq(numberValue);
-            }
-          });
-      });
-    });
-
-    it('should go over the 5th column "Column E" and not find the red header button', () => {
-      cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(4)').should('contain', 'Column E');
-
-      // column E should not have the icon
-      cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(4)').find('.slick-header-button').should('not.exist');
-    });
-
-    it('should go over the last "Column J" and expect to find the button to have the disabled class and clicking it should not turn the negative numbers to red neither expect console log after clicking the disabled button', () => {
-      cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('right').wait(50);
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .should('contain', 'Column J')
-        .find('.slick-header-button-disabled')
-        .should('exist');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded')
-        .should('exist')
-        .click({ force: true });
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(9)')
-        .find('.slick-header-button.slick-header-button-disabled.mdi-lightbulb-outline.text-warning.faded')
-        .should('exist'); // should still be faded after previous click
-
-      cy.get('#grid7-2 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return;
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(9)')
-          .each(($cell) => expect($cell.html()).to.eq($cell.text()));
-      });
-
-      cy.window().then((win) => {
-        expect(win.console.log).to.have.callCount(0);
-      });
-    });
-
-    it('should resize 1st column and make it wider', () => {
-      cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('left').wait(50);
-
-      cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(0)').should('contain', 'Resize me!');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(3)')
-        .should('be.hidden');
-
-      // Cypress does not yet support the .hover() method and because of that we need to manually resize the element
-      // this is not ideal since it only resizes the cell not the entire column but it's enough to test the functionality
-      cy.get('#grid7-2 .slick-header-column:nth(0)')
-        // resize the 1st column
-        .each(($elm) => $elm.width(140))
-        .find('.slick-resizable-handle')
-        .should('be.visible')
-        .invoke('show');
-
-      cy.get('#grid7-2 .slick-header-column:nth(0)').should(($el) => {
-        const expectedWidth = 140; // calculate with a calculated width including a (+/-)1px precision
-        expect($el.width()).greaterThan(expectedWidth - 1);
-        expect($el.width()).lessThan(expectedWidth + 1);
-      });
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button')
-        .should('have.length', 4);
-    });
-
-    it('should resize column to its previous size and still expect some icons to be hidden', () => {
-      cy.get('#grid7-2 .slick-header-column:nth(0)')
-        // resize the 1st column
-        .each(($elm) => $elm.width(50))
-        .find('.slick-resizable-handle')
-        .should('be.visible')
-        .invoke('show');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(3)')
-        .should('be.hidden');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(0)')
-        .find('.slick-header-button:nth(1)')
-        .should('be.hidden');
-    });
-
-    it('should go on the 2nd column "Hover me!" and expect the header button to appear only when doing hover over it', () => {
-      cy.get('#grid7-2 .slick-header-columns').children('.slick-header-column:nth(1)').should('contain', 'Hover me!');
-
-      cy.get('#grid7-2 .slick-header-columns')
-        .children('.slick-header-column:nth(1)')
-        .find('.slick-header-button.slick-header-button-hidden')
-        .should('be.hidden')
-        .should('have.css', 'visibility', 'hidden');
-    });
-
-    it('should filter "Column C" with positive number only and not expect any more red values', () => {
-      cy.get('#grid7-2 .search-filter.filter-2').type('>0');
-
-      cy.get('#grid7-2 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return; // check only the first 10 rows is enough
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(2)')
-          .each(($cell) => {
-            const numberValue = $cell.text();
-            expect(+numberValue).to.be.greaterThan(0);
-          });
-      });
-    });
-
-    it('should hover over the "Column C" and click on "Clear Filter" and expect grid to have all rows shown', () => {
-      cy.get('#grid7-2 .slick-header-column:nth(2)')
-        .first()
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .invoke('show')
-        .click();
-
-      cy.get('#grid7-2 .slick-header-menu .slick-menu-command-list')
-        .should('be.visible')
-        .children('.slick-menu-item:nth-of-type(6)')
-        .children('.slick-menu-content')
-        .should('contain', 'Remove Filter')
-        .click();
-
-      cy.get('.slick-row').should('have.length.greaterThan', 1);
-    });
-
-    it('should Clear all Sorting', () => {
-      cy.get('#grid7-2').find('button.slick-grid-menu-button').trigger('click').click({ force: true });
-
-      cy.get(`.slick-grid-menu:visible`).find('.slick-menu-item:nth(1)').find('span').contains('Clear all Sorting').click();
-    });
-
-    it('should hover over the "Column C" and click on "Sort Ascending"', () => {
-      cy.get('#grid7-2 .slick-header-column:nth(2)').first().trigger('mouseover').children('.slick-header-menu-button').click();
-
-      cy.get('#grid7-2 .slick-header-menu .slick-menu-command-list')
-        .should('be.visible')
-        .children('.slick-menu-item:nth-of-type(3)')
-        .children('.slick-menu-content')
-        .should('contain', 'Sort Ascending')
-        .click();
-    });
-
-    it('should expect first few items of "Column C" to be negative numbers and be red', () => {
-      cy.get('#grid7-2 .slick-viewport-top.slick-viewport-left').scrollTo('top').wait(50);
-
-      cy.get('#grid7-2 .slick-row').each(($row, index) => {
-        if (index > 10) {
-          return; // check only the first 10 rows is enough
-        }
-        cy.wrap($row)
-          .children('.slick-cell:nth(2)')
-          .each(($cell) => {
-            const numberValue = $cell.text();
-            const htmlValue = $cell.html();
-            expect(htmlValue).to.eq(`<div style="color:red; font-weight:bold;">${numberValue}</div>`);
-          });
-      });
-    });
-  });
-});

package/test/cypress/e2e/example08.cy.ts

@@ -1,190 +0,0 @@
-describe('Example 8 - Header Menu Plugin', () => {
-  const titles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Completed'];
-
-  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('baseUrl')}/example08`);
-    cy.get('h2').should('contain', 'Example 8: Header Menu Plugin');
-  });
-
-  it('should have exact Column Titles in the grid', () => {
-    cy.get('#grid8')
-      .find('.slick-header-columns')
-      .children()
-      .each(($child, index) => expect($child.text()).to.eq(titles[index]));
-  });
-
-  it('should hover over the "Title" column and expect Sort & Hide commands to be disabled', () => {
-    cy.get('#grid8')
-      .find('.slick-header-column')
-      .first()
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-menu-item.slick-menu-item-disabled').contains('Help').should('exist');
-
-    cy.get('.slick-menu-item .slick-menu-content').contains('Hide Column').should('exist');
-
-    cy.get('[data-test=selected-locale]').click();
-  });
-
-  it(`should be still be able to click on the Help command of 2nd column "Duration" and expect an alert`, () => {
-    const alertStub = cy.stub();
-    cy.on('window:alert', alertStub);
-
-    cy.get('#grid8')
-      .find('.slick-header-column:nth(1)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-menu-item.bold')
-      .find('.slick-menu-content.blue')
-      .contains('Help')
-      .click()
-      .then(() => expect(alertStub.getCall(0)).to.be.calledWith('Please help!!!'));
-
-    cy.window().then((win) => {
-      expect(win.console.log).to.have.callCount(1);
-      expect(win.console.log).to.be.calledWith('execute an action on Help');
-    });
-  });
-
-  it('should hover over "Duration" and execute "Sort Ascending" command and expect a sort icon', () => {
-    cy.get('#grid8').find('.slick-header-column:nth(1)').trigger('mouseover').children('.slick-header-menu-button').invoke('show').click();
-
-    cy.get('.slick-menu-item .slick-menu-content').contains('Sort Ascending').click();
-
-    cy.get('.slick-header-column:nth(1).slick-header-sortable.slick-header-column-sorted')
-      .find('.slick-sort-indicator.slick-sort-indicator-asc')
-      .should('exist');
-  });
-
-  it('should hover over "% Complete" and not expect to find the Help menu', () => {
-    cy.get('#grid8')
-      .find('.slick-header-column:nth(2)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-header-menu .slick-menu-command-list').should('exist');
-
-    cy.get('.slick-menu-item .slick-menu-content').contains('Help').should('not.exist');
-  });
-
-  it('should execute "Sort Descending" command from the menu left open and expect 2 sort icons afterward and "% Completed" to be descending with >80', () => {
-    cy.get('.slick-header-menu .slick-menu-command-list').should('exist');
-
-    cy.get('.slick-menu-item .slick-menu-content').contains('Sort Descending').click().wait(10);
-
-    cy.get('.slick-header-column:nth(1).slick-header-sortable.slick-header-column-sorted')
-      .find('.slick-sort-indicator.slick-sort-indicator-asc')
-      .should('exist');
-
-    cy.get('.slick-header-column:nth(2).slick-header-sortable.slick-header-column-sorted')
-      .find('.slick-sort-indicator.slick-sort-indicator-desc')
-      .should('exist');
-
-    cy.get('#grid8').find('.slick-row .slick-cell:nth(1)').contains('0 days');
-
-    cy.get('#grid8')
-      .find('.slick-row .slick-cell:nth(2)')
-      .each(($row) => {
-        expect(+$row.text()).to.be.greaterThan(60);
-      });
-  });
-
-  it('should hover over the "Completed" column and expect Help commands to be disabled', () => {
-    cy.get('#grid8')
-      .find('.slick-header-column:nth(5)')
-      .trigger('mouseover')
-      .children('.slick-header-menu-button')
-      .should('be.hidden')
-      .invoke('show')
-      .click();
-
-    cy.get('.slick-menu-item.slick-menu-item-disabled').contains('Help').should('exist');
-  });
-
-  it('should remain in the "Completed" column and execute "Hide Column" command and expect it gone from the grid', () => {
-    const titles = ['Title', 'Duration', '% Complete', 'Start', 'Finish'];
-
-    cy.get('.slick-menu-item.slick-menu-item').contains('Hide Column').click();
-
-    cy.get('#grid8')
-      .find('.slick-header-columns')
-      .children()
-      .should('have.length', 5)
-      .each(($child, index) => expect($child.text()).to.contain(titles[index]));
-  });
-
-  describe('with sub-menus', () => {
-    it(`should open Hello sub-menu and expect 3 options, then open Feedback->ContactUs sub-menus and expect previous Hello menu to no longer exists`, () => {
-      const subCommands1 = ['Hello World', 'Hello SlickGrid', `Let's play`];
-      const subCommands2 = ['Request update from supplier', '', 'Contact Us'];
-      const subCommands2_1 = ['Email us', 'Chat with us', 'Book an appointment'];
-
-      const stub = cy.stub();
-      cy.on('window:alert', stub);
-
-      cy.get('#grid8')
-        .find('.slick-header-column:nth(0)')
-        .trigger('mouseover')
-        .children('.slick-header-menu-button')
-        .should('be.hidden')
-        .invoke('show')
-        .click({ force: true });
-
-      cy.get('.slick-header-menu.slick-menu-level-0').find('.slick-menu-item.slick-menu-item').contains('Hello').should('exist').click();
-
-      cy.get('.slick-submenu').should('have.length', 1);
-      cy.get('.slick-header-menu.slick-menu-level-1.dropright') // right align
-        .should('exist')
-        .find('.slick-menu-item')
-        .each(($command, index) => expect($command.text()).to.contain(subCommands1[index]));
-
-      // click different sub-menu
-      cy.get('.slick-header-menu.slick-menu-level-0').find('.slick-menu-item.slick-menu-item').contains('Feedback').should('exist').click();
-
-      cy.get('.slick-submenu').should('have.length', 1);
-      cy.get('.slick-header-menu.slick-menu-level-1')
-        .should('exist')
-        .find('.slick-menu-item')
-        .each(($command, index) => expect($command.text()).to.contain(subCommands2[index]));
-
-      // click on Feedback->ContactUs
-      cy.get('.slick-header-menu.slick-menu-level-1.dropright') // right align
-        .find('.slick-menu-item.slick-menu-item')
-        .contains('Contact Us')
-        .should('exist')
-        .trigger('mouseover'); // mouseover or click should work
-
-      cy.get('.slick-submenu').should('have.length', 2);
-      cy.get('.slick-header-menu.slick-menu-level-2.dropleft') // left align
-        .should('exist')
-        .find('.slick-menu-item')
-        .each(($command, index) => expect($command.text()).to.contain(subCommands2_1[index]));
-
-      cy.get('.slick-header-menu.slick-menu-level-2')
-        .find('.slick-menu-item')
-        .contains('Chat with us')
-        .click()
-        .then(() => expect(stub.getCall(0)).to.be.calledWith('Command: contact-chat'));
-
-      cy.get('.slick-submenu').should('have.length', 0);
-    });
-  });
-});