astro/packages/astro/test/custom-elements.test.js
Matthew Phillips f5afaf2498
Support re-exporting astro components containing client components (#3625)
* Support re-exporting astro components containing client components

* Include metadata for markdown too

* Fix ssr, probably

* Inject post-build

* Remove tagName custom element test

* Allows using the constructor for lit elements

* Fix hoisted script scanning

* Pass through plugin context

* Get edge functions working in the edge tests

* Fix types for the edge function integration

* Upgrade the compiler

* Upgrade compiler version

* Better release notes for lit

* Update .changeset/unlucky-hairs-camp.md

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Properly test that the draft was not rendered

* Prevent from rendering draft posts

* Add a changeset about the build perf improvement.

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
2022-06-21 08:32:05 -04:00

73 lines
2 KiB
JavaScript

import { expect } from 'chai';
import { load as cheerioLoad } from 'cheerio';
import { loadFixture } from './test-utils.js';
describe('Custom Elements', () => {
let fixture;
before(async () => {
fixture = await loadFixture({
root: './fixtures/custom-elements/',
experimental: {
integrations: true,
},
});
await fixture.build();
});
it('Work as constructors', async () => {
const html = await fixture.readFile('/ctr/index.html');
const $ = cheerioLoad(html);
// test 1: Element rendered
expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendererd
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
});
it('Works with exported tagName', async () => {
const html = await fixture.readFile('/index.html');
const $ = cheerioLoad(html);
// test 1: Element rendered
expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
});
it.skip('Hydration works with exported tagName', async () => {
const html = await fixture.readFile('/load/index.html');
const $ = cheerioLoad(html);
// SSR
// test 1: Element rendered
expect($('my-element')).to.have.lengthOf(1);
// test 2: shadow rendered
expect($('my-element template[shadowroot=open]')).to.have.lengthOf(1);
// Hydration
// test 3: Component and polyfill scripts bundled separately
expect($('script')).to.have.lengthOf(2);
});
it('Custom elements not claimed by renderer are rendered as regular HTML', async () => {
const html = await fixture.readFile('/nossr/index.html');
const $ = cheerioLoad(html);
// test 1: Rendered the client-only element
expect($('client-element')).to.have.lengthOf(1);
// No children
expect($('client-element').text()).to.equal('');
});
it('Can import a client-only element that is nested in JSX', async () => {
const html = await fixture.readFile('/nested/index.html');
const $ = cheerioLoad(html);
// test 1: Element rendered
expect($('client-only-element')).to.have.lengthOf(1);
});
});