test: add calendar test case; add element persist support in test

packages/components/__test__/components/Calendar.test.tsx

@@ -0,0 +1,63 @@
+import { nextTick } from 'vue';
+
+describe('Calendar', () => {
+  it('render dates correctly', async () => {
+    const ce = l('l-calendar', {
+        value: '2024-07-05',
+      }),
+      root = ce.shadowRoot!;
+
+    await nextTick();
+
+    let body = root.querySelector('.l-calendar__body')!;
+    expect(body.children.length).toBe(42);
+    let first = body.children[0];
+    expect(first.textContent).toBe('30'); // 2024-06-30
+    expect(first.classList.contains('is-preview')).toBe(true); // date in last month is in preview
+    for (let i = 1; i < 42; i++) {
+      const el = body.children[i];
+      const isNextMonth = i > 31;
+      expect(el.textContent).toBe(String(isNextMonth ? i - 31 : i));
+      expect(el.classList.contains('is-preview')).toBe(isNextMonth);
+      expect(el.classList.contains('is-inView')).toBe(!isNextMonth);
+      if (i === 5) {
+        expect(el.classList.contains('is-selected')).toBe(true); // 2024-07-05
+        expect(el.classList.contains('is-singleSelected')).toBe(true);
+      }
+    }
+
+    ce.removePreviewRow = true;
+    await nextTick();
+    body = root.querySelector('.l-calendar__body')!;
+    // if removePreviewRow, preview dates that are in a row are removed, others are still rendered
+    expect(body.children.length).toBe(35);
+    first = body.children[0];
+    expect(first.textContent).toBe('30'); // 2024-06-30
+    expect(first.classList.contains('is-preview')).toBe(true);
+    for (let i = 1; i < 35; i++) {
+      const el = body.children[i];
+      const isNextMonth = i > 31;
+      expect(el.textContent).toBe(String(isNextMonth ? i - 31 : i));
+      expect(el.classList.contains('is-preview')).toBe(isNextMonth);
+      expect(el.classList.contains('is-inView')).toBe(!isNextMonth);
+    }
+
+    ce.removePreviewRow = false;
+    ce.hidePreviewDates = true;
+    await nextTick();
+    body = root.querySelector('.l-calendar__body')!;
+    // if hidePreviewDates, preview dates that are in a row are removed, others are rendered with empty content
+    expect(body.children.length).toBe(35);
+    first = body.children[0];
+    expect(first.textContent).toBe(''); // 2024-06-30
+    expect(first.classList.contains('is-preview')).toBe(true);
+    for (let i = 1; i < 35; i++) {
+      const el = body.children[i];
+      const isNextMonth = i > 31;
+      if (isNextMonth) expect(el.textContent).toBe('');
+      else expect(el.textContent).toBe(String(i));
+      expect(el.classList.contains('is-preview')).toBe(isNextMonth);
+      expect(el.classList.contains('is-inView')).toBe(!isNextMonth);
+    }
+  });
+});

utils/testSetup.ts

@@ -4,7 +4,8 @@ import { importAllThemes } from '../packages/theme/index';
 import '../packages/core/src/presets/date.dayjs';
 import { afterEach } from 'vitest';
 
-const testAttr = 'data-test';
+const testAttr = 'data-test',
+  persistAttr = 'data-persist';
 
 const l = (name: any, props: any, options: any) => {
   const el = createElement(
@@ -25,7 +26,15 @@ globalThis.l = l;
 importAllThemes();
 defineAllComponents();
 
+const persistCount = new WeakMap<Element, number>();
+
 afterEach(() => {
   const testEls = document.querySelectorAll(`[${testAttr}]`);
-  testEls.forEach((el) => el.remove());
+  testEls.forEach((el) => {
+    if (el.getAttribute(persistAttr) != null) {
+      const count = persistCount.get(el) || 0;
+      if (!count) return persistCount.set(el, count + 1);
+    }
+    el.remove();
+  });
 });