@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/e2e/input.tests.ts

@@ -0,0 +1,143 @@
+import { Browser, By, Key } from '@progress/kendo-e2e';
+import { LOCATORS, STATES } from '../../../e2eUtils/const';
+
+let browser: Browser;
+
+beforeAll(() => {
+  browser = new Browser();
+});
+
+beforeEach(async () => {
+  await browser.navigateTo('http://localhost:8888/examples/e2e/input/input.html');
+  await browser.find(LOCATORS.APP);
+});
+
+afterEach(async () => {
+  // TODO: Enable it after errors in demos are fixed.
+  // expect(await browser.getErrorLogs()).toEqual([]);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+it('render an input', async () => {
+  const locator = By.css('.uncontrolled input.k-input');
+  expect(await browser.isVisible(locator)).toBe(true);
+});
+
+it('uncontrolled set value by input', async () => {
+  const input = await browser.find(By.css('.uncontrolled input'));
+  await browser.type(input, 'foo');
+  expect(await browser.hasValue(input, 'foo')).toBe(true);
+});
+
+it('uncontrolled set value on delete', async () => {
+  const input = await browser.find(By.css('.uncontrolled input'));
+  await browser.type(input, 'fooF');
+  await browser.sendKey(Key.BACK_SPACE);
+  expect(await browser.hasValue(input, 'foo')).toBe(true);
+});
+
+it('controlled set value by input', async () => {
+  const input = await browser.find(By.css('.controlled input'));
+  await browser.type(input, 'foo');
+  expect(await browser.hasValue(input, 'foo')).toBe(true);
+});
+
+it('controlled set value on delete', async () => {
+  const input = await browser.find(By.css('.controlled input'));
+  await browser.type(input, 'fooF');
+  await browser.sendKey(Key.BACK_SPACE);
+  expect(await browser.hasValue(input, 'foo')).toBe(true);
+});
+
+it('static set value by input', async () => {
+  const input = await browser.find(By.css('.static input'));
+  await browser.type(input, 'foo');
+  expect(await browser.hasValue(input, 'always the same')).toBe(true);
+});
+
+it('static keep value on delete', async () => {
+  const input = await browser.find(By.css('.static input'));
+  await browser.sendKey(Key.BACK_SPACE);
+  expect(await browser.hasValue(input, 'always the same')).toBe(true);
+});
+
+it('k-focus on input click', async () => {
+  const input = await browser.find(By.css('.input .input-basic input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  const container = await browser.find(By.css('.input .input-basic .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+});
+
+it('k-focus on input with defaultValue', async () => {
+  const input = await browser.find(By.css('.input .input-default-value input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  const container = await browser.find(By.css('.input .input-default-value .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+});
+
+it('no k-focus after input blur', async () => {
+  const input = await browser.find(By.css('.input .input-basic input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  await browser.click(By.css('body'));
+
+  const container = await browser.find(By.css('.input .input-basic .k-floating-label-container'));
+  expect(await container.getAttribute('class')).not.toContain(STATES.FOCUSED);
+});
+
+it('no k-focus after input with defaultValue blur', async () => {
+  const input = await browser.find(By.css('.input .input-default-value input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  await browser.click(By.css('body'));
+
+  const container = await browser.find(By.css('.input .input-default-value .k-floating-label-container'));
+  expect(await container.getAttribute('class')).not.toContain(STATES.FOCUSED);
+});
+
+it('k-empty on input by default', async () => {
+  const element = await browser.find(By.css('.input .input-basic .k-floating-label-container'));
+  expect(await element.getAttribute('class')).toContain('k-empty');
+});
+
+it('no k-empty on input with defaultValue', async () => {
+  const element = await browser.find(By.css('.input .input-default-value .k-floating-label-container'));
+  expect(await element.getAttribute('class')).not.toContain('k-empty');
+});
+
+it('k-empty after input and delete on input', async () => {
+  const input = await browser.find(By.css('.input .input-basic input'));
+  await browser.type(input, '2');
+
+  const element = await browser.find(By.css('.input .input-basic .k-floating-label-container'));
+  expect(await element.getAttribute('class')).not.toContain('k-empty');
+
+  await browser.sendKey(Key.BACK_SPACE);
+  expect(await element.getAttribute('class')).toContain('k-empty');
+});
+
+it('k-empty after deletion on input with defaultValue', async () => {
+  await browser.click(By.css('.input .input-default-value input'));
+  await browser.sendKey(Key.BACK_SPACE);
+  await browser.sendKey(Key.BACK_SPACE);
+  const element = await browser.find(By.css('.input .input-default-value .k-floating-label-container'));
+  expect(await element.getAttribute('class')).toContain('k-empty');
+});
+
+it('k-invalid after input on input with pattern and no k-state invalid after valid pattern', async () => {
+  await browser.click(By.css('.input .input-default-value input'));
+  const element = await browser.find(By.css('.input .input-default-value .k-floating-label-container label'));
+  expect(await element.getAttribute('class')).toContain('k-text-error');
+
+  await browser.sendKey('345');
+  expect(await element.getAttribute('class')).not.toContain('k-text-error');
+});

package/e2e/numeric.tests.ts

@@ -0,0 +1,134 @@
+import { Browser, By, Key } from '@progress/kendo-e2e';
+import { LOCATORS, STATES } from '../../../e2eUtils/const';
+
+let browser: Browser;
+
+beforeAll(() => {
+  browser = new Browser();
+});
+
+beforeEach(async () => {
+  // TODO: Investigate why this demo do not work on Windows OS!
+  await browser.navigateTo('http://localhost:8888/examples/e2e/numerictextbox/numericLabel.html');
+  await browser.find(LOCATORS.APP);
+});
+
+afterEach(async () => {
+  // TODO: Enable it after errors in demos are fixed.
+  // expect(await browser.getErrorLogs()).toEqual([]);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+it('k-focus on numeric click', async () => {
+  const input = await browser.find(By.css('.numeric .numeric-basic input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  const container = await browser.find(By.css('.numeric .numeric-basic .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+});
+
+it('k-focus on numeric with placeholder click', async () => {
+  const input = await browser.find(By.css('.numeric .numeric-placeholder input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  const container = await browser.find(By.css('.numeric .numeric-placeholder .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+});
+
+it('k-focus on numeric with defaultValue click', async () => {
+  const input = await browser.find(By.css('.numeric .numeric-default-value input'));
+  await input.click();
+  expect(await browser.hasFocus(input)).toBe(true);
+
+  const container = await browser.find(By.css('.numeric .numeric-default-value .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+});
+
+it('no k-focus after numeric basic blur', async () => {
+  await browser.click(By.css('.numeric .numeric-basic input'));
+  const container = await browser.find(By.css('.numeric .numeric-basic .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+
+  await browser.click(By.css('.input-basic'));
+  expect(await container.getAttribute('class')).not.toContain(STATES.FOCUSED);
+});
+
+it('no k-focus after input with placeholder blur', async () => {
+  await browser.click(By.css('.numeric .numeric-placeholder input'));
+  const container = await browser.find(By.css('.numeric .numeric-placeholder .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+
+  await browser.click(By.css('body'));
+  expect(await container.getAttribute('class')).not.toContain(STATES.FOCUSED);
+});
+
+it('no k-focus after input with defaultValue blur', async () => {
+  await browser.click(By.css('.numeric .numeric-default-value input'));
+  const container = await browser.find(By.css('.numeric .numeric-default-value .k-floating-label-container'));
+  expect(await container.getAttribute('class')).toContain(STATES.FOCUSED);
+
+  await browser.click(By.css('.input-basic'));
+  expect(await container.getAttribute('class')).not.toContain(STATES.FOCUSED);
+});
+
+it('k-empty on numeric by default', async () => {
+  const locator = By.css('.numeric .numeric-basic .k-floating-label-container');
+  const container = await browser.find(locator);
+  expect(await container.getAttribute('class')).toContain('k-empty');
+});
+
+it('no k-empty on numeric with placeholder', async () => {
+  const locator = By.css('.numeric .numeric-placeholder .k-floating-label-container');
+  const container = await browser.find(locator);
+  expect(await container.getAttribute('class')).not.toContain('k-empty');
+});
+
+it('no k-empty on numeric with defaultValue', async () => {
+  const locator = By.css('.numeric .numeric-default-value .k-floating-label-container');
+  const container = await browser.find(locator);
+  expect(await container.getAttribute('class')).not.toContain('k-empty');
+});
+
+it('k-empty after numeric and delete on input', async () => {
+  const input = await browser.find(By.css('.numeric .numeric-basic input'));
+  await browser.type(input, '2');
+
+  const element = await browser.find(By.css('.numeric .numeric-basic .k-floating-label-container'));
+  expect(await element.getAttribute('class')).not.toContain('k-empty');
+
+  await browser.sendKey(Key.BACK_SPACE);
+  expect(await element.getAttribute('class')).toContain('k-empty');
+});
+
+it('k-empty after deletion on numeric with defaultValue', async () => {
+  await browser.click(By.css('.numeric .numeric-default-value input'));
+
+  if (process.platform === "darwin") {
+    await browser.sendKeyCombination(Key.COMMAND, 'a');
+  } else {
+    await browser.sendKeyCombination(Key.CONTROL, 'a');
+  }
+
+  await browser.sendKey(Key.DELETE);
+
+  const element = await browser.find(By.css('.numeric .numeric-default-value .k-floating-label-container'));
+  expect(await element.getAttribute('class')).toContain('k-empty');
+});
+
+it('no k-empty after scroll click', async () => {
+  await browser.click(By.css('.numeric .numeric-basic .k-spinner-increase'));
+  const element = await browser.find(By.css('.numeric .numeric-basic .k-floating-label-container'));
+  expect(await element.getAttribute('class')).not.toContain('k-empty');
+});
+
+it('no k-empty after scroll click and blur', async () => {
+  await browser.click(By.css('.numeric .numeric-basic .k-spinner-increase'));
+  await browser.click(By.css('.input-basic'));
+  const element = await browser.find(By.css('.numeric .numeric-basic .k-floating-label-container'));
+  expect(await element.getAttribute('class')).not.toContain('k-empty');
+});

package/e2e/switch.tests.ts

@@ -0,0 +1,122 @@
+import { Browser, By, Key, WebElement } from '@progress/kendo-e2e';
+import { DELAYS, LOCATORS } from '../../../e2eUtils/const';
+import { tryClick } from '../../../e2eUtils/utils';
+let browser: Browser;
+
+beforeAll(() => {
+  browser = new Browser();
+});
+
+beforeEach(async () => {
+  await browser.navigateTo('http://localhost:8888/examples/e2e/switch/switch.html');
+  await browser.find(LOCATORS.APP);
+});
+
+afterEach(async () => {
+  // TODO: Enable it after errors in demos are fixed.
+  // expect(await browser.getErrorLogs()).toEqual([]);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+it('uncontrolled should toggle on click', async () => {
+  const element = await getSwitch('Basic');
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+
+  await element.click();
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await element.click();
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+});
+
+it('uncontrolled should toggle on SPACE and ENTER', async () => {
+  const element = await getSwitch('Basic');
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+
+  await element.click();
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await browser.sendKey(Key.SPACE);
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+
+  await browser.sendKey(Key.ENTER);
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+});
+
+it('disabled should not click', async () => {
+  const element = await getSwitch('Disabled');
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+  expect(await element.getAttribute('class')).toContain('k-disabled');
+  await tryClick(element);
+});
+
+it('default checked should have classes by default', async () => {
+  const element = await getSwitch('Default Checked');
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+  expect(await element.getAttribute('dir')).toContain('ltr');
+});
+
+it('rtl off label before handle', async () => {
+  const element = await getSwitch('RTL');
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+  expect(await element.getAttribute('dir')).toContain('rtl');
+
+  const onLocation = await (await element.findElement(By.css('.k-switch-label-on'))).getRect();
+  const offLocation = await (await element.findElement(By.css('.k-switch-label-off'))).getRect();
+  expect(offLocation.x).toBeLessThan(onLocation.x);
+});
+
+it('parent rtl off label before handle', async () => {
+  const element = await getSwitch('Parent RTL');
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+  expect(await element.getAttribute('dir')).toContain('rtl');
+
+  const onLocation = await (await element.findElement(By.css('.k-switch-label-on'))).getRect();
+  const offLocation = await (await element.findElement(By.css('.k-switch-label-off'))).getRect();
+  expect(offLocation.x).toBeLessThan(onLocation.x);
+});
+
+it('controlled should not toggle if clicked', async () => {
+  const element = await browser.find(By.css('.controlled .k-switch'));
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await element.click();
+  await browser.sleep(DELAYS.DEFAULT);
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+});
+
+it('controlled should toggle if value is changed through props', async () => {
+  const element = await browser.find(By.css('.controlled .k-switch'));
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await browser.click(By.css('.controlled-button'));
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+
+  await element.click();
+  await browser.sleep(DELAYS.DEFAULT);
+  expect(await element.getAttribute('class')).toContain('k-switch-off');
+});
+
+it('controlled should not toggle with keyboard', async () => {
+  const element = await browser.find(By.css('.controlled .k-switch'));
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await element.click();
+  await browser.sleep(DELAYS.DEFAULT);
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await browser.sendKey(Key.SPACE);
+  await browser.sleep(DELAYS.DEFAULT);
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+
+  await browser.sendKey(Key.ENTER);
+  await browser.sleep(DELAYS.DEFAULT);
+  expect(await element.getAttribute('class')).toContain('k-switch-on');
+});
+
+async function getSwitch(label: string): Promise<WebElement> {
+  return await browser.find(By.xpath(`//p[text()="${label}"]/following-sibling::span[contains(@class,"k-switch")]`));
+}

package/examples/checkbox/checkbox.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+    <div id="app"></div>
+    <script src="checkbox.js"></script>
+</body>
+</html>