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 4 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
57 changes: 57 additions & 0 deletions __tests__/html2/middleware/sendBox/legacySendBoxMiddleware/legacyToPolymiddleware.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!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, createSendBoxPolymiddlewareFromLegacy, sendBoxComponent }
}
} = window;

const { directLine, store } = createDirectLineEmulator();

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

const polymiddleware = [
createSendBoxPolymiddlewareFromLegacy(() => next => request => {
const child = next(request);
return () => createElement('div', { style: { border: 'solid 2px blue' } }, child?.());
}),
createSendBoxPolymiddleware(next => request => sendBoxComponent(Downstream))
Copy link
Copy Markdown
Owner

@compulim compulim Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@claude[agent] Separate into 2 tests, one test the component added via legacy middleware, one test for the one via new polymiddleware.

];

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

await pageConditions.uiConnected();

await host.snapshot('local');
Copy link
Copy Markdown
Owner

@compulim compulim Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should run the test. Look at docs/CONTRIBUTING.md on how to do it.

});
</script>
</body>
</html>
60 changes: 60 additions & 0 deletions __tests__/html2/middleware/sendBox/polymiddleware/simple.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, memo } from 'react';

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

const { directLine, store } = createDirectLineEmulator();

const MySendBox = memo(function MySendBox({ className, render }) {
return createElement('div', { className, style: { border: 'solid 2px red' } }, render({}));
});

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

return sendBoxComponent(MySendBox, { render: result.render });
})
Copy link
Copy Markdown
Owner

@compulim compulim Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Structure all the tests:

  • Add a new component under the send box
  • Remove existing send box
  • Decorate the send box (e.g. add a new border while keeping functionality)
  • Change the send box

Then permutate it via using legacy middleware, and via using polymiddleware.

Run the test after done. Look at docs/CONTRIBUTING.md on how to run the tests.

];

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

await pageConditions.uiConnected();

await host.snapshot('local');
});
</script>
</body>
</html>
Loading
Loading