react-native-enriched-html/.playwright/tests/customStyleColors.spec.ts at 03c7e8900efe243badff820e30aa372178e4589a · software-mansion/react-native-enriched-html · GitHub

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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
import { test, expect, type Page } from '@playwright/test';

import {
  editorLocator,
  getSerializedHtml,
  gotoVisualRegression,
  setEditorHtml,
} from '../helpers/visual-regression';
import { toolbarButton } from '../helpers/toolbar';

function textColorButton(page: Page) {
  return page.locator('[data-testid="toolbar-text-color"]');
}

function bgColorButton(page: Page) {
  return page.locator('[data-testid="toolbar-bg-color"]');
}

function colorSwatch(page: Page, color: string) {
  return page.locator(
    `[data-testid="toolbar-color-swatch-${color.replace('#', '')}"]`
  );
}

function colorSwatchClear(page: Page) {
  return page.locator('[data-testid="toolbar-color-swatch-clear"]');
}

async function applyTextColor(page: Page, color: string) {
  await textColorButton(page).click();
  await colorSwatch(page, color).click();
}

async function clearTextColor(page: Page) {
  await textColorButton(page).click();
  await colorSwatchClear(page).click();
}

async function applyBgColor(page: Page, color: string) {
  await bgColorButton(page).click();
  await colorSwatch(page, color).click();
}

async function clearBgColor(page: Page) {
  await bgColorButton(page).click();
  await colorSwatchClear(page).click();
}

const ROUND_TRIP_CASES: { name: string; input: string; expected: string }[] = [
  {
    name: 'foreground color only',
    input: '<html><p><span style="color: #FF0000">Red text</span></p></html>',
    expected:
      '<html><p><span style="color: #FF0000;">Red text</span></p></html>',
  },
  {
    name: 'background color only',
    input:
      '<html><p><span style="background-color: #FFFF00">Yellow bg</span></p></html>',
    expected:
      '<html><p><span style="background-color: #FFFF00;">Yellow bg</span></p></html>',
  },
  {
    name: 'foreground and background color',
    input:
      '<html><p><span style="color: #FF0000; background-color: #FFFF00">Both</span></p></html>',
    expected:
      '<html><p><span style="color: #FF0000; background-color: #FFFF00;">Both</span></p></html>',
  },
  {
    name: '8-digit hex background (transparent)',
    input:
      '<html><p><span style="background-color: #00FF0040">25% green bg</span></p></html>',
    expected:
      '<html><p><span style="background-color: #00FF0040;">25% green bg</span></p></html>',
  },
  {
    name: '8-digit hex foreground (transparent)',
    input:
      '<html><p><span style="color: #0000FF80">50% blue text</span></p></html>',
    expected:
      '<html><p><span style="color: #0000FF80;">50% blue text</span></p></html>',
  },
  {
    name: 'color inside heading',
    input:
      '<html><h6><span style="color: #000000; background-color: #00FF00">Black on green</span></h6></html>',
    expected:
      '<html><h6><span style="color: #000000; background-color: #00FF00;">Black on green</span></h6></html>',
  },
  {
    name: 'color wraps bold mark',
    input:
      '<html><p><span style="color: #FF0000"><b>Bold red</b></span></p></html>',
    expected:
      '<html><p><span style="color: #FF0000;"><b>Bold red</b></span></p></html>',
  },
  {
    name: 'multiple colored spans in one paragraph',
    input:
      '<html><p><span style="color: #FF0000">Red</span> plain <span style="color: #0000FF">Blue</span></p></html>',
    expected:
      '<html><p><span style="color: #FF0000;">Red</span> plain <span style="color: #0000FF;">Blue</span></p></html>',
  },
];

test.describe('custom style colors - HTML serialization', () => {
  test.beforeEach(async ({ page }) => {
    await gotoVisualRegression(page);
  });

  for (const { name, input, expected } of ROUND_TRIP_CASES) {
    test(name, async ({ page }) => {
      await setEditorHtml(page, input);
      await expect.poll(async () => getSerializedHtml(page)).toBe(expected);
    });
  }
});

test('custom style colors visual regression', async ({ page }) => {
  await gotoVisualRegression(page);

  const html = [
    '<html>',
    '<p><span style="color: #FF5733">Standard 6-digit hex text</span></p>',
    '<p><span style="color: #FFFFFF; background-color: #000000">White text on black background</span></p>',
    '<p><span style="background-color: #00FF0040">25% transparent green background</span></p>',
    '<p><span style="color: #0000FF80">50% transparent blue text</span></p>',
    '<p><span style="color: #F00">Red 3-digit shorthand text</span></p>',
    '<h6><span style="color: #000000; background-color: #00FF00">Black text on green</span></h6>',
    '</html>',
  ].join('');

  await setEditorHtml(page, html);

  const editor = editorLocator(page);
  await expect(editor).toHaveScreenshot('custom-style-colors-visual.png');
});

test.describe('custom style colors - toolbar interaction', () => {
  test.beforeEach(async ({ page }) => {
    await gotoVisualRegression(page);
  });

  test('apply foreground color then type text', async ({ page }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyTextColor(page, '#FF0000');
    await editor.pressSequentially('Red text', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="color: #FF0000;">Red text</span></p></html>'
      );
  });

  test('clear foreground color stops coloring new text', async ({ page }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyTextColor(page, '#FF0000');
    await editor.pressSequentially('Red', { delay: 80 });
    await clearTextColor(page);
    await editor.pressSequentially(' plain', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="color: #FF0000;">Red</span> plain</p></html>'
      );
  });

  test('apply background color then type text', async ({ page }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyBgColor(page, '#FFFF00');
    await editor.pressSequentially('Yellow back', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="background-color: #FFFF00;">Yellow back</span></p></html>'
      );
  });

  test('clear background color stops coloring new text', async ({ page }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyBgColor(page, '#FFFF00');
    await editor.pressSequentially('Yellow', { delay: 80 });
    await clearBgColor(page);
    await editor.pressSequentially(' plain', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="background-color: #FFFF00;">Yellow</span> plain</p></html>'
      );
  });

  test('apply foreground and background color together', async ({ page }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyTextColor(page, '#FF0000');
    await applyBgColor(page, '#FFFF00');
    await editor.pressSequentially('Red+Yellow', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="color: #FF0000; background-color: #FFFF00;">Red+Yellow</span></p></html>'
      );
  });

  test('foreground color with bold', async ({ page }) => {
    const editor = editorLocator(page);
    const boldBtn = toolbarButton(page, 'bold');
    await editor.click();

    await boldBtn.click();
    await applyTextColor(page, '#FF0000');
    await editor.pressSequentially('Bold red', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="color: #FF0000;"><b>Bold red</b></span></p></html>'
      );
  });

  test('background color with italic', async ({ page }) => {
    const editor = editorLocator(page);
    const italicBtn = toolbarButton(page, 'italic');
    await editor.click();

    await italicBtn.click();
    await applyBgColor(page, '#FFFF00');
    await editor.pressSequentially('Italic yellow back', { delay: 80 });

    await expect
      .poll(async () => getSerializedHtml(page))
      .toBe(
        '<html><p><span style="background-color: #FFFF00;"><i>Italic yellow back</i></span></p></html>'
      );
  });

  test('toolbar text-color button shows active swatch when color is set', async ({
    page,
  }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyTextColor(page, '#FF0000');

    // Re-open the picker – the chosen swatch should be marked as active
    await textColorButton(page).click();
    await expect(colorSwatch(page, '#FF0000')).toHaveClass(
      /toolbar-color-swatch--active/
    );

    // Close the picker
    await textColorButton(page).click();
  });

  test('toolbar bg-color button shows active swatch when color is set', async ({
    page,
  }) => {
    const editor = editorLocator(page);
    await editor.click();

    await applyBgColor(page, '#FFFF00');

    // Re-open the picker – the chosen swatch should be marked as active
    await bgColorButton(page).click();
    await expect(colorSwatch(page, '#FFFF00')).toHaveClass(
      /toolbar-color-swatch--active/
    );

    // Close the picker
    await bgColorButton(page).click();
  });
});