add keys for rootstory

cypress-io · Dec 1, 2023 · f6fc6e3 · f6fc6e3
1 parent 2c8572f
commit f6fc6e3
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 19 deletions.
diff --git a/components/Alert/react/Alert.rootstory.tsx b/components/Alert/react/Alert.rootstory.tsx
@@ -13,6 +13,7 @@ export default () => {
         title="Spec not found"
         detailsTitle="Stack trace"
         data-cy="alert-1"
+        key="alert-1"
         details={
           <pre className="bg-white rounded border border-red-500 px-[16px] py-[8px] overflow-x-auto">
             {dedent`Uncaught Error: Error occurred in defineConfig()
@@ -68,6 +69,7 @@ export default () => {
       </button>
       {displayTimedAlert ? (
         <Alert
+          key="alert-2"
           title="Wait 5 seconds please"
           duration={5000}
           onDismiss={() => setDisplayTimedAlert(false)}
@@ -76,16 +78,18 @@ export default () => {
         />
       ) : null}
       <Alert
+        key="alert-3"
         variant="success"
         dismissible
         title="Success with body"
         data-cy="alert-3"
       >
         Success body
       </Alert>
-      <Alert variant="warning" title="Warning" notRounded />
-      <Alert variant="neutral" title="Neutral" />
+      <Alert key="alert-4" variant="warning" title="Warning" notRounded />
+      <Alert key="alert-5" variant="neutral" title="Neutral" />
       <Alert
+        key="alert-6"
         variant="error"
         dismissible
         data-cy="alert-4"
@@ -98,17 +102,24 @@ export default () => {
       cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
       est laborum."
       />
-      <Alert variant="info" title="Info" />
-      <Alert variant="info" title="Info" customIcon={IconArrowRight} />
+      <Alert key="alert-7" variant="info" title="Info" />
+      <Alert
+        key="alert-8"
+        variant="info"
+        title="Info"
+        customIcon={IconArrowRight}
+      />
       {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
         <>
           <Alert
+            key="alert-9"
             variant="error"
             title={`${size} - Lorem ipsum dolor sit amet`}
             data-cy="alert-size"
             size={size}
           />
           <Alert
+            key="alert-10"
             title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
           veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea

diff --git a/components/Button/react/Button.rootstory.tsx b/components/Button/react/Button.rootstory.tsx
@@ -13,17 +13,18 @@ export default ({
     {(Object.keys(VariantClassesTable) as ButtonVariants[]).map((variant) => {
       return (
         <div
+          key={variant}
           className={clsx(
             'flex flex-col items-center gap-3 justify-center mt-4 p-2',
-            { 'bg-gray-1000 text-white': variant === 'outline-dark' }
+            { 'bg-gray-1000 text-white': variant === 'outline-dark' },
           )}
         >
           <h3 className="text-right">{variant}</h3>
           {(Object.keys(SizeClassesTable) as ButtonSizes[])
             .reverse()
             .map((size) => {
               return (
-                <div className="flex items-center justify-center">
+                <div key={size} className="flex items-center justify-center">
                   <span
                     className={clsx('text-sm mr-4', {
                       'text-gray-300': variant === 'outline-dark',

diff --git a/components/StatusIcon/react/StatusIconReact.cy.tsx b/components/StatusIcon/react/StatusIconReact.cy.tsx
@@ -9,9 +9,19 @@ describe('StatusIcon', () => {
   it('defaults to a variant that exists if the one provided does not exist', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon
+          key="simple"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -24,9 +34,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if no status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" />
-        <StatusIcon variant="solid" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple" variant="simple" size="16" />
+        <StatusIcon
+          key="solid"
+          variant="solid"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')
@@ -39,9 +54,14 @@ describe('StatusIcon', () => {
   it('displays a placeholder icon if null status is passed', () => {
     mount(
       <div>
-        <StatusIcon variant="simple" size="16" status={null} />
-        <StatusIcon variant="simple" size="16" status="placeholder" />
-      </div>
+        <StatusIcon key="simple-1" variant="simple" size="16" status={null} />
+        <StatusIcon
+          key="simple-2"
+          variant="simple"
+          size="16"
+          status="placeholder"
+        />
+      </div>,
     )
 
     cy.get('svg').first().invoke('html').as('firstIcon')

diff --git a/components/Tag/react/Tag.cy.tsx → components/Tag/react/TagReact.cy.tsx b/components/Tag/react/Tag.cy.tsx → components/Tag/react/TagReact.cy.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import { mount } from 'cypress/react18'
 import Tag from './Tag'
-import { SizeClasses, ColorClasses } from '../constants'
+import { SizeClasses, ColorClasses } from '@cypress-design/constants-tag'
 import assertions from '../assertions'
 
 describe('Tag', () => {
@@ -20,12 +20,18 @@ describe('Tag', () => {
                 ).map((color) => {
                   return (
                     <>
-                      <div className="flex items-center justify-center">
+                      <div
+                        key={color}
+                        className="flex items-center justify-center"
+                      >
                         <Tag size={size} color={color}>
                           {`{Tag}`}
                         </Tag>
                       </div>
-                      <div className="flex items-center justify-center">
+                      <div
+                        key={`${color}-2`}
+                        className="flex items-center justify-center"
+                      >
                         <Tag size={size} color={color} dark>
                           {`{Tag}`}
                         </Tag>

diff --git a/components/Tag/vue/Tag.cy.tsx → components/Tag/vue/TagVue.cy.tsx b/components/Tag/vue/Tag.cy.tsx → components/Tag/vue/TagVue.cy.tsx
@@ -2,7 +2,7 @@
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import Tag from './Tag.vue'
-import { SizeClasses, ColorClasses } from '../constants'
+import { SizeClasses, ColorClasses } from '../constants/dist/dist'
 
 describe('<Tag/>', () => {
   function mountStory() {