tessl/npm-ember-page-title

Page title management for Ember.js applications with dynamic updates, FastBoot compatibility, and TypeScript support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Test Support

Name: tessl/npm-ember-page-title
Author: tessl

Testing utilities for asserting page titles in integration and acceptance tests, with automatic handling of test environment quirks.

Capabilities

Get Page Title

Test helper function for retrieving the current page title in test environments.

/**
 * Get the current page title, handling test environment specifics
 * @param doc - Optional document object (defaults to window.document)
 * @returns Current page title with test artifacts removed
 */
function getPageTitle(doc?: Document): string;

Basic Usage:

import { getPageTitle } from 'ember-page-title/test-support';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import { visit } from '@ember/test-helpers';

module('Acceptance | Page titles', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /products updates page title', async function(assert) {
    await visit('/products');
    
    assert.strictEqual(
      getPageTitle(), 
      'Products | My Store',
      'Page title includes products and site name'
    );
  });

  test('visiting /products/123 shows product-specific title', async function(assert) {
    await visit('/products/123');
    
    assert.strictEqual(
      getPageTitle(),
      'MacBook Pro | Products | My Store', 
      'Page title includes product, section, and site name'
    );
  });
});

Test Environment Handling

The helper automatically handles test environment artifacts and edge cases.

/**
 * Handles test-specific title artifacts:
 * - Removes Testem progress indicators like "(1/5)"
 * - Handles multiple title elements in FastBoot scenarios
 * - Trims whitespace from title content
 * - Returns empty string if no title element found
 */
function getPageTitle(doc?: Document): string;

Test Environment Features:

Testem Integration: Automatically strips progress indicators that Testem appends to titles
FastBoot Compatibility: Handles scenarios where multiple title elements exist during server-side rendering
Whitespace Handling: Trims leading/trailing whitespace from title content
Fallback Behavior: Returns empty string if no title element is found

Advanced Usage:

import { getPageTitle } from 'ember-page-title/test-support';

module('Integration | Component | header', function(hooks) {
  setupRenderingTest(hooks);

  test('component renders with correct title', async function(assert) {
    await render(hbs`
      {{page-title "Custom Title"}}
      <HeaderComponent />
    `);
    
    // Test immediately after render
    assert.strictEqual(
      getPageTitle(),
      'Custom Title',
      'Title is set by page-title helper'
    );
  });

  test('multiple title helpers compose correctly', async function(assert) {
    await render(hbs`
      {{page-title "Site Name"}}
      {{page-title "Section"}}
      {{page-title "Page"}}
    `);
    
    assert.strictEqual(
      getPageTitle(),
      'Site Name | Section | Page',
      'Multiple titles compose with default separator'
    );
  });
});

Custom Document Context

The helper accepts an optional document parameter for testing different contexts.

/**
 * Get page title from specific document context
 * @param doc - Document object to query (optional)
 * @returns Title from specified document
 */
function getPageTitle(doc?: Document): string;

Custom Document Usage:

import { getPageTitle } from 'ember-page-title/test-support';

test('works with custom document context', function(assert) {
  // Create a mock document for testing
  const mockDoc = {
    querySelectorAll: () => [
      { innerText: 'Test Title (2/10)' }  // Simulated Testem format
    ]
  } as any;
  
  const title = getPageTitle(mockDoc);
  
  assert.strictEqual(
    title,
    'Test Title',
    'Strips test artifacts from custom document'
  );
});

Integration with Ember Testing

The helper integrates seamlessly with Ember's testing framework and helpers.

With Application Tests:

import { visit, currentURL } from '@ember/test-helpers';
import { getPageTitle } from 'ember-page-title/test-support';

test('navigation updates titles correctly', async function(assert) {
  await visit('/');
  assert.strictEqual(getPageTitle(), 'Home | My App');
  
  await visit('/about');
  assert.strictEqual(getPageTitle(), 'About | My App');
  
  await visit('/contact');
  assert.strictEqual(getPageTitle(), 'Contact | My App');
});

With Component Tests:

import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { getPageTitle } from 'ember-page-title/test-support';

test('dynamic title updates', async function(assert) {
  this.set('title', 'Initial Title');
  
  await render(hbs`{{page-title this.title}}`);
  assert.strictEqual(getPageTitle(), 'Initial Title');
  
  this.set('title', 'Updated Title');
  assert.strictEqual(getPageTitle(), 'Updated Title');
});

Error Scenarios:

test('handles missing title gracefully', function(assert) {
  // Mock document with no title elements
  const emptyDoc = {
    querySelectorAll: () => []
  } as any;
  
  const title = getPageTitle(emptyDoc);
  
  assert.strictEqual(
    title,
    '',
    'Returns empty string when no title found'
  );
});

Install with Tessl CLI