Follow-up: Create frontend feature spec for violation details page

Summary

Add frontend feature spec coverage for the violation details page functionality introduced in !210943 (merged). This spec should be created as a new file in ee/spec/features/projects/security/ following the existing patterns for project-level security features.

Background

MR !210943 (merged) added the ability to edit violation comments on the violation details page. The reviewer requested feature spec coverage for this new functionality (not E2E/QA tests). Since the violation details page is at the project level (project/-/security/compliance_violations/<violation-id>), this should be a new spec file under ee/spec/features/projects/security/.

Implementation Requirements

Test Location

  • Directory: ee/spec/features/projects/security/
  • New File: compliance_violation_details_spec.rb
  • Approach: Create a new feature spec file following the pattern of existing specs in this directory (e.g., vulnerability_details_spec.rb)

File Structure Pattern

Follow the pattern from ee/spec/features/projects/security/vulnerability_details_spec.rb:

# frozen_string_literal: true

require 'spec_helper'

RSpec.describe 'User views compliance violation details', :js, feature_category: :compliance_management do
  # Test implementation
end

Features to Test

The violation details page includes the following functionality that should be covered:

  1. Page Navigation and Display

    • Navigating to a violation details page at project/-/security/compliance_violations/<violation-id>
    • Displaying violation information (status, control, framework, audit event, project, date)
    • Displaying related issues section
    • Displaying activity/comments section

  2. Comment Functionality (added in !210943 (merged))

    • Creating a new comment on a violation
    • Displaying existing comments with author information
    • Editing a comment (behind compliance_violation_comments_ui feature flag)
    • Deleting a comment
    • Displaying "edited" status on edited comments with timestamp and editor name
    • Comment preview functionality

  3. Status Updates

    • Changing violation status via dropdown

Test Data Setup

Based on the MR setup instructions and existing patterns, tests should:

  1. Create necessary test data:

    let_it_be(:group) { create(:group) }
let_it_be(:user) { create(:user) }
let_it_be(:project) { create(:project, :repository, namespace: group) }
let_it_be(:framework) { create(:compliance_framework, namespace: group) }
let_it_be(:requirement) { create(:compliance_requirement, framework: framework, namespace: group) }
let_it_be(:control) { create(:compliance_requirements_control, compliance_requirement: requirement) }
let_it_be(:audit_event) { create(:audit_events_project_audit_event, project_id: project.id) }
let_it_be(:violation) do
  create(:project_compliance_violation,
    namespace: project.namespace,
    project: project,
    compliance_control: control,
    audit_event_id: audit_event.id,
    audit_event_table_name: :project_audit_events,
    status: :detected
  )
end

  2. Enable required feature flags in test contexts:

    before do
  stub_feature_flags(compliance_violation_comments_ui: true)
end

  3. Stub licensed features:

    before do
  stub_licensed_features(
    compliance_framework: true,
    custom_compliance_frameworks: true,
    project_level_compliance_dashboard: true
  )
  
  project.add_maintainer(user)
  sign_in(user)
end

Reference Implementation

Refer to existing patterns in ee/spec/features/projects/security/:

  • vulnerability_details_spec.rb - Similar details page pattern
  • Use of wait_for_requests for async operations
  • Use of within_testid for scoping interactions
  • JavaScript-enabled tests with :js tag
  • Shared examples for common behaviors
  • before_all for test data setup when appropriate

Key Components to Test

Based on the MR changes, the following Vue components are involved:

  • ComplianceViolationDetailsApp - Main details page
  • DiscussionNote - Individual comment display with edit/delete actions
  • EditCommentForm - Form for editing comments
  • CreateCommentForm - Form for creating new comments
  • ComplianceViolationStatusDropdown - Status change dropdown

Example Test Structure

RSpec.describe 'User views compliance violation details', :js, feature_category: :compliance_management do
  let_it_be(:group) { create(:group) }
  let_it_be(:user) { create(:user) }
  let_it_be(:project) { create(:project, :repository, namespace: group) }
  # ... more test data setup

  before_all do
    project.add_maintainer(user)
  end

  before do
    stub_licensed_features(
      compliance_framework: true,
      project_level_compliance_dashboard: true
    )
    sign_in(user)
  end

  context 'when viewing violation details' do
    it 'displays violation information' do
      visit project_security_compliance_violation_path(project, violation)
      wait_for_requests

      expect(page).to have_content(violation.status)
      # ... more assertions
    end
  end

  context 'when managing comments' do
    context 'with compliance_violation_comments_ui feature flag enabled' do
      before do
        stub_feature_flags(compliance_violation_comments_ui: true)
      end

      it 'allows creating a comment' do
        # ... test implementation
      end

      it 'allows editing a comment' do
        # ... test implementation
      end
    end
  end
end

Acceptance Criteria

  • New feature spec file created at ee/spec/features/projects/security/compliance_violation_details_spec.rb
  • Tests cover viewing violation details page
  • Tests cover creating a comment
  • Tests cover editing a comment (with feature flag enabled)
  • Tests cover deleting a comment
  • Tests cover displaying edited status on comments
  • Tests cover changing violation status
  • Tests follow existing patterns in ee/spec/features/projects/security/
  • All tests pass in CI

Related Resources

  • Original MR: !210943 (merged)
  • Related issue: #541095 (closed)
  • Reference spec: ee/spec/features/projects/security/vulnerability_details_spec.rb
  • Controller: ee/app/controllers/projects/security/compliance_violations_controller.rb
  • Main component: ee/app/assets/javascripts/compliance_violations/components/compliance_violation_details_app.vue
  • Route helper: project_security_compliance_violation_path(project, violation)

Notes for Implementation

  • This is a frontend feature spec, not an E2E/QA test
  • Create a new spec file in ee/spec/features/projects/security/
  • Follow the naming pattern: compliance_violation_details_spec.rb
  • Use the :js tag for JavaScript-enabled tests
  • Follow the existing code style and patterns from other specs in the same directory
  • Ensure proper wait times for async operations (wait_for_requests)
  • Test both with and without the compliance_violation_comments_ui feature flag where applicable
  • Use let_it_be for test data that doesn't change between tests
  • Use before_all for setup that can be shared across tests
Edited by Scott Hampton