Skip to content

[labs/testing] Add fallback for call site location detection for webkit #4731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 19, 2024
Merged

[labs/testing] Add fallback for call site location detection for webkit #4731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/rude-cherries-cover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lit-labs/testing': patch
---

Add fallback for call site location detection for webkit
19 changes: 18 additions & 1 deletion packages/labs/testing/src/lib/fixtures/csr-fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,24 @@ export async function csrFixture<T extends HTMLElement>(
// asyncFunctionResume@[native code]
// @http://localhost:8000/test/my-element_test.js?wtr-session-id=aKWON-wBOBGyzb2CwIvmK:65:37
const {stack} = new Error();
const match = stack?.match(/http:\/\/localhost.+(?=\?wtr-session-id)/);
const match =
stack?.match(/http:\/\/localhost.+(?=\?wtr-session-id)/) ??
// Looking for wtr-session-id might not work in webkit. See https://github.com/lit/lit/issues/4067
// As a fallback, we look for the first file which is not inside node_modules and
// is not this csr-fixture file.
//
// Webkit Stack:
// @http://localhost:8000/lib/fixtures/ssr-fixture.js:38:36
// ssrFixture@http://localhost:8000/lib/fixtures/ssr-fixture.js:19:34
// ssrNonHydratedFixture@http://localhost:8000/lib/fixtures/ssr-fixture.js:98:45
// @http://localhost:8000/test/my-element_test.js:20:37
[...(stack?.matchAll(/http:\/\/localhost:?[^:)]+/gm) ?? [])]
.map((m) => m[0])
.filter(
(u) =>
!u.includes('/node_modules/') &&
!u.includes('/lib/fixtures/csr-fixture.js')
);
if (!match) {
throw new Error(
`Could not find call site for csrFixture in stack:\n${stack}`
Expand Down
19 changes: 18 additions & 1 deletion packages/labs/testing/src/lib/fixtures/ssr-fixture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,24 @@ export async function ssrFixture<T extends HTMLElement>(
// asyncFunctionResume@[native code]
// @http://localhost:8000/test/my-element_test.js?wtr-session-id=aKWON-wBOBGyzb2CwIvmK:65:37
const {stack} = new Error();
const match = stack?.match(/http:\/\/localhost.+(?=\?wtr-session-id)/);
const match =
stack?.match(/http:\/\/localhost.+(?=\?wtr-session-id)/) ??
// Looking for wtr-session-id might not work in webkit. See https://github.com/lit/lit/issues/4067
// As a fallback, we look for the first file which is not inside node_modules and
// is not this ssr-fixture file.
//
// Webkit Stack:
// @http://localhost:8000/lib/fixtures/ssr-fixture.js:38:36
// ssrFixture@http://localhost:8000/lib/fixtures/ssr-fixture.js:19:34
// ssrNonHydratedFixture@http://localhost:8000/lib/fixtures/ssr-fixture.js:98:45
// @http://localhost:8000/test/my-element_test.js:20:37
[...(stack?.matchAll(/http:\/\/localhost:?[^:)]+/gm) ?? [])]
.map((m) => m[0])
.filter(
(u) =>
!u.includes('/node_modules/') &&
!u.includes('/lib/fixtures/ssr-fixture.js')
);
if (!match) {
throw new Error(
`Could not find call site for ssrFixture in stack:\n${stack}`
Expand Down
8 changes: 0 additions & 8 deletions packages/labs/testing/src/test/good-element_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {

test('renders with default values', async () => {
const el = await fixture(html`<good-element></good-element>`, {
base: import.meta.url,
modules: ['./good-element.js'],
});
assert.shadowDom.equal(
Expand All @@ -45,7 +44,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
const el = await fixture(
html`<good-element name="Test"></good-element>`,
{
base: import.meta.url,
modules: ['./good-element.js'],
}
);
Expand All @@ -63,7 +61,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
const el = await fixture<GoodElement>(
html`<good-element></good-element>`,
{
base: import.meta.url,
modules: ['./good-element.js'],
}
);
Expand All @@ -76,7 +73,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
const el = await fixture<GoodElement>(
html`<good-element></good-element>`,
{
base: import.meta.url,
modules: ['./good-element.js'],
}
);
Expand All @@ -98,7 +94,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
suite(`nested good-element rendered with ${fixture.name}`, () => {
test('renders with default values', async () => {
const el = await fixture(html`<div><good-element></good-element></div>`, {
base: import.meta.url,
modules: ['./good-element.js'],
});
const goodEl = el.querySelector('good-element');
Expand All @@ -117,7 +112,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
const el = await fixture(
html`<div><good-element name="Test"></good-element></div>`,
{
base: import.meta.url,
modules: ['./good-element.js'],
}
);
Expand All @@ -133,7 +127,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {

test('styling applied', async () => {
const el = await fixture(html`<div><good-element></good-element></div>`, {
base: import.meta.url,
modules: ['./good-element.js'],
});
assert.equal(
Expand All @@ -148,7 +141,6 @@ for (const fixture of [csrFixture, ssrNonHydratedFixture, ssrHydratedFixture]) {
const el = await fixture(
html`<div><good-element></good-element></div>`,
{
base: import.meta.url,
modules: ['./good-element.js'],
}
);
Expand Down