Consolidate public room search experience (#9605)
This commit is contained in:
Germain
GitHub
parent
041bb46284
commit
40cbee60db
18 changed files with 388 additions and 1348 deletions
|
|
@ -0,0 +1,69 @@
|
|||
/*
|
||||
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 { render } from "@testing-library/react";
|
||||
import { IPublicRoomsChunkRoom } from "matrix-js-sdk/src/client";
|
||||
|
||||
import { PublicRoomResultDetails } from "../../../../../src/components/views/dialogs/spotlight/PublicRoomResultDetails";
|
||||
|
||||
describe("PublicRoomResultDetails", () => {
|
||||
it("renders", () => {
|
||||
const { asFragment } = render(<PublicRoomResultDetails
|
||||
room={{
|
||||
room_id: "room-id",
|
||||
name: "hello?",
|
||||
canonical_alias: "canonical-alias",
|
||||
world_readable: true,
|
||||
guest_can_join: false,
|
||||
num_joined_members: 666,
|
||||
}}
|
||||
labelId="label-id"
|
||||
descriptionId="description-id"
|
||||
detailsId="details-id"
|
||||
/>);
|
||||
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it.each([
|
||||
{ canonical_alias: "canonical-alias" },
|
||||
{ aliases: ["alias-from-aliases"] },
|
||||
{ name: "name over alias", canonical_alias: "canonical-alias" },
|
||||
{
|
||||
name: "with an overly long name that will be truncated for sure, you can't say anything about it",
|
||||
topic: "with a topic!",
|
||||
},
|
||||
{ topic: "Very long topic " + new Array(1337).join("a") },
|
||||
])("Public room results", (partialPublicRoomChunk: Partial<IPublicRoomsChunkRoom>) => {
|
||||
const roomChunk: IPublicRoomsChunkRoom = {
|
||||
room_id: "room-id",
|
||||
world_readable: true,
|
||||
guest_can_join: false,
|
||||
num_joined_members: 666,
|
||||
...partialPublicRoomChunk,
|
||||
};
|
||||
|
||||
const { asFragment } = render(<PublicRoomResultDetails
|
||||
room={roomChunk}
|
||||
labelId="label-id"
|
||||
descriptionId="description-id"
|
||||
detailsId="details-id"
|
||||
/>);
|
||||
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PublicRoomResultDetails Public room results 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
canonical-alias
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
canonical-alias
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PublicRoomResultDetails Public room results 2`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
alias-from-aliases
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
room-id
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PublicRoomResultDetails Public room results 3`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
name over alias
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
canonical-alias
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PublicRoomResultDetails Public room results 4`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
with an overly long name that will be truncated for sure, you can't say anything...
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
room-id
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
·
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomTopic"
|
||||
>
|
||||
with a topic!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PublicRoomResultDetails Public room results 5`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
Unnamed room
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
room-id
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
·
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomTopic"
|
||||
>
|
||||
Very long topic aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PublicRoomResultDetails renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomHeader"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomName"
|
||||
id="label-id"
|
||||
>
|
||||
hello?
|
||||
</span>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomAlias"
|
||||
id="description-id"
|
||||
>
|
||||
canonical-alias
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_SpotlightDialog_result_publicRoomDescription"
|
||||
id="details-id"
|
||||
>
|
||||
<span
|
||||
class="mx_SpotlightDialog_result_publicRoomMemberCount"
|
||||
>
|
||||
666 Members
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue