/**
* Copyright (c) Microsoft Corporation.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { test, expect } from './playwright-test-fixtures';
test('should work with TSX', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.ts': `
//@no-header
`,
'src/button.tsx': `
//@no-header
export const Button = () => ;
`,
'src/button.test.tsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
test('pass', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should work with JSX', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.jsx': `
//@no-header
export const Button = () => ;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
test('pass', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should work with JSX in JS', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => ;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
test('pass', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should work with JSX in JS and in JSX', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => ;
`,
'src/list.jsx': `
//@no-header
export const List = () =>
;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
import { List } from './list';
test('pass button', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
test('pass list', async ({ mount }) => {
const component = await mount(
);
await expect(component).toHaveText('List');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(2);
});
test('should work with stray TSX import', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.ts': `
//@no-header
`,
'src/button.tsx': `
//@no-header
export const Button = () => ;
`,
'src/list.tsx': `
//@no-header
export const List = () => ;
`,
'src/button.test.tsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
import { List } from './list';
test('pass button', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should work with stray JSX import', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.jsx': `
//@no-header
export const Button = () => ;
`,
'src/list.jsx': `
//@no-header
export const List = () => ;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
import { List } from './list';
test('pass button', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test.fixme('should work with stray JS import', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.js': `
//@no-header
export const Button = () => ;
`,
'src/list.js': `
//@no-header
export const List = () => ;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
import { List } from './list';
test('pass button', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should work with JSX in variable', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `
//@no-header
`,
'src/button.jsx': `
//@no-header
export const Button = () => ;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
const button = ;
test('pass button', async ({ mount }) => {
const component = await mount(button);
await expect(component).toHaveText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should return root locator for fragments', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.js': `//@no-header`,
'src/button.jsx': `
//@no-header
export const Button = () => <>Header
>;
`,
'src/button.test.jsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Button } from './button';
test('pass button', async ({ mount }) => {
const component = await mount();
await expect(component).toContainText('Header');
await expect(component).toContainText('Button');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});
test('should respect default property values', async ({ runInlineTest }) => {
const result = await runInlineTest({
'playwright/index.html': ``,
'playwright/index.ts': `//@no-header`,
'src/label.tsx': `//@no-header
export const Label = ({ checked }) => type:{typeof checked} value:{String(checked)}
;
`,
'src/label.test.tsx': `
//@no-header
import { test, expect } from '@playwright/experimental-ct-react';
import { Label } from './label';
test('boolean shorthand', async ({ mount }) => {
const component = await mount();
await expect(component).toHaveText('type:boolean value:true');
});
`,
}, { workers: 1 });
expect(result.exitCode).toBe(0);
expect(result.passed).toBe(1);
});