Replace legacy Tooltips with Compound tooltips (#28231)
* Ditch legacy Tooltips in favour of Compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove dead code Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Extract markdown CodeBlock into React component Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Upgrade compound Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
fad457362d
commit
26430a3a6a
29 changed files with 410 additions and 670 deletions
|
|
@ -57,12 +57,12 @@ describe("Field", () => {
|
|||
// When invalid
|
||||
fireEvent.focus(screen.getByRole("textbox"));
|
||||
|
||||
// Expect 'alert' role
|
||||
await expect(screen.findByRole("alert")).resolves.toBeInTheDocument();
|
||||
// Expect 'aria-live=assertive'
|
||||
await expect(screen.findByRole("tooltip")).resolves.toHaveAttribute("aria-live", "assertive");
|
||||
|
||||
// Close the feedback is Escape is pressed
|
||||
fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
|
||||
expect(screen.queryByRole("alert")).toBeNull();
|
||||
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("Should mark the feedback as status if valid", async () => {
|
||||
|
|
@ -77,12 +77,12 @@ describe("Field", () => {
|
|||
// When valid
|
||||
fireEvent.focus(screen.getByRole("textbox"));
|
||||
|
||||
// Expect 'status' role
|
||||
await expect(screen.findByRole("status")).resolves.toBeInTheDocument();
|
||||
// Expect 'aria-live=polite' role
|
||||
await expect(screen.findByRole("tooltip")).resolves.toHaveAttribute("aria-live", "polite");
|
||||
|
||||
// Close the feedback is Escape is pressed
|
||||
fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" });
|
||||
expect(screen.queryByRole("status")).toBeNull();
|
||||
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("Should mark the feedback as tooltip if custom tooltip set", async () => {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
|
|||
import React from "react";
|
||||
import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { mocked, MockedObject } from "jest-mock";
|
||||
import { render } from "jest-matrix-react";
|
||||
import { render, waitFor } from "jest-matrix-react";
|
||||
|
||||
import { getMockClientWithEventEmitter, mkEvent, mkMessage, mkStubRoom } from "../../../../test-utils";
|
||||
import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
|
||||
|
|
@ -279,6 +279,17 @@ describe("<TextualBody />", () => {
|
|||
expect(content).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should syntax highlight code blocks", async () => {
|
||||
const ev = mkFormattedMessage(
|
||||
"```py\n# Python Program to calculate the square root\n\n# Note: change this value for a different result\nnum = 8 \n\n# To take the input from the user\n#num = float(input('Enter a number: '))\n\nnum_sqrt = num ** 0.5\nprint('The square root of %0.3f is %0.3f'%(num ,num_sqrt))",
|
||||
"<pre><code class=\"language-py\"># Python Program to calculate the square root\n\n# Note: change this value for a different result\nnum = 8 \n\n# To take the input from the user\n#num = float(input('Enter a number: '))\n\nnum_sqrt = num ** 0.5\nprint('The square root of %0.3f is %0.3f'%(num ,num_sqrt))\n</code></pre>\n",
|
||||
);
|
||||
const { container } = getComponent({ mxEvent: ev }, matrixClient);
|
||||
await waitFor(() => expect(container.querySelector(".hljs-built_in")).toBeInTheDocument());
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
|
||||
it("pills get injected correctly into the DOM", () => {
|
||||
const ev = mkFormattedMessage("Hey User", 'Hey <a href="https://matrix.to/#/@user:server">Member</a>');
|
||||
|
|
|
|||
|
|
@ -50,14 +50,20 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
|
|||
1
|
||||
</span>
|
||||
</span>
|
||||
<code>
|
||||
https://matrix.org/
|
||||
<div
|
||||
style="display: contents;"
|
||||
>
|
||||
<code>
|
||||
https://matrix.org/
|
||||
|
||||
</code>
|
||||
<span />
|
||||
</code>
|
||||
</div>
|
||||
</pre>
|
||||
<span
|
||||
class="mx_EventTile_button mx_EventTile_copyButton "
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -254,14 +260,20 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
|
|||
1
|
||||
</span>
|
||||
</span>
|
||||
<code>
|
||||
@room
|
||||
<div
|
||||
style="display: contents;"
|
||||
>
|
||||
<code>
|
||||
@room
|
||||
|
||||
</code>
|
||||
<span />
|
||||
</code>
|
||||
</div>
|
||||
</pre>
|
||||
<span
|
||||
class="mx_EventTile_button mx_EventTile_copyButton "
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -321,6 +333,133 @@ exports[`<TextualBody /> renders formatted m.text correctly renders formatted bo
|
|||
</div>
|
||||
`;
|
||||
|
||||
exports[`<TextualBody /> renders formatted m.text correctly should syntax highlight code blocks 1`] = `
|
||||
<div
|
||||
class="mx_EventTile_body markdown-body translate"
|
||||
dir="auto"
|
||||
>
|
||||
<div
|
||||
class="mx_EventTile_pre_container"
|
||||
>
|
||||
<pre
|
||||
class="mx_EventTile_collapsedCodeBlock"
|
||||
>
|
||||
<span
|
||||
class="mx_EventTile_lineNumbers"
|
||||
>
|
||||
<span>
|
||||
1
|
||||
</span>
|
||||
<span>
|
||||
2
|
||||
</span>
|
||||
<span>
|
||||
3
|
||||
</span>
|
||||
<span>
|
||||
4
|
||||
</span>
|
||||
<span>
|
||||
5
|
||||
</span>
|
||||
<span>
|
||||
6
|
||||
</span>
|
||||
<span>
|
||||
7
|
||||
</span>
|
||||
<span>
|
||||
8
|
||||
</span>
|
||||
<span>
|
||||
9
|
||||
</span>
|
||||
<span>
|
||||
10
|
||||
</span>
|
||||
</span>
|
||||
<div
|
||||
style="display: contents;"
|
||||
>
|
||||
<code
|
||||
class="language-py"
|
||||
>
|
||||
<span
|
||||
class="hljs-comment"
|
||||
>
|
||||
# Python Program to calculate the square root
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<span
|
||||
class="hljs-comment"
|
||||
>
|
||||
# Note: change this value for a different result
|
||||
</span>
|
||||
|
||||
num =
|
||||
<span
|
||||
class="hljs-number"
|
||||
>
|
||||
8
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
<span
|
||||
class="hljs-comment"
|
||||
>
|
||||
# To take the input from the user
|
||||
</span>
|
||||
|
||||
|
||||
<span
|
||||
class="hljs-comment"
|
||||
>
|
||||
#num = float(input('Enter a number: '))
|
||||
</span>
|
||||
|
||||
|
||||
num_sqrt = num **
|
||||
<span
|
||||
class="hljs-number"
|
||||
>
|
||||
0.5
|
||||
</span>
|
||||
|
||||
|
||||
<span
|
||||
class="hljs-built_in"
|
||||
>
|
||||
print
|
||||
</span>
|
||||
(
|
||||
<span
|
||||
class="hljs-string"
|
||||
>
|
||||
'The square root of %0.3f is %0.3f'
|
||||
</span>
|
||||
%(num ,num_sqrt))
|
||||
|
||||
</code>
|
||||
</div>
|
||||
</pre>
|
||||
<span
|
||||
class="mx_EventTile_button mx_EventTile_expandButton"
|
||||
/>
|
||||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<TextualBody /> renders formatted m.text correctly spoilers get injected properly into the DOM 1`] = `
|
||||
<div
|
||||
class="mx_EventTile_body markdown-body translate"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue