astro/packages/astro/e2e/nested-recursive.test.js
Nate Moore 7373d61cdc
Enable named slots in renderers (#3652)
* feat: pass all slots to renderers

* refactor: pass `slots` as top-level props

* test: add named slot test for frameworks

* fix: nested hydration, slots that are not initially rendered

* test: add nested-recursive e2e test

* fix: render unmatched custom element children

* chore: update lockfile

* fix: unrendered slots for client:only

* fix(lit): ensure lit integration uses new slots API

* chore: add changeset

* chore: add changesets

* fix: lit slots

* feat: convert dash-case or snake_case slots to camelCase for JSX

* feat: remove tmpl special logic

* test: add slot components-in-markdown test

* refactor: prefer Object.entries.map() to for/of loop

Co-authored-by: Nate Moore <nate@astro.build>
2022-06-23 10:10:54 -05:00

96 lines
2.9 KiB
JavaScript

import { test as base, expect } from '@playwright/test';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
const fixture = await loadFixture({ root: './fixtures/nested-recursive/' });
await use(fixture);
},
});
let devServer;
test.beforeEach(async ({ astro }) => {
devServer = await astro.startDevServer();
});
test.afterEach(async () => {
await devServer.stop();
});
test.describe('Recursive Nested Frameworks', () => {
test('React counter', async ({ astro, page }) => {
await page.goto('/');
const counter = await page.locator('#react-counter');
await expect(counter, 'component is visible').toBeVisible();
const count = await counter.locator('#react-counter-count');
await expect(count, 'initial count is 0').toHaveText('0');
const increment = await counter.locator('#react-counter-increment');
await increment.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('Preact counter', async ({ astro, page }) => {
await page.goto('/');
const counter = await page.locator('#preact-counter');
await expect(counter, 'component is visible').toBeVisible();
const count = await counter.locator('#preact-counter-count');
await expect(count, 'initial count is 0').toHaveText('0');
const increment = await counter.locator('#preact-counter-increment');
await increment.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('Solid counter', async ({ astro, page }) => {
await page.goto('/');
const counter = await page.locator('#solid-counter');
await expect(counter, 'component is visible').toBeVisible();
const count = await counter.locator('#solid-counter-count');
await expect(count, 'initial count is 0').toHaveText('0');
const increment = await counter.locator('#solid-counter-increment');
await increment.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('Vue counter', async ({ astro, page }) => {
await page.goto('/');
const counter = await page.locator('#vue-counter');
await expect(counter, 'component is visible').toBeVisible();
const count = await counter.locator('#vue-counter-count');
await expect(count, 'initial count is 0').toHaveText('0');
const increment = await counter.locator('#vue-counter-increment');
await increment.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
test('Svelte counter', async ({ astro, page }) => {
await page.goto('/');
const counter = await page.locator('#svelte-counter');
await expect(counter, 'component is visible').toBeVisible();
const count = await counter.locator('#svelte-counter-count');
await expect(count, 'initial count is 0').toHaveText('0');
const increment = await counter.locator('#svelte-counter-increment');
await increment.click();
await expect(count, 'count incremented by 1').toHaveText('1');
});
});