Device manager - add settings subsection heading component (#9387)

* add settings subsection heading component

* use named export

* newline
This commit is contained in:
Kerry 2022-10-11 20:12:02 +02:00 committed by GitHub
parent 51d5005efa
commit 03182d03be
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 211 additions and 52 deletions

View file

@ -120,11 +120,15 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Current session
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
/>
@ -138,11 +142,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Current session
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
@ -258,11 +266,15 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Current session
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>

View file

@ -6,11 +6,15 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
class="mx_SettingsSubsection"
data-testid="security-recommendations-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Security recommendations
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Security recommendations
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
@ -109,11 +113,15 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
class="mx_SettingsSubsection"
data-testid="security-recommendations-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Security recommendations
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Security recommendations
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
@ -212,11 +220,15 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
class="mx_SettingsSubsection"
data-testid="security-recommendations-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Security recommendations
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Security recommendations
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>

View file

@ -27,6 +27,17 @@ describe('<SettingsSubsection />', () => {
const getComponent = (props = {}): React.ReactElement =>
(<SettingsSubsection {...defaultProps} {...props} />);
it('renders with plain text heading', () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();
});
it('renders with react element heading', () => {
const heading = <h3>This is the heading</h3>;
const { container } = render(getComponent({ heading }));
expect(container).toMatchSnapshot();
});
it('renders without description', () => {
const { container } = render(getComponent());
expect(container).toMatchSnapshot();

View file

@ -5,11 +5,15 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
<div
class="mx_SettingsSubsection"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Test
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
@ -26,16 +30,45 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
</div>
`;
exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
<div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
test settings content
</div>
</div>
</div>
</div>
`;
exports[`<SettingsSubsection /> renders with react element description 1`] = `
<div>
<div
class="mx_SettingsSubsection"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Test
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</div>
<div
class="mx_SettingsSubsection_description"
>
@ -59,15 +92,13 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
</div>
`;
exports[`<SettingsSubsection /> renders without description 1`] = `
exports[`<SettingsSubsection /> renders with react element heading 1`] = `
<div>
<div
class="mx_SettingsSubsection"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
>
Test
<h3>
This is the heading
</h3>
<div
class="mx_SettingsSubsection_content"
@ -79,3 +110,28 @@ exports[`<SettingsSubsection /> renders without description 1`] = `
</div>
</div>
`;
exports[`<SettingsSubsection /> renders without description 1`] = `
<div>
<div
class="mx_SettingsSubsection"
>
<div
class="mx_SettingsSubsectionHeading"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
<div>
test settings content
</div>
</div>
</div>
</div>
`;

View file

@ -81,11 +81,15 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Current session
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>
@ -187,11 +191,15 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
class="mx_SettingsSubsection"
data-testid="current-session-section"
>
<h3
class="mx_Heading_h3 mx_SettingsSubsection_heading"
<div
class="mx_SettingsSubsectionHeading"
>
Current session
</h3>
<h3
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</div>
<div
class="mx_SettingsSubsection_content"
>