Back to Repositories

Testing localStorage Theme Persistence in Carbon App

This test suite validates local storage functionality in the Carbon app, focusing on theme persistence and state management. The tests verify theme selection storage and restoration across page reloads, ensuring proper state management through localStorage.

Test Coverage Overview

The test suite provides comprehensive coverage of localStorage functionality in Carbon’s theming system.

Key areas tested include:

Initial localStorage state verification
Theme selection persistence
State restoration on page reload
URL parameter synchronization

Integration points focus on the interaction between the UI theme dropdown, localStorage state, and URL parameters.

Implementation Analysis

The testing approach utilizes Cypress’s powerful async testing capabilities to validate state persistence across page reloads. The implementation employs custom commands and assertions to interact with the theme dropdown component and verify localStorage contents.

Notable patterns include debounced URL updates, JSON state parsing, and chainable Cypress commands for UI interactions.

Technical Details

Testing tools and configuration:

Cypress for end-to-end testing
Custom support functions (editorVisible)
localStorage access through Cypress window object
Debounce timing handling with cy.wait()
JSON parsing for state verification
URL parameter validation

Best Practices Demonstrated

The test suite exemplifies several testing best practices in frontend application testing.

Notable practices include:

Isolated test cases with clear scope
Proper handling of asynchronous operations
Reusable test helper functions
Comprehensive state verification
Clean test organization with descriptive naming

carbon-app/carbon

cypress/integration/localStorage.spec.js

            
/* global cy */
import { editorVisible } from '../support'

// usually we can visit the page before each test
// but these tests use the url, which means wasted page load
// so instead visit the desired url in each test

describe('localStorage', () => {
  const themeDropdown = () => cy.get('.toolbar .dropdown-container').first()

  const pickTheme = (name = 'Blackboard') =>
    themeDropdown()
      .click()
      .contains(name)
      .click()

  it.skip('is empty initially', () => {
    cy.visit('/')
    editorVisible()
    cy.window()
      .its('localStorage')
      .should('have.length', 0)
  })

  it('saves on theme change', () => {
    cy.visit('/')
    editorVisible()
    pickTheme('Blackboard')
    themeDropdown()
      .click()
      .contains('Blackboard')

    cy.wait(1500) // URL updates are debounced

    cy.window()
      .its('localStorage.CARBON_STATE')
      .then(JSON.parse)
      .its('theme')
      .should('equal', 'blackboard')

    // visiting page again restores theme from localStorage
    cy.visit('/')
    pickTheme('Cobalt')
    cy.wait(1500) // URL updates are debounced

    cy.url().should('contain', 't=cobalt')
  })
})