ionic-framework/core/src/components/picker-column/test/picker-column.spec.tsx at 6ea9eecfa29ea2cb4bb7c0edbed43f9d499a124a · ionic-team/ionic-framework · 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
import { h } from '@stencil/core';
import { newSpecPage } from '@stencil/core/testing';

import { PickerColumnOption } from '../../picker-column-option/picker-column-option';
import { PickerColumn } from '../picker-column';

describe('picker-column', () => {
  beforeEach(() => {
    const mockIntersectionObserver = jest.fn();
    mockIntersectionObserver.mockReturnValue({
      observe: () => null,
      unobserve: () => null,
      disconnect: () => null,
    });
    global.IntersectionObserver = mockIntersectionObserver;
  });

  it('should have a default label', async () => {
    const page = await newSpecPage({
      components: [PickerColumn],
      template: () => <ion-picker-column></ion-picker-column>,
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    expect(pickerOpts.getAttribute('aria-label')).not.toBe(null);
  });

  it('should have a custom label', async () => {
    const page = await newSpecPage({
      components: [PickerColumn],
      template: () => <ion-picker-column aria-label="my label"></ion-picker-column>,
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
  });

  it('should update a custom label', async () => {
    const page = await newSpecPage({
      components: [PickerColumn],
      template: () => <ion-picker-column></ion-picker-column>,
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    pickerCol.setAttribute('aria-label', 'my label');
    await page.waitForChanges();

    expect(pickerOpts.getAttribute('aria-label')).toBe('my label');
  });

  it('should receive keyboard focus when enabled', async () => {
    const page = await newSpecPage({
      components: [PickerColumn],
      template: () => <ion-picker-column></ion-picker-column>,
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;

    expect(pickerOpts.tabIndex).toBe(0);
  });

  it('should not receive keyboard focus when disabled', async () => {
    const page = await newSpecPage({
      components: [PickerColumn],
      template: () => <ion-picker-column disabled={true}></ion-picker-column>,
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector<HTMLElement>('.picker-opts')!;

    expect(pickerOpts.tabIndex).toBe(-1);
  });

  it('should use option aria-label as assistive element aria-valuetext', async () => {
    const page = await newSpecPage({
      components: [PickerColumn, PickerColumnOption],
      template: () => (
        <ion-picker-column value={1}>
          <ion-picker-column-option value={1} aria-label="My Label">
            My Text
          </ion-picker-column-option>
        </ion-picker-column>
      ),
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Label');
  });

  it('should use option text as assistive element aria-valuetext when no label provided', async () => {
    const page = await newSpecPage({
      components: [PickerColumn, PickerColumnOption],
      template: () => (
        <ion-picker-column value={1}>
          <ion-picker-column-option value={1}>My Text</ion-picker-column-option>
        </ion-picker-column>
      ),
    });

    const pickerCol = page.body.querySelector('ion-picker-column')!;
    const pickerOpts = pickerCol.shadowRoot!.querySelector('.picker-opts')!;

    expect(pickerOpts.getAttribute('aria-valuetext')).toBe('My Text');
  });
});