test: make content consistent in component tests that use faker (#23080)

Author: marktnoonan

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

@@ -6,6 +6,8 @@ import faker from 'faker'
 import { ref } from 'vue'
 const fileMatchButtonSelector = '[data-cy=file-match-button]'
 
+faker.seed(1)
+
 describe('<FileMatchButton />', () => {
   it('renders a small extension', () => {
     cy.mount(() => (<div class="p-12">

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

@@ -1,6 +1,8 @@
 import FileMatchIndicator from './FileMatchIndicator.vue'
 import faker from 'faker'
 
+faker.seed(1)
+
 describe('<FileMatchIndicator />', () => {
   it('renders a reasonable length text', () => {
     cy.mount(() => (<div class="p-12">

packages/frontend-shared/src/components/Alert.cy.tsx

@@ -16,6 +16,8 @@ const prefixIconSelector = '[data-cy=alert-prefix-icon]'
 
 const dismissSelector = `[aria-label=${messages.dismissAriaLabel}]`
 
+faker.seed(1)
+
 const alertTitle = faker.hacker.phrase()
 const alertBodyContent = faker.lorem.sentences(2)
 

packages/frontend-shared/src/components/Collapsible.cy.tsx

@@ -1,6 +1,8 @@
 import Collapsible from './Collapsible.vue'
 import faker from 'faker'
 
+faker.seed(1)
+
 const targetText = 'Target'
 const contentText = 'Content'
 const targetSelector = '[data-testid=target]'
@@ -135,11 +137,11 @@ describe('<Collapsible />', { viewportHeight: 450, viewportWidth: 350 }, () => {
 
     const target = ({ open }) => (<h1 class={['text-xl', { 'pb-2': open }]}>Click here to open</h1>)
 
-    cy.mount(() => (<div class="mx-auto text-center w-300px my-4 border-1 p-4 rounded">
+    cy.mount(() => (<div class="rounded mx-auto border-1 my-4 text-center p-4 w-300px">
 
       <Collapsible v-slots={{ target }}>
         <div class="space-y-2">
-          <h2 class="text-center text-lg bg-gray-50">
+          <h2 class="bg-gray-50 text-center text-lg">
             Content Header
           </h2>
           <p class="bg-red-500 h-900px">{ text }</p>

packages/frontend-shared/src/components/ListRowHeader.cy.tsx

@@ -2,6 +2,8 @@ import ListRowHeader from './ListRowHeader.vue'
 import faker from 'faker'
 import FileChangesAdded from '~icons/cy/file-changes-added_x24.svg'
 
+faker.seed(1)
+
 const description = faker.hacker.phrase()
 const header = faker.system.directoryPath()
 const iconSelector = '[data-testid=file-added-icon]'
@@ -11,7 +13,7 @@ const descriptionSelector = '[data-testid=list-row-description]'
 describe('<ListRowHeader />', () => {
   it('renders the icon slot', () => {
     cy.mount(() => (
-      <div class="p-4 text-center">
+      <div class="text-center p-4">
         <ListRowHeader
           // @ts-ignore - doesn't know about vSlots
           vSlots={{
@@ -29,7 +31,7 @@ describe('<ListRowHeader />', () => {
 
   it('renders a minimal example with an icon and description', () => {
     cy.mount(() => (
-      <div class="p-4 text-center" data-testid="list-row-header">
+      <div class="text-center p-4" data-testid="list-row-header">
         <ListRowHeader
           icon={() => <FileChangesAdded data-testid="file-added-icon"/>}
           description={description}

packages/frontend-shared/src/warning/Warning.cy.tsx

@@ -3,6 +3,8 @@ import Warning from './Warning.vue'
 import faker from 'faker'
 import { ref } from 'vue'
 
+faker.seed(1)
+
 const title = faker.hacker.noun()
 const message = `
 # Hello!

packages/launchpad/src/components/code/FileRow.cy.tsx

@@ -15,6 +15,8 @@ export default defineConfig({
   },
 })`
 
+faker.seed(1)
+
 const description = faker.hacker.phrase()
 const messages = defaultMessages.setupPage.configFile
 

packages/launchpad/src/warning/WarningList.cy.tsx

@@ -4,6 +4,8 @@ import faker from 'faker'
 import { defaultMessages } from '@cy/i18n'
 import { WarningList_RemoveWarningDocument } from '../generated/graphql'
 
+faker.seed(1)
+
 const warningSelector = '[data-cy=warning-alert]'
 
 const createWarning = (props = {}) => ({