mirror of https://github.com/vector-im/riot-web
Add `appearance-user-settings-tab.spec.ts` (#10697)
* Add `appearance-user-settings-tab.spec.ts` Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Empty commit Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Fix a comment Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> --------- Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28788/head^2
Suguru Hirahara
GitHub
parent
675756a699
commit
16ec3b5d7b
|
|
@ -0,0 +1,223 @@
|
|||
/*
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
/// <reference types="cypress" />
|
||||
|
||||
import { HomeserverInstance } from "../../plugins/utils/homeserver";
|
||||
|
||||
describe("Appearance user settings tab", () => {
|
||||
let homeserver: HomeserverInstance;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.startHomeserver("default").then((data) => {
|
||||
homeserver = data;
|
||||
cy.initTestUser(homeserver, "Hanako");
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cy.stopHomeserver(homeserver);
|
||||
});
|
||||
|
||||
it("should be rendered properly", () => {
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
|
||||
// Assert that the top heading is rendered
|
||||
cy.findByTestId("appearance").should("have.text", "Customise your appearance").should("be.visible");
|
||||
});
|
||||
|
||||
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
|
||||
"User settings tab - Appearance (advanced options collapsed)",
|
||||
);
|
||||
|
||||
// Click "Show advanced" link button
|
||||
cy.findByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
// Assert that "Hide advanced" link button is rendered
|
||||
cy.findByRole("button", { name: "Hide advanced" }).should("exist");
|
||||
|
||||
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").percySnapshotElement(
|
||||
"User settings tab - Appearance (advanced options expanded)",
|
||||
);
|
||||
});
|
||||
|
||||
it("should support switching layouts", () => {
|
||||
// Create and view a room first
|
||||
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
|
||||
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
|
||||
// Assert that the layout selected by default is "Modern"
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
|
||||
cy.findByLabelText("Modern").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
// Assert that the room layout is set to group (modern) layout
|
||||
cy.get(".mx_RoomView_body[data-layout='group']").should("exist");
|
||||
|
||||
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
|
||||
// Select the first layout
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
|
||||
|
||||
// Assert that the layout selected is "IRC (Experimental)"
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
|
||||
cy.findByLabelText("IRC (Experimental)").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
// Assert that the room layout is set to IRC layout
|
||||
cy.get(".mx_RoomView_body[data-layout='irc']").should("exist");
|
||||
|
||||
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
|
||||
// Select the last layout
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
|
||||
|
||||
// Assert that the layout selected is "Message bubbles"
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
|
||||
cy.findByLabelText("Message bubbles").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
// Assert that the room layout is set to bubble layout
|
||||
cy.get(".mx_RoomView_body[data-layout='bubble']").should("exist");
|
||||
});
|
||||
|
||||
it("should support changing font size by clicking the font slider", () => {
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
cy.get(".mx_SettingsTab.mx_AppearanceUserSettingsTab").within(() => {
|
||||
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
|
||||
cy.findByLabelText("Font size").should("exist");
|
||||
});
|
||||
|
||||
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
|
||||
// Click the left position of the slider
|
||||
cy.get("input").realClick({ position: "left" });
|
||||
|
||||
// Assert that the smallest font size is selected
|
||||
cy.get("input[value='13']").should("exist");
|
||||
cy.get("output .mx_Slider_selection_label").findByText("13");
|
||||
});
|
||||
|
||||
cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - smallest (13)", {
|
||||
widths: [486], // actual size (content-box, including inline padding)
|
||||
});
|
||||
|
||||
cy.get(".mx_FontScalingPanel_fontSlider").within(() => {
|
||||
// Click the right position of the slider
|
||||
cy.get("input").realClick({ position: "right" });
|
||||
|
||||
// Assert that the largest font size is selected
|
||||
cy.get("input[value='18']").should("exist");
|
||||
cy.get("output .mx_Slider_selection_label").findByText("18");
|
||||
});
|
||||
|
||||
cy.get(".mx_FontScalingPanel_fontSlider").percySnapshotElement("Font size slider - largest (18)", {
|
||||
widths: [486],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it("should disable font size slider when custom font size is used", () => {
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
cy.get(".mx_FontScalingPanel").within(() => {
|
||||
cy.findByLabelText("Use custom size").click({ force: true }); // force click as checkbox size is zero
|
||||
|
||||
// Assert that the font slider is disabled
|
||||
cy.get(".mx_FontScalingPanel_fontSlider input[disabled]").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
it("should support enabling compact group (modern) layout", () => {
|
||||
// Create and view a room first
|
||||
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
|
||||
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
// Click "Show advanced" link button
|
||||
cy.findByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
|
||||
// force click as checkbox size is zero
|
||||
cy.findByLabelText("Use a more compact 'Modern' layout").click({ force: true });
|
||||
});
|
||||
|
||||
// Assert that the room layout is set to compact group (modern) layout
|
||||
cy.get("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout").should("exist");
|
||||
});
|
||||
|
||||
it("should disable compact group (modern) layout option on IRC layout and bubble layout", () => {
|
||||
const checkDisabled = () => {
|
||||
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
|
||||
cy.get(".mx_Checkbox")
|
||||
.first()
|
||||
.within(() => {
|
||||
cy.get("input[type='checkbox'][disabled]").should("exist");
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
// Click "Show advanced" link button
|
||||
cy.findByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
// Enable IRC layout
|
||||
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
|
||||
// Select the first layout
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton").first().click();
|
||||
|
||||
// Assert that the layout selected is "IRC (Experimental)"
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
|
||||
cy.findByLabelText("IRC (Experimental)").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
checkDisabled();
|
||||
|
||||
// Enable bubble layout
|
||||
cy.get(".mx_AppearanceUserSettingsTab .mx_LayoutSwitcher_RadioButtons").within(() => {
|
||||
// Select the first layout
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton").last().click();
|
||||
|
||||
// Assert that the layout selected is "IRC (Experimental)"
|
||||
cy.get(".mx_LayoutSwitcher_RadioButton_selected .mx_StyledRadioButton_enabled").within(() => {
|
||||
cy.findByLabelText("Message bubbles").should("exist");
|
||||
});
|
||||
});
|
||||
|
||||
checkDisabled();
|
||||
});
|
||||
|
||||
it("should support enabling system font", () => {
|
||||
cy.openUserSettings("Appearance");
|
||||
|
||||
// Click "Show advanced" link button
|
||||
cy.findByRole("button", { name: "Show advanced" }).click();
|
||||
|
||||
cy.get(".mx_AppearanceUserSettingsTab_Advanced").within(() => {
|
||||
// force click as checkbox size is zero
|
||||
cy.findByLabelText("Use a system font").click({ force: true });
|
||||
});
|
||||
|
||||
// Assert that the font-family value was removed
|
||||
cy.get("body").should("have.css", "font-family", '""');
|
||||
});
|
||||
});
|
||||
|
|
@ -145,7 +145,9 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
|
|||
|
||||
return (
|
||||
<div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
|
||||
<div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
|
||||
<div className="mx_SettingsTab_heading" data-testid="appearance">
|
||||
{_t("Customise your appearance")}
|
||||
</div>
|
||||
<div className="mx_SettingsTab_subsectionText">
|
||||
{_t("Appearance Settings only affect this %(brand)s session.", { brand })}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
|
|||
>
|
||||
<div
|
||||
class="mx_SettingsTab_heading"
|
||||
data-testid="appearance"
|
||||
>
|
||||
Customise your appearance
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue