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

feat(plugins): remove jQuery from CheckboxSelectColumn plugins #755

Merged
merged 1 commit into from
May 4, 2023
Merged

feat(plugins): remove jQuery from CheckboxSelectColumn plugins #755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
100 changes: 100 additions & 0 deletions cypress/integration/example-checkbox-row-select.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
/// <reference types="cypress" />

describe('Example - Checkbox Row Select', () => {
const titles = ['', 'A', 'B', 'C', 'D', 'E'];
const GRID_ROW_HEIGHT = 25;

describe('Grid 1', () => {
it('should display Example title', () => {
cy.visit(`${Cypress.config('baseExampleUrl')}/example-checkbox-row-select.html`);
cy.get('h2').contains('Demonstrates');
cy.get('h2 + ul > li').first().contains('Checkbox row select column');
});

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 be able to select 5th row of first grid by clicking "Select row 5" button', () => {
cy.get('#selectRow5')
.click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length', 1);

// the entire row (all 6x cells) should be selected
cy.get('#myGrid')
.find('.slick-cell.selected')
.should('have.length', 6);
});

it('should be able to select first 2 rows and now expect 3 rows selected', () => {
cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();
cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) input[type=checkbox]`).click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length', 3);
});

it('should be able to unselect 5th row of first grid by clicking "Unselect row 5" button', () => {
cy.get('#unselectRow5')
.click();

cy.get(`.slick-row[style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) input[type=checkbox]`)
.should('not.be.checked');

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length', 2);
});

it('should be able to unselect all rows by clicking "Unselect all rows" button', () => {
cy.get('#unselectAllRows')
.click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length', 0);
});

it('should be able select all rows by clicking on the Select All checkbox', () => {
cy.get('#myGrid [data-id=_checkbox_selector]')
.click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length.greaterThan', 10);
});

it('should be able to unselect all rows by clicking "Unselect all rows" button', () => {
cy.get('#unselectAllRows')
.click();

cy.get('#myGrid')
.find('.slick-cell-checkboxsel input:checked')
.should('have.length', 0);
});

it('should be able to click on "toggle show/hide Select All" button and expect Select All checkbox to be toggled', () => {
cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
.should('exist');

cy.get('[data-test="toggle-select-all"]')
.click();

cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
.should('not.exist');

cy.get('[data-test="toggle-select-all"]')
.click();

cy.get('#myGrid [data-id=_checkbox_selector] input[type=checkbox]')
.should('exist');
});
});
});
16 changes: 6 additions & 10 deletions examples/example-checkbox-row-select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ <h2>Demonstrates:</h2>
<ul>
<li>Checkbox row select column</li>
<p>
<button onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
<button data-test="toggle-select-all" onclick="toggleHideSelectAllCheckbox()">Toggle show/hide "Select All" checkbox</button>
</p>

<p>
Expand All @@ -72,9 +72,6 @@ <h2>View Source:</h2>
</div>
</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

<script src="../slick.core.js"></script>
Expand Down Expand Up @@ -114,7 +111,7 @@ <h2>View Source:</h2>
checkboxSelector2.setOptions({ hideSelectAllCheckbox: isSelectAllCheckbox2Hidden });
}

$(function () {
(function () {
for (var i = 0; i < 100; i++) {
var d = (data[i] = {});
d[0] = "Row " + i;
Expand Down Expand Up @@ -161,7 +158,7 @@ <h2>View Source:</h2>
var x = args.rows;
});

$("#selectRow5").click(function() {
document.querySelector("#selectRow5").addEventListener('click', function() {
var rowIndex = 5; // use row 5 for this example
var selectedRowsIndexes = grid.getSelectedRows();
if (selectedRowsIndexes.indexOf(rowIndex) < 0) {
Expand All @@ -170,7 +167,7 @@ <h2>View Source:</h2>
}
});

$("#unselectRow5").click(function() {
document.querySelector("#unselectRow5").addEventListener('click', function() {
var rowIndex = 5; // use row 5 for this example
var selectedRowsIndexes = grid.getSelectedRows();
var rowIndexInArr = selectedRowsIndexes.indexOf(rowIndex);
Expand All @@ -180,11 +177,10 @@ <h2>View Source:</h2>
}
});

$("#unselectAllRows").click(function() {
document.querySelector("#unselectAllRows").addEventListener('click', function() {
grid.setSelectedRows([]);
});

})
})()
</script>
</body>
</html>
Loading