fix: Correct pluralization in Spec Pattern (#22773)

* fix: Correct pluralization in Spec Pattern

* update failing e2e tests

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

packages/app/cypress/e2e/specs.cy.ts

@@ -61,7 +61,7 @@ describe('App: Specs', () => {
  }).should('be.visible').within(() => {
  cy.validateExternalLink({ name: 'Need help', href: 'https://on.cypress.io/test-type-options' })
  cy.findByRole('button', { name: 'Close' }).should('be.visible').as('CloseDialogButton')
- cy.get('[data-cy="file-match-indicator"]').contains('0 Matches')
+ cy.get('[data-cy="file-match-indicator"]').contains('No Matches')
  cy.get('[data-cy="spec-pattern"]').contains('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}')
  })
 
@@ -320,7 +320,7 @@ describe('App: Specs', () => {
  .should('be.visible')
  .and('contain', defaultMessages.createSpec.page.customPatternNoSpecs.description.split('{0}')[0])
 
- cy.findByTestId('file-match-indicator').should('contain', '0 Matches')
+ cy.findByTestId('file-match-indicator').should('contain', 'No Matches')
  cy.findByRole('button', { name: 'cypress.config.js' })
  cy.findByTestId('spec-pattern').should('contain', 'src/**/*.{cy,spec}.{js,jsx}')
 
@@ -652,7 +652,7 @@ describe('App: Specs', () => {
  .should('be.visible')
  .and('contain', defaultMessages.createSpec.page.customPatternNoSpecs.description.split('{0}')[0])
 
- cy.findByTestId('file-match-indicator').should('contain', '0 Matches')
+ cy.findByTestId('file-match-indicator').should('contain', 'No Matches')
  cy.findByRole('button', { name: 'cypress.config.js' })
  cy.findByTestId('spec-pattern').should('contain', 'src/specs-folder/*.cy.{js,jsx}')
 

packages/app/src/components/SpecPatterns.cy.tsx

@@ -30,7 +30,7 @@ describe('<SpecPatterns />', () => {
  cy.get('[data-cy="file-match-indicator"]').contains('50 Matches')
  })
 
- it('renders component spec pattern should not show matches', () => {
+ it('renders component spec pattern should not show matches verbiage', () => {
  cy.mountFragment(SpecPatternsFragmentDoc, {
  onResult: (res) => {
  if (!res) {
@@ -46,4 +46,36 @@ describe('<SpecPatterns />', () => {
  cy.get('[data-cy="spec-pattern"]').contains('**/*.cy.{js,jsx,ts,tsx}')
  cy.get('[data-cy="file-match-indicator"]').should('contain', 'specPattern')
  })
+
+ it('displays `No Matches` when specs are empty', () => {
+ cy.mountFragment(SpecPatternsFragmentDoc, {
+ onResult: (res) => {
+ if (!res) {
+ return
+ }
+
+ res.currentTestingType = 'component'
+ res.specs = []
+ },
+ render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+ })
+
+ cy.get('[data-cy="file-match-indicator"]').contains('No Matches')
+ })
+
+ it('displays `1 Match` when specs has 1 element', () => {
+ cy.mountFragment(SpecPatternsFragmentDoc, {
+ onResult: (res) => {
+ if (!res) {
+ return
+ }
+
+ res.currentTestingType = 'component'
+ res.specs = res.specs.slice(0, 1) || []
+ },
+ render: (gql) => <div class="p-16px"><SpecPatterns gql={gql}/></div>,
+ })
+
+ cy.get('[data-cy="file-match-indicator"]').contains('1 Match')
+ })
 })

packages/app/src/components/SpecPatterns.vue

@@ -3,13 +3,7 @@
  <div class="flex p-16px items-center justify-between">
  <FileMatchIndicator :variant="props.variant">
  <span v-if="props.variant === 'info'">specPattern</span>
- <i18n-t
- v-else
- scope="global"
- keypath="components.specPattern.matches"
- >
- {{ props.gql.specs.length }}
- </i18n-t>
+ <span v-else>{{ t('components.specPattern.matches', props.gql.specs.length) }}</span>
  </FileMatchIndicator>
  <OpenConfigFileInIDE
  v-slot="{onClick}"
@@ -41,6 +35,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { gql } from '@urql/core'
+import { useI18n } from 'vue-i18n'
 import type { SpecPatternsFragment } from '../generated/graphql'
 import OpenConfigFileInIDE from '@packages/frontend-shared/src/gql-components/OpenConfigFileInIDE.vue'
 import FileMatchIndicator from './FileMatchIndicator.vue'
@@ -58,6 +53,7 @@ fragment SpecPatterns on CurrentProject {
 }
 `
 
+const { t } = useI18n()
 const props = defineProps<{
  gql: SpecPatternsFragment
  variant?: 'default' | 'info'

packages/frontend-shared/src/locales/en-US.json

@@ -33,7 +33,7 @@
  "dismissAriaLabel": "Dismiss"
  },
  "specPattern": {
- "matches": "{0} Matches"
+ "matches": "No Matches | {n} Match | {n} Matches"
  },
  "specPatternModal": {
  "title": "Spec pattern settings"