waygraph 0.15.1 → 0.15.2

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 (13) hide show
  1. package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts +4 -4
  2. package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts +13 -3
  3. package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts +6 -5
  4. package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-password.method.block.ts +2 -1
  5. package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-username.method.block.ts +2 -1
  6. package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts +6 -5
  7. package/package.json +1 -1
  8. package/templates/quickstart/src/blocks/saucedemo-web/cart/nav-cart.block.ts +4 -4
  9. package/templates/quickstart/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts +13 -3
  10. package/templates/quickstart/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts +6 -5
  11. package/templates/quickstart/src/blocks/saucedemo-web/methods/fill-password.method.block.ts +2 -1
  12. package/templates/quickstart/src/blocks/saucedemo-web/methods/fill-username.method.block.ts +2 -1
  13. package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts +6 -5
package/examples/saucedemo/src/blocks/saucedemo-web/cart/nav-cart.block.ts CHANGED
@@ -38,9 +38,9 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
38
38
  cart: {
39
39
  selector: CartSel.cartLink,
40
40
  label: "Cart",
41
- detail: "Open cart",
41
+ detail: "tone: planned (purple) - open cart",
42
+ tone: "planned",
42
43
  focus: true,
43
- color: "#c9a6ff",
44
44
  zoomOut: false,
45
45
  followMouse: false,
46
46
  weight: "bold",
@@ -56,9 +56,9 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
56
56
  ctx.ring("items", {
57
57
  selector: InventorySel.cartItem,
58
58
  label: "Cart items",
59
- detail: "Product landed in cart",
59
+ detail: "tone: success (green) - product in cart",
60
+ tone: "success",
60
61
  focus: true,
61
- color: "#86efac",
62
62
  zoomOut: true,
63
63
  followMouse: false,
64
64
  duration: true,
package/examples/saucedemo/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts CHANGED
@@ -20,13 +20,20 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
20
20
  resolve: () => checkpoint("OrderComplete"),
21
21
  verify: [Trait.text(CheckoutOverviewSel.completeHeader, "Thank you for your order!")],
22
22
  stubBefore: {
23
- finish: { selector: CheckoutOverviewSel.finishBtn, label: "Finish" },
23
+ finish: {
24
+ selector: CheckoutOverviewSel.finishBtn,
25
+ label: "Finish",
26
+ detail: "tone: warning (yellow) - place order",
27
+ tone: "warning",
28
+ weight: "bold",
29
+ },
24
30
  },
25
31
  stubAfter: {
26
32
  thanks: {
27
33
  selector: CheckoutOverviewSel.completeHeader,
28
34
  label: "Order confirmed",
29
- detail: "Thank you for your order!",
35
+ detail: "tone: success (green) - thank you!",
36
+ tone: "success",
30
37
  duration: true,
31
38
  },
32
39
  },
@@ -37,12 +44,14 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
37
44
  caption: "Checkout is a short pipeline",
38
45
  detail: "Cart -> info -> overview -> done. You just placed the order.",
39
46
  tag: "YAP",
47
+ tone: "info",
40
48
  duration: true,
41
49
  },
42
50
  {
43
51
  caption: "Completion page is the durable proof",
44
- detail: "The thank-you header is what verify asserts on.",
52
+ detail: "tone: success - the thank-you header is what verify asserts on.",
45
53
  tag: "YAP",
54
+ tone: "success",
46
55
  selector: CheckoutOverviewSel.completeHeader,
47
56
  duration: 2500,
48
57
  fastMode: 700,
@@ -51,6 +60,7 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
51
60
  caption: "Episode continues after this yap",
52
61
  detail: "Next step rings the same banner, then you move on.",
53
62
  tag: "YAP",
63
+ tone: "planned",
54
64
  selector: CheckoutOverviewSel.completeHeader,
55
65
  duration: true,
56
66
  fastMode: 500,
package/examples/saucedemo/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts CHANGED
@@ -57,17 +57,18 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
57
57
  product: {
58
58
  selector: InventorySel.title(DEMO_PRODUCT_ID),
59
59
  label: "Sauce Labs Backpack",
60
- detail: "Zoom the product",
60
+ detail: "tone: info (blue)",
61
+ tone: "info",
61
62
  focus: true,
62
- color: "#c9a6ff",
63
63
  zoom: 1.45,
64
64
  zoomOut: false,
65
65
  },
66
66
  add: {
67
67
  selector: InventorySel.addBtn(DEMO_PRODUCT_ID),
68
68
  label: "Add to cart",
69
+ detail: "tone: success (green)",
70
+ tone: "success",
69
71
  focus: true,
70
- color: "#86efac",
71
72
  zoom: 1.5,
72
73
  zoomOut: false,
73
74
  weight: "bold",
@@ -92,9 +93,9 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
92
93
  ctx.ring("badge", {
93
94
  selector: InventorySel.cartBadge,
94
95
  label: "Cart badge",
95
- detail: "Item count updated",
96
+ detail: "tone: success (green) - count updated",
97
+ tone: "success",
96
98
  focus: true,
97
- color: "#86efac",
98
99
  zoomOut: false,
99
100
  duration: true,
100
101
  });
package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-password.method.block.ts CHANGED
@@ -26,9 +26,10 @@ export const FillPasswordBlock = defineMethodBlock<LoginPage, LoginPage>({
26
26
  password: {
27
27
  selector: LoginSel.password,
28
28
  label: "Password",
29
+ detail: "tone: planned (purple)",
29
30
  todo: "login-pass",
31
+ tone: "planned",
30
32
  focus: true,
31
- color: "#c9a6ff",
32
33
  zoom: 1.4,
33
34
  },
34
35
  });
package/examples/saucedemo/src/blocks/saucedemo-web/methods/fill-username.method.block.ts CHANGED
@@ -44,9 +44,10 @@ export const FillUsernameBlock = defineMethodBlock<LoginPage, LoginPage>({
44
44
  username: {
45
45
  selector: LoginSel.username,
46
46
  label: "Username",
47
+ detail: "tone: info (blue)",
47
48
  todo: "login-user",
49
+ tone: "info",
48
50
  focus: true,
49
- color: "#c9a6ff",
50
51
  zoom: 1.4,
51
52
  },
52
53
  });
package/examples/saucedemo/src/blocks/saucedemo-web/methods/submit-login.method.block.ts CHANGED
@@ -48,9 +48,10 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
48
48
  submit: {
49
49
  selector: LoginSel.loginButton,
50
50
  label: "Login",
51
+ detail: "tone: warning (yellow)",
51
52
  todo: "login-submit",
53
+ tone: "warning",
52
54
  focus: true,
53
- color: "#86efac",
54
55
  zoom: 1.55,
55
56
  weight: "bold",
56
57
  gesture: "tap",
@@ -72,9 +73,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
72
73
  ctx.ring("error", {
73
74
  selector: LoginSel.errorBanner,
74
75
  label: "Login error banner",
76
+ detail: "tone: danger (red)",
75
77
  tone: "danger",
76
78
  focus: true,
77
- color: "#f87171",
78
79
  duration: true,
79
80
  });
80
81
  return;
@@ -96,9 +97,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
96
97
  ctx.ring("shelf", {
97
98
  selector: ".inventory_list",
98
99
  label: "Product shelf",
99
- detail: "Ready to shop",
100
+ detail: "tone: success (green) - ready to shop",
101
+ tone: "success",
100
102
  focus: true,
101
- color: "#c9a6ff",
102
103
  zoom: 1.25,
103
104
  duration: true,
104
105
  });
@@ -108,9 +109,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
108
109
  ctx.ring("error", {
109
110
  selector: LoginSel.errorBanner,
110
111
  label: "Login error banner",
112
+ detail: "tone: danger (red)",
111
113
  tone: "danger",
112
114
  focus: true,
113
- color: "#f87171",
114
115
  duration: true,
115
116
  });
116
117
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "waygraph",
3
- "version": "0.15.1",
3
+ "version": "0.15.2",
4
4
  "type": "module",
5
5
  "description": "A typed graph of reusable Blocks for driving a browser through E2E flows.",
6
6
  "license": "MIT",
package/templates/quickstart/src/blocks/saucedemo-web/cart/nav-cart.block.ts CHANGED
@@ -38,9 +38,9 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
38
38
  cart: {
39
39
  selector: CartSel.cartLink,
40
40
  label: "Cart",
41
- detail: "Open cart",
41
+ detail: "tone: planned (purple) - open cart",
42
+ tone: "planned",
42
43
  focus: true,
43
- color: "#c9a6ff",
44
44
  zoomOut: false,
45
45
  followMouse: false,
46
46
  weight: "bold",
@@ -56,9 +56,9 @@ export const NavCartBlock = defineNavClickBlock<CartPage>({
56
56
  ctx.ring("items", {
57
57
  selector: InventorySel.cartItem,
58
58
  label: "Cart items",
59
- detail: "Product landed in cart",
59
+ detail: "tone: success (green) - product in cart",
60
+ tone: "success",
60
61
  focus: true,
61
- color: "#86efac",
62
62
  zoomOut: true,
63
63
  followMouse: false,
64
64
  duration: true,
package/templates/quickstart/src/blocks/saucedemo-web/checkout-step-two/methods/finish-order.method.block.ts CHANGED
@@ -20,13 +20,20 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
20
20
  resolve: () => checkpoint("OrderComplete"),
21
21
  verify: [Trait.text(CheckoutOverviewSel.completeHeader, "Thank you for your order!")],
22
22
  stubBefore: {
23
- finish: { selector: CheckoutOverviewSel.finishBtn, label: "Finish" },
23
+ finish: {
24
+ selector: CheckoutOverviewSel.finishBtn,
25
+ label: "Finish",
26
+ detail: "tone: warning (yellow) - place order",
27
+ tone: "warning",
28
+ weight: "bold",
29
+ },
24
30
  },
25
31
  stubAfter: {
26
32
  thanks: {
27
33
  selector: CheckoutOverviewSel.completeHeader,
28
34
  label: "Order confirmed",
29
- detail: "Thank you for your order!",
35
+ detail: "tone: success (green) - thank you!",
36
+ tone: "success",
30
37
  duration: true,
31
38
  },
32
39
  },
@@ -37,12 +44,14 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
37
44
  caption: "Checkout is a short pipeline",
38
45
  detail: "Cart -> info -> overview -> done. You just placed the order.",
39
46
  tag: "YAP",
47
+ tone: "info",
40
48
  duration: true,
41
49
  },
42
50
  {
43
51
  caption: "Completion page is the durable proof",
44
- detail: "The thank-you header is what verify asserts on.",
52
+ detail: "tone: success - the thank-you header is what verify asserts on.",
45
53
  tag: "YAP",
54
+ tone: "success",
46
55
  selector: CheckoutOverviewSel.completeHeader,
47
56
  duration: 2500,
48
57
  fastMode: 700,
@@ -51,6 +60,7 @@ export const FinishOrderBlock = defineMethodBlock<CheckoutOverviewPage, OrderCom
51
60
  caption: "Episode continues after this yap",
52
61
  detail: "Next step rings the same banner, then you move on.",
53
62
  tag: "YAP",
63
+ tone: "planned",
54
64
  selector: CheckoutOverviewSel.completeHeader,
55
65
  duration: true,
56
66
  fastMode: 500,
package/templates/quickstart/src/blocks/saucedemo-web/inventory/methods/add-to-cart.effect.block.ts CHANGED
@@ -57,17 +57,18 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
57
57
  product: {
58
58
  selector: InventorySel.title(DEMO_PRODUCT_ID),
59
59
  label: "Sauce Labs Backpack",
60
- detail: "Zoom the product",
60
+ detail: "tone: info (blue)",
61
+ tone: "info",
61
62
  focus: true,
62
- color: "#c9a6ff",
63
63
  zoom: 1.45,
64
64
  zoomOut: false,
65
65
  },
66
66
  add: {
67
67
  selector: InventorySel.addBtn(DEMO_PRODUCT_ID),
68
68
  label: "Add to cart",
69
+ detail: "tone: success (green)",
70
+ tone: "success",
69
71
  focus: true,
70
- color: "#86efac",
71
72
  zoom: 1.5,
72
73
  zoomOut: false,
73
74
  weight: "bold",
@@ -92,9 +93,9 @@ export const AddToCartBlock = defineEffectBlock<Checkpoint<string>, ItemInCart>(
92
93
  ctx.ring("badge", {
93
94
  selector: InventorySel.cartBadge,
94
95
  label: "Cart badge",
95
- detail: "Item count updated",
96
+ detail: "tone: success (green) - count updated",
97
+ tone: "success",
96
98
  focus: true,
97
- color: "#86efac",
98
99
  zoomOut: false,
99
100
  duration: true,
100
101
  });
package/templates/quickstart/src/blocks/saucedemo-web/methods/fill-password.method.block.ts CHANGED
@@ -26,9 +26,10 @@ export const FillPasswordBlock = defineMethodBlock<LoginPage, LoginPage>({
26
26
  password: {
27
27
  selector: LoginSel.password,
28
28
  label: "Password",
29
+ detail: "tone: planned (purple)",
29
30
  todo: "login-pass",
31
+ tone: "planned",
30
32
  focus: true,
31
- color: "#c9a6ff",
32
33
  zoom: 1.4,
33
34
  },
34
35
  });
package/templates/quickstart/src/blocks/saucedemo-web/methods/fill-username.method.block.ts CHANGED
@@ -44,9 +44,10 @@ export const FillUsernameBlock = defineMethodBlock<LoginPage, LoginPage>({
44
44
  username: {
45
45
  selector: LoginSel.username,
46
46
  label: "Username",
47
+ detail: "tone: info (blue)",
47
48
  todo: "login-user",
49
+ tone: "info",
48
50
  focus: true,
49
- color: "#c9a6ff",
50
51
  zoom: 1.4,
51
52
  },
52
53
  });
package/templates/quickstart/src/blocks/saucedemo-web/methods/submit-login.method.block.ts CHANGED
@@ -48,9 +48,10 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
48
48
  submit: {
49
49
  selector: LoginSel.loginButton,
50
50
  label: "Login",
51
+ detail: "tone: warning (yellow)",
51
52
  todo: "login-submit",
53
+ tone: "warning",
52
54
  focus: true,
53
- color: "#86efac",
54
55
  zoom: 1.55,
55
56
  weight: "bold",
56
57
  gesture: "tap",
@@ -72,9 +73,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
72
73
  ctx.ring("error", {
73
74
  selector: LoginSel.errorBanner,
74
75
  label: "Login error banner",
76
+ detail: "tone: danger (red)",
75
77
  tone: "danger",
76
78
  focus: true,
77
- color: "#f87171",
78
79
  duration: true,
79
80
  });
80
81
  return;
@@ -96,9 +97,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
96
97
  ctx.ring("shelf", {
97
98
  selector: ".inventory_list",
98
99
  label: "Product shelf",
99
- detail: "Ready to shop",
100
+ detail: "tone: success (green) - ready to shop",
101
+ tone: "success",
100
102
  focus: true,
101
- color: "#c9a6ff",
102
103
  zoom: 1.25,
103
104
  duration: true,
104
105
  });
@@ -108,9 +109,9 @@ export const SubmitLoginBlock = defineMethodBlock<LoginPage, LoginSubmitOutcome>
108
109
  ctx.ring("error", {
109
110
  selector: LoginSel.errorBanner,
110
111
  label: "Login error banner",
112
+ detail: "tone: danger (red)",
111
113
  tone: "danger",
112
114
  focus: true,
113
- color: "#f87171",
114
115
  duration: true,
115
116
  });
116
117
  },