xref: /expo/apps/test-suite/tests/HTML.js (revision 999ead72) 
1import {
2  A,
3  Article,
4  B,
5  BlockQuote,
6  BR,
7  Caption,
8  Code,
9  Del,
10  EM,
11  Footer,
12  H1,
13  H2,
14  H3,
15  H4,
16  H5,
17  H6,
18  Header,
19  HR,
20  I,
21  LI,
22  Main,
23  Mark,
24  Nav,
25  P,
26  Pre,
27  Q,
28  S,
29  Section,
30  Strong,
31  Table,
32  TBody,
33  TD,
34  TFoot,
35  TH,
36  THead,
37  Time,
38  TR,
39  UL,
40} from '@expo/html-elements';
41import React from 'react';
42import { View, Text } from 'react-native';
43
44import { mountAndWaitFor as originalMountAndWaitFor } from './helpers';
45
46export const name = 'html-elements';
47
48const textElements = {
49  H1,
50  H2,
51  H3,
52  H4,
53  H5,
54  H6,
55  A,
56  P,
57  B,
58  S,
59  Pre,
60  Del,
61  Strong,
62  I,
63  EM,
64  Mark,
65  Code,
66  LI,
67  Q,
68  Time,
69  BR,
70};
71
72const viewElements = {
73  Article,
74  Header,
75  Main,
76  Section,
77  Nav,
78  Footer,
79  UL,
80  LI,
81  BlockQuote,
82  Pre,
83};
84
85export async function test(
86  { it, describe, beforeAll, jasmine, afterAll, expect, afterEach, beforeEach },
87  { setPortalChild, cleanupPortal }
88) {
89  afterEach(async () => {
90    await cleanupPortal();
91  });
92
93  const mountAndWaitFor = (child, propName = 'onLayout') =>
94    originalMountAndWaitFor(child, propName, setPortalChild);
95
96  describe(name, () => {
97    describe('Text', () => {
98      for (const elementName of Object.keys(textElements)) {
99        it(`renders text element ${elementName}`, async () => {
100          const Element = textElements[elementName];
101          await mountAndWaitFor(<Element>Test contents</Element>);
102        });
103      }
104    });
105    describe('Views', () => {
106      for (const elementName of Object.keys(viewElements)) {
107        it(`renders view elements ${elementName}`, async () => {
108          const Element = viewElements[elementName];
109          await mountAndWaitFor(
110            <Element>
111              <Text>Hello</Text>
112            </Element>
113          );
114        });
115      }
116    });
117
118    it(`renders a horizontal rule`, async () => {
119      await mountAndWaitFor(
120        <View>
121          <HR />
122        </View>
123      );
124    });
125    it(`renders a table`, async () => {
126      await mountAndWaitFor(
127        <Table>
128          <Caption>Caption</Caption>
129          <THead>
130            <TR>
131              <TH colSpan={2}>The table header</TH>
132            </TR>
133          </THead>
134          <TBody>
135            <TR>
136              <TD>The table body</TD>
137              <TD>with two columns</TD>
138            </TR>
139            <TR>
140              <TD>Row two</TD>
141              <TD>Column two</TD>
142            </TR>
143          </TBody>
144          <TFoot>
145            <TR>
146              <TH colSpan={2}>The table footer</TH>
147            </TR>
148          </TFoot>
149        </Table>
150      );
151    });
152    it(`renders a table`, async () => {
153      await mountAndWaitFor(
154        <Table>
155          <Caption>Caption</Caption>
156          <THead>
157            <TR>
158              <TH colSpan={2}>The table header</TH>
159            </TR>
160          </THead>
161          <TBody>
162            <TR>
163              <TD>The table body</TD>
164              <TD>with two columns</TD>
165            </TR>
166            <TR>
167              <TD>Row two</TD>
168              <TD>Column two</TD>
169            </TR>
170          </TBody>
171          <TFoot>
172            <TR>
173              <TH colSpan={2}>The table footer</TH>
174            </TR>
175          </TFoot>
176        </Table>
177      );
178    });
179  });
180}
181