it('should be valid, touched & dirty ', async () => {
await page.click('input');
await page.waitForChanges();
expect(element.classList.contains('dot-valid')).toBe(true);
expect(element.classList.contains('dot-dirty')).toBe(true);
expect(element.classList.contains('dot-touched')).toBe(true);
});
it('should show invalid range validation message', async () => {
element.setProperty('value', '2015-10-01');
await input.press('2');
await page.waitForChanges();
const errorMessage = await page.find('.dot-field__error-meessage');
expect(errorMessage.innerHTML).toBe('Invalid Date Range');
});
it('should show Regex validation message', async () => {
element.setProperty('regexCheck', '^[A-Za-z ]+$');
element.setProperty('validationMessage', 'Invalid Address');
await input.press('@');
await page.waitForChanges();
const errorMessage = await page.find('.dot-field__error-meessage');
expect(errorMessage.innerHTML).toBe('Invalid Address');
});
it('should be invalid, touched & dirty and the error msg should display', async () => {
await page.click('input');
await page.waitForChanges();
// tslint:disable-next-line:max-line-length
expect(element.outerHTML).toBe(`<dot-checkbox name=\"testName\" label=\"testLabel\" hint=\"testHint\" options=\"valueA|1,valueB|2,valueC|3\" value=\"1\" required-message=\"testErrorMsg\" required=\"true\" class=\"dot-required hydrated dot-invalid dot-dirty dot-touched\"><div class=\"dot-field__label\"><label for=\"testName\">testLabel</label><span class=\"dot-field__required-mark\">*</span></div><input class=\"dot-field__error\" type=\"checkbox\" id=\"1\" value=\"1\"><div class=\"dot-field__label\"><label for=\"1\">valueA</label></div><input class=\"dot-field__error\" type=\"checkbox\" id=\"2\" value=\"2\"><div class=\"dot-field__label\"><label for=\"2\">valueB</label></div><input class=\"dot-field__error\" type=\"checkbox\" id=\"3\" value=\"3\"><div class=\"dot-field__label\"><label for=\"3\">valueC</label></div><span class=\"dot-field__hint\">testHint</span><span class=\"dot-field__error-meessage\">testErrorMsg</span></dot-checkbox>`);
expect(element.classList.contains('dot-invalid')).toBe(true);
expect(element.classList.contains('dot-dirty')).toBe(true);
expect(element.classList.contains('dot-touched')).toBe(true);
});
return new Promise(async resolve => {
const [ firstSelector, ...restSelectors ] = selectors;
let parentElement = await page.$(firstSelector);
for (const selector of restSelectors) {
parentElement = await page.evaluateHandle(shadowSelectorFn, parentElement, selector) as any;
}
if (parentElement) { resolve(parentElement); }
});
beforeEach(async () => {
page = await newE2EPage({
html: `
<dot-textarea
label='Address:'
name='Address'
value='Address'>
</dot-textarea>`
});
element = await page.find('dot-textarea');
input = await page.find('textarea');
});
it('should send "submit" event', async () => {
const expectedSubmit = {};
const spy = await page.spyOnEvent('onSubmit');
const saveBtn = await element.find('button[type="submit"]');
fields.forEach((field) => {
expectedSubmit[field.name] = field.value;
});
saveBtn.click();
await page.waitForChanges();
expect(spy).toHaveReceivedEventDetail(expectedSubmit);
});
it('should render with hint', async () => {
element.setProperty('hint', 'this is a hint');
await page.waitForChanges();
// tslint:disable-next-line:max-line-length
const tagsRenderExpected = `<div class=\"dot-field__label\"><label for=\"Address\">Address:</label></div><textarea id=\"Address\" name=\"Address\"></textarea><span class=\"dot-field__hint\">this is a hint</span>`;
expect(element.innerHTML).toBe(tagsRenderExpected);
});
beforeEach(async () => {
page = await newE2EPage();
await page.setContent(`
<dot-radio
name="testRadio"
label="testLabel"
hint="testHint"
options="valueA|1,valueB|2,valueC|3"
value="2"
required="true"
required-message="testErrorMsg"
>
</dot-radio>`);
element = await page.find('dot-radio');
});
beforeEach(async () => {
page = await newE2EPage();
await page.setContent(`
<dot-select
name="testName"
label="testLabel"
hint="testHint"
options="|,valueA|1,valueB|2"
value="2"
required-message="testErrorMsg"
required="true"
>
</dot-select>`);
element = await page.find('dot-select');
});
