component-library/packages/web-components/src/components/va-loader/test/va-loader.e2e.ts at fc8895596c223d17acc13ce4d770b0a4c8a8eea6 · department-of-veterans-affairs/component-library · 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
import { newE2EPage } from '@stencil/core/testing';
import { axeCheck } from '../../../testing/test-helpers';

describe('va-loader', () => {
  it('renders', async () => {
    const page = await newE2EPage();
    await page.setContent('<va-loader></va-loader>');

    const element = await page.find('va-loader');
    expect(element).not.toBeNull();

    const loaderDiv = await page.find('va-loader >>> .vacds-loader');
    expect(loaderDiv).not.toBeNull();
    expect(await loaderDiv.getAttribute('role')).toBe('status');

    const textDiv = await page.find('va-loader >>> .vacds-loader-text');
    const text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading');
  });

  it('renders with custom label', async () => {
    const customLabel = 'Loading spinner';
    const page = await newE2EPage();
    await page.setContent(
      `<va-loader center-label="${customLabel}"></va-loader>`,
    );

    const textDiv = await page.find('va-loader >>> .vacds-loader-text');
    const text = await textDiv.getProperty('textContent');
    expect(text).toBe(customLabel);
  });

  it('updates text based on rotation state', async () => {
    const page = await newE2EPage();
    await page.setContent('<va-loader></va-loader>');

    // Initial state
    let textDiv = await page.find('va-loader >>> .vacds-loader-text');
    let text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading');

    // Wait for first rotation (250ms)
    await page.waitForTimeout(250);
    textDiv = await page.find('va-loader >>> .vacds-loader-text');
    text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading.');

    // Wait for second rotation (250ms)
    await page.waitForTimeout(250);
    textDiv = await page.find('va-loader >>> .vacds-loader-text');
    text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading..');

    // Wait for third rotation (250ms)
    await page.waitForTimeout(250);
    textDiv = await page.find('va-loader >>> .vacds-loader-text');
    text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading...');

    // Wait for fourth rotation (250ms) - back to initial state
    await page.waitForTimeout(250);
    textDiv = await page.find('va-loader >>> .vacds-loader-text');
    text = await textDiv.getProperty('textContent');
    expect(text).toBe('Loading');
  });

  it('passes an axe check', async () => {
    const page = await newE2EPage();
    await page.setContent('<va-loader></va-loader>');

    await axeCheck(page);
  });
});