Jsdom: jsdom은 비디오 및 오디오 요소를 지원합니까?

jsdom 은(는) 미디어 로드 또는 재생 작업을 지원하지 않습니다. 해결 방법으로 테스트 설정에 몇 가지 스텁을 추가할 수 있습니다.

window.HTMLMediaElement.prototype.load = () => { /* do nothing */ };
window.HTMLMediaElement.prototype.play = () => { /* do nothing */ };
window.HTMLMediaElement.prototype.pause = () => { /* do nothing */ };
window.HTMLMediaElement.prototype.addTextTrack = () => { /* do nothing */ };

이것이 내가 필요한 것입니다. HTMLMediaElements 로드/가져오기를 시뮬레이션하는 방법입니다. 이렇게 하면 실제 브라우저처럼 오디오와 비디오를 미리 로드하지 않겠죠?

일반적으로 이러한 테스트에는 가져오기가 필요하지 않습니다. 이러한 스텁은 jsdom 예외를 억제하고 비디오 요소(예: videoElement.dispatchEvent(new window.Event("loading")); )에서 수동으로 전달된 이벤트로 논리를 테스트할 수 있습니다.

알겠습니다. 도움을 주셔서 감사합니다. 마침내 테스트를 수정했습니다. 👍

이것은 시작하는 데 도움이 되었지만 제 경우에는 특정 조건이 재생에 올바르게 영향을 미치는지 테스트하고 싶습니다. 대체 play 및 pause 함수를 만들고 미디어 요소의 paused 변수를 설정하려고 하지만 해당 변수에 대한 getter만 있다는 오류가 발생합니다. 이것은 그것을 조롱하는 것을 약간 어렵게 만듭니다.

나는 JS에 다소 익숙하지 않습니다. 이와 같은 읽기 전용 변수를 조롱하는 방법이 있습니까?

@BenBergman 당신은 할 수 있습니다 :

Object.defineProperty(HTMLMediaElement.prototype, "paused", {
  get() {
    // Your own getter, where `this` refers to the HTMLMediaElement.
  }
});

훌륭 해요, 고맙습니다! 후손을 위해 내 getter는 기본값을 설명하기 위해 다음과 같이 보입니다.

get() {
    if (this.mockPaused === undefined) {
        return true;
    }
    return this.mockPaused;
}

다음과 같이 더 간단하게 만들 수 있습니다.

Object.defineProperty(mediaTag, "paused", {
  writable: true,
  value: true,
});

그런 다음 테스트에서 mediaTag.paused = true 또는 mediaTag.paused = false 를 변경하십시오.

이 접근 방식의 이점은 TypeScript를 사용하는 경우 유형이 안전하다는 것입니다. (mediaTag as any).mockPaused = true 와 같이 모의 속성을 설정하지 마십시오.

더 좋습니다. 감사합니다!

비디오 재생을 시뮬레이션하려면 어떻게 해야 합니까?
재생 및 로드를 스텁했지만 비디오 재생을 시작하는 방법을 모르겠습니다(또는 재생 중인 것으로 생각하면 자주 발생하는 일만 필요합니다).
Object.defineProperty(HTMLMediaElement.prototype, "play", { get() { document.getElementsByTagName('video')[0].dispatchEvent(new Event('play')); } });

jsdom은 미디어 로드 또는 재생 작업을 지원하지 않습니다. 해결 방법으로 테스트 설정에 몇 가지 스텁을 추가할 수 있습니다.

해결 방법에 감사드립니다. 그러나 이것이 기본적으로 지원되지 않는 이유를 여쭤봐도 될까요?

아직 jsdom에서 비디오 또는 오디오 플레이어를 구현한 사람은 없습니다.

다음은 테스트에 필요한 일부 이벤트를 보내는 play 및 pause 메서드( loadedmetadata , play , pause ):

// Jest's setup file, setup.js

// Mock data and helper methods
global.window.HTMLMediaElement.prototype._mock = {
  paused: true,
  duration: NaN,
  _loaded: false,
   // Emulates the audio file loading
  _load: function audioInit(audio) {
    // Note: we could actually load the file from this.src and get real duration
    // and other metadata.
    // See for example: https://github.com/59naga/mock-audio-element/blob/master/src/index.js
    // For now, the 'duration' and other metadata has to be set manually in test code.
    audio.dispatchEvent(new Event('loadedmetadata'))
    audio.dispatchEvent(new Event('canplaythrough'))
  },
  // Reset audio object mock data to the initial state
  _resetMock: function resetMock(audio) {
    audio._mock = Object.assign(
      {},
      global.window.HTMLMediaElement.prototype._mock,
    )
  },
}

// Get "paused" value, it is automatically set to true / false when we play / pause the audio.
Object.defineProperty(global.window.HTMLMediaElement.prototype, 'paused', {
  get() {
    return this._mock.paused
  },
})

// Get and set audio duration
Object.defineProperty(global.window.HTMLMediaElement.prototype, 'duration', {
  get() {
    return this._mock.duration
  },
  set(value) {
    // Reset the mock state to initial (paused) when we set the duration.
    this._mock._resetMock(this)
    this._mock.duration = value
  },
})

// Start the playback.
global.window.HTMLMediaElement.prototype.play = function playMock() {
  if (!this._mock._loaded) {
    // emulate the audio file load and metadata initialization
    this._mock._load(this)
  }
  this._mock.paused = false
  this.dispatchEvent(new Event('play'))
  // Note: we could
}

// Pause the playback
global.window.HTMLMediaElement.prototype.pause = function pauseMock() {
  this._mock.paused = true
  this.dispatchEvent(new Event('pause'))
}

그리고 테스트의 예( audio.duration 를 수동으로 설정해야 합니다.

  // Test
  it('creates audio player', async () => {
    // `page` is a wrapper for a page being tested, created in beforeEach
    let player = page.player()

    // Useful to see which properties are defined where.
    // console.log(Object.getOwnPropertyDescriptors(HTMLMediaElement.prototype))
    // console.log(Object.getOwnPropertyDescriptors(HTMLMediaElement))
    // console.log(Object.getOwnPropertyDescriptors(audio))

    let audio = player.find('audio').element as HTMLAudioElement

    let audioEventReceived = false
    audio.addEventListener('play', () => {
      audioEventReceived = true
    })

    // @ts-ignore: error TS2540: Cannot assign to 'duration' because it is a read-only property.
    audio.duration = 300

    expect(audio.paused).toBe(true)
    expect(audio.duration).toBe(300)
    expect(audio.currentTime).toBe(0)

    audio.play()
    audio.currentTime += 30

    expect(audioEventReceived).toBe(true)

    expect(audio.paused).toBe(false)
    expect(audio.duration).toBe(300)
    expect(audio.currentTime).toBe(30.02)
  })

이러한 해결 방법을 사용하는 것을 고려했지만 재생 기능과 같은 브라우저를 다시 구현하는 대신 puppeteer 를 사용하기로 결정했습니다. 즉, 테스트를 수행할 실제 브라우저를 가져왔습니다. 이것은 내 설정입니다.

src/reviewer.tests.ts

jest.disableAutomock()
// Use this in a test to pause its execution, allowing you to open the chrome console
// and while keeping the express server running: chrome://inspect/#devices
// jest.setTimeout(2000000000);
// debugger; await new Promise(function(resolve) {});

test('renders test site', async function() {
    let self: any = global;
    let page = self.page;
    let address = process.env.SERVER_ADDRESS;
    console.log(`The server address is '${address}'.`);
    await page.goto(`${address}/single_audio_file.html`);
    await page.waitForSelector('[data-attibute]');

    let is_paused = await page.evaluate(() => {
        let audio = document.getElementById('silence1.mp3') as HTMLAudioElement;
        return audio.paused;
    });
    expect(is_paused).toEqual(true);
});

testfiles/single_audio_file.html

<html>
    <head>
        <title>main webview</title>
        <script src="importsomething.js"></script>
    </head>
    <body>
    <div id="qa">
        <audio id="silence1.mp3" src="silence1.mp3" data-attibute="some" controls></audio>
        <script type="text/javascript">
            // doSomething();
        </script>
    </div>
    </body>
</html>

module.exports = async () => {
    global.server.close();
};

const express = require('express');

module.exports = async () => {
    let server;
    const app = express();

    await new Promise(function(resolve) {
        server = app.listen(0, "127.0.0.1", function() {
            let address = server.address();
            process.env.SERVER_ADDRESS = `http://${address.address}:${address.port}`;
            console.log(`Running static file server on '${process.env.SERVER_ADDRESS}'...`);
            resolve();
        });
    });

    global.server = server;
    app.get('/favicon.ico', (req, res) => res.sendStatus(200));
    app.use(express.static('./testfiles'));
};

const puppeteer = require('puppeteer');

// const TestEnvironment = require('jest-environment-node'); // for server node apps
const TestEnvironment = require('jest-environment-jsdom'); // for browser js apps

class ExpressEnvironment extends TestEnvironment {
    constructor(config, context) {
        let cloneconfig = Object.assign({}, config);
        cloneconfig.testURL = process.env.SERVER_ADDRESS;
        super(cloneconfig, context);
    }

    async setup() {
        await super.setup();
        let browser = await puppeteer.launch({
            // headless: false, // show the Chrome window
            // slowMo: 250, // slow things down by 250 ms
            ignoreDefaultArgs: [
                "--mute-audio",
            ],
            args: [
                "--autoplay-policy=no-user-gesture-required",
            ],
        });
        let [page] = await browser.pages(); // reuses/takes the default blank page
        // let page = await this.global.browser.newPage();

        page.on('console', async msg => console[msg._type](
            ...await Promise.all(msg.args().map(arg => arg.jsonValue()))
        ));
        this.global.page = page;
        this.global.browser = browser;
        this.global.jsdom = this.dom;
    }

    async teardown() {
        await this.global.browser.close();
        await super.teardown();
    }

    runScript(script) {
        return super.runScript(script);
    }
}

module.exports = ExpressEnvironment;

{
  "compilerOptions": {
    "target": "es2017"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "src/**/*.test.ts"
  ]
}

{
  "scripts": {
    "test": "jest",
  },
  "jest": {
    "testEnvironment": "./testEnvironment.js",
    "globalSetup": "./globalSetup.js",
    "globalTeardown": "./globalTeardown.js",
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    }
  },
  "jshintConfig": {
    "esversion": 8
  },
  "dependencies": {
    "typescript": "^3.7.3"
  },
  "devDependencies": {
    "@types/express": "^4.17.6",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.11.1",
    "@types/puppeteer": "^2.0.1",
    "express": "^4.17.1",
    "jest": "^25.3.0",
    "puppeteer": "^3.0.0",
    "ts-jest": "^25.3.1"
  }
}