mframejs
Version:
simple framework
129 lines (99 loc) • 4.76 kB
text/typescript
import { DOM, configure, IElement, ContainerClasses } from 'mframejs';
import { JSDOM } from 'jsdom';
// our dummy app to simplify parts
export class App implements IElement {
public productsObject = [
{ id: 0, name: 'cola' },
{ id: 1, name: 'pepsi' },
{ id: 2, name: 'fanta' }
];
public selectedProductStrings: string[] = [null];
public loadTemplate() {
return `
<template>
<label>
<br>
Selected product
<br>
<select class="options" multiple value.bind="selectedProductStrings">
<option class="options" model.bind="null"> None </option>
<option class="options" repeat.for="product of productsObject" model.bind="product.name">
@{product.name}
</option>
</select>
</label>
<br>
<div class="selected">Selected product: @{selectedProductStrings}</div>
</template>`;
}
}
describe('radio group with just repeat with values null', () => {
beforeAll(() => {
const window = new JSDOM('').window;
DOM.setConfig(window, window.document);
configure(App).then((mf: any) => {
mf.start(DOM.document.body);
});
});
it('check default values are set (null/none)', async () => {
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: ');
expect((input[0] as any).value).toBe('None');
});
it('check "cola" values are set', async () => {
const app: App = ContainerClasses.get(App);
app.selectedProductStrings = ['cola'];
await DOM.waitFor(0);
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: cola');
expect((input[0] as any).value).toBe('cola');
});
it('check "pepsi" values are set', async () => {
const app: App = ContainerClasses.get(App);
app.selectedProductStrings = ['pepsi'];
await DOM.waitFor(0);
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: pepsi');
expect((input[0] as any).value).toBe('pepsi');
});
it('check "fanta" values are set', async () => {
const app: App = ContainerClasses.get(App);
app.selectedProductStrings = ['fanta'];
await DOM.waitFor(0);
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: fanta');
expect((input[0] as any).value).toBe('fanta');
});
it('check "unknow" dont edit value', async () => {
const app: App = ContainerClasses.get(App);
app.selectedProductStrings = ['unknown'];
await DOM.waitFor(0);
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: unknown');
expect((input[0] as any).value).toBe('None');
});
it('sett back to null', async () => {
const app: App = ContainerClasses.get(App);
app.selectedProductStrings = [null];
await DOM.waitFor(0);
const input = DOM.document.getElementsByClassName('options');
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: ');
expect((input[0] as any).value).toBe('None');
});
/* not sure how to test this with jsdom, justuse puppeteer?
it('set select on cola', async () => {
const input = DOM.document.getElementsByClassName('options');
const change = new (DOM.window as any).CustomEvent('change', { bubbles: true });
(input[3] as any).setAttribute('selected', null);
(input[3] as any).dispatchEvent(change);
const selected = DOM.document.getElementsByClassName('selected');
expect((selected[0] as any).innerHTML).toBe('Selected product: pepsi');
expect((input[0] as any).value).toBe('pepsi');
}); */
});