contributor-spotlight/a11y.test.js at 1fd0731931be2a4c163709616e3ad80e4e30e0e7 · jenkins-infra/contributor-spotlight · 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
// Accessibility test script using axe-core and jest
// Run with: npx jest a11y.test.js
/* global describe, it, expect */

const { configureAxe } = require('jest-axe');

const React = require('react');
const { render } = require('@testing-library/react');
const ContributorCard =
    require('./src/Components/Contributor/ContributorCard.jsx').default;
const FeaturedContributor =
    require('./src/Components/Featured-contributor/FeaturedContributor.jsx').default;
const SearchResults =
    require('./src/Components/Search/SearchResults.jsx').default;

const axe = configureAxe({
    rules: {
        // You can customize rules here
    },
});

describe('Accessibility checks', () => {
    it('ContributorCard should have no a11y violations', async () => {
        const { container } = render(
            React.createElement(ContributorCard, {
                contributor: {
                    node: {
                        pageAttributes: {
                            name: 'Jane Doe',
                            image: '/avatar/jane.jpg',
                            location: 'Earth',
                            datepublished: '2024-01-01',
                            github: 'janedoe',
                            linkedin: 'janedoe',
                            twitter: 'janedoe',
                            pronouns: 'she/her',
                        },
                        fields: { slug: '/contributors/jane-doe/' },
                    },
                },
            })
        );
        const results = await axe(container);
        if (results.violations.length > 0) {
            // eslint-disable-next-line no-console
            console.log('ContributorCard violations:', results.violations);
        }
        expect(results.violations.length).toBe(0);
    });

    it('FeaturedContributor should have no a11y violations', async () => {
        const { container } = render(
            React.createElement(FeaturedContributor, {
                contributor: {
                    node: {
                        pageAttributes: {
                            name: 'John Smith',
                            image: '/avatar/john.jpg',
                            location: 'Mars',
                            datepublished: '2025-01-01',
                            intro: 'A great contributor!',
                            firstcommit: '2022-01-01',
                        },
                        fields: { slug: '/contributors/john-smith/' },
                    },
                },
                darkmode: false,
            })
        );
        const results = await axe(container);
        if (results.violations.length > 0) {
            // eslint-disable-next-line no-console
            console.log('FeaturedContributor violations:', results.violations);
        }
        expect(results.violations.length).toBe(0);
    });

    it('SearchResults should have no a11y violations', async () => {
        const { container } = render(
            React.createElement(SearchResults, {
                results: [
                    {
                        item: {
                            id: '1',
                            name: 'Jane Doe',
                            image: '/avatar/jane.jpg',
                            location: 'Earth',
                            github: 'janedoe',
                            linkedin: 'janedoe',
                            twitter: 'janedoe',
                            slug: '/contributors/jane-doe/',
                        },
                        score: 0,
                    },
                ],
                darkmode: false,
            })
        );
        const results = await axe(container);
        if (results.violations.length > 0) {
            // eslint-disable-next-line no-console
            console.log('SearchResults violations:', results.violations);
        }
        expect(results.violations.length).toBe(0);
    });
});