Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

static-user-onboarding-steps #9799

Merged
merged 8 commits into from
Jan 2, 2023

Conversation

GoodGuyMarco
Copy link
Contributor

@GoodGuyMarco GoodGuyMarco commented Dec 19, 2022

This PR fixes the behaviour discussed here: https://element-io.atlassian.net/browse/PSB-237

The user on-boarding can be tested by adding following key-value pair to the localStorage (see https://github.com/matrix-org/matrix-react-sdk/blob/develop/cypress/e2e/user-onboarding/user-onboarding-new.ts#L33):

localStorage.setItem("mx_registration_time", "1656633601")

Checklist

  • Tests written for new code (and old code if feasible)
  • Linter and other CI checks pass
  • Sign-off given on the changes (see CONTRIBUTING.md)

Notes: User on-boarding tasks now appear in a static order.

Signed-off-by: Marco Bartelt marco.bartelt.ext@bwi.de


Here's what your changelog entry will look like:

✨ Features

  • User on-boarding tasks now appear in a static order. (#9799). Contributed by @GoodGuyMarco.

@GoodGuyMarco GoodGuyMarco requested a review from a team as a code owner December 19, 2022 15:17
@github-actions github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Dec 19, 2022
@weeman1337 weeman1337 added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Dec 20, 2022
Copy link
Contributor

@weeman1337 weeman1337 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your contribution @GoodGuyMarco

Tested on the deployment. Looks good to me 👍

Sonar is still complaining about test coverage. Can you extend the tests? You can find a detailed report here.

Design already approved it in PSB-237

@GoodGuyMarco
Copy link
Contributor Author

Thank you for your review @weeman1337 👍

Currently working on the missing unit tests and wondering why we delay rendering of the UserOnboardingList component with a timeout after the initial sync is completed (line 54-69 in UserOnboardingPage). Any ideas?

@weeman1337
Copy link
Contributor

Ping @justjanne ☝️ Do you know about why this timeout is there?

@justjanne
Copy link
Contributor

justjanne commented Dec 20, 2022

@weeman1337

NOTE: I'm on vacation, so I don't have access to my work system right now. As result, the following is going by memory, without checking against my notes from when this was added.

The specification from design was to fade the list in after fading in the header. To make sure we fade in all parts in the correct order and with correct timing, a combination of timeouts and css animations was used.

Timeouts were used in places where otherwise an interactive element might just end up invisible but interactable.

We also had the design specification to sort items based on whether they were completed or not.

Before changing timing or UX on the onboarding list, make sure to check your modifications with the design team.

@weeman1337
Copy link
Contributor

It seems that Janne is on holiday at least for this week. Will drop her a message.
The timeout is out of scope of this PR anyway I would say.

@GoodGuyMarco
Copy link
Contributor Author

I've looked into unit testing UserOnboardingPage for a couple of hours now and came to the conclusion that it is not suitable for a unit test as it requires lots of mocking. This would result in an unreadable and unmaintainable test in my honest opinion. Writing bad tests just to pass a coverage target is not a good practice. Furthermore my code changes don't even change the behaviour of this component.

Any ideas on how to proceed? @weeman1337

This is what I got so far but it runs in a timeout somehow:

describe("UserOnboardingPage", () => {
    it("should render the new user on-boarding experience", async () => {
        // First of all we need to affect the result of `showUserOnboardingPage(useCase)` which requires to mock the function `userRegisteredAfter` on the client ...
        stubClient();
        const client = MatrixClientPeg.get();
        // ... but this does not work and I don't know why.
        client.userRegisteredAfter = () => true;

        // The `useCase` argument of `showUserOnboardingPage(useCase)` needs mocking as well and I found no way how to mock the return value of:
        // `const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection");` ... so just overriding it in here, which works, but is kind of ugly.
        await SettingsStore.setValue("FTUE.useCaseSelection", null, SettingLevel.ACCOUNT, UseCase.Skip);

        // const Page = UserOnboardingPage;
        const Page = wrapInMatrixClientContext(UserOnboardingPage);
        render(<Page />);

        expect(true).toBe(true);
    });
});

@weeman1337
Copy link
Contributor

weeman1337 commented Dec 21, 2022

@GoodGuyMarco I've looked into unit testing UserOnboardingPage and came to the conclusion that it is suitable for a unit test 😉 The component contains logic that can and should be tested.

You can use this as a starting point:

`UserOnboardingPage-test.tsx`
/*
Copyright 2022 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 React from "react";
import { act, render, RenderResult } from "@testing-library/react";

import { filterConsole, stubClient } from "../../../test-utils";
import { UserOnboardingPage } from "../../../../src/components/views/user-onboarding/UserOnboardingPage";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import SdkConfig from "../../../../src/SdkConfig";

jest.mock("../../../../src/components/structures/EmbeddedPage", () => ({
    __esModule: true,
    default: jest.fn().mockImplementation(({ url }) => <div>{url}</div>),
}));

jest.mock("../../../../src/components/structures/HomePage", () => ({
    __esModule: true,
    default: jest.fn().mockImplementation(() => <div>home page</div>),
}));

describe("UserOnboardingPage", () => {
    let restoreConsole: () => void;

    const renderComponent = async (): Promise<RenderResult> => {
        const renderResult = render(<UserOnboardingPage />);
        await act(async () => {
            jest.runAllTimers();
        });
        return renderResult;
    };

    beforeAll(() => {
        restoreConsole = filterConsole(
            // unrelated for this test
            "could not update user onboarding context",
        );
    });

    beforeEach(() => {
        stubClient();
        jest.useFakeTimers();
    });

    afterEach(() => {
        jest.useRealTimers();
    });

    afterAll(() => {
        restoreConsole();
    });

    describe("when the user registered before the cutoff date", () => {
        beforeEach(() => {
            jest.spyOn(MatrixClientPeg, "userRegisteredAfter").mockReturnValue(false);
        });

        it("should render the home page", async () => {
            expect((await renderComponent()).queryByText("home page")).toBeInTheDocument();
        });
    });

    describe("when the user registered after the cutoff date", () => {
        beforeEach(() => {
            jest.spyOn(MatrixClientPeg, "userRegisteredAfter").mockReturnValue(true);
        });

        describe("and there is an explicit home page configured", () => {
            beforeEach(() => {
                jest.spyOn(SdkConfig, "get").mockReturnValue({
                    embedded_pages: {
                        home_url: "https://example.com/home",
                    },
                });
            });

            it("should render the configured page", async () => {
                expect((await renderComponent()).queryByText("https://example.com/home")).toBeInTheDocument();
            });
        });
    });
});

Copy link
Contributor

@weeman1337 weeman1337 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please re-request review once the UserOnboardingPage test is there.

@GoodGuyMarco
Copy link
Contributor Author

@weeman1337 sorry for my initial frustration with the tests and thank you for your help once again 😇

Copy link
Contributor

@weeman1337 weeman1337 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now 👍 Tested on the deployment. Works

@weeman1337 weeman1337 enabled auto-merge (squash) January 2, 2023 14:34
@weeman1337 weeman1337 merged commit 1b06b72 into matrix-org:develop Jan 2, 2023
@GoodGuyMarco GoodGuyMarco deleted the static-user-onboarding-steps branch January 2, 2023 14:39
su-ex added a commit to SchildiChat/element-desktop that referenced this pull request Jan 19, 2023
* Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)).
* Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes element-hq/element-web#24060.
* Add edit and remove actions to link in RTE ([\#9864](matrix-org/matrix-react-sdk#9864)).
* Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)).
* Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes element-hq/element-web#21855.
* Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)).
* Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)).
* Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)).
* Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)).
* Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)).
* Combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes element-hq/element-web#3977. Contributed by @grimhilt.
* Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes element-hq/element-web#24140.
* Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes element-hq/element-web#24042.
* Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)).
* Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes element-hq/element-web#23980.
* User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco.
* Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)).
* If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes element-hq/element-web#24078.
* Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes element-hq/element-web#24068.
* Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)).
* Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes element-hq/element-web#24053.
* Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)).
* Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)).
* Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)).
* Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)).
* Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes element-hq/element-web#24014.
* Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)).
* Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni.
* Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes element-hq/element-web#23661.
* Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)).
* Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes element-hq/element-web#23907.
* Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes element-hq/element-web#23899.
* Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes element-hq/element-web#23476.
* Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes element-hq/element-web#24128.
* Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes element-hq/element-web#23664.
* Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)).
* Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes element-hq/element-web#24130. Contributed by @grimhilt.
* Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das.
* Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes element-hq/element-web#24087.
* The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes element-hq/element-web#24051.
* Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes element-hq/element-web#23176.
* Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes element-hq/element-web#23716.
* Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes element-hq/element-web#24059.
* Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes element-hq/element-web#24054.
* Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes element-hq/element-web#24050.
* Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)).
* Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)).
* When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes element-hq/element-web#24052.
* Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes element-hq/element-web#23973.
* Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952.
* Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Jan 29, 2023
Changes in [1.11.20](https://github.com/vector-im/element-web/releases/tag/v1.11.20) (2023-01-20)
=================================================================================================

## 🐛 Bug Fixes
 * (Part 2) of prevent crash on older browsers (replace .at() with array.length-1)

Changes in [1.11.19](https://github.com/vector-im/element-web/releases/tag/v1.11.19) (2023-01-18)
=================================================================================================

## 🐛 Bug Fixes
 * fix crash on browsers that don't support `Array.at` ([\#9935](matrix-org/matrix-react-sdk#9935)). Contributed by @andybalaam.

Changes in [1.11.18](https://github.com/vector-im/element-web/releases/tag/v1.11.18) (2023-01-18)
=================================================================================================

## ✨ Features
 * Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)).
 * Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes #24060.
 * Add edit and remove actions to link in RTE [Labs] ([\#9864](matrix-org/matrix-react-sdk#9864)).
 * Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)).
 * Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes #21855.
 * Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)).
 * Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)).
 * Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)).
 * Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)).
 * Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)).
 * combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes #3977. Contributed by @grimhilt.
 * Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes #24140.
 * Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes #24042.
 * Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)).
 * Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes #23980.
 * User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco.
 * Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)).
 * If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes #24078.
 * Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes #24068.
 * Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)).
 * Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes #24053.
 * Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)).
 * Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)).
 * Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)).
 * Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)).
 * Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes #24014.
 * Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)).
 * Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni.
 * Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes #23661.
 * Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)).

## 🐛 Bug Fixes
 * Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes #23907.
 * Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes #23899.
 * Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes #23476.
 * Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes #24128.
 * Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes #23664.
 * Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)).
 * Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes #24130. Contributed by @grimhilt.
 * Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das.
 * Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes #24087.
 * The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes #24051.
 * Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes #23176.
 * Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes #23716.
 * Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes #24059.
 * Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes #24054.
 * Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes #24050.
 * Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)).
 * Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)).
 * When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes #24052.
 * Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes #23973.
 * Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952.
 * Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements Z-Community-PR Issue is solved by a community member's PR
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants