Voice Broadcast playback UI (#9362)
* Implement Voice Broadcast UI * Update src/voice-broadcast/models/VoiceBroadcastPlayback.ts Co-authored-by: Travis Ralston <travisr@matrix.org> Co-authored-by: Travis Ralston <travisr@matrix.org>
This commit is contained in:
parent
3a39dfc851
commit
49d9e75235
22 changed files with 1064 additions and 6 deletions
|
@ -0,0 +1,45 @@
|
|||
/*
|
||||
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();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,55 @@
|
|||
// 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>
|
||||
`;
|
Loading…
Add table
Add a link
Reference in a new issue