import { describe, expect, it } from 'vitest';
import { TestProject } from '../utils';

describe('React', () => {
  it('should prepare and build an project with a tsx entrypoint', async () => {
    const project = new TestProject({
      dependencies: {
        react: '^18.2.0',
        'react-dom': '^18.2.0',
      },
      devDependencies: {
        '@types/react': '^18.2.14',
        '@types/react-dom': '^18.2.6',
      },
    });
    project.addFile(
      'entrypoints/demo.content.tsx',
      `import ReactDOM from 'react-dom/client';
      
      export default defineContentScript({
        matches: "<all_urls>",
        main() {
          const container = document.createElement("div");
          document.body.append(container)
          const root = ReactDOM.createRoot(container);
          root.render(<h1>Hello, world!</h1>);
        }
      })`,
    );

    await project.build();

    expect(
      await project.fileExists('.output/chrome-mv3/content-scripts/demo.js'),
    ).toBe(true);
    expect(await project.serializeFile('.output/chrome-mv3/manifest.json'))
      .toMatchInlineSnapshot(`
        ".output/chrome-mv3/manifest.json
        ----------------------------------------
        {"manifest_version":3,"name":"E2E Extension","description":"Example description","version":"0.0.0","content_scripts":[{"matches":"<all_urls>","js":["content-scripts/demo.js"]}]}"
      `);
  });
});