Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Merged
merged 20 commits into from
Jul 8, 2022
Merged

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f6a4169
Convert string-type user input to real-type pararmeter. (Currently su…
jlyaoyuli Jun 21, 2022
643b23e
Delete unnecessary console.log
jlyaoyuli Jun 21, 2022
e5d0d68
Change incorrect type.
jlyaoyuli Jun 22, 2022
a5a8fc0
Format.
jlyaoyuli Jun 22, 2022
5e91dff
Move inputConverter out from function component.
jlyaoyuli Jun 22, 2022
2faedf8
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jun 22, 2022
ca71e50
Change inputConverter from if-else to switch.
jlyaoyuli Jun 22, 2022
b53aa87
1. Change paramTypeIdx to ParameterTypeEnum.
jlyaoyuli Jun 23, 2022
de688f5
Format
jlyaoyuli Jun 23, 2022
91a8f77
Support LIST and STRUCT type.
jlyaoyuli Jul 1, 2022
4a4225e
1. Fixed default value bugs.
jlyaoyuli Jul 6, 2022
d7628d8
Added type into param.
jlyaoyuli Jul 6, 2022
91fc887
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
29b452e
Added comment.
jlyaoyuli Jul 6, 2022
aeec427
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
65a8c80
Added unit test for invalid JSON form input.
jlyaoyuli Jul 6, 2022
1375a73
Removed incorrect merge conflicts.
jlyaoyuli Jul 6, 2022
3edc791
Support double type.
jlyaoyuli Jul 7, 2022
d8412a8
Clean unnecessary expect() in the unit tests.
jlyaoyuli Jul 8, 2022
f61293e
Added additional tests to check for the existence of display value 4.56
jlyaoyuli Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 206 additions & 15 deletions frontend/src/components/NewRunParametersV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ describe('NewRunParametersV2', () => {
</CommonTestWrapper>,
);

expect(screen.getByText('Run parameters'));
expect(screen.getByText('Specify parameters required by the pipeline'));
expect(screen.getByText('strParam - STRING'));
expect(screen.getByDisplayValue('string value'));
expect(screen.getByText('boolParam - BOOLEAN'));
expect(screen.getByDisplayValue('true'));
expect(screen.getByText('intParam - NUMBER_INTEGER'));
expect(screen.getByDisplayValue('123'));
screen.getByText('Run parameters');
screen.getByText('Specify parameters required by the pipeline');
screen.getByText('strParam - STRING');
screen.getByDisplayValue('string value');
screen.getByText('boolParam - BOOLEAN');
screen.getByDisplayValue('true');
screen.getByText('intParam - NUMBER_INTEGER');
screen.getByDisplayValue('123');
});

it('edits parameters', () => {
Expand Down Expand Up @@ -131,7 +131,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const strParam = screen.getByLabelText('strParam - STRING');
fireEvent.change(strParam, { target: { value: 'new string' } });
Expand All @@ -155,7 +155,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByDisplayValue('true');
fireEvent.change(boolParam, { target: { value: 'false' } });
Expand All @@ -178,7 +178,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByLabelText('boolParam - BOOLEAN');
fireEvent.change(boolParam, { target: { value: 'true' } });
Expand All @@ -201,7 +201,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const boolParam = screen.getByLabelText('boolParam - BOOLEAN');
fireEvent.change(boolParam, { target: { value: 'True' } });
Expand All @@ -225,7 +225,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByDisplayValue('123');
fireEvent.change(intParam, { target: { value: '456' } });
Expand All @@ -248,7 +248,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByLabelText('intParam - NUMBER_INTEGER');
fireEvent.change(intParam, { target: { value: '789' } });
Expand All @@ -271,7 +271,7 @@ describe('NewRunParametersV2', () => {
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
render(<NewRunParametersV2 {...props} />);

const intParam = screen.getByLabelText('intParam - NUMBER_INTEGER');
fireEvent.change(intParam, { target: { value: '7.89' } });
Expand All @@ -281,6 +281,197 @@ describe('NewRunParametersV2', () => {
});
});

it('test convertInput function for double type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
doubleParam: {
parameterType: ParameterType_ParameterTypeEnum.NUMBER_DOUBLE,
defaultValue: 1.23,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const doubleParam = screen.getByDisplayValue('1.23');
fireEvent.change(doubleParam, { target: { value: '4.56' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
doubleParam: 4.56,
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For new tests: Please also check for the existence of display value 4.56. Just like we mentioned in https://github.com/kubeflow/pipelines/pull/7991/files#r916159217

});

it('test convertInput function for double type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
doubleParam: {
parameterType: ParameterType_ParameterTypeEnum.NUMBER_DOUBLE,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const doubleParam = screen.getByLabelText('doubleParam - NUMBER_DOUBLE');
fireEvent.change(doubleParam, { target: { value: '7.89' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
doubleParam: 7.89,
});
});

it('test convertInput function for LIST type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
defaultValue: [1, 2, 3],
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByDisplayValue('[1,2,3]');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we check the screen now has [4,5,6]?

screen.getByDisplayValue('[4,5,6]');

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for all cases below.

expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
screen.getByDisplayValue('[4,5,6]');
});

it('test convertInput function for LIST type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
screen.getByDisplayValue('[4,5,6]');
});

it('test convertInput function for LIST type with invalid input (invalid JSON form)', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: null,
});
});

it('test convertInput function for STRUCT type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
defaultValue: { A: 1, B: 2 },
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByDisplayValue('{"A":1,"B":2}');
fireEvent.change(structParam, { target: { value: '{"C":3,"D":4}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { C: 3, D: 4 },
});
screen.getByDisplayValue('{"C":3,"D":4}');
});

it('test convertInput function for STRUCT type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '{"A":1,"B":2}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { A: 1, B: 2 },
});
screen.getByDisplayValue('{"A":1,"B":2}');
});

it('test convertInput function for STRUCT type with invalid input (invalid JSON form)', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props} />);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '"A":1,"B":2' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: null,
});
});

it('does not display any text fields if there are no parameters', () => {
const { container } = render(
<CommonTestWrapper>
Expand Down
Loading