Skip to content

Commit

Permalink
fix(Modals): bottom sheet and tests
Browse files Browse the repository at this point in the history 
Most tests can be removed, because they test html functionality. Just
adapted them to work again.
  • Loading branch information
@wuda-io
wuda-io committed Dec 17, 2024
1 parent 712cdfc commit ac02f9e
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 273 deletions.
8 changes: 3 additions & 5 deletions sass/components/_modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,9 @@ dialog::backdrop {

// Modal Bottom Sheet Style
.modal.bottom-sheet {
top: auto;
bottom: -100%;
margin: 0;
width: 100%;
margin-bottom: 0;
max-height: 45%;
border-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
will-change: bottom, opacity;
}
129 changes: 31 additions & 98 deletions spec/tests/modal/modalSpec.js
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,59 @@
/* eslint-disable no-undef */

describe('Modal:', () => {
let trigger1, modal1;
const fixture = `<a class="btn tonal trigger waves-effect waves-light" href="#" onclick="modal1.showModal(); return false;">Modal</a>
<button class="btn btn-floating fixed-action-btn" onclick="modal1.showModal()"><i class="material-icons">menu</i></button>
const fixture = `<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<button class="btn btn-floating fixed-action-btn modal-trigger" data-target="modal1"><i class="material-icons">menu</i></button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<dialog id="modal1" class="modal">
<div class="modal-header">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>
<!-- Modal Structure -->
<div id="modal2" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat ">Agree</a>
<a href="#" onclick="modal1.close(); return false;" class="waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal3">Modal</a>
<!-- Modal Structure -->
<div id="modal3" class="modal bottom-sheet">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
</dialog>
`;

beforeEach(() => {
XloadHtml(fixture);
trigger1 = document.querySelector('.btn[href="#modal1"]');
triggerIcon1 = document.querySelector('.btn[data-target="modal1"] i');
trigger2 = document.querySelector('.btn[href="#modal2"]');
trigger3 = document.querySelector('.btn[href="#modal3"]');
modal1 = document.querySelector('#modal1');
modal2 = document.querySelector('#modal2');
modal3 = document.querySelector('#modal3');
});
afterEach(() => XunloadFixtures());

describe('Modals', () => {
it('Should open and close correctly', (done) => {
M.Modal.init(modal1, { inDuration: 0, outDuration: 0 });
const modal1 = document.querySelector('.modal');
const trigger = document.querySelector('.trigger');
expect(modal1).toBeHidden('Modal should be hidden');
click(trigger1);
click(trigger);
setTimeout(() => {
expect(modal1).toBeVisible('Modal should be shown');
expect(modal1).toHaveClass('open', 'Modal should have class open');
// Check overlay is attached
let overlay = M.Modal.getInstance(modal1)._overlay;
let overlayInDOM = document.contains(overlay);
expect(overlayInDOM).toEqual(true, 'Overlay should be attached on open');
click(overlay);
setTimeout(() => {
expect(modal1).toNotHaveClass('open', 'Modal should have class open removed');
let overlayInDOM = document.contains(overlay);
expect(overlayInDOM).toEqual(false, 'Overlay should be removed on close');
done();
}, 10);
done();
}, 10);
});

it('Should open and close correctly with children elements in trigger', (done) => {
M.Modal.init(modal1, { inDuration: 0, outDuration: 0 });
const modal1 = document.querySelector('.modal');
const triggerIcon1 = document.querySelector('button i');
expect(modal1).toBeHidden('Modal should be hidden');
click(triggerIcon1);
setTimeout(() => {
expect(modal1).toBeVisible('Modal should be shown');
expect(modal1).toHaveClass('open', 'Modal should have class open');
// Check overlay is attached
let overlay = M.Modal.getInstance(modal1)._overlay;
let overlayInDOM = document.contains(overlay);
expect(overlayInDOM).toEqual(true, 'Overlay should be attached on open');
click(overlay);
setTimeout(() => {
expect(modal1).toNotHaveClass('open', 'Modal should have class open removed');
let overlayInDOM = document.contains(overlay);
expect(overlayInDOM).toEqual(false, 'Overlay should be removed on close');
done();
}, 10);
done();
}, 10);
});

// Modals should not be dismissible, use a Popover then

/*
it('Should have a dismissible option', (done) => {
M.Modal.init(modal1, {
dismissible: false,
inDuration: 0,
outDuration: 0
});
// M.Modal.init(modal1, {
// dismissible: false,
// inDuration: 0,
// outDuration: 0
// });
click(trigger1);
setTimeout(() => {
expect(modal1).toBeVisible('Modal should be shown');
Expand All @@ -123,33 +69,20 @@ describe('Modal:', () => {
}, 10);
}, 10);
});
*/

it('Should have callbacks', (done) => {
let readyTest = false;
let completeTest = false;
M.Modal.init(modal1, {
inDuration: 0,
outDuration: 0,
onOpenStart: () => {
readyTest = true;
},
onCloseStart: () => {
completeTest = true;
}
let hasBeenClosed = false;
document.querySelector('.modal').addEventListener('close', () => {
hasBeenClosed = true;
});
expect(readyTest).toEqual(false, 'callback not yet fired');
expect(completeTest).toEqual(false, 'callback not yet fired');
const trigger1 = document.querySelector('.trigger');
click(trigger1);
expect(hasBeenClosed).toEqual(false, 'callback not yet fired');
click(document.querySelector('.modal-footer a'));
setTimeout(() => {
expect(readyTest).toEqual(true, 'callback fired');
expect(completeTest).toEqual(false, 'callback not yet fired');
let overlay = M.Modal.getInstance(modal1)._overlay;
click(overlay);
setTimeout(() => {
expect(readyTest).toEqual(true, 'callback fired');
expect(completeTest).toEqual(true, 'callback fired');
done();
}, 10);
expect(hasBeenClosed).toEqual(true, 'callback fired');
done();
}, 10);
});
});
Expand Down
Loading

0 comments on commit ac02f9e

Please sign in to comment.