fix: replace containing assertions

Author: christian-bromann

framework-comparisons/src/components/Card.wdio.tsx

@@ -9,9 +9,13 @@ describe('Card Component', () => {
     const { container } = render(<Card />)
 
     const $container = $(container)
-    await expect($container).toHaveTextContaining('count is 0')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 0')
+    )
     await $container.$('button').click()
-    await expect($container).toHaveTextContaining('count is 1')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 1')
+    )
   })
 
   it('fails because element is not visible', async () => {
@@ -21,36 +25,48 @@ describe('Card Component', () => {
     /**
      * text can not be received because element is not visible
      */
-    await expect($container).not.toHaveTextContaining('count is 0')
+    await expect($container).not.toHaveText(
+      expect.stringContaining('count is 0')
+    )
     /**
      * fails due to "element not interactable" error
      */
     await $container.$('button').click()
-    await expect($container).not.toHaveTextContaining('count is 1')
+    await expect($container).not.toHaveText(
+      expect.stringContaining('count is 1')
+    )
   })
 
   it('fails because element has zero height', async () => {
     const { container } = render(<Card sideEffect={SideEffect.ZERO_HEIGHT} />)
 
     const $container = $(container)
-    await expect($container).toHaveTextContaining('count is 0')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 0')
+    )
     /**
      * fails due to "element not interactable: element has zero size" error
      */
     await $container.$('button').click()
-    await expect($container).toHaveTextContaining('count is 1')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 1')
+    )
   })
 
   it('fails because another element is laying over the button', async () => {
     const { container } = render(<Card sideEffect={SideEffect.OVERLAYING_ELEMENT} />)
 
     const $container = $(container)
-    await expect($container).toHaveTextContaining('count is 0')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 0')
+    )
     /**
      * fails due to "element click intercepted: Element <button aria-label="counter">...</button> is not clickable at point (68, 402). Other element would receive the click: <div style="...">...</div>" error
      */
     await $container.$('button').click()
-    await expect($container).toHaveTextContaining('count is 1')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 1')
+    )
   })
 
   it('fails because the element is outside the viewport', async () => {
@@ -65,12 +81,16 @@ describe('Card Component', () => {
     /**
      * this fails nonetheless as element is out of viewport
      */
-    await expect($container).not.toHaveTextContaining('count is 0')
+    await expect($container).not.toHaveText(
+      expect.stringContaining('count is 0')
+    )
 
     /**
      * fails due to "element not interactable" error
      */
     await $container.$('button').click()
-    await expect($container).toHaveTextContaining('count is 1')
+    await expect($container).toHaveText(
+      expect.stringContaining('count is 1')
+    )
   })
 })

framework-comparisons/src/components/Zoom.wdio.tsx

@@ -13,12 +13,12 @@ describe('Zoom Component', () => {
     // zoom in
     await browser.action('wheel').scroll({ origin: $container.$('img'), deltaY: -250 }).perform()
     await expect($container.$('.react-transform-component'))
-      .toHaveAttrContaining('style', 'transform: translate(-16px, -16px) scale(1.16)')
+      .toHaveAttr('style', expect.stringContaining('transform: translate(-16px, -16px) scale(1.16)'))
 
     // zoom out
     await browser.action('wheel').scroll({ origin: $container.$('img'), deltaY: 250 }).perform()
     await expect($container.$('.react-transform-component'))
-      .toHaveAttrContaining('style', 'transform: translate(0px, 0px) scale(1)')
+      .toHaveAttr('style', expect.stringContaining('transform: translate(0px, 0px) scale(1)'))
   })
 
   it('can zoom in via gestures', async () => {
@@ -42,7 +42,7 @@ describe('Zoom Component', () => {
     ])
     await browser.pause(5000)
     await expect($container.$('.react-transform-component'))
-      .toHaveAttrContaining('style', 'transform: translate(-16px, -16px) scale(1.16)')
+      .toHaveAttr('style', expect.stringContaining('transform: translate(-16px, -16px) scale(1.16)'))
 
     // zoom out
     await browser.actions([
@@ -59,6 +59,6 @@ describe('Zoom Component', () => {
         .up()
     ])
     await expect($container.$('.react-transform-component'))
-      .toHaveAttrContaining('style', 'transform: translate(0px, 0px) scale(1)')
+      .toHaveAttr('style', expect.stringContaining('transform: translate(0px, 0px) scale(1)'))
   })
 })

react-typescript-vite/src/tests/LoginForm.test.tsx

@@ -60,30 +60,46 @@ describe('LoginForm', () => {
 
     it('should show both validation errors if login is attempted without entering username or password', async () => {
       await $btnLogin.click()
-      await expect($form).toHaveTextContaining('Username is required')
-      await expect($form).toHaveTextContaining('Password is required')
+      await expect($form).toHaveText(
+        expect.stringContaining('Username is required')
+      )
+      await expect($form).toHaveText(
+        expect.stringContaining('Password is required')
+      )
       expect(onLogin).toBeCalledTimes(0)
     })
 
     it('should only show password validation error if login is attempted without entering password', async () => {
       await $username.setValue(username)
       await $btnLogin.click()
-      await expect($form).not.toHaveTextContaining('Username is required')
-      await expect($form).toHaveTextContaining('Password is required')
+      await expect($form).not.toHaveText(
+        expect.stringContaining('Username is required')
+      )
+      await expect($form).toHaveText(
+        expect.stringContaining('Password is required')
+      )
       expect(onLogin).toBeCalledTimes(0)
     })
 
     it('should only show username validation error if login is attempted without entering username', async () => {
       await $password.setValue(username)
       await $btnLogin.click()
-      await expect($form).toHaveTextContaining('Username is required')
-      await expect($form).not.toHaveTextContaining('Password is required')
+      await expect($form).toHaveText(
+        expect.stringContaining('Username is required')
+      )
+      await expect($form).not.toHaveText(
+        expect.stringContaining('Password is required')
+      )
       expect(onLogin).toBeCalledTimes(0)
     })
 
     it('should not show any validation errors before login is attempted', async () => {
-      await expect($form).not.toHaveTextContaining('Username is required')
-      await expect($form).not.toHaveTextContaining('Password is required')
+      await expect($form).not.toHaveText(
+        expect.stringContaining('Username is required')
+      )
+      await expect($form).not.toHaveText(
+        expect.stringContaining('Password is required')
+      )
     })
   })
 })

solidjs-typescript-vite/src/tests/counter.test.tsx

@@ -8,17 +8,20 @@ describe('my component tests', () => {
 
   it('it starts with zero', async () => {
     render(() => <Counter />)
-    const button = screen.getByRole("button");
+    const button = screen.getByRole('button');
     expect($(button)).toBePresent();
-    expect($(button)).toHaveTextContaining("Count: 0");
+    expect($(button)).toHaveText(
+      expect.stringContaining('Count: 0'));
   });
 
-  it("it increases its value on click", async () => {
+  it('it increases its value on click', async () => {
     render(() => <Counter />);
-    const button = screen.getByRole("button");
+    const button = screen.getByRole('button');
     await $(button).click()
-    expect($(button)).toHaveTextContaining("Count: 1");
+    expect($(button)).toHaveText(
+      expect.stringContaining('Count: 1'));
     await $(button).click()
-    expect(button).toHaveTextContaining("Count: 2");
+    expect(button).toHaveText(
+      expect.stringContaining('Count: 2'));
   });
 })