2598e4ea22
* Remove vm related code from element-web/src * Add and export view model code from package * Update imports * Rewrite vm tests using vitest * Add github action to run vm tests * Fix lint errors * Mvoe tests over to jest * Try fixing code coverage * Second attempt at fixing code coverage
79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
/*
|
|
* Copyright 2025 New Vector Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
import { render, screen } from "jest-matrix-react";
|
|
import { composeStories } from "@storybook/react-vite";
|
|
import React from "react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { fireEvent } from "@testing-library/dom";
|
|
|
|
import * as stories from "./AudioPlayerView.stories.tsx";
|
|
import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
|
|
import { MockViewModel } from "../../viewmodel/MockViewModel.ts";
|
|
|
|
const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
|
|
|
|
describe("AudioPlayerView", () => {
|
|
afterEach(() => {
|
|
jest.clearAllMocks();
|
|
});
|
|
|
|
it("renders the audio player in default state", () => {
|
|
const { container } = render(<Default />);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it("renders the audio player without media name", () => {
|
|
const { container } = render(<NoMediaName />);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it("renders the audio player without size", () => {
|
|
const { container } = render(<NoSize />);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
it("renders the audio player in error state", () => {
|
|
const { container } = render(<HasError />);
|
|
expect(container).toMatchSnapshot();
|
|
});
|
|
|
|
const onKeyDown = jest.fn();
|
|
const togglePlay = jest.fn();
|
|
const onSeekbarChange = jest.fn();
|
|
|
|
class AudioPlayerViewModel extends MockViewModel<AudioPlayerViewSnapshot> implements AudioPlayerViewActions {
|
|
public onKeyDown = onKeyDown;
|
|
public togglePlay = togglePlay;
|
|
public onSeekbarChange = onSeekbarChange;
|
|
}
|
|
|
|
it("should attach vm methods", async () => {
|
|
const user = userEvent.setup();
|
|
const vm = new AudioPlayerViewModel({
|
|
playbackState: "stopped",
|
|
mediaName: "Test Audio",
|
|
durationSeconds: 300,
|
|
playedSeconds: 120,
|
|
percentComplete: 30,
|
|
sizeBytes: 3500,
|
|
error: false,
|
|
});
|
|
|
|
render(<AudioPlayerView vm={vm} />);
|
|
await user.click(screen.getByRole("button", { name: "Play" }));
|
|
expect(togglePlay).toHaveBeenCalled();
|
|
|
|
// user event doesn't support change events on sliders, so we use fireEvent
|
|
fireEvent.change(screen.getByRole("slider", { name: "Audio seek bar" }), { target: { value: "50" } });
|
|
expect(onSeekbarChange).toHaveBeenCalled();
|
|
|
|
await user.type(screen.getByLabelText("Audio player"), "{arrowup}");
|
|
expect(onKeyDown).toHaveBeenCalledWith(expect.objectContaining({ key: "ArrowUp" }));
|
|
});
|
|
});
|