Associate room alias warning with public option in settings (#7430)
* add describedby to styledradiogroup description Signed-off-by: Kerry Archibald <kerrya@element.io> * alias warning in description Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * update snapshot Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
e759a85321
commit
03f5a3c3e6
6 changed files with 304 additions and 19 deletions
115
test/components/views/elements/StyledRadioGroup-test.tsx
Normal file
115
test/components/views/elements/StyledRadioGroup-test.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import "../../../skinned-sdk";
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { act } from "react-dom/test-utils";
|
||||
|
||||
import StyledRadioGroup from "../../../../src/components/views/elements/StyledRadioGroup";
|
||||
|
||||
describe('<StyledRadioGroup />', () => {
|
||||
const optionA = {
|
||||
value: 'Anteater',
|
||||
label: <span>Anteater label</span>,
|
||||
description: 'anteater description',
|
||||
className: 'a-class',
|
||||
};
|
||||
const optionB = {
|
||||
value: 'Badger',
|
||||
label: <span>Badger label</span>,
|
||||
};
|
||||
const optionC = {
|
||||
value: 'Canary',
|
||||
label: <span>Canary label</span>,
|
||||
description: <span>Canary description</span>,
|
||||
};
|
||||
const defaultDefinitions = [optionA, optionB, optionC];
|
||||
const defaultProps = {
|
||||
name: 'test',
|
||||
className: 'test-class',
|
||||
definitions: defaultDefinitions,
|
||||
onChange: jest.fn(),
|
||||
};
|
||||
const getComponent = (props = {}) => mount(<StyledRadioGroup {...defaultProps} {...props} />);
|
||||
|
||||
const getInputByValue = (component, value) => component.find(`input[value="${value}"]`);
|
||||
const getCheckedInput = component => component.find('input[checked=true]');
|
||||
|
||||
it('renders radios correctly when no value is provided', () => {
|
||||
const component = getComponent();
|
||||
|
||||
expect(component).toMatchSnapshot();
|
||||
expect(getCheckedInput(component).length).toBeFalsy();
|
||||
});
|
||||
|
||||
it('selects correct button when value is provided', () => {
|
||||
const component = getComponent({
|
||||
value: optionC.value,
|
||||
});
|
||||
|
||||
expect(getCheckedInput(component).at(0).props().value).toEqual(optionC.value);
|
||||
});
|
||||
|
||||
it('selects correct buttons when definitions have checked prop', () => {
|
||||
const definitions = [
|
||||
{ ...optionA, checked: true },
|
||||
optionB,
|
||||
{ ...optionC, checked: false },
|
||||
];
|
||||
const component = getComponent({
|
||||
value: optionC.value, definitions,
|
||||
});
|
||||
|
||||
expect(getInputByValue(component, optionA.value).props().checked).toBeTruthy();
|
||||
expect(getInputByValue(component, optionB.value).props().checked).toBeFalsy();
|
||||
// optionC.checked = false overrides value matching
|
||||
expect(getInputByValue(component, optionC.value).props().checked).toBeFalsy();
|
||||
});
|
||||
|
||||
it('disables individual buttons based on definition.disabled', () => {
|
||||
const definitions = [
|
||||
optionA,
|
||||
{ ...optionB, disabled: true },
|
||||
{ ...optionC, disabled: true },
|
||||
];
|
||||
const component = getComponent({ definitions });
|
||||
expect(getInputByValue(component, optionA.value).props().disabled).toBeFalsy();
|
||||
expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
|
||||
expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it('disables all buttons with disabled prop', () => {
|
||||
const component = getComponent({ disabled: true });
|
||||
expect(getInputByValue(component, optionA.value).props().disabled).toBeTruthy();
|
||||
expect(getInputByValue(component, optionB.value).props().disabled).toBeTruthy();
|
||||
expect(getInputByValue(component, optionC.value).props().disabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it('calls onChange on click', () => {
|
||||
const onChange = jest.fn();
|
||||
const component = getComponent({
|
||||
value: optionC.value,
|
||||
onChange,
|
||||
});
|
||||
|
||||
act(() => {
|
||||
getInputByValue(component, optionB.value).simulate('change');
|
||||
});
|
||||
|
||||
expect(onChange).toHaveBeenCalledWith(optionB.value);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<StyledRadioGroup /> renders radios correctly when no value is provided 1`] = `
|
||||
<StyledRadioGroup
|
||||
className="test-class"
|
||||
definitions={
|
||||
Array [
|
||||
Object {
|
||||
"className": "a-class",
|
||||
"description": "anteater description",
|
||||
"label": <span>
|
||||
Anteater label
|
||||
</span>,
|
||||
"value": "Anteater",
|
||||
},
|
||||
Object {
|
||||
"label": <span>
|
||||
Badger label
|
||||
</span>,
|
||||
"value": "Badger",
|
||||
},
|
||||
Object {
|
||||
"description": <span>
|
||||
Canary description
|
||||
</span>,
|
||||
"label": <span>
|
||||
Canary label
|
||||
</span>,
|
||||
"value": "Canary",
|
||||
},
|
||||
]
|
||||
}
|
||||
name="test"
|
||||
onChange={[MockFunction]}
|
||||
>
|
||||
<StyledRadioButton
|
||||
aria-describedby="test-Anteater-description"
|
||||
checked={false}
|
||||
childrenInLabel={true}
|
||||
className="test-class a-class"
|
||||
id="test-Anteater"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
value="Anteater"
|
||||
>
|
||||
<label
|
||||
className="mx_StyledRadioButton test-class a-class mx_StyledRadioButton_enabled"
|
||||
>
|
||||
<input
|
||||
aria-describedby="test-Anteater-description"
|
||||
checked={false}
|
||||
id="test-Anteater"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
type="radio"
|
||||
value="Anteater"
|
||||
/>
|
||||
<div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<span>
|
||||
Anteater label
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_spacer"
|
||||
/>
|
||||
</label>
|
||||
</StyledRadioButton>
|
||||
<span
|
||||
id="test-Anteater-description"
|
||||
>
|
||||
anteater description
|
||||
</span>
|
||||
<StyledRadioButton
|
||||
checked={false}
|
||||
childrenInLabel={true}
|
||||
className="test-class"
|
||||
id="test-Badger"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
value="Badger"
|
||||
>
|
||||
<label
|
||||
className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
id="test-Badger"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
type="radio"
|
||||
value="Badger"
|
||||
/>
|
||||
<div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<span>
|
||||
Badger label
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_spacer"
|
||||
/>
|
||||
</label>
|
||||
</StyledRadioButton>
|
||||
<StyledRadioButton
|
||||
aria-describedby="test-Canary-description"
|
||||
checked={false}
|
||||
childrenInLabel={true}
|
||||
className="test-class"
|
||||
id="test-Canary"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
value="Canary"
|
||||
>
|
||||
<label
|
||||
className="mx_StyledRadioButton test-class mx_StyledRadioButton_enabled"
|
||||
>
|
||||
<input
|
||||
aria-describedby="test-Canary-description"
|
||||
checked={false}
|
||||
id="test-Canary"
|
||||
name="test"
|
||||
onChange={[Function]}
|
||||
type="radio"
|
||||
value="Canary"
|
||||
/>
|
||||
<div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_content"
|
||||
>
|
||||
<span>
|
||||
Canary label
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="mx_StyledRadioButton_spacer"
|
||||
/>
|
||||
</label>
|
||||
</StyledRadioButton>
|
||||
<span
|
||||
id="test-Canary-description"
|
||||
>
|
||||
<span>
|
||||
Canary description
|
||||
</span>
|
||||
</span>
|
||||
</StyledRadioGroup>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue