<!DOCTYPE html>
<html>
    <head>
        <script src=../../media-resources/video-test.js></script>
        <script src=../../media-resources/media-file.js></script>
        <script src=../../media-resources/trackmenu-test.js></script>
        <script src=../../media-resources/media-controls.js></script>
        <script src=../../media-resources/controls/controls-test-helpers.js></script>
        <script>

            const tester = new ControlsTest("non-existent-media-file", "error")
                .whenReady(setup)
                .start();
            let retryCount = 0;
            const maximumRetries = 10;

            function setup()
            {
                findMediaElement();

                var currentState = tester.currentState;
                tester.test("We are using the apple idiom")
                    .value(currentState.idiom)
                    .isEqualTo("apple");

                tester.resetEventTrigger("canplaythrough")
                    .whenReady(runTestsWithHiddenMenu)
                    .media.src = "http://127.0.0.1:8000/media/resources/hls/audio-describes-video.m3u8";
                tester.logBlankLine();
            }

            function runTestsWithHiddenMenu()
            {
                tester.startNewSection("Test when track menu is hidden");
                const statusState = tester.stateForControlsElement("Track Menu");

                tester.test("Menu name is 'Track Menu'")
                    .value(statusState.name)
                    .isEqualTo("Track Menu");

                tester.test("Menu does not exist")
                    .value(statusState.element)
                    .isEqualTo(null);

                // Show the track menu.
                internals.suspendAnimations();
                hideTrackMenu();
                showTrackMenu();
                requestAnimationFrame(runTestsWithVisibleMenu);
            }

            function runTestsWithVisibleMenu()
            {
                const menu = getTrackListElement();
                if (menu === null || menu.firstChild === null) {
                    if (++retryCount > maximumRetries) {
                        tester.logFailure(`Track menu has not been configured after ${retryCount} retries`);
                        tester.end();
                        return;
                    }

                    requestAnimationFrame(runTestsWithVisibleMenu);
                }
                
                tester.startNewSection("Test with visible menu");
                const statusState = tester.stateForControlsElement("Track Menu", true);
                
                tester.test("Menu name is 'Track Menu'")
                    .value(statusState.name)
                    .isEqualTo("Track Menu");

                tester.test("Menu exists")
                    .value(menu)
                    .isNotEqualTo(null);

                tester.test("id is 'audioAndTextTrackMenu'")
                    .value(menu.id)
                    .isEqualTo("audioAndTextTrackMenu");

                const menuList = menu.firstChild.children[1];
                tester.test("Menu element contains <ul>")
                    .value(menuList.tagName)
                    .isEqualTo("UL");

                const menuItem1 = menuList.children[0];
                tester.test("DVS audio menu item name contains track name from manifest")
                    .value(menuItem1.textContent)
                    .contains("English DVS");

                tester.test("DVS menu item name has been augmented")
                    .value(menuItem1.textContent)
                    .isNotEqualTo("English DVS");

                const menuItem2 = menuList.children[1];
                tester.test("Standard audio menu item name is the track name from manifest")
                    .value(menuItem2.textContent)
                    .isEqualTo("English Sound");

                tester.end();
            }

        </script>
    </head>
    <body>
        <p>This tests the track menu when a file has a descriptive audio track.</p>
        <p>This test only runs in DRT!</p>
        <video width="500" height="300" controls> </video>
    </body>
</html>