1) [chromium] › interactivity/directive-bind.spec.ts:203:8 › data-wp-bind › attribute hydration › value is correctly hydrated for different values Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 1 Array [ "true", - null, + "", ] 216 | name 217 | ); > 218 | expect( [ type, hydratedAttr ] ).toEqual( [ | ^ 219 | type, 220 | attrValue, 221 | ] ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-bind.spec.ts:218:39

1) [chromium] › interactivity/directive-bind.spec.ts:203:8 › data-wp-bind › attribute hydration › value is correctly hydrated for different values Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 1 Array [ "true", - null, + "", ] 216 | name 217 | ); > 218 | expect( [ type, hydratedAttr ] ).toEqual( [ | ^ 219 | type, 220 | attrValue, 221 | ] ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-bind.spec.ts:218:39

1) [chromium] › interactivity/directive-bind.spec.ts:203:8 › data-wp-bind › attribute hydration › value is correctly hydrated for different values Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 1 Array [ "true", - null, + "", ] 216 | name 217 | ); > 218 | expect( [ type, hydratedAttr ] ).toEqual( [ | ^ 219 | type, 220 | attrValue, 221 | ] ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-bind.spec.ts:218:39

2) [chromium] › interactivity/directive-class.spec.ts:21:6 › data-wp-class › remove class if callback returns falsy value Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('remove class if callback returns falsy value') Expected string: "foo bar" Received string: " bar foo" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('remove class if callback returns falsy value') - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" 27 | await expect( el ).toHaveClass( 'bar' ); 28 | await page.getByTestId( 'toggle falseValue' ).click(); > 29 | await expect( el ).toHaveClass( 'foo bar' ); | ^ 30 | await page.getByTestId( 'toggle falseValue' ).click(); 31 | await expect( el ).toHaveClass( 'bar' ); 32 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:29:22

2) [chromium] › interactivity/directive-class.spec.ts:21:6 › data-wp-class › remove class if callback returns falsy value Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('remove class if callback returns falsy value') Expected string: "foo bar" Received string: " bar foo" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('remove class if callback returns falsy value') - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" 27 | await expect( el ).toHaveClass( 'bar' ); 28 | await page.getByTestId( 'toggle falseValue' ).click(); > 29 | await expect( el ).toHaveClass( 'foo bar' ); | ^ 30 | await page.getByTestId( 'toggle falseValue' ).click(); 31 | await expect( el ).toHaveClass( 'bar' ); 32 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:29:22

2) [chromium] › interactivity/directive-class.spec.ts:21:6 › data-wp-class › remove class if callback returns falsy value Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('remove class if callback returns falsy value') Expected string: "foo bar" Received string: " bar foo" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('remove class if callback returns falsy value') - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" - locator resolved to <div class=" bar foo" data-wp-class--foo="state.false…></div> - unexpected value " bar foo" 27 | await expect( el ).toHaveClass( 'bar' ); 28 | await page.getByTestId( 'toggle falseValue' ).click(); > 29 | await expect( el ).toHaveClass( 'foo bar' ); | ^ 30 | await page.getByTestId( 'toggle falseValue' ).click(); 31 | await expect( el ).toHaveClass( 'bar' ); 32 | } ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:29:22

3) [chromium] › interactivity/directive-class.spec.ts:71:6 › data-wp-class › can toggle class in the middle Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('can toggle class in the middle') Expected string: "foo bar baz" Received string: "foo baz bar" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('can toggle class in the middle') - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" 71 | test( 'can toggle class in the middle', async ( { page } ) => { 72 | const el = page.getByTestId( 'can toggle class in the middle' ); > 73 | await expect( el ).toHaveClass( 'foo bar baz' ); | ^ 74 | await page.getByTestId( 'toggle trueValue' ).click(); 75 | await expect( el ).toHaveClass( 'foo baz' ); 76 | await page.getByTestId( 'toggle trueValue' ).click(); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:73:22

3) [chromium] › interactivity/directive-class.spec.ts:71:6 › data-wp-class › can toggle class in the middle Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('can toggle class in the middle') Expected string: "foo bar baz" Received string: "foo baz bar" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('can toggle class in the middle') - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" 71 | test( 'can toggle class in the middle', async ( { page } ) => { 72 | const el = page.getByTestId( 'can toggle class in the middle' ); > 73 | await expect( el ).toHaveClass( 'foo bar baz' ); | ^ 74 | await page.getByTestId( 'toggle trueValue' ).click(); 75 | await expect( el ).toHaveClass( 'foo baz' ); 76 | await page.getByTestId( 'toggle trueValue' ).click(); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:73:22

3) [chromium] › interactivity/directive-class.spec.ts:71:6 › data-wp-class › can toggle class in the middle Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: Timed out 5000ms waiting for expect(locator).toHaveClass(expected) Locator: getByTestId('can toggle class in the middle') Expected string: "foo bar baz" Received string: "foo baz bar" Call log: - expect.toHaveClass with timeout 5000ms - waiting for getByTestId('can toggle class in the middle') - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" - locator resolved to <div class="foo baz bar" data-wp-class--bar="state.tr…></div> - unexpected value "foo baz bar" 71 | test( 'can toggle class in the middle', async ( { page } ) => { 72 | const el = page.getByTestId( 'can toggle class in the middle' ); > 73 | await expect( el ).toHaveClass( 'foo bar baz' ); | ^ 74 | await page.getByTestId( 'toggle trueValue' ).click(); 75 | await expect( el ).toHaveClass( 'foo baz' ); 76 | await page.getByTestId( 'toggle trueValue' ).click(); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-class.spec.ts:73:22

4) [chromium] › interactivity/directive-style.spec.ts:21:6 › data-wp-style › dont change style if callback returns same value on hydration Error: Timed out 5000ms waiting for expect(locator).toHaveAttribute(expected) Locator: getByTestId('dont change style if callback returns same value on hydration') Expected string: "color: red; background: green;" Received string: "background: green; color: red;" Call log: - expect.toHaveAttribute with timeout 5000ms - waiting for getByTestId('dont change style if callback returns same value on hydration') - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" - locator resolved to <div data-wp-style--color="state.color" data-testid="…>Don’t change style if callback returns same value…</div> - unexpected value "background: green; color: red;" 25 | 'dont change style if callback returns same value on hydration' 26 | ); > 27 | await expect( el ).toHaveAttribute( | ^ 28 | 'style', 29 | 'color: red; background: green;' 30 | ); at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-style.spec.ts:27:22