qunit-dom

Use the following commands to maintain code quality and build the application for different environments:

Linting:

• npm run lint: Run linting checks.
• npm run lint:fix: Run linting and automatically fix issues.

Building:

• ember build: Build for development.
• ember build --environment production: Build for production.

To collaborate on the test-app Ember application, ensure you have Git, Node.js (with npm), Ember CLI, and Google Chrome installed. Follow these steps to clone and install dependencies:

1. Clone the repository.
2. Navigate to the test-app directory.
3. Run npm install to install dependencies.

git clone <repository-url>
cd test-app
npm install

For Ember projects using ember-qunit version 6.x or higher, you must import and run the setup function in your tests/test-helper.js file. This attaches the DOM assertion APIs to the QUnit assert object.

// tests/test-helper.js
import * as QUnit from 'qunit';
import { setup } from 'qunit-dom';

//... 

setup(QUnit.assert);

//... 

Execute the test suite using Ember CLI. You can run tests in the terminal or start a test server for browser-based testing.

• Run tests in terminal: ember test
• Run tests with a server: ember test --server

Once installed and set up, you can perform high-level DOM assertions using the assert.dom(selector) syntax. This allows you to check for existence, classes, text content, focus, values, and attributes.

test('the title is welcoming', function(assert) {
  assert.dom('#title').hasText('Welcome to QUnit');
});

// Other examples:
assert.dom('h1').exists();
assert.dom('h1').hasClass('title');
assert.dom('h1').hasText('Welcome to Ember, John Doe!');
assert.dom('input').isFocused();
assert.dom('input').hasValue(/.+ Doe/);
assert.dom('input').hasAttribute('type', 'text');

Start the local development server using Ember CLI. Once running, you can access the application and its test suite at the following URLs:

• Application: http://localhost:4200
• Tests: http://localhost:4200/tests

ember serve

Install qunit-dom as a development dependency using npm or yarn.

npm install --save-dev qunit-dom

# or using yarn
yarn add --dev qunit-dom

To ensure TypeScript and your editor recognize the extended types on the QUnit assert object, add import 'qunit-dom'; to your tests/test-helper.ts file. If you are currently using .js, rename it to .ts first.

// tests/test-helper.ts
import 'qunit-dom';

If using a browser-based setup, load qunit-dom.js immediately after qunit.js.

<script src="https://unpkg.com/qunitjs/qunit/qunit.js"></script>
<script src="https://unpkg.com/qunit-dom/dist/qunit-dom.js"></script>

To use qunit-dom assertions, you must call the install function and pass the QUnit.assert object to it. This attaches the DOM-specific assertion methods to the QUnit assertion object.

/* global QUnit */
import install from './install.js';

install(QUnit.assert);

Use these methods to compare elements or their relationship to selectors:

• Identity: is(expected) asserts the element is the exact same instance as expected (reference equality ===). isNot(unexpected) asserts they are different instances.
• Tag Name: hasTagName(tagName) asserts the element's tagName matches. doesNotHaveTagName(tagName) asserts it does not.
• Selector Match: matchesSelector(compareSelector) asserts that the target element is also selected by the compareSelector. doesNotMatchSelector(compareSelector) asserts the target element is NOT selected by the compareSelector.

assert.dom('#title').is(element);
assert.dom('#title').hasTagName('h1');
assert.dom('p.red').matchesSelector('div.wrapper p:last-child');
assert.dom('input').doesNotMatchSelector('input[disabled]');