imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace Icon with webpack loaded SVG (#9464)

Browse source
This commit is contained in:
Michael Weimann 2022-10-20 10:04:14 +02:00 • committed by GitHub
parent 6fe8744e4d
commit 3c9ba3e69f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 298 additions and 564 deletions
Download patch file Download diff file Expand all files Collapse all files

47
test/components/atoms/Icon-test.tsx
View file

@ -1,47 +0,0 @@
/*
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 { Icon, IconColour, IconSize, IconType } from "../../../src/components/atoms/Icon";
describe("Icon", () => {
it.each([
IconColour.Accent,
IconColour.LiveBadge,
])("should render the colour %s", (colour: IconColour) => {
const { container } = render(
<Icon
colour={colour}
type={IconType.Live}
/>,
);
expect(container).toMatchSnapshot();
});
it.each([
IconSize.S16,
])("should render the size %s", (size: IconSize) => {
const { container } = render(
<Icon
size={size}
type={IconType.Live}
/>,
);
expect(container).toMatchSnapshot();
});
});

34
test/components/atoms/__snapshots__/Icon-test.tsx.snap
View file

@ -1,34 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon should render the colour accent 1`] = `
<div>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_accent"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
`;
exports[`Icon should render the colour live-badge 1`] = `
<div>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
`;
exports[`Icon should render the size 16 1`] = `
<div>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_accent"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
`;

45
test/voice-broadcast/components/atoms/PlaybackControlButton-test.tsx
View file

@ -1,45 +0,0 @@
/*
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, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { PlaybackControlButton, VoiceBroadcastPlaybackState } from "../../../../src/voice-broadcast";
describe("PlaybackControlButton", () => {
let onClick: () => void;
beforeEach(() => {
onClick = jest.fn();
});
it.each([
[VoiceBroadcastPlaybackState.Playing],
[VoiceBroadcastPlaybackState.Paused],
[VoiceBroadcastPlaybackState.Stopped],
])("should render state »%s« as expected", (state: VoiceBroadcastPlaybackState) => {
const result = render(<PlaybackControlButton state={state} onClick={onClick} />);
expect(result.container).toMatchSnapshot();
});
it("should call onClick on click", async () => {
render(<PlaybackControlButton state={VoiceBroadcastPlaybackState.Playing} onClick={onClick} />);
const button = screen.getByLabelText("pause voice broadcast");
await userEvent.click(button);
expect(onClick).toHaveBeenCalled();
});
});

45
test/voice-broadcast/components/atoms/StopButton-test.tsx
View file

@ -1,45 +0,0 @@
/*
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, RenderResult } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { StopButton } from "../../../../src/voice-broadcast";
describe("StopButton", () => {
let result: RenderResult;
let onClick: () => {};
beforeEach(() => {
onClick = jest.fn();
result = render(<StopButton onClick={onClick} />);
});
it("should render as expected", () => {
expect(result.container).toMatchSnapshot();
});
describe("when clicking it", () => {
beforeEach(async () => {
await userEvent.click(result.getByLabelText("stop voice broadcast"));
});
it("should invoke the callback", () => {
expect(onClick).toHaveBeenCalled();
});
});
});

55
test/voice-broadcast/components/atoms/VoiceBroadcastControl-test.tsx Normal file
View file

@ -0,0 +1,55 @@
/*
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, RenderResult, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { VoiceBroadcastControl } from "../../../../src/voice-broadcast";
import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
describe("VoiceBroadcastControl", () => {
let result: RenderResult;
let onClick: () => void;
beforeEach(() => {
onClick = jest.fn();
});
describe("when rendering it", () => {
beforeEach(() => {
result = render(<VoiceBroadcastControl
onClick={onClick}
label="test label"
icon={StopIcon}
/>);
});
it("should render as expected", () => {
expect(result.container).toMatchSnapshot();
});
describe("when clicking it", () => {
beforeEach(async () => {
await userEvent.click(screen.getByLabelText("test label"));
});
it("should call onClick", () => {
expect(onClick).toHaveBeenCalled();
});
});
});
});

7
test/voice-broadcast/components/atoms/__snapshots__/LiveBadge-test.tsx.snap
View file

@ -5,11 +5,8 @@ exports[`LiveBadge should render the expected HTML 1`] = `
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>

55
test/voice-broadcast/components/atoms/__snapshots__/PlaybackControlButton-test.tsx.snap
View file

@ -1,55 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PlaybackControlButton should render state »0« as expected 1`] = `
<div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;
exports[`PlaybackControlButton should render state »1« as expected 1`] = `
<div>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;
exports[`PlaybackControlButton should render state »2« as expected 1`] = `
<div>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;

19
test/voice-broadcast/components/atoms/__snapshots__/StopButton-test.tsx.snap
View file

@ -1,19 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`StopButton should render as expected 1`] = `
<div>
<div
aria-label="stop voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
</div>
</div>
`;

16
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastControl-test.tsx.snap Normal file
View file

@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastControl when rendering it should render as expected 1`] = `
<div>
<div
aria-label="test label"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
</div>
`;

28
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
View file

@ -22,11 +22,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
test user
@ -35,11 +32,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
@ -47,11 +41,8 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
@ -81,11 +72,8 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
test user

26
test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
View file

@ -64,9 +64,6 @@ describe("VoiceBroadcastPlaybackBody", () => {
describe("when rendering a buffering voice broadcast", () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Buffering);
});
beforeEach(() => {
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
@ -75,18 +72,15 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
});
describe("when rendering a broadcast", () => {
describe(`when rendering a ${VoiceBroadcastPlaybackState.Stopped} broadcast`, () => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(VoiceBroadcastPlaybackState.Stopped);
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
});
describe("and clicking the play button", () => {
beforeEach(async () => {
await userEvent.click(renderResult.getByLabelText("resume voice broadcast"));
await userEvent.click(renderResult.getByLabelText("play voice broadcast"));
});
it("should toggle the recording", () => {
@ -94,4 +88,18 @@ describe("VoiceBroadcastPlaybackBody", () => {
});
});
});
describe.each([
VoiceBroadcastPlaybackState.Paused,
VoiceBroadcastPlaybackState.Playing,
])("when rendering a %s broadcast", (playbackState: VoiceBroadcastPlaybackState) => {
beforeEach(() => {
mocked(playback.getState).mockReturnValue(playbackState);
renderResult = render(<VoiceBroadcastPlaybackBody playback={playback} />);
});
it("should render as expected", () => {
expect(renderResult.container).toMatchSnapshot();
});
});
});

2
test/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip-test.tsx
View file

@ -69,7 +69,7 @@ describe("VoiceBroadcastRecordingPip", () => {
describe("and clicking the stop button", () => {
beforeEach(async () => {
await userEvent.click(screen.getByLabelText("stop voice broadcast"));
await userEvent.click(screen.getByLabelText("Stop Recording"));
// modal rendering has some weird sleeps
await sleep(100);
});

121
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as expected 1`] = `
exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastPlaybackBody"
@ -25,11 +25,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
@ -38,11 +35,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
@ -50,11 +44,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
@ -64,15 +55,80 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
>
<div
aria-label="resume voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
</div>
</div>
</div>
</div>
`;
exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
<div>
<div
class="mx_VoiceBroadcastPlaybackBody"
>
<div
class="mx_VoiceBroadcastHeader"
>
<div
data-testid="room-avatar"
>
room avatar:
My room
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
<div
class="mx_VoiceBroadcastPlaybackBody_controls"
>
<div
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
/>
</div>
</div>
@ -105,11 +161,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
@ -118,11 +171,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
@ -130,11 +180,8 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>

14
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
View file

@ -25,11 +25,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
@ -39,11 +36,8 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>

25
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
View file

@ -25,11 +25,8 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
<span>
@user:example.com
@ -39,11 +36,8 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
<div
class="mx_LiveBadge"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_live-badge"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
@ -55,16 +49,13 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
class="mx_VoiceBroadcastRecordingPip_controls"
>
<div
aria-label="stop voice broadcast"
class="mx_AccessibleButton mx_BroadcastPlaybackControlButton"
aria-label="Stop Recording"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
<div
class="mx_Icon mx_Icon_16"
/>
</div>
</div>