Skip to content

Commit

Permalink
Remove renderer for unknown activities (#1873)
Browse files Browse the repository at this point in the history 
* Remove renderer for unknown activity

* Update CHANGELOG.md
  • Loading branch information
Corina authored Apr 4, 2019
1 parent c7a39e6 commit f68cf3c
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 76 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Fix [#1767](https://github.com/Microsoft/BotFramework-WebChat/issues/1767). Remove `cursor: pointer` from buttons, by [@corinagum](https://github.com/corinagum) in PR [#1819](https://github.com/Microsoft/BotFramework-WebChat/pull/1819)
- Fix [#1774](https://github.com/Microsoft/BotFramework-WebChat/issues/1774). Add `styleSetOption` to allow word break. Default to `break-word`, by [@corinagum](https://github.com/corinagum) in PR [#1832](https://github.com/Microsoft/BotFramework-WebChat/pull/1832)
- Fix [#1847](https://github.com/Microsoft/BotFramework-WebChat/issues/1847). Bump react-say, which adds babel-runtime dependency, by [@corinagum](https://github.com/corinagum) in PR [#1849](https://github.com/Microsoft/BotFramework-WebChat/pull/1849)
- Add [#1524](https://github.com/Microsoft/BotFramework-WebChat/issues/1524) Offline UI connecting for the first time, by [@corinagum](https://github.com/corinagum), in PR [#1866](https://github.com/Microsoft/BotFramework-WebChat/pull/1866)
- Fix [#1768](https://github.com/Microsoft/BotFramework-WebChat/issues/1768). Add style option to modify all Send Box borders, by [@corinagum](https://github.com/corinagum) in PR [#1871](https://github.com/Microsoft/BotFramework-WebChat/pull/1871)
- Fix [#1827](https://github.com/Microsoft/BotFramework-WebChat/issues/1827). Remove renderer for unknown activities, by [@corinagum](https://github.com/corinagum) in PR [#1873](https://github.com/Microsoft/BotFramework-WebChat/pull/1873)

## [4.3.0] - 2019-03-04

Expand All @@ -42,7 +44,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- `component`: Allow root component height and width customization via `styleOptions.rootHeight` and `styleOptions.rootWidth`, by [@tonyanziano](https://github.com/tonyanziano), in PR [#1702](https://github.com/Microsoft/BotFramework-WebChat/pull/1702)
- `component`: Added `cardActionMiddleware` to customize the behavior of card action, by [@compulim](https://github.com/compulim), in PR [#1704](https://github.com/Microsoft/BotFramework-WebChat/pull/1704)
- `bundle`: Add `watermark` and `streamUrl` parameters to createDirectLine, by [@corinagum](https://github.com/corinagum), in PR [#1817](https://github.com/Microsoft/BotFramework-WebChat/pull/1817)
- Add [#1523](https://github.com/Microsoft/BotFramework-WebChat/issues/1523) Offline UI connecting for the first time, by [@corinagum](https://github.com/corinagum), in PR [#1866](https://github.com/Microsoft/BotFramework-WebChat/pull/1866)

### Changed

Expand Down
Binary file added ...basic-js-unknown-activities-do-not-render-anything-in-the-transcript-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 44 additions & 32 deletions __tests__/basic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,64 +7,76 @@ import uiConnected from './setup/conditions/uiConnected';
// selenium-webdriver API doc:
// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html

jest.setTimeout(timeouts.test);
jest.setTimeout( timeouts.test );

test('setup', async () => {
test( 'setup', async () => {
const { driver, pageObjects } = await setupWebDriver();

await driver.wait(uiConnected(), timeouts.directLine);
await pageObjects.sendMessageViaSendBox('layout carousel');
await driver.wait( uiConnected(), timeouts.directLine );
await pageObjects.sendMessageViaSendBox( 'layout carousel' );

await driver.wait(minNumActivitiesShown(2), 2000);
await driver.wait(allImagesLoaded(), 2000);
await driver.wait( minNumActivitiesShown( 2 ), 2000 );
await driver.wait( allImagesLoaded(), 2000 );

const base64PNG = await driver.takeScreenshot();

expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
} );

test('long URLs with break-word', async () => {
const { driver, pageObjects} = await setupWebDriver();
test( 'long URLs with break-word', async () => {
const { driver, pageObjects } = await setupWebDriver();

await driver.wait(uiConnected(), timeouts.directLine);
await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
await driver.wait( uiConnected(), timeouts.directLine );
await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' )

await driver.wait(minNumActivitiesShown(2), 2000);
await driver.wait(allImagesLoaded(), 2000);
await driver.wait( minNumActivitiesShown( 2 ), 2000 );
await driver.wait( allImagesLoaded(), 2000 );

const base64PNG = await driver.takeScreenshot();

expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
} );

test('long URLs with break-all', async () => {
test( 'long URLs with break-all', async () => {
const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'break-all' } };

const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } );

await driver.wait(uiConnected(), timeouts.directLine);
await pageObjects.sendMessageViaSendBox('https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/')
await driver.wait( uiConnected(), timeouts.directLine );
await pageObjects.sendMessageViaSendBox( 'https://subdomain.domain.com/pathname0/pathname1/pathname2/pathname3/pathname4/' )

await driver.wait(minNumActivitiesShown(2), 2000);
await driver.wait(allImagesLoaded(), 2000);
await driver.wait( minNumActivitiesShown( 2 ), 2000 );
await driver.wait( allImagesLoaded(), 2000 );

const base64PNG = await driver.takeScreenshot();

expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
} );

test('long URLs with keep-all', async () => {
test( 'long URLs with keep-all', async () => {
const WEB_CHAT_PROPS = { styleOptions: { messageActivityWordBreak: 'keep-all' } };

const { driver, pageObjects} = await setupWebDriver({ props: WEB_CHAT_PROPS });
const { driver, pageObjects } = await setupWebDriver( { props: WEB_CHAT_PROPS } );

await pageObjects.sendMessageViaSendBox( '箸より重いものを持ったことがない箸より重いものを持ったことがない' );

await driver.wait( minNumActivitiesShown( 2 ), 2000 );
await driver.wait( allImagesLoaded(), 2000 );

const base64PNG = await driver.takeScreenshot();

expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
} );

test( 'unknown activities do not render anything in the transcript', async () => {
const { driver, pageObjects } = await setupWebDriver();

await driver.wait(uiConnected(), timeouts.directLine);
await pageObjects.sendMessageViaSendBox('箸より重いものを持ったことがない箸より重いものを持ったことがない')
await driver.wait( uiConnected(), timeouts.directLine );
await pageObjects.sendMessageViaSendBox( 'unknown activity' );

await driver.wait(minNumActivitiesShown(2), 2000);
await driver.wait(allImagesLoaded(), 2000);
await driver.wait( minNumActivitiesShown( 1 ), 2000 );

const base64PNG = await driver.takeScreenshot();

expect(base64PNG).toMatchImageSnapshot(imageSnapshotOptions);
});
expect( base64PNG ).toMatchImageSnapshot( imageSnapshotOptions );
} );
83 changes: 40 additions & 43 deletions packages/component/src/BasicWebChat.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,86 +11,83 @@ import createCoreAttachmentMiddleware from './Middleware/Attachment/createCoreMi
import ErrorBox from './ErrorBox';
import TypeFocusSinkBox from './Utils/TypeFocusSink';

const ROOT_CSS = css({
const ROOT_CSS = css( {
display: 'flex',
flexDirection: 'column'
});
} );

const TRANSCRIPT_CSS = css({
const TRANSCRIPT_CSS = css( {
flex: 1
});
} );

const SEND_BOX_CSS = css({
const SEND_BOX_CSS = css( {
flexShrink: 0
});
} );

export default class extends React.Component {
constructor(props) {
super(props);
constructor( props ) {
super( props );

this.sendBoxRef = React.createRef();

this.state = {
activityRenderer: this.createActivityRenderer(props.activityMiddleware),
attachmentRenderer: this.createAttachmentRenderer(props.attachmentMiddleware)
activityRenderer: this.createActivityRenderer( props.activityMiddleware ),
attachmentRenderer: this.createAttachmentRenderer( props.attachmentMiddleware )
};
}

// TODO: [P2] Move to React 16 APIs
componentWillReceiveProps({ activityMiddleware, attachmentMiddleware }) {
componentWillReceiveProps( { activityMiddleware, attachmentMiddleware } ) {
if (
this.props.activityMiddleware !== activityMiddleware
|| this.props.attachmentMiddleware !== attachmentMiddleware
) {
this.setState(() => ({
activityRenderer: this.createActivityRenderer(activityMiddleware),
attachmentRenderer: this.createAttachmentRenderer(attachmentMiddleware)
}));
this.setState( () => ( {
activityRenderer: this.createActivityRenderer( activityMiddleware ),
attachmentRenderer: this.createAttachmentRenderer( attachmentMiddleware )
} ) );
}
}

createActivityRenderer(additionalMiddleware) {
createActivityRenderer( additionalMiddleware ) {
const activityMiddleware = concatMiddleware(
additionalMiddleware,
createCoreActivityMiddleware()
)({});
)( {} );

return (...args) => {
return ( ...args ) => {
try {
return activityMiddleware(
({ activity }) => () =>
<ErrorBox message="No renderer for this activity">
<pre>{ JSON.stringify(activity, null, 2) }</pre>
</ErrorBox>
)(...args);
} catch (err) {
( { activity } ) => () => console.log( activity )
)( ...args );
} catch ( err ) {
return () => (
<ErrorBox message="Failed to render activity">
<pre>{ JSON.stringify(err, null, 2) }</pre>
<pre>{JSON.stringify( err, null, 2 )}</pre>
</ErrorBox>
);
}
};
}

createAttachmentRenderer(additionalMiddleware) {
createAttachmentRenderer( additionalMiddleware ) {
const attachmentMiddleware = concatMiddleware(
additionalMiddleware,
createCoreAttachmentMiddleware()
)({});
)( {} );

return (...args) => {
return ( ...args ) => {
try {
return attachmentMiddleware(
({ attachment }) =>
( { attachment } ) =>
<ErrorBox message="No renderer for this attachment">
<pre>{ JSON.stringify(attachment, null, 2) }</pre>
<pre>{JSON.stringify( attachment, null, 2 )}</pre>
</ErrorBox>
)(...args);
} catch (err) {
)( ...args );
} catch ( err ) {
return (
<ErrorBox message="Failed to render attachment">
<pre>{ JSON.stringify(err, null, 2) }</pre>
<pre>{JSON.stringify( err, null, 2 )}</pre>
</ErrorBox>
);
}
Expand All @@ -104,20 +101,20 @@ export default class extends React.Component {

return (
<Composer
activityRenderer={ state.activityRenderer }
attachmentRenderer={ state.attachmentRenderer }
sendBoxRef={ this.sendBoxRef }
{ ...props }
activityRenderer={state.activityRenderer}
attachmentRenderer={state.attachmentRenderer}
sendBoxRef={this.sendBoxRef}
{...props}
>
{ ({ styleSet }) =>
{( { styleSet } ) =>
<TypeFocusSinkBox
className={ classNames(ROOT_CSS + '', styleSet.root + '', (props.className || '') + '') }
className={classNames( ROOT_CSS + '', styleSet.root + '', ( props.className || '' ) + '' )}
role="complementary"
sendFocusRef={ this.sendBoxRef }
sendFocusRef={this.sendBoxRef}
>
<BasicTranscript className={ TRANSCRIPT_CSS + '' } />
{ !styleSet.options.hideSendBox &&
<BasicSendBox className={ SEND_BOX_CSS } />
<BasicTranscript className={TRANSCRIPT_CSS + ''} />
{!styleSet.options.hideSendBox &&
<BasicSendBox className={SEND_BOX_CSS} />
}
</TypeFocusSinkBox>
}
Expand Down

0 comments on commit f68cf3c

Please sign in to comment.