Feature - Prevents multiple audio/video attachments from being played at the same time (#24717)

app/javascript/mastodon/features/__tests__/toggle-play.jsx

@@ -0,0 +1,80 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import { render, fireEvent } from '@testing-library/react';
+
+class Media extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      paused: props.paused || false,
+    };
+  }
+
+  handleMediaClick = () => {
+    const { onClick } = this.props;
+
+    this.setState(prevState => ({
+      paused: !prevState.paused,
+    }));
+
+    if (typeof onClick === 'function') {
+      onClick();
+    }
+
+    const { title } = this.props;
+    const mediaElements = document.querySelectorAll(`div[title="${title}"]`);
+
+    setTimeout(() => {
+      mediaElements.forEach(element => {
+        if (element !== this && !element.classList.contains('paused')) {
+          element.click();
+        }
+      });
+    }, 0);
+  };
+
+  render() {
+    const { title } = this.props;
+    const { paused } = this.state;
+
+    return (
+      <button title={title} onClick={this.handleMediaClick}>
+        Media Component - {paused ? 'Paused' : 'Playing'}
+      </button>
+    );
+  }
+
+}
+
+Media.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  paused: PropTypes.bool,
+};
+
+describe('Media attachments test', () => {
+  let currentMedia = null;
+  const togglePlayMock = jest.fn();
+
+  it('plays a new media file and pauses others that were playing', () => {
+    const container = render(
+      <div>
+        <Media title='firstMedia' paused onClick={togglePlayMock} />
+        <Media title='secondMedia' paused onClick={togglePlayMock} />
+      </div>,
+    );
+
+    fireEvent.click(container.getByTitle('firstMedia'));
+    expect(togglePlayMock).toHaveBeenCalledTimes(1);
+    currentMedia = container.getByTitle('firstMedia');
+    expect(currentMedia.textContent).toMatch(/Playing/);
+
+    fireEvent.click(container.getByTitle('secondMedia'));
+    expect(togglePlayMock).toHaveBeenCalledTimes(2);
+    currentMedia = container.getByTitle('secondMedia');
+    expect(currentMedia.textContent).toMatch(/Playing/);
+  });
+});