Skip to content

Fix sendBox polymiddleware tests and formatting #7

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

Draft
Claude wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

Fix sendBox polymiddleware tests and formatting #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
16b5032
Initial plan
Claude Mar 4, 2026
ab2596a
Port sendBoxMiddleware to polymiddleware infrastructure
Claude Mar 4, 2026
4794f65
Fix type imports and add test files for sendBox polymiddleware
Claude Mar 4, 2026
26d4f9e
Fix legacy sendBox bridge types and build errors
Claude Mar 4, 2026
627f528
Update deprecation dates, fix error message case, add displayName, re…
Claude Mar 4, 2026
3a8aaa4
Add comprehensive test suite for sendBox middleware patterns
Claude Mar 4, 2026
e86cc49
Port sendBoxMiddleware to polymiddleware infrastructure
Claude Mar 4, 2026
ea11cf5
Add middleware exports to bundle and split legacyToPolymiddleware test
Claude Mar 4, 2026
5b7df54
Fix sendBox polymiddleware signature and update snapshot names
Claude Mar 4, 2026
9e41704
Addressing PR comments
Claude Mar 4, 2026
14ded14
Wire up sendBox polymiddleware to replace template middleware
Claude Mar 4, 2026
19dd8c8
Fix sendBox polymiddleware tests and formatting
Claude Mar 4, 2026
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
Binary file added ...nt-html-html-2-middleware-send-box-polymiddleware-add-component-html-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...leware-send-box-legacy-send-box-middleware-legacy-add-component-html-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 59 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/add.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddlewareFromLegacy }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const AdditionalComponent = () => createElement('div', { style: { border: 'solid 2px green', padding: '10px' } }, 'Additional Component');

const polymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => () => {
const child = next();
return () => createElement('div', {}, [
child?.(),
createElement(AdditionalComponent, { key: 'additional' })
]);
})
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/add.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/change.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddlewareFromLegacy }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const CustomSendBox = ({ className }) => createElement('div', { className, style: { border: 'solid 2px purple', padding: '10px' } }, 'Custom SendBox');

const polymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => () => {
// Replace with custom component
return () => createElement(CustomSendBox);
})
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/change.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/decorate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddlewareFromLegacy }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const polymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => () => {
const child = next();
return () => createElement('div', { style: { border: 'solid 2px blue' } }, child?.());
})
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added ...sts__/html2/middleware/sendBox/legacySendBoxMiddleware/decorate.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 54 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/legacyAddComponent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddlewareFromLegacy }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const sendBoxPolymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => request => {
const child = next(request);
return () => createElement('div', { style: { border: 'solid 2px blue' } }, child?.());
})
];

WebChat.renderWebChat(
{
directLine,
sendBoxPolymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added ...2/middleware/sendBox/legacySendBoxMiddleware/legacyAddComponent.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/remove.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddlewareFromLegacy }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const polymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => () => {
// Don't call next, effectively removing the sendbox
return () => null;
})
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/remove.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
60 changes: 60 additions & 0 deletions __tests__/html2/middleware/sendBox/polymiddleware/add.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddleware, sendBoxComponent }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const AdditionalComponent = () => createElement('div', { style: { border: 'solid 2px green', padding: '10px' } }, 'Additional Component');

const polymiddleware = [
createSendBoxPolymiddleware(next => () => {
const result = next();

return sendBoxComponent(() => createElement('div', {}, [
result?.render({}),
createElement(AdditionalComponent, { key: 'additional' })
]));
})
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/middleware/sendBox/polymiddleware/add.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions __tests__/html2/middleware/sendBox/polymiddleware/addComponent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html lang="en-US">
<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react@18.3.1"
}
}
</script>
<script crossorigin="anonymous" src="/test-harness.js"></script>
<script crossorigin="anonymous" src="/test-page-object.js"></script>
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
</head>

<body>
<main id="webchat"></main>
<script type="module">
import { createElement } from 'react';

run(async function () {
const {
testHelpers: { createDirectLineEmulator },
WebChat: {
middleware: { createSendBoxPolymiddleware, sendBoxComponent }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

const Downstream = () => createElement('div', {}, '<Downstream />');

const polymiddleware = [
createSendBoxPolymiddleware(next => () => sendBoxComponent(Downstream))
];

WebChat.renderWebChat(
{
directLine,
polymiddleware,
store
},
document.getElementById('webchat')
);

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Binary file added __tests__/html2/middleware/sendBox/polymiddleware/addComponent.html.snap-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading