lwc/packages/@lwc/integration-karma/test/synthetic-shadow/dom-manual-sharing-nodes/index.spec.js at 2a274350d8b10c2a7f7de69ff180d36e502ffeeb · salesforce/lwc · 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
import { createElement } from 'lwc';

import Unstyled from 'x/unstyled';
import Styled from 'x/styled';

afterEach(() => {
    window.__lwcResetGlobalStylesheets();
});

describe('dom manual sharing nodes', () => {
    it('has correct styles when sharing nodes from styled to unstyled component', () => {
        const unstyled = createElement('x-unstyled', { is: Unstyled });
        const styled = createElement('x-styled', { is: Styled });
        document.body.appendChild(unstyled);
        document.body.appendChild(styled);

        return new Promise((resolve) => requestAnimationFrame(() => resolve()))
            .then(() => {
                expect(
                    getComputedStyle(unstyled.shadowRoot.querySelector('.manual')).color
                ).toEqual('rgb(0, 0, 0)');
                expect(getComputedStyle(styled.shadowRoot.querySelector('.manual')).color).toEqual(
                    'rgb(255, 0, 0)'
                );

                styled.insertManualNode(unstyled.getManualNode());
                return new Promise((resolve) => requestAnimationFrame(() => resolve()));
            })
            .then(() => {
                expect(getComputedStyle(styled.shadowRoot.querySelector('.manual')).color).toEqual(
                    'rgb(255, 0, 0)'
                );
            });
    });

    it('has correct styles when sharing nodes from unstyled to styled component', () => {
        const unstyled = createElement('x-unstyled', { is: Unstyled });
        const styled = createElement('x-styled', { is: Styled });
        document.body.appendChild(unstyled);
        document.body.appendChild(styled);

        return new Promise((resolve) => requestAnimationFrame(() => resolve()))
            .then(() => {
                expect(
                    getComputedStyle(unstyled.shadowRoot.querySelector('.manual')).color
                ).toEqual('rgb(0, 0, 0)');
                expect(getComputedStyle(styled.shadowRoot.querySelector('.manual')).color).toEqual(
                    'rgb(255, 0, 0)'
                );

                unstyled.insertManualNode(styled.getManualNode());
                return new Promise((resolve) => requestAnimationFrame(() => resolve()));
            })
            .then(() => {
                expect(
                    getComputedStyle(unstyled.shadowRoot.querySelector('.manual')).color
                ).toEqual('rgb(0, 0, 0)');
            });
    });
});