fix button selection in VariablesField tests

This commit is contained in:
Keith J. Grant
2021-04-07 11:08:30 -07:00
parent 8dd4e68385
commit 637b540a4d
2 changed files with 9 additions and 10 deletions

View File

@@ -65,15 +65,14 @@ describe('VariablesField', () => {
)} )}
</Formik> </Formik>
); );
const buttons = wrapper.find('Button'); const jsButton = wrapper.find('Button.toggle-button-javascript');
expect(buttons).toHaveLength(2);
await act(async () => { await act(async () => {
buttons.at(1).simulate('click'); jsButton.simulate('click');
}); });
wrapper.update(); wrapper.update();
const buttons2 = wrapper.find('Button'); const yamlButton = wrapper.find('Button.toggle-button-yaml');
await act(async () => { await act(async () => {
buttons2.at(0).simulate('click'); yamlButton.simulate('click');
}); });
wrapper.update(); wrapper.update();
expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml'); expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml');
@@ -89,18 +88,17 @@ describe('VariablesField', () => {
)} )}
</Formik> </Formik>
); );
const buttons = wrapper.find('Button'); const jsButton = wrapper.find('Button.toggle-button-javascript');
expect(buttons).toHaveLength(2);
await act(async () => { await act(async () => {
buttons.at(1).simulate('click'); jsButton.simulate('click');
}); });
wrapper.update(); wrapper.update();
wrapper.find('CodeEditor').invoke('onChange')( wrapper.find('CodeEditor').invoke('onChange')(
'{\n "foo": "bar",\n "baz": 3\n}' '{\n "foo": "bar",\n "baz": 3\n}'
); );
const buttons2 = wrapper.find('Button'); const yamlButton = wrapper.find('Button.toggle-button-yaml');
await act(async () => { await act(async () => {
buttons2.at(0).simulate('click'); yamlButton.simulate('click');
}); });
wrapper.update(); wrapper.update();
expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml'); expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml');

View File

@@ -25,6 +25,7 @@ function MultiButtonToggle({ buttons, value, onChange }) {
<SmallButton <SmallButton
aria-label={buttonLabel} aria-label={buttonLabel}
key={buttonLabel} key={buttonLabel}
className={`toggle-button-${buttonValue}`}
onClick={() => setValue(buttonValue)} onClick={() => setValue(buttonValue)}
variant={buttonValue === value ? 'primary' : 'secondary'} variant={buttonValue === value ? 'primary' : 'secondary'}
> >