Skip to content

Commit de2afa8

Browse files
aleksei-semikozovaleksei-semikozov
committed
Appointment form customization with dynamic item handling
1 parent 8aaebc0 commit de2afa8

File tree

4 files changed

+759
-27
lines changed

4 files changed

+759
-27
lines changed

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

0 commit comments

Comments
 (0)