Use semantic headings in user settings Labs (#10773)
* allow testids in settings sections * use semantic headings in LabsUserSettingsTab * put back margin var * explicit cast to boolean * Update src/components/views/settings/shared/SettingsSubsection.tsx Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
Kerry
GitHub
parent
38c13509fd
commit
9bab356e20
10 changed files with 164 additions and 156 deletions
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { defer } from "matrix-js-sdk/src/utils";
|
||||
|
||||
import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
|
||||
|
|
@ -51,17 +51,16 @@ describe("<LabsUserSettingsTab />", () => {
|
|||
});
|
||||
|
||||
it("renders settings marked as beta as beta cards", () => {
|
||||
const { getByTestId } = render(getComponent());
|
||||
expect(getByTestId("labs-beta-section")).toMatchSnapshot();
|
||||
render(getComponent());
|
||||
expect(screen.getByText("Upcoming features").parentElement!).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("does not render non-beta labs settings when disabled in config", () => {
|
||||
const { container } = render(getComponent());
|
||||
render(getComponent());
|
||||
expect(sdkConfigSpy).toHaveBeenCalledWith("show_labs_settings");
|
||||
|
||||
const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
|
||||
// only section is beta section
|
||||
expect(labsSections.length).toEqual(1);
|
||||
expect(screen.queryByText("Early previews")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("renders non-beta labs settings when enabled in config", () => {
|
||||
|
|
@ -69,8 +68,10 @@ describe("<LabsUserSettingsTab />", () => {
|
|||
sdkConfigSpy.mockImplementation((configName) => configName === "show_labs_settings");
|
||||
const { container } = render(getComponent());
|
||||
|
||||
const labsSections = container.getElementsByClassName("mx_SettingsTab_section");
|
||||
expect(labsSections).toHaveLength(11);
|
||||
// non-beta labs section
|
||||
expect(screen.getByText("Early previews")).toBeInTheDocument();
|
||||
const labsSections = container.getElementsByClassName("mx_SettingsSubsection");
|
||||
expect(labsSections).toHaveLength(10);
|
||||
});
|
||||
|
||||
it("allow setting a labs flag which requires unstable support once support is confirmed", async () => {
|
||||
|
|
|
|||
|
|
@ -2,121 +2,134 @@
|
|||
|
||||
exports[`<LabsUserSettingsTab /> renders settings marked as beta as beta cards 1`] = `
|
||||
<div
|
||||
class="mx_SettingsTab_section"
|
||||
data-testid="labs-beta-section"
|
||||
class="mx_SettingsSection"
|
||||
>
|
||||
<h2
|
||||
class="mx_Heading_h2"
|
||||
>
|
||||
Upcoming features
|
||||
</h2>
|
||||
<div
|
||||
class="mx_BetaCard"
|
||||
class="mx_SettingsSection_subSections"
|
||||
>
|
||||
<div
|
||||
class="mx_BetaCard_columns"
|
||||
class="mx_SettingsSubsection_text"
|
||||
>
|
||||
What's next for false? Labs are the best way to get things early, test out new features and help shape them before they actually launch.
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BetaCard_columns_description"
|
||||
class="mx_BetaCard_columns"
|
||||
>
|
||||
<h3
|
||||
class="mx_BetaCard_title"
|
||||
<div
|
||||
class="mx_BetaCard_columns_description"
|
||||
>
|
||||
<span>
|
||||
Video rooms
|
||||
</span>
|
||||
<span
|
||||
class="mx_BetaCard_betaPill"
|
||||
<h3
|
||||
class="mx_BetaCard_title"
|
||||
>
|
||||
Beta
|
||||
</span>
|
||||
</h3>
|
||||
<div
|
||||
class="mx_BetaCard_caption"
|
||||
>
|
||||
<p>
|
||||
A new way to chat over voice and video in .
|
||||
</p>
|
||||
<p>
|
||||
Video rooms are always-on VoIP channels embedded within a room in .
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_buttons"
|
||||
>
|
||||
<span>
|
||||
Video rooms
|
||||
</span>
|
||||
<span
|
||||
class="mx_BetaCard_betaPill"
|
||||
>
|
||||
Beta
|
||||
</span>
|
||||
</h3>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="mx_BetaCard_caption"
|
||||
>
|
||||
Join the beta
|
||||
<p>
|
||||
A new way to chat over voice and video in .
|
||||
</p>
|
||||
<p>
|
||||
Video rooms are always-on VoIP channels embedded within a room in .
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_buttons"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Join the beta
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_refreshWarning"
|
||||
>
|
||||
Joining the beta will reload .
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_faq"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_refreshWarning"
|
||||
class="mx_BetaCard_columns_image_wrapper"
|
||||
>
|
||||
Joining the beta will reload .
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BetaCard_columns_image"
|
||||
src="image-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_faq"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_columns_image_wrapper"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BetaCard_columns_image"
|
||||
src="image-file-stub"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BetaCard_columns"
|
||||
class="mx_BetaCard"
|
||||
>
|
||||
<div
|
||||
class="mx_BetaCard_columns_description"
|
||||
class="mx_BetaCard_columns"
|
||||
>
|
||||
<h3
|
||||
class="mx_BetaCard_title"
|
||||
<div
|
||||
class="mx_BetaCard_columns_description"
|
||||
>
|
||||
<span>
|
||||
New session manager
|
||||
</span>
|
||||
<span
|
||||
class="mx_BetaCard_betaPill"
|
||||
<h3
|
||||
class="mx_BetaCard_title"
|
||||
>
|
||||
Beta
|
||||
</span>
|
||||
</h3>
|
||||
<div
|
||||
class="mx_BetaCard_caption"
|
||||
>
|
||||
<p>
|
||||
Have greater visibility and control over all your sessions.
|
||||
</p>
|
||||
<p>
|
||||
Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_buttons"
|
||||
>
|
||||
<span>
|
||||
New session manager
|
||||
</span>
|
||||
<span
|
||||
class="mx_BetaCard_betaPill"
|
||||
>
|
||||
Beta
|
||||
</span>
|
||||
</h3>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="mx_BetaCard_caption"
|
||||
>
|
||||
Join the beta
|
||||
<p>
|
||||
Have greater visibility and control over all your sessions.
|
||||
</p>
|
||||
<p>
|
||||
Our new sessions manager provides better visibility of all your sessions, and greater control over them including the ability to remotely toggle push notifications.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_buttons"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Join the beta
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_BetaCard_columns_image_wrapper"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BetaCard_columns_image"
|
||||
/>
|
||||
<div
|
||||
class="mx_BetaCard_columns_image_wrapper"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
class="mx_BetaCard_columns_image"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue