xref: /expo/apps/test-suite/tests/HTML.js (revision e331da1d) 
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 } 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  TH,
67  TD,
68  Caption,
69  LI,
70  Q,
71  Time,
72  BR,
73};
74
75const viewElements = {
76  Article,
77  Header,
78  Main,
79  Section,
80  Nav,
81  HR,
82  Footer,
83  Table,
84  THead,
85  TBody,
86  TFoot,
87  TR,
88  UL,
89  LI,
90  BlockQuote,
91  Pre,
92};
93
94export async function test(
95  { it, describe, beforeAll, jasmine, afterAll, expect, afterEach, beforeEach },
96  { setPortalChild, cleanupPortal }
97) {
98  afterEach(async () => {
99    await cleanupPortal();
100  });
101
102  const mountAndWaitFor = (child, propName = 'onLayout') =>
103    originalMountAndWaitFor(child, propName, setPortalChild);
104
105  describe(name, () => {
106    describe('Text', () => {
107      for (const elementName of Object.keys(textElements)) {
108        it(`renders text element ${elementName}`, async () => {
109          const Element = textElements[elementName];
110          await mountAndWaitFor(<Element>Test contents</Element>);
111        });
112      }
113    });
114    describe('Views', () => {
115      for (const elementName of Object.keys(viewElements)) {
116        it(`renders view elements ${elementName}`, async () => {
117          const Element = viewElements[elementName];
118          await mountAndWaitFor(
119            <Element>
120              <View />
121            </Element>
122          );
123        });
124      }
125    });
126  });
127}
128