diff --git a/packages/portal/spec-renderer/fixtures/spec-data.ts b/packages/portal/spec-renderer/fixtures/spec-data.ts
index bd9fd84c88..e122b8a847 100644
--- a/packages/portal/spec-renderer/fixtures/spec-data.ts
+++ b/packages/portal/spec-renderer/fixtures/spec-data.ts
@@ -74,6 +74,46 @@ export const operationsList = [
specOp,
] as Operation[]
+export const operationsAllTaggedList = [
+ {
+ path: '/pet',
+ method: 'get',
+ operationId: 'getPets',
+ tags: ['pet'],
+ summary: 'Get all pets',
+ deprecated: false,
+ },
+ // non-unique path
+ {
+ path: '/pet',
+ method: 'post',
+ operationId: 'addPet',
+ tags: ['pet'],
+ summary: 'Add a new pet to the store',
+ deprecated: false,
+ },
+ // different tag
+ {
+ path: '/pet/{petId}',
+ method: 'get',
+ operationId: 'getPetById',
+ tags: ['dog-go'],
+ summary: 'Find pet by ID',
+ deprecated: false,
+ },
+ // untagged
+ {
+ path: '/pet/{petId}',
+ method: 'post',
+ operationId: 'updatePet',
+ tags: ['pet'],
+ summary: 'Update an existing pet',
+ deprecated: false,
+ },
+ // multiple tags
+ specOp,
+] as Operation[]
+
export const jsonSpec = {
openapi: '3.0.3',
info: {
diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts b/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts
index 700802c2a0..35afbefdae 100644
--- a/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts
+++ b/packages/portal/spec-renderer/src/components/SpecOperationsList.cy.ts
@@ -1,7 +1,7 @@
// Cypress component test spec file
import { h } from 'vue'
-import { operationsList, tags, specOp } from '../../fixtures/spec-data'
+import { operationsList, operationsAllTaggedList, tags, specOp } from '../../fixtures/spec-data'
import SpecOperationsList from './SpecOperationsList.vue'
describe('', () => {
@@ -39,6 +39,36 @@ describe('', () => {
cy.get('[data-testid="spec-operations-list-untagged-items"] .spec-operations-list-item').should('have.length', 1)
})
+ it('doesnt render default tags section when empty', () => {
+ cy.mount(SpecOperationsList, {
+ props: {
+ isFilterable: true,
+ operations: operationsAllTaggedList,
+ tags,
+ },
+ })
+
+ // renders filter input
+ cy.getTestId('spec-operations-list-filter').should('be.visible')
+
+ // renders collapsible sections of operations with correct count of operations
+ cy.getTestId('spec-operations-list-section-pet').should('be.visible')
+ cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('have.length', 4)
+ cy.getTestId('spec-operations-list-section-dog-go').should('be.visible')
+ cy.get('[data-testid="spec-operations-list-section-dog-go"] .spec-operations-list-item').should('have.length', 2)
+ cy.getTestId('spec-operations-list-section-other').should('be.visible')
+ cy.get('[data-testid="spec-operations-list-section-other"] .spec-operations-list-item').should('have.length', 1)
+
+ // reacts correctly to collapse toggle
+ cy.getTestId('spec-operations-list-section-pet-collapse-trigger').click()
+ cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('not.be.visible')
+ cy.getTestId('spec-operations-list-section-pet-collapse-trigger').click()
+ cy.get('[data-testid="spec-operations-list-section-pet"] .spec-operations-list-item').should('have.length', 4)
+
+ // doesn't render untagged section
+ cy.getTestId('spec-operations-list-untagged-items').should('not.exist')
+ })
+
it('renders with correct px width', () => {
const width = 350
diff --git a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
index 3c6b9115e6..f9c183f642 100644
--- a/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
+++ b/packages/portal/spec-renderer/src/components/SpecOperationsList.vue
@@ -75,7 +75,7 @@