Back to Repositories

Testing Carbon Editor Core Functionality in carbon-app/carbon

This integration test suite validates core functionality of the Carbon code snippet editor, focusing on URL encoding, keyboard shortcuts, and export capabilities. The tests ensure proper text rendering, state management, and UI component accessibility.

Test Coverage Overview

The test suite covers essential editor functionality including URL parameter handling, text encoding, and export features.

Key areas tested include:

Text encoding and URI component handling
Keyboard shortcut functionality (Shift+Cmd+\)
Export menu accessibility and component presence
File download capabilities for PNG and SVG formats

Implementation Analysis

The tests utilize Cypress’s powerful selector and assertion capabilities to verify DOM elements and application state. The implementation employs custom commands (editorVisible) and leverages Cypress’s visit, trigger, and get commands for comprehensive UI testing.

Notable patterns include:

URL parameter validation
CSS selector verification
Keyboard event simulation
Asynchronous operation handling

Technical Details

Testing tools and configuration:

Cypress for E2E testing
Custom support functions (editorVisible)
URL encoding validation
DOM element presence checks
CSS property verification
Keyboard event simulation
File download testing (skipped in CI)

Best Practices Demonstrated

The test suite demonstrates several testing best practices including isolation of tests, proper use of assertions, and handling of complex UI interactions.

Notable practices include:

Selective test execution (.skip for download tests)
Clear test descriptions
Proper waiting mechanisms
Comprehensive component verification
Effective use of Cypress commands

carbon-app/carbon

cypress/integration/basic.spec.js

            
/* global cy */
import { editorVisible } from '../support'
describe('Basic', () => {
  it('Should open editor with the correct text encoding', () => {
    cy.visit(
      '/?code=%250A%252F*%2520Passing%2520Boolean%2520as%2520method%2520to%2520find%2520returns%2520the%250A%2520*%2520first%2520truthy%2520value%2520in%2520the%2520array!%250A%2520*%252F%250A%255Bfalse%252C%2520false%252C%2520%27%27%252C%2520undefined%252C%2520%27qwijo%27%252C%25200%255D.find(Boolean)%2520%252F%252F%2520%27qwijo%27'
    )
    editorVisible()

    cy.contains(
      '.container',
      "/* Passing Boolean as method to find returns the * first truthy value in the array! */[false, false, '', undefined, 'qwijo', 0].find(Boolean) // 'qwijo'"
    )
  })

  it('Should open editor with the correct text even with bad URI component', () => {
    cy.visit('/?code=%25')
    editorVisible()

    cy.contains('.container', '%')
  })

  it('Should clear editor state with Shift+Cmd+\\', () => {
    cy.visit('/?bg=red')

    cy.get('body').trigger('keydown', { key: '\\', metaKey: true, shiftKey: true })

    cy.location().its('pathname').should('eq', '/')
    cy.get('.container-bg .bg').should('have.css', 'background-color', 'rgb(171, 184, 195)')
  })

  it("Should contain id's for CLI integrations to use", () => {
    cy.get('#export-container').should('have.length', 1)
    cy.get('.export-container').should('have.length', 1)
    cy.get('#export-menu').should('have.length', 1)
    cy.get('#export-menu').click()
    cy.get('#export-png').should('have.length', 1)
    cy.get('#export-svg').should('have.length', 1)
  })

  /*
   * This test should only be run locally since it actually downloads a file
   * for verification.
   */
  it.skip('Should download a PNGs and SVGs', () => {
    cy.visit('/')
    editorVisible()

    cy.contains('span[type="button"]', 'Save Image').click()
    cy.get('#downshift-2-item-0').click()

    cy.wait(1000)

    cy.contains('span[type="button"]', 'Save Image').click()
    cy.get('#downshift-2-item-1').click()

    cy.wait(1000)
  })
})