Skip to content
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

Jump to bottom

Feature/middleware v2 init #5118

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
+3,264 −35
Draft

Feature/middleware v2 init #5118

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a7c990f
Init tests for activity middleware
OEvgeny Jan 19, 2024
5a859f1
POC activity v2 middleware infra
OEvgeny Jan 26, 2024
16c3194
Self review
OEvgeny Jan 30, 2024
49e5724
Restructure tests to reduce duplicate snapshots
OEvgeny Jan 30, 2024
27585c3
Fix removing activity from v2 middleware causing empty activity render
OEvgeny Feb 2, 2024
0a3abaf
Avoid setting activityRenderer when using v2 middleware flow
OEvgeny Feb 8, 2024
1713ffa
Add react-chain-of-responsibility
OEvgeny Apr 1, 2024
dc86059
Merge branch 'main' into feature/middleware-v2-init
OEvgeny Apr 2, 2024
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
3 changes: 0 additions & 3 deletions .eslintrc.react.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ rules:
- error
- multiline-multiprop
react/jsx-handler-names: error
react/jsx-indent:
- error
- 2
react/jsx-indent-props:
- error
- 2
Expand Down
Binary file added ...corate-js-activity-middleware-adds-a-custom-activity-with-decoration-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 ...ts__/html/activity-add-js-activity-middleware-adds-a-custom-activity-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 ...tivity-decorate-js-activity-middleware-decorates-an-activity-by-text-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 ...l/activity-remove-js-activity-middleware-removes-an-activity-by-text-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 ...eplace-js-activity-middleware-removes-activity-and-replaces-activity-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 ...activity-replace-js-activity-middleware-replaces-an-activity-by-text-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 ...remove-js-activity-middleware-replaces-activity-and-removes-activity-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 ...ks-decorates-an-activity-when-used-with-use-create-activity-renderer-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 ...are-hooks-decorates-an-activity-when-used-with-use-render-attachment-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.
137 changes: 137 additions & 0 deletions __tests__/html/middleware/shim-v1-v2/activity.add.decorate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></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>
<style>
.decorated-activity {
border: thick solid red;
}
</style>
</head>

<body>
<main id="webchat"></main>
<script type="text/babel" data-presets="env,stage-3,react">
const {
ReactDOM: { render },
WebChat: {
Components: { BasicWebChat, Composer }, v2Middleware
}
} = window;

const NOW = Date.now();

const DecoratedActivity = ({ children }) => {
return (<div className="decorated-activity">
{children}
</div>)
}

const CustomActivity = ({ activity }) => {
return (<div>
<h2>{activity.data.heading}</h2>
<p>{activity.text}</p>
</div>)
}

run(
async function () {
await new Promise(resolve =>
render(
<Composer
activityMiddleware={[
v2Middleware(() => next => props => {
const { activity } = props;
if (activity.text.includes('decorated')) {
const Next = next(props);
if (!Next) return Next;
return (props) => (
<DecoratedActivity>
<Next {...props} />
</DecoratedActivity>
);
}
return next(props)
}),
() => next => (...args) => {
const [ { activity } ] = args;
if (activity.type === 'custom-activity') {
return <CustomActivity activity={activity} />;
}
return next(...args);
}
]}
directLine={testHelpers.createDirectLineWithTranscript([
{
from: {
id: 'bot',
role: 'bot'
},
id: '0',
text: 'This is the first message.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '1',
text: 'This is the decorated activity.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '2',
data: {
heading: 'Custom Activity',
},
text: 'Custom activity text',
timestamp: new Date(NOW).toISOString(),
type: 'custom-activity'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '3',
data: {
heading: 'Custom Activity',
},
text: 'Custom decorated activity text',
timestamp: new Date(NOW).toISOString(),
type: 'custom-activity'
},
])}
store={testHelpers.createStore()}
>
<BasicWebChat />
</Composer>,
document.getElementById('webchat'),
resolve
)
);

await pageConditions.uiConnected();
await host.snapshot();
},
{ ignoreErrors: true }
);
</script>
</body>

</html>
6 changes: 6 additions & 0 deletions __tests__/html/middleware/shim-v1-v2/activity.add.decorate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */

describe('activity middleware', () => {
test('adds a custom activity with decoration', () =>
runHTML('./middleware/shim-v1-v2/activity.add.decorate.html'));
});
124 changes: 124 additions & 0 deletions __tests__/html/middleware/shim-v1-v2/activity.remove.replace.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en-US">

<head>
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
<link href="/assets/accessibility.liveRegionAttachment.css" rel="stylesheet" type="text/css" />
<script crossorigin="anonymous" src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin="anonymous" src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></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>
<style>
.custom-activity {
border: thick solid red;
}
</style>
</head>

<body>
<main id="webchat"></main>
<script type="text/babel" data-presets="env,stage-3,react">
const {
ReactDOM: { render },
WebChat: {
Components: { BasicWebChat, Composer },
}
} = window;

const NOW = Date.now();

const CustomActivity = ({ children }) => {
return (<div className="custom-activity">
{children}
</div>)
}

run(
async function () {
await new Promise(resolve =>
render(
<Composer
activityMiddleware={[
v2Middleware(() => next => props => {
const { activity } = props;
if (activity.text.includes('replace')) {
return (props) => {
return (
<CustomActivity>
{ props.activity.text }
</CustomActivity>
)
}
}
return next(props);
}),
() => next => (...args) => {
const [ { activity } ] = args;
if (activity.text.includes('removed')) {
return false;
}
return next(...args);
}
]}
directLine={testHelpers.createDirectLineWithTranscript([
{
from: {
id: 'bot',
role: 'bot'
},
id: '0',
text: 'This is the first message.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '1',
text: 'This is the removed message.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '2',
text: 'This is the activity to replace.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
{
from: {
id: 'bot',
role: 'bot'
},
id: '3',
text: 'This is the removed activity to replace.',
timestamp: new Date(NOW).toISOString(),
type: 'message'
},
])}
store={testHelpers.createStore()}
>
<BasicWebChat />
</Composer>,
document.getElementById('webchat'),
resolve
)
);

await pageConditions.uiConnected();
await host.snapshot();
},
{ ignoreErrors: true }
);
</script>
</body>

</html>
6 changes: 6 additions & 0 deletions __tests__/html/middleware/shim-v1-v2/activity.remove.replace.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */

describe('activity middleware', () => {
test('removes activity and replaces activity', () =>
runHTML('./middleware/shim-v1-v2/activity.remove.replace.html'));
});
Loading
Loading