1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { action } from '@storybook/addon-actions';
import { expect, userEvent, waitFor, within } from '@storybook/test';
import { StoryObj } from '@storybook/vue3';
import { i18n } from '@/i18n.js';
import MkDialog from './MkDialog.vue';
const Base = {
render(args) {
return {
components: {
MkDialog,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
events() {
return {
done: action('done'),
closed: action('closed'),
};
},
},
template: '<MkDialog v-bind="props" v-on="events" />',
};
},
args: {
text: 'Hello, world!',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkDialog>;
export const Success = {
...Base,
args: {
...Base.args,
type: 'success',
},
} satisfies StoryObj<typeof MkDialog>;
export const Error = {
...Base,
args: {
...Base.args,
type: 'error',
},
} satisfies StoryObj<typeof MkDialog>;
export const Warning = {
...Base,
args: {
...Base.args,
type: 'warning',
},
} satisfies StoryObj<typeof MkDialog>;
export const Info = {
...Base,
args: {
...Base.args,
type: 'info',
},
} satisfies StoryObj<typeof MkDialog>;
export const Question = {
...Base,
args: {
...Base.args,
type: 'question',
},
} satisfies StoryObj<typeof MkDialog>;
export const Waiting = {
...Base,
args: {
...Base.args,
type: 'waiting',
},
} satisfies StoryObj<typeof MkDialog>;
export const DialogWithActions = {
...Question,
args: {
...Question.args,
text: i18n.ts.areYouSure,
actions: [
{
text: i18n.ts.yes,
primary: true,
callback() {
action('YES')();
},
},
{
text: i18n.ts.no,
callback() {
action('NO')();
},
},
],
},
} satisfies StoryObj<typeof MkDialog>;
export const DialogWithDangerActions = {
...Warning,
args: {
...Warning.args,
text: i18n.ts.resetAreYouSure,
actions: [
{
text: i18n.ts.yes,
danger: true,
primary: true,
callback() {
action('YES')();
},
},
{
text: i18n.ts.no,
callback() {
action('NO')();
},
},
],
},
} satisfies StoryObj<typeof MkDialog>;
export const DialogWithInput = {
...Question,
args: {
...Question.args,
title: 'Hello, world!',
text: undefined,
input: {
placeholder: i18n.ts.inputMessageHere,
type: 'text',
default: null,
minLength: 2,
maxLength: 3,
},
},
async play({ canvasElement }) {
const canvas = within(canvasElement);
await expect(canvasElement).toHaveTextContent(i18n.tsx._dialog.charactersBelow({ current: 0, min: 2 }));
const okButton = canvas.getByRole('button', { name: i18n.ts.ok });
await expect(okButton).toBeDisabled();
const input = canvas.getByRole<HTMLInputElement>('combobox');
await waitFor(() => userEvent.hover(input));
await waitFor(() => userEvent.click(input));
await waitFor(() => userEvent.type(input, 'M'));
await expect(canvasElement).toHaveTextContent(i18n.tsx._dialog.charactersBelow({ current: 1, min: 2 }));
await waitFor(() => userEvent.type(input, 'i'));
await expect(okButton).toBeEnabled();
},
} satisfies StoryObj<typeof MkDialog>;
|
