Skip to content

Commit

Permalink
Eliminate chai-dom and restore @testing-library/jest-dom (#244)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SeinopSys
SeinopSys authored Apr 30, 2024
1 parent 2417f40 commit 5643660
Show file tree
Hide file tree
Showing 6 changed files with 367 additions and 322 deletions.
84 changes: 42 additions & 42 deletions assets/js/utils/__tests__/dom.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ describe('DOM Utilities', () => {
it(`should remove the ${hiddenClass} class from the provided element`, () => {
const mockElement = createHiddenElement('div');
showEl(mockElement);
expect(mockElement).not.to.have.class(hiddenClass);
expect(mockElement).not.toHaveClass(hiddenClass);
});

it(`should remove the ${hiddenClass} class from all provided elements`, () => {
Expand All @@ -93,9 +93,9 @@ describe('DOM Utilities', () => {
createHiddenElement('strong'),
];
showEl(mockElements);
expect(mockElements[0]).not.to.have.class(hiddenClass);
expect(mockElements[1]).not.to.have.class(hiddenClass);
expect(mockElements[2]).not.to.have.class(hiddenClass);
expect(mockElements[0]).not.toHaveClass(hiddenClass);
expect(mockElements[1]).not.toHaveClass(hiddenClass);
expect(mockElements[2]).not.toHaveClass(hiddenClass);
});

it(`should remove the ${hiddenClass} class from elements provided in multiple arrays`, () => {
Expand All @@ -108,18 +108,18 @@ describe('DOM Utilities', () => {
createHiddenElement('em'),
];
showEl(mockElements1, mockElements2);
expect(mockElements1[0]).not.to.have.class(hiddenClass);
expect(mockElements1[1]).not.to.have.class(hiddenClass);
expect(mockElements2[0]).not.to.have.class(hiddenClass);
expect(mockElements2[1]).not.to.have.class(hiddenClass);
expect(mockElements1[0]).not.toHaveClass(hiddenClass);
expect(mockElements1[1]).not.toHaveClass(hiddenClass);
expect(mockElements2[0]).not.toHaveClass(hiddenClass);
expect(mockElements2[1]).not.toHaveClass(hiddenClass);
});
});

describe('hideEl', () => {
it(`should add the ${hiddenClass} class to the provided element`, () => {
const mockElement = document.createElement('div');
hideEl(mockElement);
expect(mockElement).to.have.class(hiddenClass);
expect(mockElement).toHaveClass(hiddenClass);
});

it(`should add the ${hiddenClass} class to all provided elements`, () => {
Expand All @@ -129,9 +129,9 @@ describe('DOM Utilities', () => {
document.createElement('strong'),
];
hideEl(mockElements);
expect(mockElements[0]).to.have.class(hiddenClass);
expect(mockElements[1]).to.have.class(hiddenClass);
expect(mockElements[2]).to.have.class(hiddenClass);
expect(mockElements[0]).toHaveClass(hiddenClass);
expect(mockElements[1]).toHaveClass(hiddenClass);
expect(mockElements[2]).toHaveClass(hiddenClass);
});

it(`should add the ${hiddenClass} class to elements provided in multiple arrays`, () => {
Expand All @@ -144,18 +144,18 @@ describe('DOM Utilities', () => {
document.createElement('em'),
];
hideEl(mockElements1, mockElements2);
expect(mockElements1[0]).to.have.class(hiddenClass);
expect(mockElements1[1]).to.have.class(hiddenClass);
expect(mockElements2[0]).to.have.class(hiddenClass);
expect(mockElements2[1]).to.have.class(hiddenClass);
expect(mockElements1[0]).toHaveClass(hiddenClass);
expect(mockElements1[1]).toHaveClass(hiddenClass);
expect(mockElements2[0]).toHaveClass(hiddenClass);
expect(mockElements2[1]).toHaveClass(hiddenClass);
});
});

describe('disableEl', () => {
it('should set the disabled attribute to true', () => {
const mockElement = document.createElement('button');
disableEl(mockElement);
expect(mockElement).to.have.property('disabled', true);
expect(mockElement).toBeDisabled();
});

it('should set the disabled attribute to true on all provided elements', () => {
Expand All @@ -164,8 +164,8 @@ describe('DOM Utilities', () => {
document.createElement('button'),
];
disableEl(mockElements);
expect(mockElements[0]).to.have.property('disabled', true);
expect(mockElements[1]).to.have.property('disabled', true);
expect(mockElements[0]).toBeDisabled();
expect(mockElements[1]).toBeDisabled();
});

it('should set the disabled attribute to true on elements provided in multiple arrays', () => {
Expand All @@ -178,18 +178,18 @@ describe('DOM Utilities', () => {
document.createElement('button'),
];
disableEl(mockElements1, mockElements2);
expect(mockElements1[0]).to.have.property('disabled', true);
expect(mockElements1[1]).to.have.property('disabled', true);
expect(mockElements2[0]).to.have.property('disabled', true);
expect(mockElements2[1]).to.have.property('disabled', true);
expect(mockElements1[0]).toBeDisabled();
expect(mockElements1[1]).toBeDisabled();
expect(mockElements2[0]).toBeDisabled();
expect(mockElements2[1]).toBeDisabled();
});
});

describe('enableEl', () => {
it('should set the disabled attribute to false', () => {
const mockElement = document.createElement('button');
enableEl(mockElement);
expect(mockElement).to.have.property('disabled', false);
expect(mockElement).toBeEnabled();
});

it('should set the disabled attribute to false on all provided elements', () => {
Expand All @@ -198,8 +198,8 @@ describe('DOM Utilities', () => {
document.createElement('button'),
];
enableEl(mockElements);
expect(mockElements[0]).to.have.property('disabled', false);
expect(mockElements[1]).to.have.property('disabled', false);
expect(mockElements[0]).toBeEnabled();
expect(mockElements[1]).toBeEnabled();
});

it('should set the disabled attribute to false on elements provided in multiple arrays', () => {
Expand All @@ -212,22 +212,22 @@ describe('DOM Utilities', () => {
document.createElement('button'),
];
enableEl(mockElements1, mockElements2);
expect(mockElements1[0]).to.have.property('disabled', false);
expect(mockElements1[1]).to.have.property('disabled', false);
expect(mockElements2[0]).to.have.property('disabled', false);
expect(mockElements2[1]).to.have.property('disabled', false);
expect(mockElements1[0]).toBeEnabled();
expect(mockElements1[1]).toBeEnabled();
expect(mockElements2[0]).toBeEnabled();
expect(mockElements2[1]).toBeEnabled();
});
});

describe('toggleEl', () => {
it(`should toggle the ${hiddenClass} class on the provided element`, () => {
const mockVisibleElement = document.createElement('div');
toggleEl(mockVisibleElement);
expect(mockVisibleElement).to.have.class(hiddenClass);
expect(mockVisibleElement).toHaveClass(hiddenClass);

const mockHiddenElement = createHiddenElement('div');
toggleEl(mockHiddenElement);
expect(mockHiddenElement).not.to.have.class(hiddenClass);
expect(mockHiddenElement).not.toHaveClass(hiddenClass);
});

it(`should toggle the ${hiddenClass} class on all provided elements`, () => {
Expand All @@ -238,10 +238,10 @@ describe('DOM Utilities', () => {
createHiddenElement('em'),
];
toggleEl(mockElements);
expect(mockElements[0]).to.have.class(hiddenClass);
expect(mockElements[1]).not.to.have.class(hiddenClass);
expect(mockElements[2]).to.have.class(hiddenClass);
expect(mockElements[3]).not.to.have.class(hiddenClass);
expect(mockElements[0]).toHaveClass(hiddenClass);
expect(mockElements[1]).not.toHaveClass(hiddenClass);
expect(mockElements[2]).toHaveClass(hiddenClass);
expect(mockElements[3]).not.toHaveClass(hiddenClass);
});

it(`should toggle the ${hiddenClass} class on elements provided in multiple arrays`, () => {
Expand All @@ -254,10 +254,10 @@ describe('DOM Utilities', () => {
document.createElement('em'),
];
toggleEl(mockElements1, mockElements2);
expect(mockElements1[0]).not.to.have.class(hiddenClass);
expect(mockElements1[1]).to.have.class(hiddenClass);
expect(mockElements2[0]).not.to.have.class(hiddenClass);
expect(mockElements2[1]).to.have.class(hiddenClass);
expect(mockElements1[0]).not.toHaveClass(hiddenClass);
expect(mockElements1[1]).toHaveClass(hiddenClass);
expect(mockElements2[0]).not.toHaveClass(hiddenClass);
expect(mockElements2[1]).toHaveClass(hiddenClass);
});
});

Expand Down Expand Up @@ -361,8 +361,8 @@ describe('DOM Utilities', () => {
const mockClassTwo = 'class-two';
const el = makeEl('p', { className: `${mockClassOne} ${mockClassTwo}` });
expect(el.nodeName).toEqual('P');
expect(el).to.have.class(mockClassOne);
expect(el).to.have.class(mockClassTwo);
expect(el).toHaveClass(mockClassOne);
expect(el).toHaveClass(mockClassTwo);
});
});

Expand Down
24 changes: 12 additions & 12 deletions assets/js/utils/__tests__/draggable.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('Draggable Utilities', () => {

fireEvent(mockDraggable, mockEvent);

expect(mockDraggable).to.have.class(draggingClass);
expect(mockDraggable).toHaveClass(draggingClass);
});

it('should add dummy data to the dragstart event if it\'s empty', () => {
Expand Down Expand Up @@ -146,7 +146,7 @@ describe('Draggable Utilities', () => {

fireEvent(mockDraggable, mockEvent);

expect(mockDraggable).to.have.class(dragOverClass);
expect(mockDraggable).toHaveClass(dragOverClass);
});
});

Expand All @@ -159,7 +159,7 @@ describe('Draggable Utilities', () => {

fireEvent(mockDraggable, mockEvent);

expect(mockDraggable).not.to.have.class(dragOverClass);
expect(mockDraggable).not.toHaveClass(dragOverClass);
});
});

Expand All @@ -170,13 +170,13 @@ describe('Draggable Utilities', () => {
const mockStartEvent = createDragEvent('dragstart');
fireEvent(mockDraggable, mockStartEvent);

expect(mockDraggable).to.have.class(draggingClass);
expect(mockDraggable).toHaveClass(draggingClass);

const mockDropEvent = createDragEvent('drop');
fireEvent(mockDraggable, mockDropEvent);

expect(mockDropEvent.defaultPrevented).toBe(true);
expect(mockDraggable).not.to.have.class(draggingClass);
expect(mockDraggable).not.toHaveClass(draggingClass);
});

it('should cancel the event and insert source before target if dropped on left side', () => {
Expand All @@ -188,7 +188,7 @@ describe('Draggable Utilities', () => {
const mockStartEvent = createDragEvent('dragstart');
fireEvent(mockSecondDraggable, mockStartEvent);

expect(mockSecondDraggable).to.have.class(draggingClass);
expect(mockSecondDraggable).toHaveClass(draggingClass);

const mockDropEvent = createDragEvent('drop');
Object.assign(mockDropEvent, { clientX: 124 });
Expand All @@ -200,7 +200,7 @@ describe('Draggable Utilities', () => {

try {
expect(mockDropEvent.defaultPrevented).toBe(true);
expect(mockSecondDraggable).not.to.have.class(draggingClass);
expect(mockSecondDraggable).not.toHaveClass(draggingClass);
expect(mockSecondDraggable.nextElementSibling).toBe(mockDraggable);
}
finally {
Expand All @@ -217,7 +217,7 @@ describe('Draggable Utilities', () => {
const mockStartEvent = createDragEvent('dragstart');
fireEvent(mockSecondDraggable, mockStartEvent);

expect(mockSecondDraggable).to.have.class(draggingClass);
expect(mockSecondDraggable).toHaveClass(draggingClass);

const mockDropEvent = createDragEvent('drop');
Object.assign(mockDropEvent, { clientX: 125 });
Expand All @@ -229,7 +229,7 @@ describe('Draggable Utilities', () => {

try {
expect(mockDropEvent.defaultPrevented).toBe(true);
expect(mockSecondDraggable).not.to.have.class(draggingClass);
expect(mockSecondDraggable).not.toHaveClass(draggingClass);
expect(mockDraggable.nextElementSibling).toBe(mockSecondDraggable);
}
finally {
Expand Down Expand Up @@ -259,7 +259,7 @@ describe('Draggable Utilities', () => {
const mockStartEvent = createDragEvent('dragstart');
fireEvent(mockDraggable, mockStartEvent);

expect(mockDraggable).to.have.class(draggingClass);
expect(mockDraggable).toHaveClass(draggingClass);

const mockOverElement = createDraggableElement();
mockOverElement.classList.add(dragOverClass);
Expand All @@ -270,8 +270,8 @@ describe('Draggable Utilities', () => {
const mockDropEvent = createDragEvent('dragend');
fireEvent(mockDraggable, mockDropEvent);

expect(mockDraggable).not.to.have.class(draggingClass);
expect(mockOverElement).not.to.have.class(dragOverClass);
expect(mockDraggable).not.toHaveClass(draggingClass);
expect(mockOverElement).not.toHaveClass(dragOverClass);
});
});

Expand Down
Loading

0 comments on commit 5643660

Please sign in to comment.