@controleonline/ui-common 1.2.79 → 1.2.81

package/src/tests/browser/manager/theme-confirm-toast.spec.js

@@ -0,0 +1,236 @@
+const {expect, test} = require('playwright/test');
+const packageJson = require('../../../../../../../package.json');
+const {API_ORIGIN} = require('../../../../../../../src/tests/browser/apiOrigin');
+
+const APP_VERSION = packageJson?.version || '1.0.0';
+
+const CORS_HEADERS = {
+  'access-control-allow-origin': '*',
+  'access-control-allow-headers':
+    'API-TOKEN, APP-DOMAIN, DEVICE, ACCEPT, CONTENT-TYPE, X-Requested-With',
+  'access-control-allow-methods': 'GET,POST,PUT,PATCH,DELETE,OPTIONS',
+};
+
+const jsonHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'application/ld+json; charset=utf-8',
+});
+
+const textHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'text/css; charset=utf-8',
+});
+
+const collection = member => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+  summary: {},
+});
+
+const createCompany = () => ({
+  id: 3,
+  name: 'Controle Online',
+  alias: 'CONTROLE ONLINE',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {
+    colors: {
+      primary: '#0EA5E9',
+      secondary: '#F97316',
+      buttonBackground: '#0EA5E9',
+      buttonBorder: '#0284C7',
+      buttonText: '#FFFFFF',
+      buttonTextSecondary: '#64748B',
+      cardBackground: '#FFFFFF',
+      cardBorder: '#D8E0EA',
+      modalOverlay: 'rgba(15, 23, 42, 0.45)',
+      modalBackground: '#FFFFFF',
+      modalBorder: '#D8E0EA',
+      modalHeaderText: '#0F172A',
+      modalText: '#334155',
+      toastDangerBackground: '#FEE2E2',
+      toastDangerBorder: '#FECACA',
+      toastDangerIcon: '#DC2626',
+      toastDangerText: '#991B1B',
+    },
+  },
+  configs: {},
+});
+
+const mockApi = async page => {
+  const company = createCompany();
+
+  await page.route(`${API_ORIGIN}/**`, async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathname = url.pathname.replace(/^\/+/, '');
+    const method = request.method().toUpperCase();
+
+    if (method === 'OPTIONS') {
+      return route.fulfill({status: 204, headers: CORS_HEADERS, body: ''});
+    }
+
+    if (pathname === 'themes-colors.css') {
+      return route.fulfill({
+        status: 200,
+        headers: textHeaders(),
+        body: ':root { --primary: #0ea5e9; --modal-overlay: rgba(15,23,42,0.45); }',
+      });
+    }
+
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ip: '127.0.0.1'}),
+      });
+    }
+
+    if (
+      pathname === 'people/company/default' ||
+      pathname === 'people' ||
+      pathname === 'devices' ||
+      pathname === 'device_configs' ||
+      pathname === 'menus-people'
+    ) {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+
+    return route.fulfill({
+      status: 200,
+      headers: jsonHeaders(),
+      body: JSON.stringify(collection([])),
+    });
+  });
+
+  await page.addInitScript(
+    ({appVersion}) => {
+      window.localStorage.setItem(
+        'session',
+        JSON.stringify({
+          id: 7,
+          people: '/people/7',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: 3,
+          roles: ['ROLE_SUPER'],
+          phone: '(11) 97114-0832',
+          email: 'qa@controleonline.com',
+        }),
+      );
+      window.localStorage.setItem('config', JSON.stringify({language: 'pt-br'}));
+      window.localStorage.setItem('app-type', 'MANAGER');
+      window.localStorage.setItem(
+        'device',
+        JSON.stringify({
+          id: 'web-manager',
+          device: 'web-manager',
+          type: 'WEB',
+          appName: 'Browser Manager',
+          appVersion,
+          buildNumber: appVersion,
+          systemName: 'web',
+          systemVersion: 'web',
+          deviceType: 'web',
+          metadata: {},
+        }),
+      );
+    },
+    {appVersion: APP_VERSION},
+  );
+};
+
+test.describe('theme ConfirmModal + SystemErrorToast (#362)', () => {
+  test('manager shell loads with theme tokens and no console errors on shared UI', async ({
+    page,
+  }) => {
+    const consoleErrors = [];
+    page.on('console', message => {
+      if (message.type() === 'error') {
+        consoleErrors.push(message.text());
+      }
+    });
+    page.on('pageerror', error => {
+      consoleErrors.push(String(error?.message || error));
+    });
+
+    await mockApi(page);
+    await page.goto('/devices-index?store=device_config');
+
+    // Page should settle without theme/runtime crashes
+    await page.waitForTimeout(2000);
+
+    // Soft presence check — devices index or empty state or nav shell
+    const bodyText = await page.locator('body').innerText();
+    expect(bodyText.length).toBeGreaterThan(0);
+
+    // No React / theme token resolution crashes
+    const relevant = consoleErrors.filter(
+      text =>
+        /theme|TypeError|Cannot read|undefined is not|StyleSheet|modalOverlay|toastDanger/i.test(
+          text,
+        ),
+    );
+    expect(
+      relevant,
+      `Unexpected theme/runtime console errors: ${JSON.stringify(relevant)}`,
+    ).toEqual([]);
+  });
+
+  test('SystemErrorToast path accepts theme palette without throwing when error is published', async ({
+    page,
+  }) => {
+    const consoleErrors = [];
+    page.on('console', message => {
+      if (message.type() === 'error') {
+        consoleErrors.push(message.text());
+      }
+    });
+    page.on('pageerror', error => {
+      consoleErrors.push(String(error?.message || error));
+    });
+
+    await mockApi(page);
+    await page.goto('/devices-index?store=device_config');
+    await page.waitForTimeout(1500);
+
+    // Attempt to publish a system error through any global channel the app may expose
+    await page.evaluate(() => {
+      try {
+        // MessageService / systemErrorChannel may be reachable via window hooks in some builds
+        if (typeof window.__publishSystemError === 'function') {
+          window.__publishSystemError('QA theme toast probe #362');
+          return;
+        }
+        // Fallback: dispatch a CustomEvent some runtimes listen to
+        window.dispatchEvent(
+          new CustomEvent('controleonline:system-error', {
+            detail: {message: 'QA theme toast probe #362'},
+          }),
+        );
+      } catch (e) {
+        // Swallow — presence of throw is asserted via consoleErrors
+        console.error(String(e));
+      }
+    });
+
+    await page.waitForTimeout(800);
+
+    const relevant = consoleErrors.filter(text =>
+      /theme|modalOverlay|toastDanger|Cannot read properties of undefined \(reading 'colors'\)/i.test(
+        text,
+      ),
+    );
+    expect(
+      relevant,
+      `Theme token errors after system-error probe: ${JSON.stringify(relevant)}`,
+    ).toEqual([]);
+  });
+});

package/src/tests/react/components/RuntimeFooterMarqueeText.test.js

@@ -0,0 +1,171 @@
+const assert = require('node:assert/strict');
+const {test, before, after, describe} = require('node:test');
+const Module = require('module');
+const path = require('path');
+const React = require('react');
+
+const originalLoad = Module._load;
+let lastLoopConfig = null;
+let animationStarts = 0;
+
+before(() => {
+  Module._load = function mockLoad(request, parent, isMain) {
+    if (request === 'react-native') {
+      function AnimatedValue(v) {
+        this._value = v;
+      }
+      AnimatedValue.prototype.setValue = function (v) {
+        this._value = v;
+      };
+      AnimatedValue.prototype.stopAnimation = function () {};
+
+      const timing = (value, config) => ({
+        _type: 'timing',
+        value,
+        config,
+        start: cb => {
+          animationStarts += 1;
+          if (typeof cb === 'function') cb({finished: true});
+        },
+        stop: () => {},
+      });
+
+      return {
+        Animated: {
+          Value: AnimatedValue,
+          View: props =>
+            React.createElement('AnimatedView', props, props.children),
+          Text: props =>
+            React.createElement('AnimatedText', props, props.children),
+          timing,
+          sequence: items => ({
+            _type: 'sequence',
+            items,
+            start: cb => {
+              animationStarts += 1;
+              if (typeof cb === 'function') cb({finished: true});
+            },
+            stop: () => {},
+          }),
+          loop: anim => {
+            lastLoopConfig = anim;
+            return {
+              _type: 'loop',
+              anim,
+              start: cb => {
+                animationStarts += 1;
+                if (typeof cb === 'function') cb({finished: true});
+              },
+              stop: () => {},
+            };
+          },
+          delay: ms => ({_type: 'delay', ms, start: () => {}, stop: () => {}}),
+        },
+        Text: props => React.createElement('Text', props, props.children),
+        View: props => React.createElement('View', props, props.children),
+        StyleSheet: {create: styles => styles},
+      };
+    }
+    return originalLoad.call(this, request, parent, isMain);
+  };
+});
+
+after(() => {
+  Module._load = originalLoad;
+});
+
+const loadComponent = () => {
+  const componentPath = path.resolve(
+    __dirname,
+    '../../../react/components/RuntimeFooterMarqueeText.js',
+  );
+  delete require.cache[componentPath];
+  return require(componentPath);
+};
+
+test('RuntimeFooterMarqueeText exports a React component', () => {
+  const mod = loadComponent();
+  assert.equal(typeof mod, 'function');
+  assert.equal(typeof mod.default, 'function');
+});
+
+test('short text stays single-line without duplicate marquee copy', async () => {
+  const RuntimeFooterMarqueeText = loadComponent();
+  const renderer = require('react-test-renderer');
+
+  animationStarts = 0;
+  lastLoopConfig = null;
+
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(
+      React.createElement(RuntimeFooterMarqueeText, {
+        text: 'v1.2.3 • PDV',
+        color: '#111',
+        style: {fontSize: 10},
+      }),
+    );
+  });
+
+  const root = tree.root.findByProps({testID: 'runtime-footer-marquee-text'});
+  renderer.act(() => {
+    root.props.onLayout({nativeEvent: {layout: {width: 400, height: 12}}});
+  });
+
+  const textNodes = tree.root.findAllByType('Text');
+  assert.equal(textNodes.length, 1);
+  assert.equal(textNodes[0].props.numberOfLines, 1);
+  assert.equal(textNodes[0].props.children, 'v1.2.3 • PDV');
+
+  renderer.act(() => {
+    textNodes[0].props.onLayout({
+      nativeEvent: {layout: {width: 80, height: 12}},
+    });
+  });
+
+  // Still short: content 80 < container 400 → no duplicate
+  assert.equal(tree.root.findAllByType('Text').length, 1);
+  assert.equal(lastLoopConfig, null);
+});
+
+test('long text enables marquee duplicate and starts loop animation', async () => {
+  const RuntimeFooterMarqueeText = loadComponent();
+  const renderer = require('react-test-renderer');
+
+  animationStarts = 0;
+  lastLoopConfig = null;
+
+  const longText =
+    'Mensagem muito longa do rodape runtime para validar deslizamento horizontal continuo no Manager e PDV';
+
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(
+      React.createElement(RuntimeFooterMarqueeText, {
+        text: longText,
+        color: '#222',
+        style: {fontSize: 10},
+      }),
+    );
+  });
+
+  const root = tree.root.findByProps({testID: 'runtime-footer-marquee-text'});
+  renderer.act(() => {
+    root.props.onLayout({nativeEvent: {layout: {width: 120, height: 12}}});
+  });
+
+  const firstText = tree.root.findAllByType('Text')[0];
+  renderer.act(() => {
+    firstText.props.onLayout({
+      nativeEvent: {layout: {width: 480, height: 12}},
+    });
+  });
+
+  const texts = tree.root.findAllByType('Text');
+  assert.equal(texts.length, 2, 'duplicate copy for seamless loop');
+  assert.equal(texts[0].props.children, longText);
+  assert.equal(texts[1].props.children, longText);
+  assert.equal(texts[0].props.numberOfLines, 1);
+  assert.ok(lastLoopConfig, 'Animated.loop should start when overflowing');
+  assert.ok(animationStarts >= 1);
+});

package/src/tests/react/components/UserAvatar.test.js

@@ -4,6 +4,7 @@ const {jest} = require('@jest/globals');
 
 jest.mock('react-native', () => ({
   Image: props => React.createElement('Image', props),
+  Platform: {OS: 'ios'},
   StyleSheet: {
     create: styles => styles,
   },
@@ -33,20 +34,23 @@ describe('UserAvatar', () => {
     expect(tree.root.findByType('Text').props.children).toBe('CT');
   });
 
-  it('uses gravatar as fallback when enabled', () => {
+  it('uses gravatar as fallback when enabled (native path)', async () => {
     let tree;
 
-    renderer.act(() => {
+    await renderer.act(async () => {
       tree = renderer.create(
         React.createElement(UserAvatar, {
           email: 'client@example.com',
           name: 'Client Test',
         }),
       );
+      // flush useEffect
+      await Promise.resolve();
     });
 
     const image = tree.root.findByType('Image');
 
     expect(image.props.source.uri).toContain('gravatar.com/avatar/');
+    expect(image.props.source.uri).toContain('d=404');
   });
 });

package/src/tests/react/components/themeAwareModals.test.mjs

@@ -0,0 +1,60 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {readFileSync} from 'node:fs';
+import {fileURLToPath} from 'node:url';
+import {dirname, join} from 'node:path';
+
+const root = join(dirname(fileURLToPath(import.meta.url)), '../../..');
+
+const FORBIDDEN_COLOR = /#[0-9a-fA-F]{3,8}\b|\brgba?\s*\(|\bwhite\b|\bblack\b/i;
+
+function loadSource(rel) {
+  return readFileSync(join(root, rel), 'utf8');
+}
+
+test('ConfirmModal.js sources colors only from themeStore getters.colors', () => {
+  const src = loadSource('react/components/ConfirmModal.js');
+  assert.match(src, /themeStore\.getters\.colors|themeColors/);
+  assert.match(src, /modalOverlay|modalBackground|buttonBackground/);
+  assert.doesNotMatch(
+    src.replace(/transparent/g, ''),
+    FORBIDDEN_COLOR,
+    'ConfirmModal.js must not hardcode colors',
+  );
+});
+
+test('ConfirmModal.styles.js createStyles uses only palette tokens', () => {
+  const src = loadSource('react/components/ConfirmModal.styles.js');
+  assert.match(src, /palette\.modalOverlay/);
+  assert.match(src, /palette\.modalBackground/);
+  assert.match(src, /palette\.buttonBackground/);
+  assert.match(src, /palette\.buttonText/);
+  // strip comments and the word transparent (Modal prop, not a color literal in styles)
+  const stripped = src
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\/\/.*$/gm, '')
+    .replace(/transparent/gi, '');
+  assert.doesNotMatch(stripped, FORBIDDEN_COLOR);
+});
+
+test('SystemErrorToast.js sources colors only from themeStore getters.colors', () => {
+  const src = loadSource('react/components/SystemErrorToast.js');
+  assert.match(src, /themeStore\.getters\.colors|themeColors/);
+  assert.match(src, /toastDangerBackground|toastDangerText/);
+  assert.doesNotMatch(
+    src.replace(/transparent/g, ''),
+    FORBIDDEN_COLOR,
+    'SystemErrorToast.js must not hardcode colors',
+  );
+});
+
+test('SystemErrorToast.styles.js createStyles uses only palette tokens', () => {
+  const src = loadSource('react/components/SystemErrorToast.styles.js');
+  assert.match(src, /palette\.toastDangerBackground/);
+  assert.match(src, /palette\.toastDangerText/);
+  const stripped = src
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/\/\/.*$/gm, '')
+    .replace(/transparent/gi, '');
+  assert.doesNotMatch(stripped, FORBIDDEN_COLOR);
+});