This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 833
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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>
- Loading branch information
Kerry
committed
Jan 3, 2022
1 parent
e759a85
commit 03f5a3c
Showing
6 changed files
with
304 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
test/components/views/elements/StyledRadioGroup-test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| }); |
158 changes: 158 additions & 0 deletions
158
test/components/views/elements/__snapshots__/StyledRadioGroup-test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters