Skip to content

[ObjectPageTitle / Toolbar]: Unit tests fail with Syntax error: > :nth-last-child(n + 2) is invalid coming from ObjectPageTitle/index.js #7045

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.

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

Closed
1 task done
arijitpatra-sap opened this issue Mar 6, 2025 · 2 comments
Labels
compatibility Issues related to conflicts or problems with other independent projects or tools. consulting

Comments

@arijitpatra-sap
Copy link
Member

arijitpatra-sap commented Mar 6, 2025

Describe the bug

Issue during unit tests with ObjectPageTitle... The selector > :nth-last-child(n + 2) is in @ui5/webcomponents-react/dist/components/ObjectPageTitle/index.js

usage:

<ObjectPageTitle
                    actionsBar={
                        <Toolbar design={ToolbarDesign.Transparent}>
                            <CreateTemplateButton
                                dispatchHostRefresh={remount}
                            />
                        </Toolbar>
                    }
                    header={
                        <Title
                            data-testid="vm-header-title"
                            wrappingType={WrappingType.None}
                        >
                            {t('variantManagement.title')}
                        </Title>
                    }
                ></ObjectPageTitle>

removing the Toolbar component solves the issue (just keeping the CreateTemplateButton

Image

, so maybe some issue with the Toolbar component here under ObjectPageTitle

Isolated Example

No response

Reproduction steps

...

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

^2.7.1

UI5 Web Components Version

^2.7.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@Lukas742
Copy link
Contributor

Lukas742 commented Mar 6, 2025

Hi @arijitpatra-sap

this is an issue with jsdom, as :has is not supported there. --> jsdom/jsdom#3506

We replaced :has in this PR, so the issue should be resolved for you with the next ui5wcr version. Since :has is a standard API and supported by all major browsers, this doesn't mean that it's not used anywhere else, so you will have to most probably polyfill or mock the behavior (if possible).

In case you feel like this should be supported by the ui5-webcomponents DOM shim, then please raise a feature request in the ui5-webcomponents repo, so our colleagues can decide if it's feasible to implement.

@Lukas742 Lukas742 closed this as completed Mar 6, 2025
@Lukas742 Lukas742 added consulting compatibility Issues related to conflicts or problems with other independent projects or tools. labels Mar 6, 2025
@arijitpatra-sap
Copy link
Member Author

Thanks, a package upgrade solved this... I came back to close this ticket and saw your response here. Thanks. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
compatibility Issues related to conflicts or problems with other independent projects or tools. consulting
Projects
Status: 🆕 New
Development

No branches or pull requests

2 participants