page.spec.ts — react Source File

Source Code

/**
 * 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, type Page} from '@playwright/test';
import {encodeStore, type Store} from '../../lib/stores';
import {defaultConfig} from '../../lib/defaultStore';
import {format} from 'prettier';

function isMonacoLoaded(): boolean {
  return (
    typeof window['MonacoEnvironment'] !== 'undefined' &&
    window['__MONACO_LOADED__'] === true
  );
}

function formatPrint(data: Array<string>): Promise<string> {
  return format(data.join(''), {parser: 'babel'});
}

async function expandConfigs(page: Page): Promise<void> {
  const expandButton = page.locator('[title="Expand config editor"]');
  await expandButton.click();
  await page.waitForSelector('.monaco-editor-config', {state: 'visible'});
}

const TEST_SOURCE = `export default function TestComponent({ x }) {
  return <Button>{x}</Button>;
}`;

const TEST_CASE_INPUTS = [
  {
    name: 'module-scope-use-memo',
    input: `
'use memo';
export default function TestComponent({ x }) {
  return <Button>{x}</Button>;
}`,
  },
  {
    name: 'module-scope-use-no-memo',
    input: `
'use no memo';
export default function TestComponent({ x }) {
  return <Button>{x}</Button>;
}`,
  },
  {
    name: 'use-memo',
    input: `
function TestComponent({ x }) {
  'use memo';
  return <Button>{x}</Button>;
}
const TestComponent2 = ({ x }) => {
  'use memo';
  return <Button>{x}</Button>;
// ... (315 more lines)