Skip to content

Commit d808a86

Browse files
jaywcjlovejaywcjlove
committed
fix: fix meta charSet error & add test case.
1 parent e4c0506 commit d808a86

File tree

2 files changed

+125
-6
lines changed

2 files changed

+125
-6
lines changed

‎core/src/elements/HeadElement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const HeadElement = <T extends ElementType<any> = 'link'>(props: { as?: T
1616
selecter = `meta[name="${name}"]:not([data-head])`;
1717
}
1818
if (props.as === 'meta' && props.charSet) {
19-
selecter = `meta[charset]:not([data-head]`;
19+
selecter = `meta[charset]:not([data-head])`;
2020
}
2121
if (selecter) {
2222
const dom = document.querySelector(selecter);

‎test/index.test.tsx‎

Lines changed: 124 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,132 @@
11
import { render, screen } from '@testing-library/react';
22
import '@testing-library/jest-dom';
3+
import 'jest-environment-jsdom';
34
import React from 'react';
4-
import Heade from '../core/src';
5+
import Head from '../core/src';
56

67
test('renders baseElement', () => {
7-
const { debug, baseElement } = render(
8-
<Heade>
9-
<Heade.Title>learn react</Heade.Title>
10-
</Heade>
8+
const { baseElement } = render(
9+
<Head>
10+
<Head.Title>learn react</Head.Title>
11+
</Head>
1112
);
1213
expect(baseElement.innerHTML).toBe('<div></div>');
1314
});
15+
16+
it('renders the correct content in <title> tag', () => {
17+
const { getByTestId } = render(
18+
<Head>
19+
<Head.Title data-testid="title-meta">learn react</Head.Title>
20+
</Head>,
21+
{
22+
container: document.head
23+
}
24+
);
25+
26+
const metaElement = getByTestId('title-meta');
27+
expect(metaElement).toBeInTheDocument();
28+
expect(metaElement.tagName).toBe('TITLE');
29+
expect(metaElement.getAttribute('data-head')).toBe('true');
30+
});
31+
32+
it('renders the correct content in <meta name="keywords"> tag', () => {
33+
const { getByTestId } = render(
34+
<Head>
35+
<Head.Meta data-testid="keywords-meta" name="keywords" content="react-head,uiw,uiwjs" />
36+
</Head>,
37+
{
38+
container: document.head
39+
}
40+
);
41+
const metaElement = getByTestId('keywords-meta');
42+
expect(metaElement).toBeInTheDocument();
43+
expect(metaElement.tagName).toBe('META');
44+
expect(metaElement.getAttribute('data-head')).toBe('true');
45+
expect(metaElement.getAttribute('content')).toBe('react-head,uiw,uiwjs');
46+
});
47+
48+
it('renders the correct content in <meta charSet=""> tag', () => {
49+
const { getByTestId } = render(
50+
<Head>
51+
<Head.Meta data-testid="charset-meta" charSet="utf-8" />
52+
</Head>,
53+
{
54+
container: document.head
55+
}
56+
);
57+
const metaElement = getByTestId('charset-meta');
58+
expect(metaElement).toBeInTheDocument();
59+
expect(metaElement.tagName).toBe('META');
60+
expect(metaElement.getAttribute('data-head')).toBe('true');
61+
expect(metaElement.getAttribute('charset')).toBe('utf-8');
62+
});
63+
64+
it('renders the correct content in <link> tag', () => {
65+
const { getByTestId } = render(
66+
<Head>
67+
<Head.Link data-testid="rel-meta" rel="canonical" href="https://uiwjs.github.io" />
68+
</Head>,
69+
{
70+
container: document.head
71+
}
72+
);
73+
const metaElement = getByTestId('rel-meta');
74+
expect(metaElement).toBeInTheDocument();
75+
expect(metaElement.tagName).toBe('LINK');
76+
expect(metaElement.getAttribute('data-head')).toBe('true');
77+
expect(metaElement.getAttribute('rel')).toBe('canonical');
78+
});
79+
80+
it('renders the correct content in <base> tag', () => {
81+
const { getByTestId } = render(
82+
<Head>
83+
<Head.Base data-testid="base-meta" target="_blank" />
84+
</Head>,
85+
{
86+
container: document.head
87+
}
88+
);
89+
const metaElement = getByTestId('base-meta');
90+
expect(metaElement).toBeInTheDocument();
91+
expect(metaElement.tagName).toBe('BASE');
92+
expect(metaElement.getAttribute('data-head')).toBe('true');
93+
expect(metaElement.getAttribute('target')).toBe('_blank');
94+
});
95+
96+
it('renders the correct content in <style> tag', () => {
97+
const css = `.box-test { color: red; }`
98+
const { getByTestId } = render(
99+
<Head>
100+
<Head.Style data-testid="style-meta">
101+
{css}
102+
</Head.Style>
103+
</Head>,
104+
{
105+
container: document.head
106+
}
107+
);
108+
const metaElement = getByTestId('style-meta');
109+
expect(metaElement).toBeInTheDocument();
110+
expect(metaElement.tagName).toBe('STYLE');
111+
expect(metaElement.getAttribute('data-head')).toBe('true');
112+
expect(metaElement.innerHTML).toBe(css);
113+
});
114+
115+
it('renders the correct content in <script> tag', () => {
116+
const css = `console.log('test')`
117+
const { getByTestId } = render(
118+
<Head>
119+
<Head.Script data-testid="script-meta">
120+
{css}
121+
</Head.Script>
122+
</Head>,
123+
{
124+
container: document.head
125+
}
126+
);
127+
const metaElement = getByTestId('script-meta');
128+
expect(metaElement).toBeInTheDocument();
129+
expect(metaElement.tagName).toBe('SCRIPT');
130+
expect(metaElement.getAttribute('data-head')).toBe('true');
131+
expect(metaElement.innerHTML).toBe(css);
132+
});

0 commit comments

Comments
 (0)