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

feat(ui5-expandable-text): add ExpandableText component #10220

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

feat(ui5-expandable-text): add ExpandableText component #10220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1296788
feat(ui5-expandable-text): add ExpandableText component
dimovpetar Nov 20, 2024
e1efcec
test: add first test
dimovpetar Nov 20, 2024
d635a18
test: add more tests
dimovpetar Nov 20, 2024
b1ffd45
test: add tests for popover
dimovpetar Nov 21, 2024
302ddf4
test: simplify them using aliases
dimovpetar Nov 21, 2024
3a13eb7
test: add tests for empty text and 0 max characters
dimovpetar Nov 21, 2024
4aae06c
feat: implement emtpyIndicatorMode
dimovpetar Nov 21, 2024
aae938e
feat: take Show More and Show Less from messagebundle
dimovpetar Nov 21, 2024
b17b561
feat: add mobile support
dimovpetar Nov 22, 2024
6995c88
fix: closing popover on toggle click now works
dimovpetar Nov 22, 2024
0ff19cb
test: add kh handling tests
dimovpetar Nov 22, 2024
c15972e
Merge branch 'main' of github.com:SAP/ui5-webcomponents into feat_exp…
dimovpetar Nov 22, 2024
6a69688
docs: add basic sample
dimovpetar Nov 22, 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
321 changes: 321 additions & 0 deletions packages/main/cypress/specs/ExpandableText.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,321 @@
import { html } from "lit";
import "../../src/ExpandableText.js";

describe("ExpandableText", () => {
describe("Rendering and Interaction", () => {
it("Should display full text if maxCharacters is not set", () => {
const text = "This is a very long text that should be displayed";

cy.mount(html`<ui5-expandable-text text=${text}></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]")
.shadow()
.find("[ui5-text]")
.contains(text)
.should("exist");
});

it("Should display full text if maxCharacters are set, but not exceeded", () => {
const text = "This is a very long text that should be displayed";

cy.mount(html`<ui5-expandable-text text=${text} max-characters="9999"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]")
.shadow()
.find("[ui5-text]")
.contains(text)
.should("exist");
});

it("Should display 'Show More' if maxCharacters are exceeded", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text.substring(0, maxCharacters))
.should("exist");

cy.get("@expTextShadow")
.find(".ui5-exp-text-ellipsis")
.contains("... ")
.should("exist");

cy.get("@expTextShadow")
.find("[ui5-link].ui5-exp-text-toggle")
.contains("Show More")
.should("exist");
});

it("Should display 'Show More' if maxCharacters are exceeded, set to 0", () => {
const text = "This is a very long text that should be displayed";

cy.mount(html`<ui5-expandable-text text=${text} max-characters="0"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(/^$/)
.should("exist");

cy.get("@expTextShadow")
.find(".ui5-exp-text-ellipsis")
.should("exist");

cy.get("@expTextShadow")
.find("[ui5-link].ui5-exp-text-toggle")
.contains("Show More")
.should("exist");
});

it("Should NOT display 'Show More' if maxCharacters are 0, but text is empty", () => {
cy.mount(html`<ui5-expandable-text max-characters="0"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(/^$/)
.should("exist");

cy.get("@expTextShadow")
.find(".ui5-exp-text-ellipsis")
.should("not.exist");

cy.get("@expTextShadow")
.find("[ui5-link].ui5-exp-text-toggle")
.should("not.exist");
});

it("Toggling 'Show More' and 'Show Less'", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
cy.get("@expTextShadow").find("[ui5-link].ui5-exp-text-toggle").as("toggle");

cy.get("@toggle")
.contains("Show More")
.realClick();

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text)
.should("exist");

cy.get("@toggle")
.contains("Show Less")
.realClick();

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text.substring(0, maxCharacters))
.should("exist");

cy.get("@toggle")
.contains("Show More")
.should("exist");
});

it("Toggling 'Show More' and 'Show Less' with keyboard", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`
<button id="before">before</button>
<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>
`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
cy.get("@expTextShadow").find("[ui5-link].ui5-exp-text-toggle").as("toggle");

cy.get("#before")
.focus();

cy.get("#before")
.realPress("Tab");

cy.get("@toggle")
.realPress("Enter");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text)
.should("exist");

cy.get("@toggle")
.contains("Show Less")
.realPress("Enter");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text.substring(0, maxCharacters))
.should("exist");

cy.get("@toggle")
.contains("Show More")
.should("exist");
});
});

describe("Empty Indicator", () => {
it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => {
cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="On"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]")
.shadow()
.find("[ui5-text]")
.should("have.attr", "empty-indicator-mode", "On");
});

it("Should NOT display empty indicator if text is empty and emptyIndicatorMode=Off", () => {
cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="Off"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]")
.shadow()
.find("[ui5-text]")
.should("have.attr", "empty-indicator-mode", "Off");
});
});

describe("Rendering and Interaction with overflowMode=Popover", () => {
it("Toggling 'Show More' and 'Show Less'", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
cy.get("@expTextShadow").find("[ui5-link].ui5-exp-text-toggle").as("toggle");

cy.get("@expTextShadow")
.find("[ui5-text]")
.contains(text.substring(0, maxCharacters))
.should("exist");

cy.get("@expTextShadow")
.find(".ui5-exp-text-ellipsis")
.contains("... ")
.should("exist");

cy.get("@toggle")
.contains("Show More")
.realClick();

cy.get("@toggle")
.invoke("attr", "id")
.as("expectedOpenerId");

cy.get("@expTextShadow")
.find("[ui5-responsive-popover]")
.as("rpo");

cy.get("@rpo")
.should("exist")
.should("have.attr", "open");

cy.get("@rpo")
.should("have.attr", "content-only-on-desktop");

cy.get("@rpo")
.invoke("attr", "opener")
.then(function testOpenerId(opener) {
expect(opener).to.equal(this.expectedOpenerId);
});

cy.get("@toggle")
.contains("Show Less")
.realClick();

cy.get("@expTextShadow")
.find("[ui5-responsive-popover]")
.should("not.have.attr", "open");
});

it("Toggling 'Show More' and 'Show Less' with keyboard", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`
<button id="before">before</button>
<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>
`);

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
cy.get("@expTextShadow").find("[ui5-link].ui5-exp-text-toggle").as("toggle");

cy.get("#before")
.focus();

cy.get("#before")
.realPress("Tab");

cy.get("@toggle")
.realPress("Enter");

cy.get("@expTextShadow")
.find("[ui5-responsive-popover]")
.as("rpo");

cy.get("@rpo")
.should("exist")
.should("have.attr", "open");

cy.get("@toggle")
.contains("Show Less")
.should("exist");

cy.realPress("Escape");

cy.get("@rpo")
.should("not.have.attr", "open");

cy.get("@toggle")
.contains("Show More")
.should("exist");
});

it("Toggling 'Show More' and 'Show Less' on Mobile Device", () => {
const text = "This is a very long text that should be displayed";
const maxCharacters = 5;

cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);
cy.ui5SimulateDevice("phone");

cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");

cy.get("@expTextShadow")
.find("[ui5-link].ui5-exp-text-toggle")
.contains("Show More")
.realClick();

cy.get("@expTextShadow")
.find("[ui5-responsive-popover]").as("rpo");

cy.get("@rpo")
.should("exist")
.should("have.attr", "open");

cy.get("@rpo")
.should("have.attr", "_hide-header");

cy.get("@rpo")
.contains("[slot=footer] [ui5-button]", "Close")
.should("exist");

cy.get("@rpo")
.contains("[slot=footer] [ui5-button]", "Close")
.realClick();

cy.get("@rpo")
.should("not.have.attr", "open");
});
});
});
42 changes: 42 additions & 0 deletions packages/main/src/ExpandableText.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div>
<ui5-text
class="ui5-exp-text-text"
empty-indicator-mode="{{emptyIndicatorMode}}"
>
{{_displayedText}}
</ui5-text>

{{#if _maxCharactersExceeded}}
<span class="ui5-exp-text-ellipsis">{{_ellipsisText}}</span>
<ui5-link
id="{{_id}}-toggle"
class="ui5-exp-text-toggle"
@click="{{_handleToggleClick}}"
>
{{_textForToggle}}
</ui5-link>

{{#if _usePopover}}
<ui5-responsive-popover
?open="{{_expanded}}"
opener="{{_id}}-toggle"
content-only-on-desktop
_hide-header="true"
@ui5-close="{{_handlePopoverClose}}"
>
<ui5-text>{{text}}</ui5-text>
<div
slot="footer"
class="ui5-exp-text-footer"
>
<ui5-button
design="Transparent"
@click="{{_handleCloseButtonClick}}"
>
{{_closeButtonText}}
</ui5-button>
</div>
</ui5-responsive-popover>
{{/if}}
{{/if}}
</div>
Loading
Loading