Quick Start - npm Package

Installation - npm Package

1. Navigate to account.wallyax.com.
2. Login or create an account.
3. Click on the Keys tab in the sidebar.
4. Copy the listed developer key.
5. Install the package
   • Using npm

   npm install @wally-ax/wax-dev
   • Using Yarn

   yarn add @wally-ax/wax-dev
6. Create a configuration file named wax.config.js in the root directory of your project.

   module.exports = {
   rules: [],
   apiKey: "YOUR_WALLY_DEVELOPER_API_KEY"
   };
   • Explanation:

   rules: An array of strings representing rule definitions. An empty array ([]) will enable all rules.
   apiKey: Replace "YOUR_WALLY_DEVELOPER_API_KEY" with the key copied from your Wally account.

Example Usage with Jest Testing Library in a React App

runWax function takes the rendered or pre-rendered html content and options as input.

runWaxUrl function takes the Website URL and options as input.

For a ButtonList component:

import { render } from '@testing-library/react';
import ButtonList from './ButtonList';
const runWax = require('@wally-ax/wax-dev');

describe('ButtonList AX Test', () => {
  test('should have no accessibility violations', async () => {
    const { container } = render(<ButtonList />);
    const ele = JSON.stringify(container.innerHTML);
    const violations = await runWax(ele, { rules: ["images-alt"] });
    expect(violations).toHaveLength(0);
  });
});

Note: the rule configuration at test level will be overridden by the global configuration in wax.config.js

Results

The results will be an array of violations based on the config. Example:

[
  {
    "description": "Ensures <img> elements have alternate text or a role of none or presentation",
    "element": "<img src=\"logo\">",
    "impact": "critical",
    "message": "Images must have alternate text"
  },
  {
    "description": "Ensures every form element has a label",
    "element": "<input type=\"text\">",
    "impact": "critical",
    "message": "Form elements must have labels"
  },
  {
    "description": "Ensures that lists are structured correctly",
    "element": "<ul><p>List item 2</p><li>List item ...</ul>",
    "impact": "serious",
    "message": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements"
  }
]

Example Usage with Cypress Testing Library in a React App

For a Button component:

Button.cy.js

import runWax from '@wally-ax/wax-dev';
import waxConfig from './waxconfig';

let violations;

describe('Button Component Tests', () => {
  it('should have no accessibility violations', () => {
    cy.mount(<Button variant="ghost" size="large">Outline</Button>);
    cy.get('body').then(async ($body) => {
      const ele = $body.html();
      violations = await runWax(ele, waxConfig);
      expect(violations).to.have.lengthOf(0);
    });
  });
  
  it('write_file', () => {
    cy.writeFile('src/components/ui/tests/button_violation.json', violations);
  });
});

Create a waxConfig.js file:

const waxConfig = {
  rules: [],
  apiKey: "API KEY"
};

export default waxConfig;

Results

The results will be an array of violations based on the config. A button_violation.json file will be created and violations will be saved.

Example usage for running URL audit

import { runWaxUrl } from '@wally-ax/wax-dev';
import waxConfig from './waxconfig';

async function performWaxOperation(url, waxConfig) {
    try {
        const resultUrl = await runWaxUrl(url, waxConfig);
        console.log('resultUrl', resultUrl);
    } catch (error) {
        console.error('Error running Wax URL:', error);
    }
}
const url = 'http://example.com'; // Replace with your actual URL

performWaxOperation(url, waxConfig);