Interactivity: Use domReady package over DOMContentLoaded #90603
Annotations
10 errors and 1 notice
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L23
1) [chromium] › interactivity/directive-watch.spec.ts:21:6 › data-wp-watch › check that watch runs when it is added
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
21 | test( 'check that watch runs when it is added', async ( { page } ) => {
22 | const el = page.getByTestId( 'element in the DOM' );
> 23 | await expect( el ).toContainText( 'element is in the DOM' );
| ^
24 | } );
25 |
26 | test( 'check that watch runs when it is removed', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:23:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L23
1) [chromium] › interactivity/directive-watch.spec.ts:21:6 › data-wp-watch › check that watch runs when it is added
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
21 | test( 'check that watch runs when it is added', async ( { page } ) => {
22 | const el = page.getByTestId( 'element in the DOM' );
> 23 | await expect( el ).toContainText( 'element is in the DOM' );
| ^
24 | } );
25 |
26 | test( 'check that watch runs when it is removed', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:23:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L23
1) [chromium] › interactivity/directive-watch.spec.ts:21:6 › data-wp-watch › check that watch runs when it is added
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
21 | test( 'check that watch runs when it is added', async ( { page } ) => {
22 | const el = page.getByTestId( 'element in the DOM' );
> 23 | await expect( el ).toContainText( 'element is in the DOM' );
| ^
24 | } );
25 |
26 | test( 'check that watch runs when it is removed', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:23:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L29
2) [chromium] › interactivity/directive-watch.spec.ts:26:6 › data-wp-watch › check that watch runs when it is removed
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is not in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
27 | await page.getByTestId( 'toggle' ).click();
28 | const el = page.getByTestId( 'element in the DOM' );
> 29 | await expect( el ).toContainText( 'element is not in the DOM' );
| ^
30 | } );
31 |
32 | test( 'change focus after DOM changes', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:29:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L29
2) [chromium] › interactivity/directive-watch.spec.ts:26:6 › data-wp-watch › check that watch runs when it is removed
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is not in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
27 | await page.getByTestId( 'toggle' ).click();
28 | const el = page.getByTestId( 'element in the DOM' );
> 29 | await expect( el ).toContainText( 'element is not in the DOM' );
| ^
30 | } );
31 |
32 | test( 'change focus after DOM changes', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:29:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L29
2) [chromium] › interactivity/directive-watch.spec.ts:26:6 › data-wp-watch › check that watch runs when it is removed
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('element in the DOM')
Expected string: "element is not in the DOM"
Received string: ""
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('element in the DOM')
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
- locator resolved to <div data-testid="element in the DOM" data-wp-text="s…></div>
- unexpected value ""
27 | await page.getByTestId( 'toggle' ).click();
28 | const el = page.getByTestId( 'element in the DOM' );
> 29 | await expect( el ).toContainText( 'element is not in the DOM' );
| ^
30 | } );
31 |
32 | test( 'change focus after DOM changes', async ( { page } ) => {
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:29:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L34
3) [chromium] › interactivity/directive-watch.spec.ts:32:6 › data-wp-watch › change focus after DOM changes
Error: Timed out 5000ms waiting for expect(locator).toBeFocused()
Locator: getByTestId('input')
Expected: focused
Received: inactive
Call log:
- expect.toBeFocused with timeout 5000ms
- waiting for getByTestId('input')
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
32 | test( 'change focus after DOM changes', async ( { page } ) => {
33 | const el = page.getByTestId( 'input' );
> 34 | await expect( el ).toBeFocused();
| ^
35 | await page.getByTestId( 'toggle' ).click();
36 | await page.getByTestId( 'toggle' ).click();
37 | await expect( el ).toBeFocused();
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:34:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L34
3) [chromium] › interactivity/directive-watch.spec.ts:32:6 › data-wp-watch › change focus after DOM changes
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toBeFocused()
Locator: getByTestId('input')
Expected: focused
Received: inactive
Call log:
- expect.toBeFocused with timeout 5000ms
- waiting for getByTestId('input')
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
32 | test( 'change focus after DOM changes', async ( { page } ) => {
33 | const el = page.getByTestId( 'input' );
> 34 | await expect( el ).toBeFocused();
| ^
35 | await page.getByTestId( 'toggle' ).click();
36 | await page.getByTestId( 'toggle' ).click();
37 | await expect( el ).toBeFocused();
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:34:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L34
3) [chromium] › interactivity/directive-watch.spec.ts:32:6 › data-wp-watch › change focus after DOM changes
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: Timed out 5000ms waiting for expect(locator).toBeFocused()
Locator: getByTestId('input')
Expected: focused
Received: inactive
Call log:
- expect.toBeFocused with timeout 5000ms
- waiting for getByTestId('input')
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
- locator resolved to <input data-testid="input" data-wp-watch="callbacks.ele…/>
- unexpected value "not focused"
32 | test( 'change focus after DOM changes', async ( { page } ) => {
33 | const el = page.getByTestId( 'input' );
> 34 | await expect( el ).toBeFocused();
| ^
35 | await page.getByTestId( 'toggle' ).click();
36 | await page.getByTestId( 'toggle' ).click();
37 | await expect( el ).toBeFocused();
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:34:22
|
|
Run the tests:
test/e2e/specs/interactivity/directive-watch.spec.ts#L42
4) [chromium] › interactivity/directive-watch.spec.ts:40:6 › data-wp-watch › short-circuit infinite loops
Error: Timed out 5000ms waiting for expect(locator).toContainText(expected)
Locator: getByTestId('short-circuit infinite loops')
- Expected string - 1
+ Received string + 3
- 1
+
+ 0
+
Call log:
- expect.toContainText with timeout 5000ms
- waiting for getByTestId('short-circuit infinite loops')
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
- locator resolved to <div data-wp-text="state.counter" data-wp-watch="call…>↵⇆⇆0↵⇆</div>
- unexpected value "
0
"
40 | test( 'short-circuit infinite loops', async ( { page } ) => {
41 | const el = page.getByTestId( 'short-circuit infinite loops' );
> 42 | await expect( el ).toContainText( '1' );
| ^
43 | await page.getByTestId( 'increment' ).click();
44 | await expect( el ).toContainText( '3' );
45 | } );
at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/interactivity/directive-watch.spec.ts:42:22
|
|
Run the tests
57 failed
[chromium] › interactivity/directive-watch.spec.ts:21:6 › data-wp-watch › check that watch runs when it is added
[chromium] › interactivity/directive-watch.spec.ts:26:6 › data-wp-watch › check that watch runs when it is removed
[chromium] › interactivity/directive-watch.spec.ts:32:6 › data-wp-watch › change focus after DOM changes
[chromium] › interactivity/directive-watch.spec.ts:40:6 › data-wp-watch › short-circuit infinite loops
[chromium] › interactivity/directives-class.spec.ts:21:6 › data-wp-class › remove class if callback returns falsy value
[chromium] › interactivity/directives-class.spec.ts:34:6 › data-wp-class › add class if callback returns truthy value
[chromium] › interactivity/directives-class.spec.ts:45:6 › data-wp-class › handles multiple classes and callbacks
[chromium] › interactivity/directives-class.spec.ts:58:6 › data-wp-class › handles class names that are contained inside other class names
[chromium] › interactivity/directives-class.spec.ts:71:6 › data-wp-class › can toggle class in the middle
[chromium] › interactivity/directives-class.spec.ts:80:6 › data-wp-class › can toggle class when class attribute is missing
[chromium] › interactivity/directives-class.spec.ts:93:6 › data-wp-class › can use context values
[chromium] › interactivity/directives-class.spec.ts:102:6 › data-wp-class › can use BEM notation classes
[chromium] › interactivity/directives-class.spec.ts:107:6 › data-wp-class › can use classes with several dashes
[chromium] › interactivity/directives-context.spec.ts:28:6 › data-wp-context › is correctly initialized
[chromium] › interactivity/directives-context.spec.ts:41:6 › data-wp-context › is correctly extended
[chromium] › interactivity/directives-context.spec.ts:55:6 › data-wp-context › changes in inherited properties are reflected (child)
[chromium] › interactivity/directives-context.spec.ts:76:6 › data-wp-context › changes in inherited properties are reflected (parent)
[chromium] › interactivity/directives-context.spec.ts:97:6 › data-wp-context › changes in shadowed properties do not leak (child)
[chromium] › interactivity/directives-context.spec.ts:118:6 › data-wp-context › changes in shadowed properties do not leak (parent)
[chromium] › interactivity/directives-context.spec.ts:139:6 › data-wp-context › Array properties are shadowed
[chromium] › interactivity/directives-context.spec.ts:152:6 › data-wp-context › can be accessed in other directives on the same element
[chromium] › interactivity/directives-context.spec.ts:166:6 › data-wp-context › should replace values on navigation
[chromium] › interactivity/directives-context.spec.ts:175:6 › data-wp-context › should preserve the previous context values
[chromium] › interactivity/directives-context.spec.ts:184:6 › data-wp-context › should maintain the same context reference on async actions
[chromium] › interactivity/directives-style.spec.ts:33:6 › data-wp-style › remove style if callback returns falsy value on hydration
[chromium] › interactivity/directives-style.spec.ts:42:6 › data-wp-style › change style if callback returns a new value on hydration
[chromium] › interactivity/directives-style.spec.ts:54:6 › data-wp-style › handles multiple styles and callbacks on hydration
[chromium] › interactivity/directives-style.spec.ts:66:6 › data-wp-style › can add style when style attribute is missing on hydration
[chromium] › interactivity/directives-style.spec.ts:75:6 › data-wp-style › can toggle style ────
[chromium] › interactivity/directives-style.spec.ts:82:6 › data-wp-style › can remove style ────
[chromium] › interactivity/directives-style.spec.ts:89:6 › data-wp-style › can toggle style in the middle
[chromium] › interactivity/directives-style.spec.ts:102:6 › data-wp-style › handles styles names with hyphens
[chromium] › interactivity/directives-style.spec.ts:112:6 › data-wp-style › can use context values
[chromium] › interactivity/directives-text.spec.ts
|
The logs for this run have expired and are no longer available.
Loading