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

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

@@ -0,0 +1,80 @@
+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)');
+  });
+});

package/dist/esm/src/components/layout/page-title/__tests__/pageTitleStyle.test.js

@@ -0,0 +1,91 @@
+import path from 'node:path';
+import { compile as compileSass } from 'sass';
+import { describe, expect, it } from 'vitest';
+// 배경·그림자·패딩은 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 variant 별 규칙을 검사한다.
+// (input-base/__tests__/inputAutofill.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
+const PAGE_TITLE_SCSS_PATH = path.resolve(__dirname, '../../../../../assets/styles/components/page-title/_index.scss');
+const compiledPageTitleCss = compileSass(PAGE_TITLE_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(compiledPageTitleCss);
+const declarationsOf = selector => rules.get(selector) ?? [];
+const propertiesOf = selector => declarationsOf(selector).map(declaration => declaration.split(':')[0].trim());
+const ROOT = '.ncua-page-title';
+const FIXED = '.ncua-page-title--fixed';
+const PAGE_HEADER = '.ncua-page-title__page-header';
+const FIXED_PAGE_HEADER = '.ncua-page-title--fixed .ncua-page-title__page-header';
+describe('PageTitle 스타일 — Default (·Detail)', () => {
+  it('.ncua-page-title 에 background·box-shadow 가 없다 (투명, 그림자 없음)', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: 루트 규칙의 속성을 모으면
+    const properties = propertiesOf(ROOT);
+    // Then: 루트 규칙은 존재하지만 배경·그림자를 지정하지 않는다
+    expect(properties.length).toBeGreaterThan(0);
+    expect(properties).not.toContain('background');
+    expect(properties).not.toContain('background-color');
+    expect(properties).not.toContain('box-shadow');
+  });
+  it('.ncua-page-title__page-header 패딩은 32px 40px 0 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: page-header 규칙을 찾으면
+    const declarations = declarationsOf(PAGE_HEADER);
+    // Then: 위 32px · 좌우 40px · 아래 0 이다
+    expect(declarations).toContain('padding: 32px 40px 0');
+    expect(declarations).not.toContain('padding: 24px 40px');
+  });
+});
+describe('PageTitle 스타일 — Fixed (·Fixed Detail)', () => {
+  it('.ncua-page-title--fixed 배경은 --gray-50 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: sticky 로 콘텐츠 위에 겹치므로 배경 Gray/50 을 가진다
+    expect(declarations).toContain('background: var(--gray-50)');
+  });
+  it('.ncua-page-title--fixed 하단 border 는 1px solid --gray-100 이다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 Gray/300 이 아니라 Gray/100 border 를 쓴다
+    expect(declarations).toContain('border-bottom: 1px solid var(--gray-100)');
+    expect(declarations).not.toContain('border-bottom: 1px solid var(--gray-300)');
+  });
+  it('.ncua-page-title--fixed 에 box-shadow 가 없다', () => {
+    // Given/When: fixed modifier 규칙의 속성을 모으면
+    // Then: 그림자를 지정하지 않는다
+    expect(propertiesOf(FIXED)).not.toContain('box-shadow');
+  });
+  it('Fixed 의 page-header 패딩은 12px 40px 로 유지된다', () => {
+    // Given/When: fixed 하위 page-header 규칙을 찾으면
+    // Then: 기존 Fixed 패딩이 그대로다 (범위 밖)
+    expect(declarationsOf(FIXED_PAGE_HEADER)).toContain('padding: 12px 40px');
+  });
+  it('Fixed sticky 동작(position·top·z-index)은 유지된다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 sticky 선언이 그대로다
+    expect(declarations).toContain('position: sticky');
+    expect(declarations).toContain('top: 0');
+    expect(declarations).toContain('z-index: 999');
+  });
+});
+describe('PageTitle 스타일 — 토큰 사용', () => {
+  it('배경·border 색상에 하드코딩 값 없이 CSS 변수만 쓴다 (ADR-4)', () => {
+    // Given/When: 루트·fixed 규칙의 배경·border 선언을 모으면
+    const colorDeclarations = [...declarationsOf(ROOT), ...declarationsOf(FIXED)].filter(declaration => /^(background|border-bottom)/.test(declaration));
+    // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
+    expect(colorDeclarations.length).toBeGreaterThan(0);
+    for (const declaration of colorDeclarations) {
+      expect(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
+      expect(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
+    }
+  });
+});