core/test/wdio/slot-array-basic/slot-array-basic.test.tsx at e552539d75de13a8815106c21189a1e63788e1e6 · stenciljs/core · 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
import { Fragment, h } from '@stencil/core';
import { render } from '@wdio/browser-runner/stencil';

describe('slot array basic', () => {
  const style = `slot-array-basic {
    display: block;
    margin: 10px;
    border: 2px solid black;
  }
  content-top {
    display: block;
    background: red;
    color: white;
    padding: 10px;
  }
  content-middle {
    display: block;
    background: purple;
    color: white;
    padding: 10px;
  }
  content-bottom {
    display: block;
    background: blue;
    color: white;
    padding: 10px;
  }`;

  beforeEach(() => {
    render({
      template: () => (
        <>
          <style>{style}</style>

          <slot-array-basic class="results1"></slot-array-basic>

          <slot-array-basic class="results2">
            <content-top>Content</content-top>
          </slot-array-basic>

          <slot-array-basic class="results3">
            <content-top>Content Top</content-top>
            <content-bottom>Content Bottom</content-bottom>
          </slot-array-basic>

          <slot-array-basic class="results4">
            <content-top>Content Top</content-top>
            <content-middle>Content Middle</content-middle>
            <content-bottom>Content Bottom</content-bottom>
          </slot-array-basic>
        </>
      ),
    });
  });

  it('renders slotted content between header/footer', async () => {
    await $('slot-array-basic').waitForExist();

    let children = $$('.results1 > *');
    await expect(children).toBeElementsArrayOfSize(2);
    await expect(await children[0].getTagName()).toBe('header');
    await expect(children[0]).toHaveText('Header');
    await expect(await children[1].getTagName()).toBe('footer');
    await expect(children[1]).toHaveText('Footer');

    children = $$('.results2 > *');
    await expect(children).toBeElementsArrayOfSize(3);
    await expect(await children[0].getTagName()).toBe('header');
    await expect(children[0]).toHaveText('Header');
    await expect(await children[1].getTagName()).toBe('content-top');
    await expect(children[1]).toHaveText('Content');
    await expect(await children[2].getTagName()).toBe('footer');
    await expect(children[2]).toHaveText('Footer');

    children = $$('.results3 > *');
    await expect(children).toBeElementsArrayOfSize(4);
    await expect(await children[0].getTagName()).toBe('header');
    await expect(children[0]).toHaveText('Header');
    await expect(await children[1].getTagName()).toBe('content-top');
    await expect(children[1]).toHaveText('Content Top');
    await expect(await children[2].getTagName()).toBe('content-bottom');
    await expect(children[2]).toHaveText('Content Bottom');
    await expect(await children[3].getTagName()).toBe('footer');
    await expect(children[3]).toHaveText('Footer');

    children = $$('.results4 > *');
    await expect(children).toBeElementsArrayOfSize(5);
    await expect(await children[0].getTagName()).toBe('header');
    await expect(children[0]).toHaveText('Header');
    await expect(await children[1].getTagName()).toBe('content-top');
    await expect(children[1]).toHaveText('Content Top');
    await expect(await children[2].getTagName()).toBe('content-middle');
    await expect(children[2]).toHaveText('Content Middle');
    await expect(await children[3].getTagName()).toBe('content-bottom');
    await expect(children[3]).toHaveText('Content Bottom');
    await expect(await children[4].getTagName()).toBe('footer');
    await expect(children[4]).toHaveText('Footer');

    await expect($('[hidden]')).not.toBeExisting();
  });
});