Move test into command

BKWLD · Nov 17, 2023 · 5de91b4 · 5de91b4
1 parent 7bdd906
commit 5de91b4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/react/cypress/component/ReactVisual.cy.tsx b/packages/react/cypress/component/ReactVisual.cy.tsx
@@ -57,15 +57,11 @@ describe('fixed size', () => {
 
 describe('natural size', () => {
 
-  // https://glebbahmutov.com/cypress-examples/recipes/image-loaded.html
   it('renders image', () => {
     cy.mount(<ReactVisual
       image='https://placehold.co/200x200.png'
       alt=''/>)
-    cy.get('img')
-      .should('be.visible')
-      .and('have.prop', 'naturalWidth')
-      .should('be.greaterThan', 0)
+    cy.get('img').imgLoaded()
     cy.get('img').hasDimensions(200, 200)
   })
 

diff --git a/packages/react/cypress/support/commands.ts b/packages/react/cypress/support/commands.ts
@@ -8,6 +8,17 @@ Cypress.Commands.add('hasDimensions',
   cy.wrap(subject).invoke('height').should('equal', height)
 })
 
+// Asset has loaded
+// https://glebbahmutov.com/cypress-examples/recipes/image-loaded.html
+Cypress.Commands.add('imgLoaded',
+  { prevSubject: true },
+  (subject) => {
+  cy.wrap(subject)
+    .should('be.visible')
+    .and('have.prop', 'naturalWidth')
+    .should('be.greaterThan', 0)
+})
+
 // Check that a video is playing
 // https://glebbahmutov.com/blog/test-video-play/
 Cypress.Commands.add('isPlaying',
@@ -44,6 +55,8 @@ declare global {
         height: number
       ): Chainable<void>
 
+      imgLoaded(): Chainable<void>
+
       isPlaying(): Chainable<void>
       isPaused(): Chainable<void>