Skip to content

Commit edbd7a3

Browse files
nickmazziclaude
nickmazzi
and
claude
committed
fix(automl,autorag): update tests to gate configure details on file selection
Tests were asserting configure details visibility after only selecting a secret. With the empty state now gated on file key instead of secret name, tests must select a file through the UI before asserting on configure details content — useEffect resets the file key when the secret changes, so default form values alone are insufficient. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 925c924 commit edbd7a3

2 files changed

Lines changed: 93 additions & 79 deletions

File tree

‎packages/automl/frontend/src/app/components/configure/__tests__/AutomlConfigure.spec.tsx‎

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@ describe('AutomlConfigure', () => {
406406
expect(screen.getByRole('button', { name: 'Browse bucket' })).toBeInTheDocument();
407407
});
408408

409-
it('should display the "Configure details" fields when a secret is selected', () => {
409+
it('should display the "Configure details" fields when a file is selected', () => {
410410
renderComponent();
411411

412412
// Initially should show empty state
@@ -418,6 +418,15 @@ describe('AutomlConfigure', () => {
418418
const selectButton = screen.getByTestId('aws-secret-selector-select-secret-1');
419419
fireEvent.click(selectButton);
420420

421+
// Empty state should still be shown (no file selected yet)
422+
expect(
423+
screen.getByText('Select an S3 connection or upload a file to get started'),
424+
).toBeInTheDocument();
425+
426+
// Select a file via the file explorer
427+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
428+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
429+
421430
// Empty state should be hidden
422431
expect(
423432
screen.queryByText('Select an S3 connection or upload a file to get started'),
@@ -563,14 +572,6 @@ describe('AutomlConfigure', () => {
563572
});
564573

565574
describe('with training data configured', () => {
566-
const trainingDataDefaults = {
567-
/* eslint-disable camelcase */
568-
train_data_secret_name: 'test-secret',
569-
train_data_bucket_name: 'test-bucket',
570-
train_data_file_key: 'test-file',
571-
/* eslint-enable camelcase */
572-
};
573-
574575
/** Select a secret and a file so prediction type tiles become enabled */
575576
const selectSecretAndFile = () => {
576577
fireEvent.click(screen.getByTestId('aws-secret-selector-select-secret-1'));
@@ -588,23 +589,26 @@ describe('AutomlConfigure', () => {
588589

589590
describe('Prediction type', () => {
590591
it('should render all four prediction type tile cards', () => {
591-
renderComponent(trainingDataDefaults);
592+
renderComponent();
593+
selectSecretAndFile();
592594
expect(screen.getByTestId('task-type-card-binary')).toBeInTheDocument();
593595
expect(screen.getByTestId('task-type-card-multiclass')).toBeInTheDocument();
594596
expect(screen.getByTestId('task-type-card-regression')).toBeInTheDocument();
595597
expect(screen.getByTestId('task-type-card-timeseries')).toBeInTheDocument();
596598
});
597599

598600
it('should render prediction type labels', () => {
599-
renderComponent(trainingDataDefaults);
601+
renderComponent();
602+
selectSecretAndFile();
600603
expect(screen.getByText('Binary classification')).toBeInTheDocument();
601604
expect(screen.getByText('Multiclass classification')).toBeInTheDocument();
602605
expect(screen.getByText('Regression')).toBeInTheDocument();
603606
expect(screen.getByText('Time series forecasting')).toBeInTheDocument();
604607
});
605608

606609
it('should render prediction type descriptions', () => {
607-
renderComponent(trainingDataDefaults);
610+
renderComponent();
611+
selectSecretAndFile();
608612
expect(
609613
screen.getByText(
610614
'Classify data into categories. Choose this if your prediction column contains two distinct categories',
@@ -628,14 +632,16 @@ describe('AutomlConfigure', () => {
628632
});
629633

630634
it('should have no prediction type selected by default', () => {
631-
renderComponent(trainingDataDefaults);
635+
renderComponent();
636+
selectSecretAndFile();
632637
TASK_TYPES.forEach((type) => {
633638
expect(screen.getByTestId(`task-type-card-${type}`)).not.toHaveClass('pf-m-selected');
634639
});
635640
});
636641

637642
it('should not show column forms when no prediction type is selected', () => {
638-
renderComponent(trainingDataDefaults);
643+
renderComponent();
644+
selectSecretAndFile();
639645
expect(screen.queryByText('Label column')).not.toBeInTheDocument();
640646
expect(screen.queryByText('Target column')).not.toBeInTheDocument();
641647
});
@@ -658,7 +664,15 @@ describe('AutomlConfigure', () => {
658664
// Remove the selected file
659665
fireEvent.click(screen.getByRole('button', { name: 'Remove selection' }));
660666

661-
// Prediction type should be deselected
667+
// Configure details should revert to empty state
668+
expect(
669+
screen.getByText('Select an S3 connection or upload a file to get started'),
670+
).toBeInTheDocument();
671+
672+
// Re-select a file — prediction type should be deselected
673+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
674+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
675+
662676
TASK_TYPES.forEach((type) => {
663677
expect(screen.getByTestId(`task-type-card-${type}`)).not.toHaveClass('pf-m-selected');
664678
});
@@ -769,10 +783,14 @@ describe('AutomlConfigure', () => {
769783
expect(screen.getByTestId('label_column-select')).toHaveTextContent('Select a column');
770784
});
771785

772-
it('should be disabled when no file is selected', () => {
773-
renderComponent(trainingDataDefaults);
774-
selectPredictionType('binary');
775-
expect(screen.getByTestId('label_column-select')).toBeDisabled();
786+
it('should not be visible when no file is selected', () => {
787+
renderComponent();
788+
789+
// Select a secret but no file — configure details shows empty state
790+
fireEvent.click(screen.getByTestId('aws-secret-selector-select-secret-1'));
791+
792+
// Label column should not exist since configure details is hidden
793+
expect(screen.queryByTestId('label_column-select')).not.toBeInTheDocument();
776794
});
777795

778796
it('should be disabled when columns are empty', () => {
@@ -789,13 +807,15 @@ describe('AutomlConfigure', () => {
789807

790808
describe('Top models to consider', () => {
791809
it('should render the top N input with default value 3', () => {
792-
renderComponent(trainingDataDefaults);
810+
renderComponent();
811+
selectSecretAndFile();
793812
const input = screen.getByTestId('top-n-input').querySelector('input');
794813
expect(input).toHaveValue(3);
795814
});
796815

797816
it('should show error message when top N exceeds the maximum', async () => {
798-
renderComponent(trainingDataDefaults);
817+
renderComponent();
818+
selectSecretAndFile();
799819
const input = screen.getByTestId('top-n-input').querySelector('input')!;
800820
fireEvent.change(input, { target: { value: '6' } });
801821

@@ -805,7 +825,8 @@ describe('AutomlConfigure', () => {
805825
});
806826

807827
it('should show error message when top N is below the minimum', async () => {
808-
renderComponent(trainingDataDefaults);
828+
renderComponent();
829+
selectSecretAndFile();
809830
const input = screen.getByTestId('top-n-input').querySelector('input')!;
810831
fireEvent.change(input, { target: { value: '0' } });
811832

‎packages/autorag/frontend/src/app/components/configure/__tests__/AutoragConfigure.spec.tsx‎

Lines changed: 50 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ describe('AutoragConfigure', () => {
480480
expect(screen.getByRole('button', { name: 'Browse bucket' })).toBeInTheDocument();
481481
});
482482

483-
it('should display the "Configure details" fields when a secret is selected', () => {
483+
it('should display the "Configure details" fields when a file is selected', () => {
484484
renderComponent();
485485

486486
// Initially should show empty state
@@ -492,6 +492,15 @@ describe('AutoragConfigure', () => {
492492
const selectButton = screen.getByTestId('aws-secret-selector-select-secret-1');
493493
fireEvent.click(selectButton);
494494

495+
// Empty state should still be shown (no file selected yet)
496+
expect(
497+
screen.getByText('Select an S3 connection or upload a file to get started'),
498+
).toBeInTheDocument();
499+
500+
// Select a file via the file explorer
501+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
502+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
503+
495504
// Empty state should be hidden
496505
expect(
497506
screen.queryByText('Select an S3 connection or upload a file to get started'),
@@ -507,13 +516,15 @@ describe('AutoragConfigure', () => {
507516
});
508517

509518
describe('Optimization metric', () => {
519+
const selectSecretAndFile = () => {
520+
fireEvent.click(screen.getByTestId('aws-secret-selector-select-secret-1'));
521+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
522+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
523+
};
524+
510525
it('should render the optimization metric dropdown with default value', () => {
511-
renderComponent({
512-
// eslint-disable-next-line camelcase
513-
input_data_secret_name: 'test-secret',
514-
// eslint-disable-next-line camelcase
515-
input_data_bucket_name: 'test-bucket',
516-
});
526+
renderComponent();
527+
selectSecretAndFile();
517528

518529
expect(screen.getByTestId('optimization-metric-select')).toBeInTheDocument();
519530
expect(screen.getByTestId('optimization-metric-select')).toHaveTextContent(
@@ -523,12 +534,8 @@ describe('AutoragConfigure', () => {
523534

524535
it('should display all metric options when dropdown is opened', async () => {
525536
const user = userEvent.setup();
526-
renderComponent({
527-
// eslint-disable-next-line camelcase
528-
input_data_secret_name: 'test-secret',
529-
// eslint-disable-next-line camelcase
530-
input_data_bucket_name: 'test-bucket',
531-
});
537+
renderComponent();
538+
selectSecretAndFile();
532539

533540
await user.click(screen.getByTestId('optimization-metric-select'));
534541

@@ -541,13 +548,10 @@ describe('AutoragConfigure', () => {
541548

542549
it('should render with a non-default metric when configured', () => {
543550
renderComponent({
544-
// eslint-disable-next-line camelcase
545-
input_data_secret_name: 'test-secret',
546-
// eslint-disable-next-line camelcase
547-
input_data_bucket_name: 'test-bucket',
548551
// eslint-disable-next-line camelcase
549552
optimization_metric: 'answer_correctness',
550553
});
554+
selectSecretAndFile();
551555

552556
expect(screen.getByTestId('optimization-metric-select')).toHaveTextContent(
553557
'Answer correctness',
@@ -556,25 +560,23 @@ describe('AutoragConfigure', () => {
556560
});
557561

558562
describe('Maximum RAG patterns', () => {
563+
const selectSecretAndFile = () => {
564+
fireEvent.click(screen.getByTestId('aws-secret-selector-select-secret-1'));
565+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
566+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
567+
};
568+
559569
it('should render the max RAG patterns input with default value 8', () => {
560-
renderComponent({
561-
// eslint-disable-next-line camelcase
562-
input_data_secret_name: 'test-secret',
563-
// eslint-disable-next-line camelcase
564-
input_data_bucket_name: 'test-bucket',
565-
});
570+
renderComponent();
571+
selectSecretAndFile();
566572

567573
const input = screen.getByTestId('max-rag-patterns-input').querySelector('input');
568574
expect(input).toHaveValue(8);
569575
});
570576

571577
it('should increment value when plus button is clicked', () => {
572-
renderComponent({
573-
// eslint-disable-next-line camelcase
574-
input_data_secret_name: 'test-secret',
575-
// eslint-disable-next-line camelcase
576-
input_data_bucket_name: 'test-bucket',
577-
});
578+
renderComponent();
579+
selectSecretAndFile();
578580

579581
const container = screen.getByTestId('max-rag-patterns-input');
580582
const plusButton = container.querySelector('button[aria-label="Plus"]')!;
@@ -585,12 +587,8 @@ describe('AutoragConfigure', () => {
585587
});
586588

587589
it('should decrement value when minus button is clicked', () => {
588-
renderComponent({
589-
// eslint-disable-next-line camelcase
590-
input_data_secret_name: 'test-secret',
591-
// eslint-disable-next-line camelcase
592-
input_data_bucket_name: 'test-bucket',
593-
});
590+
renderComponent();
591+
selectSecretAndFile();
594592

595593
const container = screen.getByTestId('max-rag-patterns-input');
596594
const minusButton = container.querySelector('button[aria-label="Minus"]')!;
@@ -601,12 +599,8 @@ describe('AutoragConfigure', () => {
601599
});
602600

603601
it('should show error when value exceeds maximum', async () => {
604-
renderComponent({
605-
// eslint-disable-next-line camelcase
606-
input_data_secret_name: 'test-secret',
607-
// eslint-disable-next-line camelcase
608-
input_data_bucket_name: 'test-bucket',
609-
});
602+
renderComponent();
603+
selectSecretAndFile();
610604

611605
const input = screen.getByTestId('max-rag-patterns-input').querySelector('input')!;
612606
fireEvent.change(input, { target: { value: '21' } });
@@ -617,12 +611,8 @@ describe('AutoragConfigure', () => {
617611
});
618612

619613
it('should show error when value is below minimum', async () => {
620-
renderComponent({
621-
// eslint-disable-next-line camelcase
622-
input_data_secret_name: 'test-secret',
623-
// eslint-disable-next-line camelcase
624-
input_data_bucket_name: 'test-bucket',
625-
});
614+
renderComponent();
615+
selectSecretAndFile();
626616

627617
const input = screen.getByTestId('max-rag-patterns-input').querySelector('input')!;
628618
fireEvent.change(input, { target: { value: '3' } });
@@ -651,12 +641,12 @@ describe('AutoragConfigure', () => {
651641
isLoading: false,
652642
} as unknown as ReturnType<typeof useLlamaStackModelsQuery>);
653643

654-
renderComponent({
655-
// eslint-disable-next-line camelcase
656-
input_data_secret_name: 'test-secret',
657-
// eslint-disable-next-line camelcase
658-
input_data_bucket_name: 'test-bucket',
659-
});
644+
renderComponent();
645+
646+
// Select a secret and file to show configure details
647+
fireEvent.click(screen.getByTestId('aws-secret-selector-select-secret-1'));
648+
fireEvent.click(screen.getByRole('button', { name: 'Browse bucket' }));
649+
fireEvent.click(screen.getByTestId('file-explorer-select-file'));
660650

661651
// The "Selected models" card should show model counts
662652
expect(screen.getByText(/1 foundation model/)).toBeInTheDocument();
@@ -801,9 +791,11 @@ describe('AutoragConfigure', () => {
801791
const selectButton = screen.getByTestId('aws-secret-selector-select-secret-1');
802792
fireEvent.click(selectButton);
803793

804-
// Initially Edit button should be disabled (no files selected)
805-
const editButton = screen.getByRole('button', { name: 'Edit' });
806-
expect(editButton).toBeDisabled();
794+
// Before file selection, the configure details panel shows the empty state
795+
expect(
796+
screen.getByText('Select an S3 connection or upload a file to get started'),
797+
).toBeInTheDocument();
798+
expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
807799

808800
// Click "Browse bucket" button to open FileExplorer
809801
const browseButton = screen.getByRole('button', { name: 'Browse bucket' });
@@ -816,7 +808,8 @@ describe('AutoragConfigure', () => {
816808
const fileSelectButton = screen.getByTestId('file-explorer-select-file');
817809
fireEvent.click(fileSelectButton);
818810

819-
// Now Edit button should be enabled after files are selected
811+
// Now Edit button should be visible and enabled after files are selected
812+
const editButton = screen.getByRole('button', { name: 'Edit' });
820813
expect(editButton).toBeEnabled();
821814
});
822815
});

0 commit comments

Comments
 (0)