@schukai/monster
Version:
Monster is a simple library for creating fast, robust and lightweight websites.
223 lines (163 loc) • 7.34 kB
JavaScript
import {getGlobal} from "../../../../source/types/global.mjs";
import * as chai from 'chai';
import {chaiDom} from "../../../util/chai-dom.mjs";
import {initJSDOM} from "../../../util/jsdom.mjs";
import {ResizeObserverMock} from "../../../util/resize-observer.mjs";
let expect = chai.expect;
chai.use(chaiDom);
const global = getGlobal();
let html1 = `
<div id="test1">
</div>
`;
let html2 = `
<div id="test2">
<monster-select
tabindex="0"
data-monster-bind="path:values.checkbox"
data-monster-options='{
"url": "mock-data.json",
"mapping": {
"selector": "*",
"valueTemplate": "\${first_name} \${last_name}",
"labelTemplate": "id"
},
"type":"checkbox"
}'></monster-select>
</div>
`;
let Select, fetchReference;
describe('Select', function () {
before(function (done) {
initJSDOM().then(() => {
import("element-internals-polyfill").catch(e => done(e));
fetchReference = global['fetch'];
if (!global.ResizeObserver) {
global.ResizeObserver = ResizeObserverMock;
}
import("../../../../source/components/form/select.mjs").then((m) => {
Select = m['Select'];
done()
}).catch(e => done(e))
});
})
describe('With fetch', function () {
beforeEach((done) => {
let mocks = document.getElementById('mocks');
mocks.innerHTML = html1;
global['fetch'] = function (url, options) {
let headers = new Map;
headers.set('content-type', 'application/json');
return new Promise((resolve, reject) => {
resolve({
ok:true,
status:200,
headers: headers,
text: function () {
return new Promise((resolve2, reject2) => {
let json = JSON.parse(`[
{
"id": 1,
"first_name": "Alexia",
"last_name": "Oughtright",
"email": "aoughtright0@exblog.jp",
"gender": "Agender",
"country": "mn"
},
{
"id": 2,
"first_name": "Beth",
"last_name": "Boddington",
"email": "bboddington1@statcounter.com",
"gender": "Non-binary",
"country": "sy"
},
{
"id": 3,
"first_name": "Shelli",
"last_name": "A'Barrow",
"email": "sabarrow2@google.co.uk",
"gender": "Polygender",
"country": "no"
} ]`);
resolve2(JSON.stringify(json))
})
}
});
})
};
done()
})
afterEach(() => {
let mocks = document.getElementById('mocks');
mocks.innerHTML = "";
global['fetch'] = fetchReference;
})
describe('create from template', function () {
beforeEach(() => {
let mocks = document.getElementById('mocks');
mocks.innerHTML = html2;
});
describe('create from template', function () {
it('should contains monster-select', function () {
expect(document.getElementById('test2')).contain.html('<monster-select');
});
});
});
describe('document.createElement', function () {
it('should instance of select', function () {
const select = document.createElement('monster-select');
expect(select).is.instanceof(Select);
});
it('should have options', function (done) {
this.timeout(5000)
let mocks = document.getElementById('mocks');
const select = document.createElement('monster-select');
select.setOption('url', 'https://monsterjs.org/assets/examples/countries.json') // url is not used in this test, see fetch mock
select.setOption('mapping.selector', '*')
select.setOption('mapping.labelTemplate', '${id}')
select.setOption('mapping.valueTemplate', '${id}')
select.addEventListener('monster-options-set', (e) => {
setTimeout(() => {
try {
const options = select.shadowRoot.querySelectorAll('[data-monster-role=option]');
expect(options.length).is.equal(3);
const optionHtml = select.shadowRoot.querySelector('[data-monster-role=options]');
expect(optionHtml).contain.html('data-monster-insert-reference="options-0"');
expect(optionHtml).contain.html('data-monster-insert-reference="options-1"');
expect(optionHtml).contain.html('data-monster-insert-reference="options-2"');
expect(optionHtml).contain.not.html('data-monster-insert-reference="options-3"');
done();
} catch (e) {
done(e)
}
}, 100)
})
mocks.appendChild(select);
});
});
});
describe('document.createElement()', function () {
afterEach(() => {
let mocks = document.getElementById('mocks');
mocks.innerHTML = "";
})
it('should have no options', function (done) {
let mocks = document.getElementById('mocks');
const select = document.createElement('monster-select');
mocks.appendChild(select);
setTimeout(() => {
try {
const options = select.shadowRoot.querySelector('[data-monster-role=options]');
expect(options).is.instanceof(HTMLDivElement);
const a = options.parentNode.outerHTML;
const b = options.childNodes.length;
expect(options.hasChildNodes()).to.be.false;
} catch (e) {
return done(e);
}
done();
}, 0)
});
});
});