Skip to content

Commit 4de207b

Browse files
100stacks100stacks
authored
Merge pull request #705 from BY00565233/SURF-2010
test(hx-file-tile): surf-2010
2 parents 6316e4a + ab5c7ec commit 4de207b

File tree

1 file changed

+280
-0
lines changed

1 file changed

+280
-0
lines changed

‎src/elements/hx-file-tile/index.spec.js‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
import { fixture, oneEvent, expect } from '@open-wc/testing';
2+
3+
/**
4+
* <hx-file-tile> component tests
5+
*
6+
* @type HXFileTileElement
7+
*
8+
*/
9+
describe('<hx-file-tile> component tests', () => {
10+
const template = '<hx-file-tile>';
11+
12+
describe('test instantiate element', () => {
13+
it('should be instantiated with hx-defined attribute', async () => {
14+
const component = /** @type {HXFileTileElement} */ await fixture(template);
15+
const attr = component.hasAttribute('hx-defined');
16+
17+
expect(attr).to.be.true;
18+
});
19+
20+
it('should not be hidden', async () => {
21+
const component = /** @type {HXFileTileElement} */ await fixture(template);
22+
const prop = component.hidden;
23+
24+
expect(prop).to.be.false;
25+
});
26+
27+
it(`the rendered Light DOM should NOT equal simple template ${template}`, async () => {
28+
const component = /** @type {HXFileTileElement} */ await fixture(template);
29+
30+
expect(component).lightDom.to.not.equal(template);
31+
});
32+
33+
});
34+
35+
describe('test Shadow DOM', () => {
36+
describe('verify render', () => {
37+
it('should have a static Shadow DOM', async function () {
38+
const component = /** @type { HXFileTileElement } */ await fixture(template);
39+
const shadow = component.shadowRoot.innerHTML;
40+
41+
expect(component).shadowDom.to.equal(shadow);
42+
});
43+
44+
it('should render the Shadow Root mode open', async () => {
45+
const component = /** @type { HXFileTileElement } */ await fixture(template);
46+
const mode = component.shadowRoot.mode;
47+
48+
expect(mode).to.equal('open');
49+
});
50+
});
51+
52+
describe('verify Shadow DOM markup', () => {
53+
it('markup should contain a #hxFileTile <div>', async () => {
54+
const elSelector = 'div#hxFileTile';
55+
const id = 'hxFileTile';
56+
const component = /** @type { HXFileTileElement } */ await fixture(template);
57+
const shadow = component.shadowRoot;
58+
const query = shadow.querySelector(elSelector);
59+
const queryId = query.id;
60+
61+
expect(queryId).to.equal(id);
62+
});
63+
64+
it('markup should contain a #hxLink <a>', async () => {
65+
const elSelector = 'div > #hxLink';
66+
const id = 'hxLink';
67+
const component = /** @type { HXFileTileElement } */ await fixture(template);
68+
const shadow = component.shadowRoot;
69+
const query = shadow.querySelector(elSelector);
70+
const queryId = query.id;
71+
72+
expect(queryId).to.equal(id);
73+
});
74+
75+
it('markup should contain a #hxIconWrapper <div>', async () => {
76+
const elSelector = 'div > a > #hxIconWrapper';
77+
const id = 'hxIconWrapper';
78+
const component = /** @type { HXFileTileElement } */ await fixture(template);
79+
const shadow = component.shadowRoot;
80+
const query = shadow.querySelector(elSelector);
81+
const queryId = query.id;
82+
83+
expect(queryId).to.equal(id);
84+
});
85+
86+
it('markup should contain a #hxIcon type <hx-file-icon>', async () => {
87+
const elSelector = 'div > a > div > hx-file-icon';
88+
const id = 'hxIcon';
89+
const component = /** @type { HXFileTileElement } */ await fixture(template);
90+
const shadow = component.shadowRoot;
91+
const query = shadow.querySelector(elSelector);
92+
const queryId = query.id;
93+
94+
expect(queryId).to.equal(id);
95+
});
96+
97+
it('markup should contain a type <hx-icon>', async () => {
98+
const elSelector = 'div > a > div > hx-icon';
99+
const iconType = 'download';
100+
const component = /** @type { HXFileTileElement } */ await fixture(template);
101+
const shadow = component.shadowRoot;
102+
const query = shadow.querySelector(elSelector);
103+
const queryType = query.type;
104+
105+
expect(queryType).to.equal(iconType);
106+
});
107+
108+
it('markup should contain a #hxContentWrapper <div>', async () => {
109+
const elSelector = 'div > a > #hxContentWrapper';
110+
const id = 'hxContentWrapper';
111+
const component = /** @type { HXFileTileElement } */ await fixture(template);
112+
const shadow = component.shadowRoot;
113+
const query = shadow.querySelector(elSelector);
114+
const queryId = query.id;
115+
116+
expect(queryId).to.equal(id);
117+
});
118+
119+
it('markup should contain a #hxName <div>', async () => {
120+
const elSelector = 'div > a > div#hxContentWrapper > #hxName';
121+
const id = 'hxName';
122+
const component = /** @type { HXFileTileElement } */ await fixture(template);
123+
const shadow = component.shadowRoot;
124+
const query = shadow.querySelector(elSelector);
125+
const queryId = query.id;
126+
127+
expect(queryId).to.equal(id);
128+
});
129+
130+
it('markup should contain a #hxState--downloadable <div>', async () => {
131+
const elSelector = 'div > a > div#hxContentWrapper > div#hxState--downloadable';
132+
const id = 'hxState--downloadable';
133+
const component = /** @type { HXFileTileElement } */ await fixture(template);
134+
const shadow = component.shadowRoot;
135+
const query = shadow.querySelector(elSelector);
136+
const queryId = query.id;
137+
138+
expect(queryId).to.equal(id);
139+
});
140+
141+
it('markup should contain a #hxDetails <div>', async () => {
142+
const elSelector = 'div > a > div > div > div#hxDetails';
143+
const id = 'hxDetails';
144+
const component = /** @type { HXFileTileElement } */ await fixture(template);
145+
const shadow = component.shadowRoot;
146+
const query = shadow.querySelector(elSelector);
147+
const queryId = query.id;
148+
149+
expect(queryId).to.equal(id);
150+
});
151+
152+
it('markup should contain a #hxState--loading <div>', async () => {
153+
const elSelector = 'div > a > div#hxContentWrapper > div#hxState--loading';
154+
const id = 'hxState--loading';
155+
const component = /** @type { HXFileTileElement } */ await fixture(template);
156+
const shadow = component.shadowRoot;
157+
const query = shadow.querySelector(elSelector);
158+
const queryId = query.id;
159+
160+
expect(queryId).to.equal(id);
161+
});
162+
163+
it('markup should contain a #hxProgress type <hx-progress>', async () => {
164+
const elSelector = 'div > a > div > div#hxState--loading > hx-progress ';
165+
const id = 'hxProgress';
166+
const component = /** @type { HXFileTileElement } */ await fixture(template);
167+
const shadow = component.shadowRoot;
168+
const query = shadow.querySelector(elSelector);
169+
const queryId = query.id;
170+
171+
expect(queryId).to.equal(id);
172+
});
173+
174+
it('markup should contain a #hxState--invalid <div>', async () => {
175+
const elSelector = 'div > a > div#hxContentWrapper > div#hxState--invalid';
176+
const id = 'hxState--invalid';
177+
const component = /** @type { HXFileTileElement } */ await fixture(template);
178+
const shadow = component.shadowRoot;
179+
const query = shadow.querySelector(elSelector);
180+
const queryId = query.id;
181+
182+
expect(queryId).to.equal(id);
183+
});
184+
185+
it('markup should contain a #hxRetry button with a times type <button>', async () => {
186+
const elSelector = 'div > a > div#hxContentWrapper > div#hxState--invalid > button';
187+
const buttonType = 'button';
188+
const component = /** @type { HXFileTileElement } */ await fixture(template);
189+
const shadow = component.shadowRoot;
190+
const query = shadow.querySelector(elSelector);
191+
const queryType = query.type;
192+
193+
expect(queryType).to.equal(buttonType);
194+
});
195+
196+
it('markup should contain a type <hx-icon>', async () => {
197+
const elSelector = 'div > a > div > div > button > hx-icon';
198+
const iconType = 'redo';
199+
const component = /** @type { HXFileTileElement } */ await fixture(template);
200+
const shadow = component.shadowRoot;
201+
const query = shadow.querySelector(elSelector);
202+
const queryType = query.type;
203+
204+
expect(queryType).to.equal(iconType);
205+
});
206+
207+
it('markup should contain a #hxDismiss button with a times type <button>', async () => {
208+
const elSelector = 'div#hxFileTile > button';
209+
const buttonType = 'button';
210+
const component = /** @type { HXFileTileElement } */ await fixture(template);
211+
const shadow = component.shadowRoot;
212+
const query = shadow.querySelector(elSelector);
213+
const queryType = query.type;
214+
215+
expect(queryType).to.equal(buttonType);
216+
});
217+
218+
it('markup should contain a type <hx-icon>', async () => {
219+
const elSelector = 'div#hxFileTile > button > hx-icon';
220+
const iconType = 'times';
221+
const component = /** @type { HXFileTileElement } */ await fixture(template);
222+
const shadow = component.shadowRoot;
223+
const query = shadow.querySelector(elSelector);
224+
const queryType = query.type;
225+
226+
expect(queryType).to.equal(iconType);
227+
});
228+
});
229+
});
230+
231+
describe('test getters and setters', () => {
232+
it('should be able to set a name message', async () => {
233+
const component = /** @type {HXFileTileElement} */ await fixture(template);
234+
const msg = 'id_rsa.pub';
235+
236+
component.name = msg;
237+
const attr = component.hasAttribute('name');
238+
const statusMsg = component.getAttribute('name');
239+
240+
expect(attr).to.be.true;
241+
expect(statusMsg).to.equal(msg);
242+
});
243+
244+
it('should be able to set a href', async () => {
245+
const component = /** @type {HXFileTileElement} */ await fixture(template);
246+
const msg = 'path/to/id_rsa.pub';
247+
248+
component.href = msg;
249+
const attr = component.hasAttribute('href');
250+
const statusMsg = component.getAttribute('href');
251+
252+
expect(attr).to.be.true;
253+
expect(statusMsg).to.equal(msg);
254+
});
255+
256+
it('should be able to set a progress message', async () => {
257+
const component = /** @type {HXFileTileElement} */ await fixture(template);
258+
const msg = '50';
259+
260+
component.progress = msg;
261+
const attr = component.hasAttribute('progress');
262+
const statusMsg = component.getAttribute('progress');
263+
264+
expect(attr).to.be.true;
265+
expect(statusMsg).to.equal(msg);
266+
});
267+
268+
it('should be able to set icon [type="key"]', async () => {
269+
const component = /** @type {HXFileTileElement} */ await fixture(template);
270+
const iconType = 'key';
271+
272+
component.icon = iconType;
273+
const attr = component.hasAttribute('icon');
274+
const extensionType = component.getAttribute('icon');
275+
276+
expect(attr).to.be.true;
277+
expect(extensionType).to.equal(iconType);
278+
});
279+
});
280+
});

0 commit comments

Comments
 (0)