"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const experimental_ct_react_1 = require("@playwright/experimental-ct-react");
const DNDAnswerContainer_story_1 = require("../stories/exam/DNDAnswerContainer.story");
const utils_1 = require("../utils/utils");
experimental_ct_react_1.test.describe.configure({ mode: 'serial' });
experimental_ct_react_1.test.describe('DNDAnswerContainer', () => {
    let masteredExam;
    experimental_ct_react_1.test.beforeAll(async () => {
        masteredExam = await (0, utils_1.setupMasteredExam)();
    });
    for (const answerMediaType of ['text', 'image']) {
        (0, experimental_ct_react_1.test)(`Connect - basic drag and drop functionality for ${answerMediaType} answers`, async ({ mount }) => {
            const component = await mount(react_1.default.createElement(DNDAnswerContainer_story_1.DNDAnswerContainerStory, { masteredExam: masteredExam, answerMediaType: answerMediaType }));
            const { answerContainer, answerOptionsLocator, firstOptionLocator, secondOptionLocator, firstAnswerContent, secondAnswerContent } = await setupAnswerContext(component, answerMediaType);
            await experimental_ct_react_1.test.step('Image answers are not zoomable links in answer options', async () => {
                if (answerMediaType === 'image') {
                    await (0, experimental_ct_react_1.expect)(firstOptionLocator.locator('.e-zoomable')).toHaveCount(0);
                    await (0, experimental_ct_react_1.expect)(secondOptionLocator.locator('.e-zoomable')).toHaveCount(0);
                }
            });
            await experimental_ct_react_1.test.step('Drag first answer to answer container', async () => {
                const draggableLocator = firstOptionLocator.locator('.drag-handle');
                await draggableLocator.dragTo(answerContainer);
                await assertContentMatches(answerContainer, firstAnswerContent, answerMediaType);
                await assertContentDoesNotMatch(answerOptionsLocator, firstAnswerContent, answerMediaType);
                await assertContentMatches(answerOptionsLocator, secondAnswerContent, answerMediaType);
            });
            await experimental_ct_react_1.test.step('Replace first answer with second answer in answer container', async () => {
                const draggableLocator = secondOptionLocator.locator('.drag-handle');
                await draggableLocator.dragTo(answerContainer);
                await assertContentMatches(answerContainer, secondAnswerContent, answerMediaType);
                await assertContentDoesNotMatch(answerContainer, firstAnswerContent, answerMediaType);
                await assertContentMatches(answerOptionsLocator, firstAnswerContent, answerMediaType);
            });
            await experimental_ct_react_1.test.step('Drag second answer back to options', async () => {
                const draggableLocator = answerContainer.locator('.drag-handle');
                await draggableLocator.dragTo(answerOptionsLocator);
                await (0, experimental_ct_react_1.expect)(answerContainer).toContainText('Ei vastausta');
                await assertContentMatches(answerOptionsLocator, firstAnswerContent, answerMediaType);
                await assertContentMatches(answerOptionsLocator, secondAnswerContent, answerMediaType);
            });
            await experimental_ct_react_1.test.step('Move first answer to answer container using keyboard', async () => {
                // We test DOM changes between key presses to make sure that DOM is updated correctly.
                // For text answers: the answer option #343 is moved to answer containers 102 -> 101 -> 100.
                // For image answers: the answer option #351 is moved to answer containers 103 -> 103 -> 103.
                const handle = firstOptionLocator.locator('.drag-handle');
                const helperText = component.locator('#DndLiveRegion-0');
                const isTextAnswer = answerMediaType === 'text';
                const baseText = `Draggable item ${isTextAnswer ? 343 : 351} was moved over droppable area`;
                await handle.focus();
                await handle.press('Enter');
                await (0, experimental_ct_react_1.expect)(helperText).toContainText(`${baseText} root.`);
                await handle.press('ArrowUp'); // activates root container
                await (0, experimental_ct_react_1.expect)(helperText).toContainText(`${baseText} root.`);
                await handle.press('ArrowUp'); // activates 3rd answer
                await (0, experimental_ct_react_1.expect)(helperText).toContainText(`${baseText} ${isTextAnswer ? 102 : 103}.`);
                await handle.press('ArrowUp'); // activates 2nd answer
                await (0, experimental_ct_react_1.expect)(helperText).toContainText(`${baseText} ${isTextAnswer ? 101 : 103}.`);
                await handle.press('ArrowUp'); // activates 1st answer
                await (0, experimental_ct_react_1.expect)(helperText).toContainText(`${baseText} ${isTextAnswer ? 100 : 103}.`);
                await handle.press('Enter');
                const firstAnswerContent = (await getAnswerContent(firstOptionLocator, answerMediaType)) || ''; // first option has changed
                await assertContentMatches(answerContainer, firstAnswerContent, answerMediaType);
            });
        });
    }
});
async function assertContentMatches(answerContainer, content, mediaType) {
    if (mediaType === 'text') {
        await (0, experimental_ct_react_1.expect)(answerContainer).toContainText(content);
    }
    else if (mediaType === 'image') {
        const images = await answerContainer.locator('img').all();
        let found = false;
        for (const img of images) {
            const src = await img.getAttribute('src');
            if (src === content) {
                found = true;
                break;
            }
        }
        (0, experimental_ct_react_1.expect)(found).toBe(true);
    }
}
async function assertContentDoesNotMatch(answerContainer, content, mediaType) {
    if (mediaType === 'text') {
        await (0, experimental_ct_react_1.expect)(answerContainer).not.toContainText(content);
    }
    else if (mediaType === 'image') {
        const images = await answerContainer.locator('img').all();
        for (const img of images) {
            await (0, experimental_ct_react_1.expect)(img).not.toHaveAttribute('src', content);
        }
    }
}
async function setupAnswerContext(component, answerMediaType) {
    const answerContainer = component.getByTestId('dnd-droppable').first();
    const answerOptionsLocator = component.getByTestId('dnd-droppable').last();
    const firstOptionLocator = component.getByTestId('dnd-answer-option').nth(0);
    const secondOptionLocator = component.getByTestId('dnd-answer-option').nth(1);
    const firstAnswerContent = await getAnswerContent(firstOptionLocator, answerMediaType);
    const secondAnswerContent = await getAnswerContent(secondOptionLocator, answerMediaType);
    return {
        answerContainer,
        answerOptionsLocator,
        firstOptionLocator,
        secondOptionLocator,
        firstAnswerContent: firstAnswerContent,
        secondAnswerContent: secondAnswerContent
    };
}
async function getAnswerContent(answerLocator, mediaType) {
    if (mediaType === 'text') {
        return await answerLocator.textContent();
    }
    else if (mediaType === 'image') {
        return await answerLocator.locator('img').getAttribute('src');
    }
}
//# sourceMappingURL=DNDAnswerContainer.test.js.map