@justeattakeaway/pie-button 0.14.0 → 0.15.0
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.
- package/.turbo/turbo-build.log +10 -10
- package/CHANGELOG.md +18 -0
- package/README.md +15 -0
- package/dist/index.js +76 -38
- package/package.json +5 -7
- package/src/index.ts +1 -1
- package/test/accessibility/pie-button.spec.ts +30 -26
- package/test/component/pie-button.spec.ts +0 -28
- package/test/visual/pie-button.spec.ts +53 -43
- package/vite.config.js +3 -0
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[11:48:53] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
|
-
|
|
3
|
+
vite v4.2.3 building for production...
|
|
4
4
|
transforming...
|
|
5
|
-
|
|
5
|
+
✓ 27 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
dist/index.js 8.25 kB │ gzip: 2.25 kB
|
|
9
|
+
dist/react.js 59.13 kB │ gzip: 15.94 kB
|
|
10
|
+
|
|
11
|
+
[vite:dts] Start generate declaration files...
|
|
12
|
+
✓ built in 6.12s
|
|
13
|
+
[vite:dts] Declaration files built in 5541ms.
|
|
14
|
+
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.15.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
8
|
+
|
|
9
|
+
- [Changed] - use prop variant helper for simpler and more extensive visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
10
|
+
|
|
11
|
+
- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
12
|
+
|
|
13
|
+
- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
14
|
+
|
|
15
|
+
- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
|
|
20
|
+
|
|
3
21
|
## 0.14.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -128,3 +128,18 @@ Run at the root of the monorepo:
|
|
|
128
128
|
```
|
|
129
129
|
yarn test:visual --filter=pie-button
|
|
130
130
|
```
|
|
131
|
+
|
|
132
|
+
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
133
|
+
|
|
134
|
+
Setup via bash:
|
|
135
|
+
|
|
136
|
+
```
|
|
137
|
+
export PERCY_TOKEN_PIE_BUTTON=abcde
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Setup via package.json:
|
|
141
|
+
|
|
142
|
+
Under scripts `test:visual` replace the environment variable with the below:
|
|
143
|
+
|
|
144
|
+
```
|
|
145
|
+
PERCY_TOKEN_PIE_BUTTON=abcde
|
package/dist/index.js
CHANGED
|
@@ -1,75 +1,113 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as m, LitElement as y, html as u } from "lit";
|
|
2
2
|
import { property as c } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const h = (t, o, n) => function(e, r) {
|
|
5
|
+
const a = `#${r}`;
|
|
6
|
+
Object.defineProperty(e, r, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[a];
|
|
9
9
|
},
|
|
10
10
|
set(i) {
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
`<${t}> Invalid value "${i}" provided for property "${
|
|
14
|
-
`Must be one of: ${
|
|
11
|
+
const x = this[a];
|
|
12
|
+
o.includes(i) ? this[a] = i : (console.error(
|
|
13
|
+
`<${t}> Invalid value "${i}" provided for property "${r}".`,
|
|
14
|
+
`Must be one of: ${o.join(" | ")}.`,
|
|
15
15
|
`Falling back to default value: "${n}"`
|
|
16
|
-
), this[
|
|
16
|
+
), this[a] = n), this.requestUpdate(r, x);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
19
|
+
}, z = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
|
|
20
20
|
`;
|
|
21
|
-
var
|
|
22
|
-
for (var
|
|
23
|
-
(i = t[
|
|
24
|
-
return
|
|
21
|
+
var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, M = (t, o, n, e) => {
|
|
22
|
+
for (var r = e > 1 ? void 0 : e ? w(o, n) : o, a = t.length - 1, i; a >= 0; a--)
|
|
23
|
+
(i = t[a]) && (r = (e ? i(o, n, r) : i(r)) || r);
|
|
24
|
+
return e && r && $(o, n, r), r;
|
|
25
25
|
};
|
|
26
|
-
|
|
27
|
-
class l extends g {
|
|
26
|
+
class f extends y {
|
|
28
27
|
constructor() {
|
|
29
|
-
super(...arguments), this.
|
|
28
|
+
super(...arguments), this.propKeyValues = "";
|
|
29
|
+
}
|
|
30
|
+
// Renders a string such as 'size: small, isFullWidth: true'
|
|
31
|
+
// as HTML such as:
|
|
32
|
+
// <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
|
|
33
|
+
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
|
+
_renderPropKeyValues() {
|
|
35
|
+
return this.propKeyValues.split(",").map((o) => {
|
|
36
|
+
const [n, e] = o.split(":");
|
|
37
|
+
return u`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${e}</code></p>`;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
// eslint-disable-next-line class-methods-use-this
|
|
41
|
+
render() {
|
|
42
|
+
return u`
|
|
43
|
+
<div class="c-webComponentTestWrapper">
|
|
44
|
+
${this._renderPropKeyValues()}
|
|
45
|
+
<div class="c-webComponentTestWrapper-slot">
|
|
46
|
+
<slot></slot>
|
|
47
|
+
</div>
|
|
48
|
+
</div>`;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
f.styles = m(z);
|
|
52
|
+
M([
|
|
53
|
+
c({ type: String })
|
|
54
|
+
], f.prototype, "propKeyValues", 2);
|
|
55
|
+
const g = "web-component-test-wrapper";
|
|
56
|
+
customElements.get(g) || customElements.define(g, f);
|
|
57
|
+
const P = `.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}.o-btn[variant=primary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}.o-btn[variant=primary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}.o-btn[variant=secondary]:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}.o-btn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=outline]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}.o-btn[variant=ghost]:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}.o-btn[isFullWidth]{inline-size:100%}.o-btn[disabled]{--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled);border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-btn[disabled][variant=ghost]{--btn-bg-color: var(--dt-color-container-default);outline:none}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.o-btn[size=small]{--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
|
|
58
|
+
`;
|
|
59
|
+
var d = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(d || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), k = Object.defineProperty, W = Object.getOwnPropertyDescriptor, s = (t, o, n, e) => {
|
|
60
|
+
for (var r = e > 1 ? void 0 : e ? W(o, n) : o, a = t.length - 1, i; a >= 0; a--)
|
|
61
|
+
(i = t[a]) && (r = (e ? i(o, n, r) : i(r)) || r);
|
|
62
|
+
return e && r && k(o, n, r), r;
|
|
63
|
+
};
|
|
64
|
+
const p = "pie-button";
|
|
65
|
+
class l extends y {
|
|
66
|
+
constructor() {
|
|
67
|
+
super(...arguments), this.size = d.MEDIUM, this.type = v.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1, this.isFullWidth = !1;
|
|
30
68
|
}
|
|
31
69
|
render() {
|
|
32
70
|
const {
|
|
33
|
-
type:
|
|
71
|
+
type: o,
|
|
34
72
|
disabled: n,
|
|
35
|
-
isFullWidth:
|
|
36
|
-
variant:
|
|
37
|
-
size:
|
|
73
|
+
isFullWidth: e,
|
|
74
|
+
variant: r,
|
|
75
|
+
size: a
|
|
38
76
|
} = this;
|
|
39
|
-
return
|
|
77
|
+
return u`
|
|
40
78
|
<button
|
|
41
79
|
class="o-btn"
|
|
42
|
-
type=${
|
|
43
|
-
variant=${
|
|
44
|
-
size=${
|
|
80
|
+
type=${o}
|
|
81
|
+
variant=${r}
|
|
82
|
+
size=${a}
|
|
45
83
|
?disabled=${n}
|
|
46
|
-
?isFullWidth=${
|
|
84
|
+
?isFullWidth=${e}>
|
|
47
85
|
<slot></slot>
|
|
48
86
|
</button>`;
|
|
49
87
|
}
|
|
50
88
|
}
|
|
51
|
-
l.styles =
|
|
52
|
-
|
|
89
|
+
l.styles = m(P);
|
|
90
|
+
s([
|
|
53
91
|
c(),
|
|
54
|
-
|
|
92
|
+
h(p, Object.values(d), d.MEDIUM)
|
|
55
93
|
], l.prototype, "size", 2);
|
|
56
|
-
|
|
94
|
+
s([
|
|
57
95
|
c(),
|
|
58
|
-
|
|
96
|
+
h(p, Object.values(v), v.SUBMIT)
|
|
59
97
|
], l.prototype, "type", 2);
|
|
60
|
-
|
|
98
|
+
s([
|
|
61
99
|
c(),
|
|
62
|
-
|
|
100
|
+
h(p, Object.values(b), b.PRIMARY)
|
|
63
101
|
], l.prototype, "variant", 2);
|
|
64
|
-
|
|
102
|
+
s([
|
|
65
103
|
c({ type: Boolean })
|
|
66
104
|
], l.prototype, "disabled", 2);
|
|
67
|
-
|
|
105
|
+
s([
|
|
68
106
|
c({ type: Boolean })
|
|
69
107
|
], l.prototype, "isFullWidth", 2);
|
|
70
|
-
customElements.define(
|
|
108
|
+
customElements.define(p, l);
|
|
71
109
|
export {
|
|
72
|
-
|
|
110
|
+
d as BUTTON_SIZE,
|
|
73
111
|
v as BUTTON_TYPE,
|
|
74
112
|
b as BUTTON_VARIANT,
|
|
75
113
|
l as PieButton
|
package/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.15.0",
|
|
4
4
|
"description": "PIE design system button built using web components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"build": "yarn build:wrapper pie-button && run -T vite build
|
|
10
|
+
"build": "yarn build:wrapper pie-button && run -T vite build ",
|
|
11
11
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
12
12
|
"lint:style:fix": "yarn lint:style --fix",
|
|
13
|
-
"watch": "run -T vite build --
|
|
13
|
+
"watch": "run -T vite build --watch",
|
|
14
14
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
15
15
|
"test:ci": "yarn test",
|
|
16
16
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
@@ -20,12 +20,10 @@
|
|
|
20
20
|
},
|
|
21
21
|
"author": "JustEatTakeaway - Design System Web Team",
|
|
22
22
|
"license": "Apache-2.0",
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
25
|
-
},
|
|
26
23
|
"devDependencies": {
|
|
27
24
|
"@justeat/pie-design-tokens": "5.1.0",
|
|
28
|
-
"@justeattakeaway/pie-components-config": "workspace:*"
|
|
25
|
+
"@justeattakeaway/pie-components-config": "workspace:*",
|
|
26
|
+
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
29
27
|
},
|
|
30
28
|
"volta": {
|
|
31
29
|
"extends": "../../../package.json"
|
package/src/index.ts
CHANGED
|
@@ -1,36 +1,40 @@
|
|
|
1
1
|
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
-
import { PieButton } from '@/index';
|
|
3
|
-
import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
|
|
4
2
|
import AxeBuilder from '@axe-core/playwright';
|
|
3
|
+
import {
|
|
4
|
+
PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
5
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
6
|
+
import { PieButton } from '@/index';
|
|
7
|
+
import { BUTTON_TYPE, BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
|
|
5
8
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
const props: PropObject = {
|
|
10
|
+
variant: Object.values(BUTTON_VARIANT),
|
|
11
|
+
size: Object.values(BUTTON_SIZE),
|
|
12
|
+
type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
|
|
13
|
+
isFullWidth: [true, false],
|
|
14
|
+
disabled: [true, false],
|
|
15
|
+
};
|
|
9
16
|
|
|
10
|
-
|
|
11
|
-
|
|
17
|
+
const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
|
|
18
|
+
const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
19
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
12
20
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
slots: {
|
|
23
|
-
default: `Hello, ${size} ${variant} Button!`
|
|
21
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
22
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
|
|
23
|
+
await mount(
|
|
24
|
+
PieButton,
|
|
25
|
+
{
|
|
26
|
+
props: { ...combo },
|
|
27
|
+
slots: {
|
|
28
|
+
default: 'Hello world',
|
|
29
|
+
},
|
|
24
30
|
},
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
31
|
+
);
|
|
32
|
+
}));
|
|
28
33
|
|
|
29
34
|
const results = await new AxeBuilder.default({ page })
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
.withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
|
|
36
|
+
.disableRules(['color-contrast', 'color-contrast-enhanced'])
|
|
37
|
+
.analyze();
|
|
33
38
|
|
|
34
39
|
expect(results.violations).toEqual([]);
|
|
35
|
-
|
|
36
|
-
})
|
|
40
|
+
}));
|
|
@@ -2,34 +2,6 @@ import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
|
2
2
|
import { PieButton } from '@/index';
|
|
3
3
|
import { BUTTON_SIZE, BUTTON_VARIANT } from '@/defs';
|
|
4
4
|
|
|
5
|
-
const sizes = Object.values(BUTTON_SIZE);
|
|
6
|
-
const variants = Object.values(BUTTON_VARIANT);
|
|
7
|
-
const disabledStates = [true, false];
|
|
8
|
-
|
|
9
|
-
variants.forEach((variant) => {
|
|
10
|
-
test(`should render - ${variant}`, async ({ mount }) => {
|
|
11
|
-
for (const size of sizes) {
|
|
12
|
-
for (const isDisabled of disabledStates) {
|
|
13
|
-
const component = await mount(
|
|
14
|
-
PieButton,
|
|
15
|
-
{
|
|
16
|
-
props: {
|
|
17
|
-
size,
|
|
18
|
-
variant,
|
|
19
|
-
disabled: isDisabled,
|
|
20
|
-
},
|
|
21
|
-
slots: {
|
|
22
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
);
|
|
26
|
-
|
|
27
|
-
await expect(component).toContainText(`Hello, ${size} ${variant} Button!`);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
|
|
33
5
|
test('should correctly work with native click events', async ({ mount }) => {
|
|
34
6
|
const messages: string[] = [];
|
|
35
7
|
const expectedEventMessage = 'Native event dispatched';
|
|
@@ -1,52 +1,62 @@
|
|
|
1
1
|
import { test } from '@sand4rt/experimental-ct-web';
|
|
2
2
|
import percySnapshot from '@percy/playwright';
|
|
3
|
+
import type {
|
|
4
|
+
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
5
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
|
|
6
|
+
import {
|
|
7
|
+
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
8
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
9
|
+
import {
|
|
10
|
+
createTestWebComponent,
|
|
11
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
|
|
12
|
+
import {
|
|
13
|
+
WebComponentTestWrapper,
|
|
14
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
3
15
|
import { PieButton } from '@/index';
|
|
4
16
|
import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from '@/defs';
|
|
5
17
|
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
18
|
+
const props: PropObject = {
|
|
19
|
+
variant: Object.values(BUTTON_VARIANT),
|
|
20
|
+
size: Object.values(BUTTON_SIZE),
|
|
21
|
+
type: BUTTON_TYPE.BUTTON, // Changing the type does not affect the appearance of the button
|
|
22
|
+
isFullWidth: [true, false],
|
|
23
|
+
disabled: [true, false],
|
|
24
|
+
};
|
|
9
25
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
for (const size of sizes) {
|
|
13
|
-
for (const disabledState of disabledStates) {
|
|
14
|
-
await mount(
|
|
15
|
-
PieButton,
|
|
16
|
-
{
|
|
17
|
-
props: {
|
|
18
|
-
type: BUTTON_TYPE.BUTTON,
|
|
19
|
-
size,
|
|
20
|
-
variant,
|
|
21
|
-
disabled: disabledState,
|
|
22
|
-
isFullWidth: false,
|
|
23
|
-
},
|
|
24
|
-
slots: {
|
|
25
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
);
|
|
29
|
-
}
|
|
26
|
+
// Renders a <pie-button> HTML string with the given prop values
|
|
27
|
+
const renderTestPieButton = (propVals: WebComponentPropValues) => `<pie-button variant="${propVals.variant}" size="${propVals.size}" type="${propVals.type}" ${propVals.isFullWidth ? 'isFullWidth' : ''} ${propVals.disabled ? 'disabled' : ''}>Hello world</pie-button>`;
|
|
30
28
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
{
|
|
35
|
-
props: {
|
|
36
|
-
type: BUTTON_TYPE.BUTTON,
|
|
37
|
-
size,
|
|
38
|
-
variant,
|
|
39
|
-
disabled: disabledState,
|
|
40
|
-
isFullWidth: true,
|
|
41
|
-
},
|
|
42
|
-
slots: {
|
|
43
|
-
default: `Hello, ${size} ${variant} Button!`,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
29
|
+
const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
|
|
30
|
+
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
31
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
49
32
|
|
|
50
|
-
|
|
51
|
-
|
|
33
|
+
// This ensures the component is registered in the DOM for each test
|
|
34
|
+
// This is not required if your tests mount the web component directly in the tests
|
|
35
|
+
test('Component registered in the DOM', async ({ mount }) => {
|
|
36
|
+
await mount(
|
|
37
|
+
PieButton,
|
|
38
|
+
{
|
|
39
|
+
props: {},
|
|
40
|
+
slots: {},
|
|
41
|
+
},
|
|
42
|
+
);
|
|
52
43
|
});
|
|
44
|
+
|
|
45
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
46
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
47
|
+
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieButton);
|
|
48
|
+
const propKeyValues = `size: ${testComponent.propValues.size}, isFullWidth: ${testComponent.propValues.isFullWidth}, disabled: ${testComponent.propValues.disabled}`;
|
|
49
|
+
|
|
50
|
+
await mount(
|
|
51
|
+
WebComponentTestWrapper,
|
|
52
|
+
{
|
|
53
|
+
props: { propKeyValues },
|
|
54
|
+
slots: {
|
|
55
|
+
default: testComponent.renderedString.trim(),
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
);
|
|
59
|
+
}));
|
|
60
|
+
|
|
61
|
+
await percySnapshot(page, `PIE Button - Variant: ${variant}`);
|
|
62
|
+
}));
|
package/vite.config.js
ADDED