Add snapshot test
This commit is contained in:
Johannes Marbach
parent
d0de2a6851
commit
c63daf62ed
2 changed files with 244 additions and 1 deletions
|
|
@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { render } from "@testing-library/react";
|
||||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||||
import { Room } from "matrix-js-sdk/src/models/room";
|
import { Room } from "matrix-js-sdk/src/models/room";
|
||||||
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
|
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
|
||||||
|
|
@ -22,8 +24,17 @@ import { IHierarchyRoom } from "matrix-js-sdk/src/@types/spaces";
|
||||||
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
|
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
|
||||||
import { mkStubRoom, stubClient } from "../../test-utils";
|
import { mkStubRoom, stubClient } from "../../test-utils";
|
||||||
import dispatcher from "../../../src/dispatcher/dispatcher";
|
import dispatcher from "../../../src/dispatcher/dispatcher";
|
||||||
import { showRoom, toLocalRoom } from "../../../src/components/structures/SpaceHierarchy";
|
import { HierarchyLevel, showRoom, toLocalRoom } from "../../../src/components/structures/SpaceHierarchy";
|
||||||
import { Action } from "../../../src/dispatcher/actions";
|
import { Action } from "../../../src/dispatcher/actions";
|
||||||
|
import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
|
||||||
|
import DMRoomMap from "../../../src/utils/DMRoomMap";
|
||||||
|
|
||||||
|
// Fake random strings to give a predictable snapshot for checkbox IDs
|
||||||
|
jest.mock("matrix-js-sdk/src/randomstring", () => {
|
||||||
|
return {
|
||||||
|
randomString: () => "abdefghi",
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
describe("SpaceHierarchy", () => {
|
describe("SpaceHierarchy", () => {
|
||||||
describe("showRoom", () => {
|
describe("showRoom", () => {
|
||||||
|
|
@ -125,4 +136,77 @@ describe("SpaceHierarchy", () => {
|
||||||
expect(localRoomV3.room_id).toEqual(roomV3.roomId);
|
expect(localRoomV3.room_id).toEqual(roomV3.roomId);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("<HierarchyLevel />", () => {
|
||||||
|
let client: MatrixClient;
|
||||||
|
let dmRoomMap: DMRoomMap;
|
||||||
|
|
||||||
|
let root: Room;
|
||||||
|
let room1: Room;
|
||||||
|
let room2: Room;
|
||||||
|
|
||||||
|
let hierarchyRoot: IHierarchyRoom
|
||||||
|
let hierarchyRoom1: IHierarchyRoom
|
||||||
|
let hierarchyRoom2: IHierarchyRoom
|
||||||
|
|
||||||
|
let roomHierarchy: RoomHierarchy;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
stubClient();
|
||||||
|
client = MatrixClientPeg.get();
|
||||||
|
|
||||||
|
dmRoomMap = {
|
||||||
|
getUserIdForRoomId: jest.fn()
|
||||||
|
} as unknown as DMRoomMap;
|
||||||
|
jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
|
||||||
|
|
||||||
|
root = mkStubRoom("room-id-1", "Room 1", client);
|
||||||
|
room1 = mkStubRoom("room-id-2", "Room 2", client);
|
||||||
|
room2 = mkStubRoom("room-id-3", "Room 3", client);
|
||||||
|
|
||||||
|
hierarchyRoot = {
|
||||||
|
room_id: root.roomId,
|
||||||
|
num_joined_members: 1,
|
||||||
|
children_state: [{
|
||||||
|
state_key: room1.roomId,
|
||||||
|
content: { order: "1" }
|
||||||
|
}, {
|
||||||
|
state_key: room2.roomId,
|
||||||
|
content: { order: "2" }
|
||||||
|
}]
|
||||||
|
} as IHierarchyRoom
|
||||||
|
hierarchyRoom1 = { room_id: room1.roomId, num_joined_members: 2 } as IHierarchyRoom
|
||||||
|
hierarchyRoom2 = { room_id: root.roomId, num_joined_members: 3 } as IHierarchyRoom
|
||||||
|
|
||||||
|
roomHierarchy = {
|
||||||
|
roomMap: new Map([
|
||||||
|
[root.roomId, hierarchyRoot],
|
||||||
|
[room1.roomId, hierarchyRoom1],
|
||||||
|
[room2.roomId, hierarchyRoom2],
|
||||||
|
]),
|
||||||
|
isSuggested: jest.fn()
|
||||||
|
} as unknown as RoomHierarchy;
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders", () => {
|
||||||
|
const defaultProps = {
|
||||||
|
root: hierarchyRoot,
|
||||||
|
roomSet: new Set([hierarchyRoom1, hierarchyRoom2]),
|
||||||
|
hierarchy: roomHierarchy,
|
||||||
|
parents: new Set<string>(),
|
||||||
|
selectedMap: new Map<string, Set<string>>(),
|
||||||
|
onViewRoomClick: jest.fn(),
|
||||||
|
onJoinRoomClick: jest.fn(),
|
||||||
|
onToggleClick: jest.fn(),
|
||||||
|
};
|
||||||
|
const getComponent = (props = {}): React.ReactElement => (
|
||||||
|
<MatrixClientContext.Provider value={client}>
|
||||||
|
<HierarchyLevel {...defaultProps} {...props} />;
|
||||||
|
</MatrixClientContext.Provider>
|
||||||
|
);
|
||||||
|
|
||||||
|
const { container } = render(getComponent());
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`SpaceHierarchy <HierarchyLevel /> renders 1`] = `
|
||||||
|
<div>
|
||||||
|
<li
|
||||||
|
class="mx_SpaceHierarchy_roomTileWrapper"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_avatar"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
class="mx_BaseAvatar mx_BaseAvatar_image"
|
||||||
|
data-testid="avatar-img"
|
||||||
|
src="http://this.is.a.url/avatar.url/room.png"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_name"
|
||||||
|
>
|
||||||
|
Unnamed Room
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_joined"
|
||||||
|
>
|
||||||
|
Joined
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_info"
|
||||||
|
>
|
||||||
|
2 members
|
||||||
|
·
|
||||||
|
<span
|
||||||
|
dir="auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_actions"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="checkbox_abdefghi"
|
||||||
|
tabindex="-1"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="checkbox_abdefghi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Checkbox_background"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Checkbox_checkmark"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="mx_SpaceHierarchy_roomTileWrapper"
|
||||||
|
role="treeitem"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_AccessibleButton mx_SpaceHierarchy_roomTile"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_avatar"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
class="mx_BaseAvatar mx_BaseAvatar_image"
|
||||||
|
data-testid="avatar-img"
|
||||||
|
src="http://this.is.a.url/avatar.url/room.png"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_name"
|
||||||
|
>
|
||||||
|
Unnamed Room
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_joined"
|
||||||
|
>
|
||||||
|
Joined
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_roomTile_info"
|
||||||
|
>
|
||||||
|
3 members
|
||||||
|
·
|
||||||
|
<span
|
||||||
|
dir="auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="mx_SpaceHierarchy_actions"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
|
||||||
|
role="button"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
View
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
id="checkbox_abdefghi"
|
||||||
|
tabindex="-1"
|
||||||
|
type="checkbox"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
for="checkbox_abdefghi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Checkbox_background"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_Checkbox_checkmark"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
;
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
Loading…
Reference in a new issue