/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

import {expect, test} from '@playwright/test';
import {encodeStore, type Store} from '../../lib/stores';

const STORE: Store = {
  source: `export default function TestComponent({ x }) {
  return <Button>{x}</Button>;
}
`,
};
const HASH = encodeStore(STORE);

function concat(data: Array<string>): string {
  return data.join('');
}

test('editor should compile successfully', async ({page}) => {
  await page.goto(`/#${HASH}`, {waitUntil: 'networkidle'});
  await page.screenshot({
    fullPage: true,
    path: 'test-results/00-on-networkidle.png',
  });

  // User input from hash compiles
  await page.screenshot({
    fullPage: true,
    path: 'test-results/01-show-js-before.png',
  });
  const userInput =
    (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? [];
  expect(concat(userInput)).toMatchSnapshot('user-input.txt');

  // Reset button works
  page.on('dialog', dialog => dialog.accept());
  await page.getByRole('button', {name: 'Reset'}).click();
  await page.screenshot({
    fullPage: true,
    path: 'test-results/02-show-js-after.png',
  });
  const defaultInput =
    (await page.locator('.monaco-editor').nth(2).allInnerTexts()) ?? [];
  expect(concat(defaultInput)).toMatchSnapshot('default-input.txt');
});