{
onAddTableSubmit={onSubmit}
/>,
)
- fireEvent.change(screen.getByLabelText('테이블 이름'), { target: { value: 'users' } })
+ fireEvent.change(screen.getByLabelText(/테이블 이름/), { target: { value: 'users' } })
fireEvent.submit(screen.getByRole('dialog'))
expect(setNewTableName).toHaveBeenCalledWith('users')
expect(onSubmit).not.toHaveBeenCalled()
@@ -113,7 +113,7 @@ describe('modal behavior coverage', () => {
/>,
)
expect(screen.getByText(/From: a/)).toBeInTheDocument()
- fireEvent.change(screen.getByLabelText('제약조건 이름 (Label)'), {
+ fireEvent.change(screen.getByLabelText(/제약조건 이름 \(Label\)/), {
target: { value: 'fk_changed' },
})
vi.spyOn(window, 'confirm').mockReturnValueOnce(true)
@@ -261,7 +261,7 @@ describe('modal behavior coverage', () => {
onAssignBusinessGroup={onAssign}
/>,
)
- fireEvent.change(screen.getByLabelText('그룹 이름'), { target: { value: 'New' } })
+ fireEvent.change(screen.getByLabelText(/그룹 이름/), { target: { value: 'New' } })
fireEvent.click(screen.getAllByRole('button', { name: /^색상 / })[1]!)
fireEvent.click(screen.getByRole('button', { name: '추가' }))
vi.spyOn(window, 'confirm').mockReturnValueOnce(true)
diff --git a/frontend/src/components/modals/RequiredFieldValidation.test.tsx b/frontend/src/components/modals/RequiredFieldValidation.test.tsx
new file mode 100644
index 000000000..558b5a31f
--- /dev/null
+++ b/frontend/src/components/modals/RequiredFieldValidation.test.tsx
@@ -0,0 +1,166 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi, afterEach } from 'vitest';
+
+import { AddTableModal } from './AddTableModal';
+import { EditEdgeModal } from './EditEdgeModal';
+import { EditTableModal } from './EditTableModal';
+import { GroupModal } from './GroupModal';
+
+describe('required modal field validation', () => {
+ afterEach(cleanup);
+ it('provides actionable validation when the relationship label is empty', () => {
+ render(
+
,
+ );
+
+ const input = screen.getByLabelText(/제약조건 이름 \(Label\)/);
+ fireEvent.invalid(input);
+
+ expect(input).toHaveProperty('validationMessage', '제약조건 이름을 입력하세요.');
+ });
+
+ it('blocks whitespace-only relationship labels with actionable validation', () => {
+ const onRelSubmit = vi.fn();
+ const setRelLabel = vi.fn();
+
+ render(
+
,
+ );
+
+ const input = screen.getByLabelText(/제약조건 이름 \(Label\)/);
+ expect(input).toBeRequired();
+
+ fireEvent.submit(input.closest('form')!);
+
+ expect(onRelSubmit).not.toHaveBeenCalled();
+ expect(input).toHaveProperty('validationMessage', '제약조건 이름을 입력하세요.');
+
+ fireEvent.change(input, { target: { value: 'fk_orders_customer' } });
+ expect(setRelLabel).toHaveBeenCalledWith('fk_orders_customer');
+ expect(input).toHaveProperty('validationMessage', '');
+ });
+
+ it('explains an empty group name before the disabled action', () => {
+ render(
+
,
+ );
+
+ const input = screen.getByLabelText(/그룹 이름/);
+ expect(input).toHaveAttribute('aria-invalid', 'true');
+ expect(input).toHaveAttribute('aria-describedby', 'business-group-name-error');
+ expect(screen.getByText('그룹 이름을 입력하세요.')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '추가' })).toBeDisabled();
+
+ fireEvent.invalid(input);
+ expect(input).toHaveProperty('validationMessage', '그룹 이름을 입력하세요.');
+ });
+
+ it('explains and blocks whitespace-only group creation', () => {
+ const onCreateBusinessGroup = vi.fn();
+ const setNewGroupName = vi.fn();
+
+ render(
+
,
+ );
+
+ const input = screen.getByLabelText(/그룹 이름/);
+ expect(input).toBeRequired();
+ expect(input).toHaveAttribute('aria-invalid', 'true');
+ expect(screen.getByText('공백이 아닌 그룹 이름을 입력하세요.')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: '추가' })).toBeDisabled();
+
+ fireEvent.submit(input.closest('form')!);
+
+ expect(onCreateBusinessGroup).not.toHaveBeenCalled();
+ expect(input).toHaveProperty('validationMessage', '그룹 이름을 입력하세요.');
+
+ fireEvent.change(input, { target: { value: 'Billing' } });
+ expect(setNewGroupName).toHaveBeenCalledWith('Billing');
+ expect(input).toHaveProperty('validationMessage', '');
+ });
+
+ it('keeps the add-table required marker decorative and the input semantic', () => {
+ render(
+
,
+ );
+
+ expect(screen.getByLabelText(/테이블 이름/)).toBeRequired();
+ const indicator = document.querySelector('[data-required-indicator="true"]');
+ expect(indicator).toHaveAttribute('aria-hidden', 'true');
+ });
+
+ it('marks the table title, column name, and data type as required', () => {
+ render(
+
,
+ );
+
+ expect(screen.getByLabelText(/테이블명 \(schema\.table\)/)).toBeRequired();
+ expect(screen.getByRole('textbox', { name: 'id 컬럼명' })).toBeRequired();
+ expect(screen.getByRole('textbox', { name: 'id 데이터 타입' })).toBeRequired();
+ });
+});
diff --git a/frontend/src/components/modals/RequiredIndicator.tsx b/frontend/src/components/modals/RequiredIndicator.tsx
new file mode 100644
index 000000000..811a03af9
--- /dev/null
+++ b/frontend/src/components/modals/RequiredIndicator.tsx
@@ -0,0 +1,12 @@
+/** Decorative required-field marker; native form validation remains the semantic authority. */
+export function RequiredIndicator() {
+ return (
+
+ *
+
+ );
+}