fix(formatters): format visibility percentage correctly

src/steps/description-maker/ios/__snapshots__/ios-description-maker.test.ts.snap

@@ -1051,19 +1051,19 @@ exports[`iOS description maker should process everything.jsonl fixture 1`] = `
 + {"id":"faceid","expected":"unavailable"}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"id","value":"halfVisible","isRegex":false},"expectation":"toBeVisible","params":[25],"timeout":2000}}
-< Expect #halfVisible to be visible by 2500%
+< Expect #halfVisible to be visible by 25%
 + {"id":"halfVisible","expected":25}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"id","value":"halfVisible","isRegex":false},"expectation":"toBeVisible","params":[50]}}
-< Expect #halfVisible to be visible by 5000%
+< Expect #halfVisible to be visible by 50%
 + {"id":"halfVisible","expected":50}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"id","value":"halfVisible","isRegex":false},"modifiers":["not"],"expectation":"toBeVisible","params":[26],"timeout":2000}}
-< Expect #halfVisible not to be visible by 2600%
+< Expect #halfVisible not to be visible by 26%
 + {"id":"halfVisible","expected":26}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"id","value":"halfVisible","isRegex":false},"modifiers":["not"],"expectation":"toBeVisible","params":[51]}}
-< Expect #halfVisible not to be visible by 5100%
+< Expect #halfVisible not to be visible by 51%
 + {"id":"halfVisible","expected":51}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"id","value":"localDateLabel","isRegex":false},"expectation":"toHaveText","params":["Date (Local): Feb 6th, 2019"]}}
@@ -1427,7 +1427,7 @@ exports[`iOS description maker should process everything.jsonl fixture 1`] = `
 + {"text":"From push"}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"HText1","isRegex":false},"expectation":"toBeVisible","params":[1]}}
-< Expect "HText1" to be visible by 100%
+< Expect "HText1" to be visible by 1%
 + {"text":"HText1","expected":1}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"HText1","isRegex":false},"expectation":"toBeVisible"}}
@@ -1583,7 +1583,7 @@ exports[`iOS description maker should process everything.jsonl fixture 1`] = `
 + {"text":"Tap Working!!!"}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"Text1","isRegex":false},"expectation":"toBeVisible","params":[1]}}
-< Expect "Text1" to be visible by 100%
+< Expect "Text1" to be visible by 1%
 + {"text":"Text1","expected":1}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"Text1","isRegex":false},"expectation":"toBeVisible"}}
@@ -1607,7 +1607,7 @@ exports[`iOS description maker should process everything.jsonl fixture 1`] = `
 + {"text":"Text12"}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"Text16","isRegex":false},"modifiers":["not"],"expectation":"toBeVisible","params":[80]}}
-< Expect "Text16" not to be visible by 8000%
+< Expect "Text16" not to be visible by 80%
 + {"text":"Text16","expected":80}
 
 > {"type":"invoke","params":{"type":"expectation","predicate":{"type":"text","value":"Text4","isRegex":false},"expectation":"toBeVisible"}}

src/steps/description-maker/ios/formatters/expectation-formatters.ts

@@ -1,7 +1,7 @@
 import type { StepDescription } from '../../types';
 import type { ExpectationInvocation, Invocation } from '../detox-payload';
 import { formatPredicate } from './predicate-formatters';
-import { concat, msg, percent, truncate } from './utils';
+import { concat, msg, percentVisible, truncate } from './utils';
 
 const formatExpectationVerb = (invocation: ExpectationInvocation): string => {
   const hasNot = invocation.modifiers?.includes('not');
@@ -21,7 +21,9 @@ const formatExpectationParams = (invocation: ExpectationInvocation): StepDescrip
 
   switch (invocation.expectation) {
     case 'toBeVisible': {
-      return typeof expected === 'number' ? msg(`by ${percent(expected)}`, { expected }) : null;
+      return typeof expected === 'number'
+        ? msg(`by ${percentVisible(expected)}`, { expected })
+        : null;
     }
 
     default: {

src/steps/description-maker/ios/formatters/utils.test.ts

@@ -1,4 +1,4 @@
-import { percent, truncate } from './utils';
+import { percent, percentVisible, truncate } from './utils';
 
 describe('percent', () => {
   it('should return empty string for abnormal values', () => {
@@ -26,6 +26,34 @@ describe('percent', () => {
   });
 });
 
+describe('percentVisible', () => {
+  it('should return empty string for abnormal values', () => {
+    expect(percentVisible('')).toBe('');
+    expect(percentVisible(null)).toBe('');
+    expect(percentVisible()).toBe('');
+    expect(percentVisible(Number.NaN)).toBe('');
+    expect(percentVisible(Number.POSITIVE_INFINITY)).toBe('');
+    expect(percentVisible([])).toBe('');
+    expect(percentVisible({})).toBe('');
+    expect(percentVisible('')).toBe('');
+  });
+
+  it('should convert valid numbers to strings', () => {
+    expect(percentVisible(75)).toBe('75%');
+    expect(percentVisible(1)).toBe('1%');
+    expect(percentVisible(100)).toBe('100%');
+    expect(percentVisible(0)).toBe('0%');
+    expect(percentVisible(33)).toBe('33%');
+  });
+
+  it('should handle string numbers', () => {
+    expect(percentVisible('50')).toBe('50%');
+    expect(percentVisible('0')).toBe('0%');
+    expect(percentVisible('100')).toBe('100%');
+    expect(percentVisible('1')).toBe('1%');
+  });
+});
+
 describe('truncate', () => {
   it('should return empty string for falsy values', () => {
     expect(truncate('')).toBe('');

src/steps/description-maker/ios/formatters/utils.ts

@@ -25,6 +25,18 @@ export function percent(value?: unknown): string {
   return Number.isFinite(num) ? (num * 100).toFixed(0) + '%' : '';
 }
 
+// Separate function for toBeVisible call as it's parameter is directly in %
+export function percentVisible(value?: unknown): string {
+  const num =
+    typeof value === 'number'
+      ? value
+      : typeof value === 'string' && value
+        ? Number(value)
+        : Number.NaN;
+
+  return Number.isFinite(num) ? num.toFixed(0) + '%' : '';
+}
+
 export function truncate(value?: unknown, maxLength = 40): string {
   if (!value) return '';