@sapudex/web-components 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/cypress/fixtures/footer-links.ts +221 -0
  2. package/cypress/specs/Checkbox.cy.tsx +92 -0
  3. package/cypress/specs/Footer.cy.tsx +313 -0
  4. package/cypress/specs/PhoneNumberField.cy.tsx +2 -2
  5. package/cypress/specs/TextField.cy.tsx +4 -0
  6. package/cypress/specs/Tooltip.cy.tsx +26 -0
  7. package/cypress/specs/Upload.cy.tsx +3 -3
  8. package/dist/Checkbox.d.ts +17 -0
  9. package/dist/Checkbox.js +36 -1
  10. package/dist/Checkbox.js.map +1 -1
  11. package/dist/Link.d.ts +3 -4
  12. package/dist/Link.js +4 -5
  13. package/dist/Link.js.map +1 -1
  14. package/dist/PasswordField.d.ts +10 -0
  15. package/dist/PasswordField.js +14 -0
  16. package/dist/PasswordField.js.map +1 -1
  17. package/dist/PhoneNumberField.d.ts +1 -0
  18. package/dist/PhoneNumberField.js +15 -1
  19. package/dist/PhoneNumberField.js.map +1 -1
  20. package/dist/RadioButton.d.ts +1 -0
  21. package/dist/RadioButton.js +1 -0
  22. package/dist/RadioButton.js.map +1 -1
  23. package/dist/TextField.d.ts +8 -0
  24. package/dist/TextField.js +15 -0
  25. package/dist/TextField.js.map +1 -1
  26. package/dist/Tooltip.d.ts +5 -0
  27. package/dist/Tooltip.js +11 -1
  28. package/dist/Tooltip.js.map +1 -1
  29. package/dist/assets/{InputSuggestions-DoWo0hwS.js → InputSuggestions-CP3cBQsh.js} +1 -1
  30. package/dist/assets/{ListItemStandardExpandableTextTemplate-BymOTLVD.js → ListItemStandardExpandableTextTemplate-CLBtdbBK.js} +1 -1
  31. package/dist/assets/bundle-C9ZlnwwH.css +1 -0
  32. package/dist/assets/{bundle.esm-D10tX-qa.js → bundle.esm-jHcdiVfj.js} +221 -221
  33. package/dist/css/themes/Button.css +1 -1
  34. package/dist/css/themes/Checkbox.css +1 -1
  35. package/dist/css/themes/RadioButton.css +1 -1
  36. package/dist/css/themes/RatingIndicator.css +1 -1
  37. package/dist/css/themes/Search.css +1 -1
  38. package/dist/css/themes/Slider.css +1 -1
  39. package/dist/css/themes/Tooltip.css +1 -1
  40. package/dist/css/themes/WizardTab.css +1 -1
  41. package/dist/custom-elements-internal.json +72 -1
  42. package/dist/custom-elements.json +72 -1
  43. package/dist/generated/templates/FilterMenuTemplate.lit.js +1 -1
  44. package/dist/generated/templates/FilterMenuTemplate.lit.js.map +1 -1
  45. package/dist/generated/templates/PasswordFieldTemplate.lit.js +1 -1
  46. package/dist/generated/templates/PasswordFieldTemplate.lit.js.map +1 -1
  47. package/dist/generated/templates/TextFieldTemplate.lit.js +1 -1
  48. package/dist/generated/templates/TextFieldTemplate.lit.js.map +1 -1
  49. package/dist/generated/themes/Button.css.d.ts +1 -1
  50. package/dist/generated/themes/Button.css.js +1 -1
  51. package/dist/generated/themes/Button.css.js.map +1 -1
  52. package/dist/generated/themes/Checkbox.css.d.ts +1 -1
  53. package/dist/generated/themes/Checkbox.css.js +1 -1
  54. package/dist/generated/themes/Checkbox.css.js.map +1 -1
  55. package/dist/generated/themes/RadioButton.css.d.ts +1 -1
  56. package/dist/generated/themes/RadioButton.css.js +1 -1
  57. package/dist/generated/themes/RadioButton.css.js.map +1 -1
  58. package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
  59. package/dist/generated/themes/RatingIndicator.css.js +1 -1
  60. package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
  61. package/dist/generated/themes/Search.css.d.ts +1 -1
  62. package/dist/generated/themes/Search.css.js +1 -1
  63. package/dist/generated/themes/Search.css.js.map +1 -1
  64. package/dist/generated/themes/Slider.css.d.ts +1 -1
  65. package/dist/generated/themes/Slider.css.js +1 -1
  66. package/dist/generated/themes/Slider.css.js.map +1 -1
  67. package/dist/generated/themes/Tooltip.css.d.ts +1 -1
  68. package/dist/generated/themes/Tooltip.css.js +1 -1
  69. package/dist/generated/themes/Tooltip.css.js.map +1 -1
  70. package/dist/generated/themes/WizardTab.css.d.ts +1 -1
  71. package/dist/generated/themes/WizardTab.css.js +1 -1
  72. package/dist/generated/themes/WizardTab.css.js.map +1 -1
  73. package/dist/vscode.html-custom-data.json +15 -0
  74. package/dist/web-types.json +34 -1
  75. package/package.json +1 -1
  76. package/src/Checkbox.ts +47 -0
  77. package/src/FilterMenu.hbs +1 -0
  78. package/src/Link.ts +4 -5
  79. package/src/PasswordField.hbs +1 -0
  80. package/src/PasswordField.ts +14 -0
  81. package/src/PhoneNumberField.ts +19 -1
  82. package/src/RadioButton.ts +1 -0
  83. package/src/TextField.hbs +2 -0
  84. package/src/TextField.ts +16 -0
  85. package/src/Tooltip.ts +19 -0
  86. package/src/generated/templates/FilterMenuTemplate.lit.ts +1 -1
  87. package/src/generated/templates/PasswordFieldTemplate.lit.ts +1 -1
  88. package/src/generated/templates/TextFieldTemplate.lit.ts +1 -1
  89. package/src/generated/themes/Button.css.ts +1 -1
  90. package/src/generated/themes/Checkbox.css.ts +1 -1
  91. package/src/generated/themes/RadioButton.css.ts +1 -1
  92. package/src/generated/themes/RatingIndicator.css.ts +1 -1
  93. package/src/generated/themes/Search.css.ts +1 -1
  94. package/src/generated/themes/Slider.css.ts +1 -1
  95. package/src/generated/themes/Tooltip.css.ts +1 -1
  96. package/src/generated/themes/WizardTab.css.ts +1 -1
  97. package/src/themes/Button.css +9 -5
  98. package/src/themes/Checkbox.css +15 -1
  99. package/src/themes/RadioButton.css +2 -0
  100. package/src/themes/Search.css +1 -0
  101. package/src/themes/Tooltip.css +1 -1
  102. package/src/themes/WizardTab.css +5 -0
  103. package/dist/assets/bundle-7XIcgsQH.css +0 -1
@@ -0,0 +1,221 @@
1
+ export const quickLinks = [
2
+ {
3
+ "title":"Cloud Solutions",
4
+ "url":"#",
5
+ "id":"cloud",
6
+ "target":"_blank",
7
+ },
8
+ {
9
+ "title":"Sustainability Management",
10
+ "url":"#",
11
+ "id":"sustainability",
12
+ "target":"_blank",
13
+ },
14
+ {
15
+ "title":"Business Network",
16
+ "url":"#",
17
+ "id":"business",
18
+ "target":"_blank",
19
+ },
20
+ {
21
+ "title":"Conversational AI",
22
+ "url":"#",
23
+ "id":"conversational",
24
+ "target":"_blank",
25
+ },
26
+ {
27
+ "title":"SAP Insights",
28
+ "url":"#",
29
+ "id":"sapInsights",
30
+ "target":"_blank",
31
+ },
32
+ {
33
+ "title":"SAP Community",
34
+ "url":"#",
35
+ "id":"sapCommunity",
36
+ "target":"_blank",
37
+ }
38
+ ];
39
+
40
+ export const trendingLinks = [
41
+ {
42
+ "title":"What is Grow?",
43
+ "url":"#",
44
+ "id":"whatIsGrow",
45
+ "target":"_self",
46
+ },
47
+ {
48
+ "title":"What is RISE?",
49
+ "url":"#",
50
+ "id":"whatIsRise",
51
+ "target":"_blank",
52
+ },
53
+ {
54
+ "title":"Sustainability",
55
+ "url":"#",
56
+ "id":"sustainability",
57
+ "target":"_blank",
58
+ },
59
+ {
60
+ "title":"Transforming Offerings",
61
+ "url":"#",
62
+ "id":"transforming",
63
+ "target":"_blank",
64
+ },
65
+ {
66
+ "title":"Partner Ecosystem",
67
+ "url":"#",
68
+ "target":"_blank",
69
+ },
70
+ {
71
+ "title":"SAP Community",
72
+ "url":"#",
73
+ "target":"_blank",
74
+ },
75
+ {
76
+ "title":"Developer",
77
+ "url":"#",
78
+ "id":"developer",
79
+ "target":"_blank",
80
+ },
81
+ {
82
+ "title":"Support Portal",
83
+ "url":"#",
84
+ "target":"_blank",
85
+ }
86
+ ];
87
+
88
+ export const aboutLinks = [
89
+ {
90
+ "title":"Company Information",
91
+ "url":"#",
92
+ "id":"company",
93
+ "target":"_top",
94
+ },
95
+ {
96
+ "title":"Worldwide Directory",
97
+ "url":"#",
98
+ "id":"worldwide",
99
+ "target":"_blank",
100
+ },
101
+ {
102
+ "title":"Investor Relations",
103
+ "url":"#",
104
+ "id":"investor",
105
+ "target":"_blank",
106
+ },
107
+ {
108
+ "title":"Careers",
109
+ "url":"#",
110
+ "target":"_blank",
111
+ },
112
+ {
113
+ "title":"News and Press",
114
+ "url":"#",
115
+ "target":"_blank",
116
+ },
117
+ {
118
+ "title":"Events",
119
+ "url":"#",
120
+ "target":"_blank",
121
+ },
122
+ {
123
+ "title":"Customer Stories",
124
+ "url":"#",
125
+ "target":"_blank",
126
+ },
127
+ {
128
+ "title":"Newsletter",
129
+ "url":"#",
130
+ "target":"_blank",
131
+ }
132
+ ];
133
+
134
+ export const siteInformationLinks = [
135
+ {
136
+ "title":"Privacy",
137
+ "url":"#",
138
+ "id":"privacy",
139
+ "target":"_parent",
140
+ },
141
+ {
142
+ "title":"Terms of Use",
143
+ "url":"#",
144
+ "id":"terms",
145
+ "target":"_blank",
146
+ },
147
+ {
148
+ "title":"Legal Disclosure",
149
+ "url":"#",
150
+ "id":"legal",
151
+ "target":"_blank",
152
+ },
153
+ {
154
+ "title":"Copyright",
155
+ "url":"#",
156
+ "id":"copyright",
157
+ "target":"_blank",
158
+ },
159
+ {
160
+ "title":"Trademark",
161
+ "url":"#",
162
+ "id":"trademark",
163
+ "target":"_blank",
164
+ },
165
+ {
166
+ "title":"Cookie Preferences",
167
+ "url":"#",
168
+ "id":"cookie",
169
+ "target":"_blank",
170
+ },
171
+ {
172
+ "title":"Do Not Share/Sell My Personal Information",
173
+ "url":"#",
174
+ "target":"_blank",
175
+ }
176
+ ];
177
+
178
+ export const socialLinks = [
179
+ {
180
+ "url":"https://facebook.com",
181
+ "iconUrl":"./assets/facebook.svg",
182
+ "id":"facebookId",
183
+ "name":"facebook",
184
+ "target":"_blank",
185
+ },
186
+ {
187
+ "url":"https://twitter.com",
188
+ "iconUrl":"./assets/twitter.svg",
189
+ "id":"twitterId",
190
+ "name":"twitter",
191
+ "target":"_blank",
192
+ },
193
+ {
194
+ "url":"https://youtube.com",
195
+ "iconUrl":"./assets/youtube.svg",
196
+ "id":"youtubeId",
197
+ "name":"youtube",
198
+ "target":"_blank",
199
+ },
200
+ {
201
+ "url":"https://linkedin.com",
202
+ "iconUrl":"./assets/linkedin.svg",
203
+ "id":"linkedinId",
204
+ "name":"linkedin",
205
+ "target":"_blank",
206
+ },
207
+ {
208
+ "url":"https://instagram.com",
209
+ "iconUrl":"./assets/instagram.svg",
210
+ "id":"instagramId",
211
+ "name":"instagram",
212
+ "target":"_blank",
213
+ },
214
+ {
215
+ "url":"https://sap.com",
216
+ "iconUrl":"./assets/email.svg",
217
+ "id":"sapId",
218
+ "name":"sap",
219
+ "target":"_blank",
220
+ }
221
+ ];
@@ -0,0 +1,92 @@
1
+ import UDExCheckbox from "../../src/Checkbox.js";
2
+
3
+ describe("Checkbox", () => {
4
+ it("renders corectly", () => {
5
+ cy.mount(<UDExCheckbox></UDExCheckbox>)
6
+ cy.get("[udex-checkbox]").should("exist")
7
+ });
8
+
9
+ it("correctly text as label", () => {
10
+ cy.mount(<UDExCheckbox text="checkbox"></UDExCheckbox>)
11
+ cy.get("[udex-checkbox]").shadow().find("ui5-label")
12
+ .should("have.text", "checkbox")
13
+ });
14
+
15
+ it("renders readonly corectly", () => {
16
+ cy.mount(<UDExCheckbox readonly></UDExCheckbox>)
17
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
18
+ .should("have.attr", "aria-readonly", "true")
19
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
20
+ const {color} = window.getComputedStyle($checkbox[0])
21
+ expect(color).eqls("rgb(85, 107, 129)")
22
+ })
23
+ });
24
+
25
+ it("renders disabled corectly", () => {
26
+ cy.mount(<UDExCheckbox disabled></UDExCheckbox>)
27
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
28
+ .should("have.attr", "aria-disabled", "true")
29
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
30
+ const { opacity } = window.getComputedStyle($checkbox[0])
31
+ expect(opacity).eqls("1")
32
+ })
33
+ });
34
+
35
+ it("renders displayonly corectly", () => {
36
+ cy.mount(<UDExCheckbox displayOnly></UDExCheckbox>)
37
+ cy.get("[udex-checkbox]").shadow().find("ui5-icon").should("be.visible")
38
+ });
39
+
40
+ it("correctly sets aria-checked", () => {
41
+ cy.mount(<UDExCheckbox checked></UDExCheckbox>)
42
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
43
+ .should("have.attr", "aria-checked", "true")
44
+ });
45
+
46
+ it("renders required corectly", () => {
47
+ cy.mount(<UDExCheckbox required></UDExCheckbox>)
48
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
49
+ .should("have.attr", "aria-required", "true")
50
+ });
51
+
52
+ it("sets wrappintType to `None` by default", () => {
53
+ cy.mount(<UDExCheckbox required></UDExCheckbox>)
54
+ cy.get("[udex-checkbox]").should("have.attr", "wrapping-type", "None")
55
+ });
56
+
57
+ it("correctly sets accessible name", () => {
58
+ cy.mount(<UDExCheckbox accessibleName="checkbox"></UDExCheckbox>)
59
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
60
+ .should("have.attr", "aria-label", "checkbox")
61
+ });
62
+
63
+ it("correctly sets accessible name ref", () => {
64
+ cy.mount(<>
65
+ <p id="checkbox">Checkox</p>
66
+ <UDExCheckbox accessibleNameRef="checkbox"></UDExCheckbox>
67
+ </> )
68
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-root")
69
+ .should("have.attr", "aria-label", "Checkox")
70
+ });
71
+
72
+ it("correctly sets valueState to `None` by default", () => {
73
+ cy.mount(<UDExCheckbox></UDExCheckbox>)
74
+ cy.get("[udex-checkbox]").should("have.attr", "value-state", "None")
75
+ });
76
+
77
+ it("correctly sets valueState to `Success`", () => {
78
+ cy.mount(<UDExCheckbox valueState="Success"></UDExCheckbox>)
79
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
80
+ const {borderColor} = window.getComputedStyle($checkbox[0])
81
+ expect(borderColor).eqls("rgb(54, 164, 29)")
82
+ })
83
+ });
84
+
85
+ it("correctly sets valueState to `Error`", () => {
86
+ cy.mount(<UDExCheckbox valueState="Error"></UDExCheckbox>)
87
+ cy.get("[udex-checkbox]").shadow().find(".ui5-checkbox-inner").then($checkbox => {
88
+ const {borderColor} = window.getComputedStyle($checkbox[0])
89
+ expect(borderColor).eqls("rgb(238, 57, 57)")
90
+ })
91
+ });
92
+ });
@@ -0,0 +1,313 @@
1
+ import UDExFooter from "../../src/Footer.js";
2
+ import { quickLinks, trendingLinks, aboutLinks, siteInformationLinks, socialLinks } from "../fixtures/footer-links.js";
3
+ import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
4
+
5
+ const defaultFooter = <UDExFooter
6
+ id="footer"
7
+ logoLink="#test"
8
+ logoTitle="SAP Title"
9
+ logoAriaLabel="SAP Homepage"
10
+ logoUrl='./assets/sap-logo.svg'
11
+ contactNumbersList='[{"country":"France","number":"400-619-0727"},{"country":"United State","number":"1-800-872-1727"}]'
12
+ localCountryNumbersLink='#'
13
+ chatWithUsLink='#'
14
+ quickLinks={JSON.stringify(quickLinks)}
15
+ trendingLinks = {JSON.stringify(trendingLinks)}
16
+ aboutLinks = {JSON.stringify(aboutLinks)}
17
+ siteInformationLinks = {JSON.stringify(siteInformationLinks)}
18
+ socialLinks = {JSON.stringify(socialLinks)}
19
+ contactUsLink='#'>
20
+ </UDExFooter>
21
+
22
+ describe("Footer", () => {
23
+ beforeEach(() => {
24
+ cy.mount(defaultFooter)
25
+ });
26
+
27
+ it("is correctly rendered", () => {
28
+ cy.get("#footer").shadow().find(".udex-footer").should("be.visible")
29
+ });
30
+
31
+ it("renders phone numbers", () => {
32
+ cy.get("#footer").shadow().find(".udex-footer__number").first().should("have.text", "400-619-0727")
33
+ cy.get("#footer").shadow().find(".udex-footer__number").eq(1).should("have.text", "1-800-872-1727")
34
+ });
35
+
36
+ it("renders contact link", () => {
37
+ cy.get("#footer").shadow().find(".udex-footer__contact-us-link").first().should("have.attr", "href", "#")
38
+ });
39
+
40
+ it("renders chat link", () => {
41
+ cy.get("#footer").shadow().find(".udex-footer__chat-with-us-link").first().should("have.attr", "href", "#")
42
+ });
43
+
44
+ it("renders quick link target", () => {
45
+ cy.get("#footer").shadow().find(".udex-footer__quick-links a").should("have.attr", "target", "_blank")
46
+ });
47
+
48
+ it("renders trending link target", () => {
49
+ cy.get("#footer").shadow().find(".udex-footer__trending-links a").should("have.attr", "target", "_self")
50
+ });
51
+
52
+ it("renders site about sap link target", () => {
53
+ cy.get("#footer").shadow().find(".udex-footer__about-links a").first().should("have.attr", "target", "_top")
54
+ });
55
+
56
+ it("renders site information link target", () => {
57
+ cy.get("#footer").shadow().find(".udex-footer__site-information-links a").first().should("have.attr", "target", "_parent")
58
+ });
59
+
60
+ it("renders social link target", () => {
61
+ cy.get("#footer").shadow().find(".udex-footer__social-container a").first().should("have.attr", "target", "_blank")
62
+ });
63
+
64
+ it("renders all social links", () => {
65
+ cy.get("#footer").shadow().find(".udex-footer__social-container a").should("have.length", 6)
66
+ });
67
+
68
+ it("renders copyright", () => {
69
+ cy.get("#footer").shadow().find(".udex-footer__copyright-text").first().should("have.text", "© 2025 SAP SE or an SAP affiliate company. All rights reserved.")
70
+ });
71
+
72
+ it("renders chinese text when specified in url", () => {
73
+ setLanguage("zh_cn")
74
+ cy.mount(defaultFooter)
75
+ cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-text").should("have.text", "ICP_NUMBER PUBLIC_SECURITY_NETWORK_NUMBER")
76
+ cy.get("#footer").shadow().find(".udex-footer__copyright-chinese-link").should("have.attr", "href", "https://beian.miit.gov.cn/")
77
+ });
78
+
79
+ describe("Desktop tests", () => {
80
+ beforeEach(() => {
81
+ cy.viewport(1920, 1080);
82
+ cy.mount(defaultFooter)
83
+ cy.on('window:alert', () => false)
84
+ });
85
+
86
+ it("renders links holder", () => {
87
+ cy.get("#footer").shadow().find(".udex-footer__links").should("be.visible")
88
+ });
89
+
90
+ it("does not render accordion", () => {
91
+ cy.get("#footer").shadow().find("udex-accordion").should("not.exist");
92
+ });
93
+
94
+ it("renders all quick links", () => {
95
+ cy.get("#footer").shadow().find(".udex-footer__quick-links .udex-footer__links-list--desktop li").should("have.length", 6)
96
+ });
97
+
98
+ it("renders all trending links", () => {
99
+ cy.get("#footer").shadow().find(".udex-footer__trending-links .udex-footer__links-list--desktop li").should("have.length", 8)
100
+ });
101
+
102
+ it("renders site aboout sap links", () => {
103
+ cy.get("#footer").shadow().find(".udex-footer__about-links .udex-footer__links-list--desktop li").should("have.length", 8)
104
+ });
105
+
106
+ it("renders site information links", () => {
107
+ cy.get("#footer").shadow().find(".udex-footer__site-information-links .udex-footer__links-list--desktop li").should("have.length", 7)
108
+ });
109
+
110
+ it("sets data-id attribute to quick links", () => {
111
+ cy.get("#footer").shadow().find(".udex-footer__quick-links a").each(($quickLink, index) => {
112
+ expect($quickLink[0]).attr("data-id").eqls(quickLinks[index].id)
113
+ })
114
+ });
115
+
116
+ it("sets data-id attribute to trending links", () => {
117
+ cy.get("#footer").shadow().find(".udex-footer__trending-links a").each(($trendingLink, index) => {
118
+ if($trendingLink[0].hasAttribute("data-id")) {
119
+ expect($trendingLink[0]).attr("data-id").eqls(trendingLinks[index].id)
120
+ }
121
+ })
122
+ });
123
+
124
+ it("sets data-id attribute to about links", () => {
125
+ cy.get("#footer").shadow().find(".udex-footer__about-links a").each(($aboutLink, index) => {
126
+ if($aboutLink[0].hasAttribute("data-id")) {
127
+ expect($aboutLink[0]).attr("data-id").eqls(aboutLinks[index].id)
128
+ }
129
+ })
130
+ });
131
+
132
+ it("sets data-id attribute to site information links", () => {
133
+ cy.get("#footer").shadow().find(".udex-footer__site-information-links a").each(($siteLink, index) => {
134
+ if($siteLink[0].hasAttribute("data-id")) {
135
+ expect($siteLink[0]).attr("data-id").eqls(siteInformationLinks[index].id)
136
+ }
137
+ })
138
+ });
139
+
140
+ it("sets data-id attribute to social links", () => {
141
+ cy.get("#footer").shadow().find(".udex-footer__social-container a").each(($socialLink, index) => {
142
+ expect($socialLink[0]).attr("data-id").eqls(socialLinks[index].id)
143
+ })
144
+ });
145
+
146
+ it("corectly renders default logo title", () => {
147
+ cy.get("#footer").shadow().find(".udex-footer__logo a").should("have.attr", "title", "SAP Title")
148
+ });
149
+
150
+ it("sets aria-label for logo link", () => {
151
+ cy.get("#footer").shadow().find(".udex-footer__logo a").should("have.attr", "aria-label", "SAP Homepage")
152
+ });
153
+
154
+ it("emits \"ui5-logo-click\" when clicking on logo", () => {
155
+ const logoClickHandler = cy.stub().as("logoClickHandler")
156
+ cy.get("#footer").then($footer =>
157
+ $footer[0].addEventListener("logo-click", logoClickHandler)
158
+ ).shadow().find(".udex-footer__logo a").click()
159
+
160
+ cy.get("@logoClickHandler").should("have.been.called")
161
+ });
162
+
163
+ it("emits \"ui5-back-to-top-click\" when clicking on back button", () => {
164
+ const backToTopHandler = cy.stub().as("backToTopHandler")
165
+ cy.get("#footer").then($footer =>
166
+ $footer[0].addEventListener("back-to-top-click", backToTopHandler)
167
+ ).shadow().find(".udex-footer__back-to-top-button").click()
168
+
169
+ cy.get("@backToTopHandler").should("have.been.called")
170
+ });
171
+
172
+ it("emits \"ui5-back-to-top-click\" when clicking on back button", () => {
173
+ const backToTopHandler = cy.stub().as("backToTopHandler")
174
+ cy.get("#footer").then($footer =>
175
+ $footer[0].addEventListener("back-to-top-click", backToTopHandler)
176
+ ).shadow().find(".udex-footer__back-to-top-button").click()
177
+
178
+ cy.get("@backToTopHandler").should("have.been.called")
179
+ });
180
+
181
+
182
+ it("emits \"contact-email-click\" when clicking on email", () => {
183
+ const contactEmailClickHandler = cy.stub().as("contactEmailHandler")
184
+ cy.get("#footer").then($footer =>
185
+ $footer[0].addEventListener("contact-email-click", contactEmailClickHandler)
186
+ ).shadow().find(".udex-footer__contact-us-link").then($emailLink => {
187
+ $emailLink[0].removeAttribute("href")
188
+ }).click()
189
+
190
+ cy.get("@contactEmailHandler").should("have.been.called")
191
+ });
192
+
193
+ it("emits \"ui5-contact-chat-click\" when click on chat link", () => {
194
+ const contactChatClickHandler = cy.stub().as("contactChatClickHandler")
195
+ cy.get("#footer").then($footer =>
196
+ $footer[0].addEventListener("contact-chat-click", contactChatClickHandler)
197
+ ).shadow().find(".udex-footer__chat-with-us a").click()
198
+
199
+ cy.get("@contactChatClickHandler").should("have.been.called")
200
+ });
201
+
202
+ it("emits \"ui5-quick-links-click\" when click on quick links", () => {
203
+ const expectedDetails = {
204
+ name: "Cloud Solutions",
205
+ id: "cloud"
206
+ }
207
+
208
+ const quickLinksClickHandler = cy.stub().as("quickLinksHandler")
209
+ cy.get("#footer").then($footer =>
210
+ $footer[0].addEventListener("quick-links-click", quickLinksClickHandler)
211
+ ).shadow().find(".udex-footer__quick-links a").first().click()
212
+
213
+ cy.get("@quickLinksHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
214
+ });
215
+
216
+ it("emits \"ui5-trending-click\" when click on trending links", () => {
217
+ const expectedDetails = {
218
+ name: "What is Grow?",
219
+ id: "whatIsGrow"
220
+ }
221
+
222
+ const trendingLinksClickHandler = cy.stub().as("trendingLinksHandler")
223
+ cy.get("#footer").then($footer =>
224
+ $footer[0].addEventListener("trending-click", trendingLinksClickHandler)
225
+ ).shadow().find(".udex-footer__trending-links a").first().then($trendingLink => {
226
+ $trendingLink[0].removeAttribute("href")
227
+ }).click()
228
+
229
+ cy.get("@trendingLinksHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
230
+ });
231
+
232
+ it("emits \"ui5-about-sap-click\" when click on about links", () => {
233
+ const expectedDetails = {
234
+ name: "Company Information",
235
+ id: "company"
236
+ }
237
+
238
+ const aboutSapClickHandler = cy.stub().as("aboutSapHandler")
239
+ cy.get("#footer").then($footer =>
240
+ $footer[0].addEventListener("about-sap-click", aboutSapClickHandler)
241
+ ).shadow().find(".udex-footer__about-links a").first().then($aboutLink => {
242
+ $aboutLink[0].removeAttribute("href")
243
+ }).click()
244
+
245
+ cy.get("@aboutSapHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
246
+ });
247
+
248
+ it("emits \"ui5-site-information-click\" when click on information links", () => {
249
+ const expectedDetails = {
250
+ name: "Privacy",
251
+ id: "privacy"
252
+ }
253
+
254
+ const siteInfoClickHandler = cy.stub().as("siteInfoClickHandler")
255
+
256
+ cy.get("#footer").then($footer =>
257
+ $footer[0].addEventListener("site-information-click", siteInfoClickHandler)
258
+ ).shadow().find(".udex-footer__site-information-links a").first().then($siteInfoLink => {
259
+ $siteInfoLink[0].removeAttribute("href")
260
+ }).click()
261
+
262
+ cy.get("@siteInfoClickHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
263
+ });
264
+
265
+ it("emits \"contact-phone-local-numbers-click\" when click on social links", () => {
266
+ const localPhoneCickHandler = cy.stub().as("localPhoneHandler")
267
+
268
+ cy.get("#footer").then($footer =>
269
+ $footer[0].addEventListener("contact-phone-local-numbers-click", localPhoneCickHandler)
270
+ ).shadow().find(".udex-footer__remark-link").then($localPhoneLink => {
271
+ $localPhoneLink[0].removeAttribute("href")
272
+ }).click()
273
+
274
+ cy.get("@localPhoneHandler").should("have.been.called")
275
+ });
276
+
277
+ it("emits \"ui5-social-media-link-click\" when click on social links", () => {
278
+ const expectedDetails = {
279
+ name: "facebook",
280
+ id: "facebookId"
281
+ }
282
+
283
+ const socialMediaLinkCickHandler = cy.stub().as("socialMediaLinkHandler")
284
+
285
+ cy.get("#footer").then($footer =>
286
+ $footer[0].addEventListener("social-media-link-click", socialMediaLinkCickHandler)
287
+ ).shadow().find(".udex-footer__social-container a").first().then($socialLink => {
288
+ $socialLink[0].removeAttribute("href")
289
+ }).click()
290
+
291
+ cy.get("@socialMediaLinkHandler").should("have.been.called").its("lastCall.args.0.detail").should("include", expectedDetails)
292
+ });
293
+ });
294
+
295
+ describe("Mobile tests", () => {
296
+ beforeEach(() => {
297
+ cy.viewport(900, 1080)
298
+ cy.mount(defaultFooter)
299
+ });
300
+
301
+ it("renders accordion", () => {
302
+ cy.get("#footer").shadow().find("udex-accordion").should("exist")
303
+ });
304
+
305
+ it("does not render links holder", () => {
306
+ cy.get("#footer").shadow().find(".udex-footer__links").should("not.exist")
307
+ });
308
+
309
+ it("tests if mobile view is correctly rendered", () => {
310
+ cy.get("#footer").shadow().find("udex-accordion-item.udex-footer__action-item").should("exist")
311
+ });
312
+ });
313
+ });
@@ -118,12 +118,12 @@ describe("PhoneNumberField", () => {
118
118
 
119
119
  it("check that the maxlength and formatting is applied correctly", () => {
120
120
  cy.mount(defaultPhoneNumberField)
121
- cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 67891")
121
+ cy.get("#default").shadow().find("input").type("+380123456789123456").should("have.value", "+380 12345 6789123")
122
122
  });
123
123
 
124
124
  it("check that the phone format with brackets is applied correctly", () => {
125
125
  cy.mount(defaultPhoneNumberField)
126
- cy.get("#default").shadow().find("input").type(`+180123456789123456`).should("have.value", "+1 (801) 234-5678");
126
+ cy.get("#default").shadow().find("input").type(`+180123456789123456`).should("have.value", "+1 (801) 234-56789123");
127
127
  });
128
128
 
129
129
  it("emit input when the value of the component changes", () => {
@@ -55,6 +55,10 @@ describe("Text Field", () => {
55
55
  cy.get("#defaultTextField").shadow().find("input").should("not.have.attr", "required");
56
56
  });
57
57
 
58
+ it("Autocomplete is off by default", () => {
59
+ cy.get("#defaultTextField").shadow().find("input").should("have.attr", "autocomplete", "off");
60
+ });
61
+
58
62
  it("Disabled attribute is set", () => {
59
63
  cy.mount(<UDExTextField disabled></UDExTextField>)
60
64
  cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "disabled");
@@ -72,4 +72,30 @@ describe("Tooltip", () => {
72
72
  .should("have.attr", "open");
73
73
  });
74
74
  });
75
+
76
+ it("sync open when close by clicking outside", () => {
77
+ cy.mount(
78
+ <>
79
+ {tooltipOpener}
80
+ {basicTooltip}
81
+ </>
82
+ );
83
+
84
+ cy.get('#udex-tooltip').as("tooltip")
85
+ .invoke('attr', 'open', 'true');
86
+
87
+ cy.get("@tooltip")
88
+ .should("have.attr", "open");
89
+
90
+ cy.get("body").realClick();
91
+
92
+ cy.get("@tooltip")
93
+ .should("not.have.attr", "open");
94
+
95
+ cy.get('#udex-tooltip').as("tooltip")
96
+ .invoke('attr', 'open', 'true');
97
+
98
+ cy.get("@tooltip")
99
+ .should("have.attr", "open");
100
+ });
75
101
  });