Skip to content

Commit 51ff5b2

Browse files
compulimcompulim
committed
Add test for reload UI
1 parent 83a88c7 commit 51ff5b2

4 files changed

Lines changed: 70 additions & 8 deletions

File tree

‎__tests__/html2/basic/reload.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!doctype html>
2+
<html lang="en-US">
3+
<head>
4+
<link href="/assets/index.css" rel="stylesheet" type="text/css" />
5+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
7+
<script crossorigin="anonymous" src="/test-harness.js"></script>
8+
<script crossorigin="anonymous" src="/test-page-object.js"></script>
9+
<script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
10+
</head>
11+
<body>
12+
<main id="webchat"></main>
13+
<script>
14+
run(async function () {
15+
const {
16+
React: { createElement, useMemo },
17+
ReactDOM: { render },
18+
testHelpers: { createDirectLineEmulator, createDirectLineWithTranscript },
19+
WebChat: { ReactWebChat }
20+
} = window;
21+
22+
// let { directLine, store } = createDirectLineEmulator();
23+
24+
const SystemUnderTest = ({ dir }) => {
25+
const directLine = useMemo(
26+
() =>
27+
createDirectLineWithTranscript([
28+
{
29+
text: `Hello, World!`,
30+
type: 'message',
31+
timestamp: '2000-01-23T12:34:56.12345Z'
32+
}
33+
]),
34+
[]
35+
);
36+
37+
const store = testHelpers.createStore();
38+
39+
return createElement(ReactWebChat, { directLine, dir, store });
40+
};
41+
42+
render(createElement(SystemUnderTest, { dir: 'auto' }), document.getElementById('webchat'));
43+
44+
await pageConditions.uiConnected();
45+
await pageConditions.numActivitiesShown(1);
46+
47+
await host.snapshot('local');
48+
49+
render(createElement(SystemUnderTest, { dir: 'rtl' }), document.getElementById('webchat'));
50+
51+
await host.snapshot('local');
52+
});
53+
</script>
54+
</body>
55+
</html>

‎packages/component/src/BasicTranscript.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
127127
const getKeyByActivityId = useGetKeyByActivityId();
128128
const localize = useLocalizer();
129129
const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
130-
const rootElementRef = useRef<HTMLDivElement>();
130+
const rootElementRef = useRef<HTMLDivElement>(null);
131131
const terminatorLabelId = useUniqueId('webchat__basic-transcript__terminator-label');
132132

133133
const focusedActivityKeyRef = useValueRef(focusedActivityKey);
@@ -659,8 +659,8 @@ const BasicTranscript = ({ className = '' }: BasicTranscriptProps) => {
659659
const [{ stylesRoot }] = useStyleOptions();
660660
const [nonce] = useNonce();
661661
const activityElementMapRef = useActivityElementMapRef();
662-
const containerRef = useRef<HTMLDivElement>();
663-
const terminatorRef = useRef<HTMLDivElement>();
662+
const containerRef = useRef<HTMLDivElement>(null);
663+
const terminatorRef = useRef<HTMLDivElement>(null);
664664

665665
const scroller = useScroller(activityElementMapRef);
666666
const styleOptions = useMemo(() => ({ stylesRoot }), [stylesRoot]);

‎packages/component/src/Utils/FocusRedirector.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import {
44
custom,
55
function_,
66
instance,
7+
nullable,
78
object,
89
optional,
910
pipe,
1011
readonly,
1112
safeParse,
1213
string,
13-
undefinedable,
1414
type InferInput
1515
} from 'valibot';
1616

@@ -29,7 +29,7 @@ const focusRedirectorPropsSchema = pipe(
2929
object({
3030
className: optional(string()),
3131
onFocus: optional(custom<() => void>(value => safeParse(function_(), value).success)),
32-
redirectRef: optional(mutableRefObject(undefinedable(instance(HTMLElement))))
32+
redirectRef: optional(mutableRefObject(nullable(instance(HTMLElement))))
3333
}),
3434
readonly()
3535
);

‎packages/component/src/types/internal/mutableRefObject.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { type MutableRefObject } from 'react';
12
import {
23
any,
34
check,
@@ -13,17 +14,23 @@ import {
1314

1415
function mutableRefObject<TInput extends BaseSchema<unknown, unknown, BaseIssue<unknown>>>(
1516
baseSchema: TInput
16-
): BaseSchema<unknown, { current: InferOutput<TInput> }, BaseIssue<undefined>>;
17+
): BaseSchema<MutableRefObject<InferOutput<TInput>>, MutableRefObject<InferOutput<TInput>>, BaseIssue<undefined>>;
1718

1819
function mutableRefObject<
1920
TInput extends BaseSchema<unknown, unknown, BaseIssue<unknown>>,
2021
const TMessage extends ErrorMessage<ObjectIssue> | undefined
21-
>(baseSchema: TInput, message: TMessage): BaseSchema<unknown, { current: InferOutput<TInput> }, BaseIssue<TMessage>>;
22+
>(
23+
baseSchema: TInput,
24+
message: TMessage
25+
): BaseSchema<MutableRefObject<InferOutput<TInput>>, MutableRefObject<InferOutput<TInput>>, BaseIssue<TMessage>>;
2226

2327
function mutableRefObject<
2428
TInput extends BaseSchema<unknown, unknown, BaseIssue<unknown>>,
2529
const TMessage extends ErrorMessage<ObjectIssue> | undefined
26-
>(baseSchema: TInput, message?: TMessage): BaseSchema<unknown, { current: InferOutput<TInput> }, BaseIssue<TMessage>> {
30+
>(
31+
baseSchema: TInput,
32+
message?: TMessage
33+
): BaseSchema<MutableRefObject<InferOutput<TInput>>, MutableRefObject<InferOutput<TInput>>, BaseIssue<TMessage>> {
2734
return pipe(
2835
any(),
2936
check(value => safeParse(object({ current: baseSchema }, message), value).success)

0 commit comments

Comments
 (0)