@ncds/ui-admin 1.8.26-alpha.1 → 1.8.26-alpha.2

package/dist/temp/src/components/forms-and-input/input-base/__tests__/inputAutofill.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/forms-and-input/input-base/__tests__/inputAutofill.test.js

@@ -0,0 +1,88 @@
+import path from 'node:path';
+import { compile as compileSass } from 'sass';
+import { describe, expect, it } from 'vitest';
+// :-webkit-autofill 은 jsdom 에서 재현할 수 없으므로, 컴파일된 CSS 에서 상태별 규칙을 검사한다.
+// (assets/scripts/dropdown/__tests__/dropdownPortal.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
+const INPUT_SCSS_PATH = path.resolve(__dirname, '../../../../../assets/styles/components/input-base/_index.scss');
+const compiledInputCss = compileSass(INPUT_SCSS_PATH).css;
+/** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
+const parseRules = (css) => {
+    const rules = new Map();
+    for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+        const declarations = body
+            .split(';')
+            .map((declaration) => declaration.trim().replace(/\s+/g, ' '))
+            .filter(Boolean);
+        for (const selector of selectorList.split(',').map((selector) => selector.trim().replace(/\s+/g, ' '))) {
+            rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
+        }
+    }
+    return rules;
+};
+const rules = parseRules(compiledInputCss);
+const declarationsOf = (selector) => rules.get(selector) ?? [];
+const AUTOFILL_PSEUDOS = [
+    ':-webkit-autofill',
+    ':-webkit-autofill:hover',
+    ':-webkit-autofill:focus',
+    ':-webkit-autofill:active',
+];
+const ALLOWED_AUTOFILL_PROPERTIES = ['-webkit-box-shadow', '-webkit-text-fill-color', 'caret-color'];
+describe('Input autofill 스타일 — 기본 상태', () => {
+    it.each(AUTOFILL_PSEUDOS)('.ncua-input input%s 는 배경 --base-white, 글자·caret --gray-700 이다', (pseudo) => {
+        // Given: 컴파일된 Input CSS 에서
+        // When: 기본 상태 autofill 규칙을 찾으면
+        const declarations = declarationsOf(`.ncua-input input${pseudo}`);
+        // Then: 배경은 흰색 inset box-shadow, 글자·caret 은 기본 글자색이다
+        expect(declarations).toContain('-webkit-box-shadow: 0 0 0 30px var(--base-white) inset !important');
+        expect(declarations).toContain('-webkit-text-fill-color: var(--gray-700)');
+        expect(declarations).toContain('caret-color: var(--gray-700)');
+    });
+});
+describe('Input autofill 스타일 — disabled 상태', () => {
+    it.each(AUTOFILL_PSEUDOS)('.ncua-input.is-disabled input%s 는 배경 --gray-50, 글자·caret --gray-300 이다', (pseudo) => {
+        // Given: 컴파일된 Input CSS 에서
+        // When: disabled 상태 autofill 규칙을 찾으면
+        const declarations = declarationsOf(`.ncua-input.is-disabled input${pseudo}`);
+        // Then: 배경·글자색이 기존 disabled 스타일과 같다
+        expect(declarations).toContain('-webkit-box-shadow: 0 0 0 30px var(--gray-50) inset !important');
+        expect(declarations).toContain('-webkit-text-fill-color: var(--gray-300)');
+        expect(declarations).toContain('caret-color: var(--gray-300)');
+    });
+});
+describe('Input autofill 스타일 — 규칙 범위 제한', () => {
+    const autofillSelectors = () => [...rules.keys()].filter((selector) => selector.includes(':-webkit-autofill'));
+    it('autofill 규칙은 box-shadow·text-fill-color·caret-color 외 속성을 지정하지 않는다', () => {
+        // Given: 모든 autofill 선택자가 존재하는 상태에서 (기본 4 + disabled 4)
+        const selectors = autofillSelectors();
+        expect(selectors).toHaveLength(AUTOFILL_PSEUDOS.length * 2);
+        // When/Then: 각 규칙의 속성은 허용 목록 안에 있다 (값·이벤트에 영향 주는 속성 금지)
+        for (const selector of selectors) {
+            const properties = declarationsOf(selector).map((declaration) => declaration.split(':')[0].trim());
+            expect(properties.every((property) => ALLOWED_AUTOFILL_PROPERTIES.includes(property))).toBe(true);
+        }
+    });
+    it('autofill 규칙에 하드코딩 색상이 없고 CSS 변수만 쓴다', () => {
+        // Given/When: autofill 규칙의 선언을 모으면
+        const declarations = autofillSelectors().flatMap(declarationsOf);
+        // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
+        expect(declarations.length).toBeGreaterThan(0);
+        for (const declaration of declarations) {
+            expect(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
+            expect(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
+        }
+    });
+    it('textarea 에는 autofill 규칙을 적용하지 않는다 (ADR-4)', () => {
+        // Given/When: autofill 선택자를 모으면
+        // Then: textarea 대상 선택자가 없다 (textarea 자체 box-shadow 를 덮어쓰지 않도록)
+        expect(autofillSelectors().some((selector) => selector.includes('textarea'))).toBe(false);
+    });
+});
+describe('Input 기존 상태 스타일 회귀', () => {
+    it('기본 input 글자색은 --gray-700 이다', () => {
+        expect(declarationsOf('.ncua-input input')).toContain('color: var(--gray-700)');
+    });
+    it('disabled input 글자색은 --gray-300 이다', () => {
+        expect(declarationsOf('.ncua-input.is-disabled input')).toContain('color: var(--gray-300)');
+    });
+});