Skip to content

Commit 78baf11

Browse files
aleksei-semikozovaleksei-semikozov
authored
Scheduler: Form customization (DevExpress#31399)
1 parent fafff24 commit 78baf11

4 files changed

Lines changed: 765 additions & 27 deletions

File tree

‎packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts‎

Lines changed: 336 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
} from '@jest/globals';
44
import $ from '@js/core/renderer';
55
import type dxDateBox from '@js/ui/date_box';
6+
import type { GroupItem, Item as FormItem } from '@js/ui/form';
67
import { toMilliseconds } from '@ts/utils/toMilliseconds';
78

89
import fx from '../../../common/core/animation/fx';
@@ -1456,3 +1457,338 @@ describe('Timezone Editors', () => {
14561457
it.todo('timeZone editor should have correct display value for timezones with different offsets');
14571458
it.todo('dataSource of timezoneEditor should be filtered');
14581459
});
1460+
1461+
describe('Customize form items', () => {
1462+
beforeEach(() => {
1463+
fx.off = true;
1464+
setupSchedulerTestEnvironment();
1465+
});
1466+
1467+
afterEach(() => {
1468+
fx.off = false;
1469+
document.body.innerHTML = '';
1470+
jest.useRealTimers();
1471+
});
1472+
1473+
describe('Basic form customization', () => {
1474+
it('should use default form when editing.items is not set', async () => {
1475+
const { scheduler, POM } = await createScheduler({
1476+
...getDefaultConfig(),
1477+
editing: {
1478+
allowAdding: true,
1479+
allowUpdating: true,
1480+
},
1481+
});
1482+
1483+
scheduler.showAppointmentPopup(commonAppointment);
1484+
1485+
const { form } = POM.popup;
1486+
const formItems = form.option('items') as FormItem[];
1487+
1488+
expect(formItems).toBeDefined();
1489+
expect(formItems?.length).toBeGreaterThan(0);
1490+
});
1491+
1492+
it('should show empty form when editing.items is empty array', async () => {
1493+
const { scheduler, POM } = await createScheduler({
1494+
...getDefaultConfig(),
1495+
editing: {
1496+
allowAdding: true,
1497+
allowUpdating: true,
1498+
form: {
1499+
items: [],
1500+
},
1501+
},
1502+
});
1503+
1504+
scheduler.showAppointmentPopup(commonAppointment);
1505+
1506+
const { form } = POM.popup;
1507+
const formItems = form.option('items') as FormItem[];
1508+
1509+
expect(formItems?.length ?? 0).toBe(0);
1510+
});
1511+
1512+
it('should show mainGroup when specified in string array', async () => {
1513+
const { scheduler, POM } = await createScheduler({
1514+
...getDefaultConfig(),
1515+
editing: {
1516+
allowAdding: true,
1517+
allowUpdating: true,
1518+
form: {
1519+
items: ['mainGroup'],
1520+
},
1521+
},
1522+
});
1523+
1524+
scheduler.showAppointmentPopup(commonAppointment);
1525+
1526+
const { form } = POM.popup;
1527+
const formItems = form.option('items') as FormItem[];
1528+
1529+
expect(formItems?.length).toBe(1);
1530+
expect(formItems?.[0]?.name).toBe('mainGroup');
1531+
});
1532+
1533+
it('should hide group when visible is false', async () => {
1534+
const { scheduler, POM } = await createScheduler({
1535+
...getDefaultConfig(),
1536+
editing: {
1537+
allowAdding: true,
1538+
allowUpdating: true,
1539+
form: {
1540+
items: [{ name: 'mainGroup', visible: false }],
1541+
},
1542+
},
1543+
});
1544+
1545+
scheduler.showAppointmentPopup(commonAppointment);
1546+
1547+
const { form } = POM.popup;
1548+
const formItems = form.option('items') as FormItem[];
1549+
1550+
expect(formItems?.length).toBe(1);
1551+
expect(formItems?.[0]?.visible).toBe(false);
1552+
});
1553+
1554+
it('should show group when visible is true', async () => {
1555+
const { scheduler, POM } = await createScheduler({
1556+
...getDefaultConfig(),
1557+
editing: {
1558+
allowAdding: true,
1559+
allowUpdating: true,
1560+
form: {
1561+
items: [{ name: 'mainGroup', visible: true }],
1562+
},
1563+
},
1564+
});
1565+
1566+
scheduler.showAppointmentPopup(commonAppointment);
1567+
1568+
const { form } = POM.popup;
1569+
const formItems = form.option('items') as FormItem[];
1570+
1571+
expect(formItems?.length).toBe(1);
1572+
expect(formItems?.[0]?.visible).toBe(true);
1573+
});
1574+
1575+
it('should filter children when items array is specified', async () => {
1576+
const { scheduler, POM } = await createScheduler({
1577+
...getDefaultConfig(),
1578+
editing: {
1579+
allowAdding: true,
1580+
allowUpdating: true,
1581+
form: {
1582+
items: [{
1583+
name: 'mainGroup',
1584+
visible: true,
1585+
items: ['subjectGroup'],
1586+
}],
1587+
},
1588+
},
1589+
});
1590+
1591+
scheduler.showAppointmentPopup(commonAppointment);
1592+
1593+
const { form } = POM.popup;
1594+
const formItems = form.option('items') as FormItem[];
1595+
const mainGroup = formItems?.[0] as GroupItem;
1596+
1597+
expect(formItems?.length).toBe(1);
1598+
expect(mainGroup?.items?.length).toBe(1);
1599+
expect(mainGroup?.items?.[0]?.name).toBe('subjectGroup');
1600+
});
1601+
1602+
it('should handle non-existent groups gracefully', async () => {
1603+
const { scheduler, POM } = await createScheduler({
1604+
...getDefaultConfig(),
1605+
editing: {
1606+
allowAdding: true,
1607+
allowUpdating: true,
1608+
form: {
1609+
items: ['nonExistentGroup'],
1610+
},
1611+
},
1612+
});
1613+
1614+
scheduler.showAppointmentPopup(commonAppointment);
1615+
1616+
const { form } = POM.popup;
1617+
const formItems = form.option('items') as FormItem[];
1618+
1619+
expect(formItems?.length ?? 0).toBe(1);
1620+
});
1621+
});
1622+
1623+
describe('Form customization with editing.items', () => {
1624+
it('should handle empty items array', async () => {
1625+
const { scheduler, POM } = await createScheduler({
1626+
...getDefaultConfig(),
1627+
editing: {
1628+
allowAdding: true,
1629+
allowUpdating: true,
1630+
form: {
1631+
items: [],
1632+
},
1633+
},
1634+
});
1635+
1636+
scheduler.showAppointmentPopup(commonAppointment);
1637+
1638+
const { form } = POM.popup;
1639+
const formItems = form.option('items') as FormItem[];
1640+
expect(formItems?.length).toBe(0);
1641+
});
1642+
1643+
it('should handle string array configuration', async () => {
1644+
const { scheduler, POM } = await createScheduler({
1645+
...getDefaultConfig(),
1646+
editing: {
1647+
allowAdding: true,
1648+
allowUpdating: true,
1649+
form: {
1650+
items: ['mainGroup'],
1651+
},
1652+
},
1653+
});
1654+
1655+
scheduler.showAppointmentPopup(commonAppointment);
1656+
1657+
const { form } = POM.popup;
1658+
const formItems = form.option('items') as FormItem[];
1659+
expect(formItems?.length).toBe(1);
1660+
expect((formItems?.[0] as GroupItem)?.name).toBe('mainGroup');
1661+
});
1662+
1663+
it('should handle object configuration with visible false', async () => {
1664+
const { scheduler, POM } = await createScheduler({
1665+
...getDefaultConfig(),
1666+
editing: {
1667+
allowAdding: true,
1668+
allowUpdating: true,
1669+
form: {
1670+
items: [{ name: 'mainGroup', visible: false }],
1671+
},
1672+
},
1673+
});
1674+
1675+
scheduler.showAppointmentPopup(commonAppointment);
1676+
1677+
const { form } = POM.popup;
1678+
const formItems = form.option('items') as FormItem[];
1679+
expect(formItems?.length).toBe(1);
1680+
expect(formItems?.[0]?.visible).toBe(false);
1681+
});
1682+
1683+
it('should handle object configuration with custom items', async () => {
1684+
const { scheduler, POM } = await createScheduler({
1685+
...getDefaultConfig(),
1686+
editing: {
1687+
allowAdding: true,
1688+
allowUpdating: true,
1689+
form: {
1690+
items: [{
1691+
name: 'mainGroup',
1692+
items: ['subjectGroup', 'dateGroup'],
1693+
}],
1694+
},
1695+
},
1696+
});
1697+
1698+
scheduler.showAppointmentPopup(commonAppointment);
1699+
1700+
const { form } = POM.popup;
1701+
const formItems = form.option('items') as FormItem[];
1702+
const mainGroup = formItems?.[0] as GroupItem;
1703+
expect(mainGroup?.items?.length).toBe(2);
1704+
expect((mainGroup?.items?.[0] as GroupItem)?.name).toBe('subjectGroup');
1705+
expect((mainGroup?.items?.[1] as GroupItem)?.name).toBe('dateGroup');
1706+
});
1707+
1708+
it('should handle non-existent group names', async () => {
1709+
const { scheduler, POM } = await createScheduler({
1710+
...getDefaultConfig(),
1711+
editing: {
1712+
allowAdding: true,
1713+
allowUpdating: true,
1714+
form: {
1715+
items: ['nonExistentGroup'],
1716+
},
1717+
},
1718+
});
1719+
1720+
scheduler.showAppointmentPopup(commonAppointment);
1721+
1722+
const { form } = POM.popup;
1723+
const formItems = form.option('items') as FormItem[];
1724+
expect(formItems?.length).toBe(1);
1725+
});
1726+
1727+
it('should handle undefined items', async () => {
1728+
const { scheduler, POM } = await createScheduler({
1729+
...getDefaultConfig(),
1730+
editing: {
1731+
allowAdding: true,
1732+
allowUpdating: true,
1733+
form: {
1734+
items: undefined,
1735+
},
1736+
},
1737+
});
1738+
1739+
scheduler.showAppointmentPopup(commonAppointment);
1740+
1741+
const { form } = POM.popup;
1742+
const formItems = form.option('items') as FormItem[];
1743+
expect(formItems?.length).toBeGreaterThan(0);
1744+
});
1745+
1746+
it('should handle mixed configurations', async () => {
1747+
const { scheduler, POM } = await createScheduler({
1748+
...getDefaultConfig(),
1749+
editing: {
1750+
allowAdding: true,
1751+
allowUpdating: true,
1752+
form: {
1753+
items: [
1754+
'mainGroup',
1755+
{ name: 'mainGroup', visible: false },
1756+
],
1757+
},
1758+
},
1759+
});
1760+
1761+
scheduler.showAppointmentPopup(commonAppointment);
1762+
1763+
const { form } = POM.popup;
1764+
const formItems = form.option('items') as FormItem[];
1765+
expect(formItems?.length).toBe(2);
1766+
expect((formItems?.[0] as any)?.name).toBe('mainGroup');
1767+
expect((formItems?.[1] as any)?.name).toBe('mainGroup');
1768+
expect(formItems?.[1]?.visible).toBe(false);
1769+
});
1770+
1771+
it('should handle empty items array in object config', async () => {
1772+
const { scheduler, POM } = await createScheduler({
1773+
...getDefaultConfig(),
1774+
editing: {
1775+
allowAdding: true,
1776+
allowUpdating: true,
1777+
form: {
1778+
items: [{
1779+
name: 'mainGroup',
1780+
items: [],
1781+
}],
1782+
},
1783+
},
1784+
});
1785+
1786+
scheduler.showAppointmentPopup(commonAppointment);
1787+
1788+
const { form } = POM.popup;
1789+
const formItems = form.option('items') as FormItem[];
1790+
const mainGroup = formItems?.[0] as any;
1791+
expect(mainGroup?.items?.length).toBe(0);
1792+
});
1793+
});
1794+
});

0 commit comments

Comments
 (0)