theme-wizard/packages/clippy-components/src/clippy-link/index.test.ts at 712bd786ece1d59f5ab132a10f87abcdd3778256 · nl-design-system/theme-wizard · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import { beforeEach, describe, expect, it } from 'vitest';
import './index';

const tag = 'clippy-link';

describe(`<${tag}>`, () => {
  beforeEach(() => {
    document.body.innerHTML = `<${tag}></${tag}>`;
  });

  it('renders an anchor with base class and sets href', async () => {
    document.body.innerHTML = `<${tag} href="/example"></${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.classList.contains('nl-link')).toBe(true);
    expect(a?.getAttribute('href')).toBe('/example');
  });

  it('does not forward arbitrary anchor-specific attributes from the host', async () => {
    document.body.innerHTML = `<${tag} download="file.pdf" hreflang="en" ping="https://example.com/ping" referrerpolicy="no-referrer" type="application/pdf"></${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el!.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.getAttribute('download')).toBeNull();
    expect(a?.getAttribute('hreflang')).toBeNull();
    expect(a?.getAttribute('ping')).toBeNull();
    expect(a?.getAttribute('referrerpolicy')).toBeNull();
    expect(a?.getAttribute('type')).toBeNull();
  });

  it('adds nl-link--current class when aria-current is set on the host', async () => {
    document.body.innerHTML = `<${tag} aria-current="page"></${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.classList.contains('nl-link--current')).toBe(true);
    expect(a?.getAttribute('aria-current')).toBe('page');
  });

  it('adds nl-link--inline-box class when inline-box is set', async () => {
    document.body.innerHTML = `<${tag} inline-box></${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.classList.contains('nl-link--inline-box')).toBe(true);
  });

  it('disabled removes href/target and marks link as disabled', async () => {
    document.body.innerHTML = `<${tag} href="/x" target="_blank" disabled>Lees meer</${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.classList.contains('nl-link--disabled')).toBe(true);
    expect(a?.getAttribute('aria-disabled')).toBe('true');
    expect(a?.getAttribute('href')).toBeNull();
    expect(a?.getAttribute('target')).toBeNull();
    expect(a?.getAttribute('tabindex')).toBe('0');
    expect(a?.getAttribute('role')).toBe('link');
  });

  it('does not forward non-component aria/data attributes to the rendered anchor', async () => {
    document.body.innerHTML = `<${tag} href="/x" aria-label="Meer info" data-testid="link">Lees meer</${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.getAttribute('aria-label')).toBeNull();
    expect(a?.dataset['testid']).toBeUndefined();
  });

  it('forwards host class to inner anchor', async () => {
    document.body.innerHTML = `<${tag}></${tag}>`;
    const el = document.querySelector(tag);
    expect(el).not.toBeNull();

    await customElements.whenDefined(tag);

    if (el) el.className = 'my-extra-class';
    await el?.updateComplete;

    const a = el?.shadowRoot?.querySelector('a');
    expect(a).not.toBeNull();
    expect(a?.classList.contains('my-extra-class')).toBe(true);
  });
});