fix: artist bio rendering on Artwork screen #13842
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { screen } from "@testing-library/react-native" | ||
| import { HTML } from "app/Components/HTML" | ||
| import { renderWithWrappers } from "app/utils/tests/renderWithWrappers" | ||
|
|
||
| describe("HTML", () => { | ||
| it("applies the color prop to bare text with no wrapping tag", () => { | ||
| renderWithWrappers(<HTML html="Bare text with no tag" color="mono0" />) | ||
|
|
||
| const node = screen.getByText("Bare text with no tag") | ||
| expect(node).toHaveStyle({ color: "#FFFFFF" }) | ||
| }) | ||
|
|
||
| it("applies the color prop to tags without an explicit tagsStyles entry", () => { | ||
| renderWithWrappers(<HTML html="<strong>Bold text</strong>" color="mono0" />) | ||
|
|
||
| const node = screen.getByText("Bold text") | ||
| expect(node).toHaveStyle({ color: "#FFFFFF" }) | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -85,7 +85,7 @@ describe("AboutArtist", () => { | |
| }), | ||
| }) | ||
|
|
||
| const readMoreLink = screen.getByText("Read More") | ||
| fireEvent.press(readMoreLink) | ||
| expect(mockTrackEvent).toBeCalledWith({ | ||
| action_name: "readMore", | ||
|
|
@@ -94,4 +94,26 @@ describe("AboutArtist", () => { | |
| flow: "AboutTheArtist", | ||
| }) | ||
| }) | ||
|
|
||
| it("renders HTML-formatted bio content without raw markdown markers", () => { | ||
| renderWithRelay({ | ||
| Artwork: () => ({ | ||
| isUnlisted: false, | ||
| displayArtistBio: true, | ||
| artists: [ | ||
| { | ||
| biographyBlurb: { | ||
| text: "<h3>Key Exhibitions</h3><ul><li>David Hockney, The Metropolitan Museum of Art, 2017</li></ul>", | ||
| }, | ||
| }, | ||
| ], | ||
| }), | ||
| }) | ||
|
|
||
| expect(screen.getByText("Key Exhibitions")).toBeOnTheScreen() | ||
| expect( | ||
| screen.getByText("David Hockney, The Metropolitan Museum of Art, 2017") | ||
| ).toBeOnTheScreen() | ||
| expect(screen.queryByText(/<h3>/)).not.toBeOnTheScreen() | ||
| }) | ||
|
Comment on lines
+98
to
+118
Contributor
There was a problem hiding this comment. The unlisted/inverted variant is the reason the
Also missing: expand/collapse for this component. |
||
| }) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import { truncateHtml } from "app/utils/truncateHtml" | ||
|
|
||
| describe("truncateHtml", () => { | ||
| it("behaves like a plain slice when there is no markup", () => { | ||
| const { text, wasTruncated } = truncateHtml("Hello world", 5) | ||
|
|
||
| expect(text).toEqual("Hello") | ||
| expect(wasTruncated).toBe(true) | ||
| }) | ||
|
|
||
| it("returns the entire string, untruncated, when the budget exceeds the visible text length", () => { | ||
| const html = "<p>Hi</p>" | ||
| const { text, wasTruncated } = truncateHtml(html, 100) | ||
|
|
||
| expect(text).toEqual(html) | ||
| expect(wasTruncated).toBe(false) | ||
| }) | ||
|
|
||
| it("does not count tag markup toward the visible character budget", () => { | ||
| const html = "<p>Hello</p>" | ||
| const { text, wasTruncated } = truncateHtml(html, 5) | ||
|
|
||
| expect(text).toEqual("<p>Hello</p>") | ||
| expect(wasTruncated).toBe(false) | ||
| }) | ||
|
|
||
| it("stops as soon as the visible character budget is reached, dropping trailing markup", () => { | ||
| const html = "<p>Hello world</p>" | ||
| const { text, wasTruncated } = truncateHtml(html, 5) | ||
|
|
||
| expect(text).toEqual("<p>Hello") | ||
| expect(wasTruncated).toBe(true) | ||
| }) | ||
|
|
||
| it("never cuts in the middle of a tag or attribute", () => { | ||
| const html = | ||
| '<a href="https://www.artsy.net/artist/david-hockney">Hockney</a> retrospective' | ||
|
|
||
| const { text, wasTruncated } = truncateHtml(html, 3) | ||
|
|
||
| expect(text).toEqual('<a href="https://www.artsy.net/artist/david-hockney">Hoc') | ||
| expect(wasTruncated).toBe(true) | ||
| }) | ||
|
|
||
| it("does not cut in the middle of an entity reference", () => { | ||
| const { text } = truncateHtml("Arts & Crafts", 7) | ||
|
|
||
| expect(text).toEqual("Arts & ") | ||
| }) | ||
|
|
||
| it("treats a bare ampersand that is not part of an entity as a normal character", () => { | ||
| const { text } = truncateHtml("Fish & Chips", 6) | ||
|
|
||
| expect(text).toEqual("Fish &") | ||
| }) | ||
|
|
||
| it("stops before a new tag opens once the budget is spent, without leaving it dangling open", () => { | ||
| const html = "<p>abc</p><h3>Key Exhibitions</h3>" | ||
| const { text } = truncateHtml(html, 3) | ||
|
|
||
| expect(text).toEqual("<p>abc</p>") | ||
| }) | ||
|
|
||
| it("still emits closing tags for elements opened before the budget was spent", () => { | ||
| const html = "<p>abc</p>" | ||
| const { text } = truncateHtml(html, 3) | ||
|
|
||
| expect(text).toEqual(html) | ||
| }) | ||
|
|
||
| it("keeps the returned text and wasTruncated flag consistent even on malformed HTML", () => { | ||
| // An unterminated "<b" tag has no single answer for "how much is visible", but the | ||
| // scanner's own text and wasTruncated always agree with each other by construction, | ||
| // since both come from the same pass rather than two independently computed answers. | ||
| const { text, wasTruncated } = truncateHtml("Hi <b", 5) | ||
|
|
||
| expect(text).toEqual("Hi <b") | ||
| expect(wasTruncated).toBe(false) | ||
| }) | ||
| }) |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.