@controleonline/ui-common 1.2.79 → 1.2.81

package/src/tests/browser/manager/bottom-navigation-role-toolbar.spec.js

@@ -0,0 +1,353 @@
+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 collection = member => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+  summary: {},
+});
+
+const companyA = {
+  id: 3,
+  name: 'Controle Online',
+  alias: 'CONTROLE',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {colors: {primary: '#0EA5E9', success: '#10b981'}},
+};
+
+const companyB = {
+  id: 9,
+  name: 'Gyros',
+  alias: 'GYROS',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {colors: {primary: '#16A34A', success: '#10b981'}},
+};
+
+const fullToolbarMenus = {
+  modules: {
+    1: {
+      id: 1,
+      label: 'Toolbar',
+      icon: 'home',
+      sortOrder: 10,
+      menus: [
+        {
+          id: 11,
+          menuKey: 'home',
+          label: 'Início',
+          route: 'HomePage',
+          icon: 'home',
+          menuType: 'toolbar',
+          sortOrder: 10,
+        },
+        {
+          id: 12,
+          menuKey: 'opportunities',
+          label: 'Oportunidades',
+          route: 'CrmIndex',
+          icon: 'dollar-sign',
+          menuType: 'toolbar',
+          sortOrder: 20,
+        },
+        {
+          id: 13,
+          menuKey: 'customers',
+          label: 'Clientes',
+          route: 'ClientsIndex',
+          icon: 'users',
+          menuType: 'toolbar',
+          sortOrder: 30,
+        },
+        {
+          id: 14,
+          menuKey: 'profile',
+          label: 'Perfil',
+          route: 'ProfilePage',
+          icon: 'user',
+          menuType: 'toolbar',
+          sortOrder: 40,
+        },
+      ],
+    },
+  },
+};
+
+const limitedToolbarMenus = {
+  modules: {
+    1: {
+      id: 1,
+      label: 'Toolbar',
+      icon: 'home',
+      sortOrder: 10,
+      menus: [
+        {
+          id: 21,
+          menuKey: 'home',
+          label: 'Início',
+          route: 'HomePage',
+          icon: 'home',
+          menuType: 'toolbar',
+          sortOrder: 10,
+        },
+        {
+          id: 24,
+          menuKey: 'profile',
+          label: 'Perfil',
+          route: 'ProfilePage',
+          icon: 'user',
+          menuType: 'toolbar',
+          sortOrder: 40,
+        },
+      ],
+    },
+  },
+};
+
+const installSession = async (page, {companyId = 3} = {}) => {
+  await page.addInitScript(
+    ({appVersion, companyId}) => {
+      const set = (k, v) => {
+        try {
+          localStorage.setItem(k, v);
+        } catch {}
+      };
+      set(
+        'session',
+        JSON.stringify({
+          id: 7,
+          people: '/people/7',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: companyId,
+          roles: ['ROLE_ADMIN'],
+        }),
+      );
+      set('config', JSON.stringify({language: 'pt-br'}));
+      set('app-type', 'MANAGER');
+      set(
+        '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, companyId},
+  );
+};
+
+const mockManagerApi = async (page, {toolbarByCompany}) => {
+  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 === 'menus-people') {
+      const companyId = String(url.searchParams.get('myCompany') || '');
+      const menuType = String(url.searchParams.get('menuType') || '');
+      const payload =
+        menuType === 'toolbar'
+          ? toolbarByCompany[companyId] || {modules: {}}
+          : {modules: {}};
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({
+          response: {
+            data: payload,
+            count: 1,
+            error: '',
+            success: true,
+          },
+        }),
+      });
+    }
+
+    if (
+      pathname === 'people/companies/my' ||
+      pathname === 'people/company/default'
+    ) {
+      const list = [companyA, companyB];
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(
+          pathname === 'people/companies/my' ? collection(list) : companyA,
+        ),
+      });
+    }
+
+    if (pathname.startsWith('people/') || pathname === 'companies') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(companyA),
+      });
+    }
+
+    if (pathname === 'configs/discovery-configs') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({configs: {}}),
+      });
+    }
+
+    if (pathname === 'devices' || pathname.startsWith('device')) {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([])),
+      });
+    }
+
+    return route.fulfill({
+      status: 200,
+      headers: jsonHeaders(),
+      body: JSON.stringify(collection([])),
+    });
+  });
+};
+
+test.describe('MANAGER bottom navigation role toolbar', () => {
+  test.use({viewport: {width: 390, height: 844}});
+
+  test('full role sees authorized toolbar routes including Clientes', async ({
+    page,
+  }) => {
+    await mockManagerApi(page, {
+      toolbarByCompany: {
+        '3': fullToolbarMenus,
+        '9': limitedToolbarMenus,
+      },
+    });
+    await installSession(page, {companyId: 3});
+    await page.goto('/');
+
+    const nav = page.getByTestId('bottom-navigation');
+    await expect(nav).toBeVisible({timeout: 20000});
+    await expect(nav.getByText('Início')).toBeVisible();
+    await expect(nav.getByText('Oportunidades')).toBeVisible();
+    await expect(nav.getByText('Clientes')).toBeVisible();
+    await expect(nav.getByText('Perfil')).toBeVisible();
+  });
+
+  test('limited role does not expose business routes; keeps Início and Perfil', async ({
+    page,
+  }) => {
+    await mockManagerApi(page, {
+      toolbarByCompany: {
+        '3': limitedToolbarMenus,
+      },
+    });
+    await installSession(page, {companyId: 3});
+    await page.goto('/');
+
+    const nav = page.getByTestId('bottom-navigation');
+    await expect(nav).toBeVisible({timeout: 20000});
+    await expect(nav.getByText('Início')).toBeVisible();
+    await expect(nav.getByText('Perfil')).toBeVisible();
+    await expect(nav.getByText('Clientes')).toHaveCount(0);
+    await expect(nav.getByText('Oportunidades')).toHaveCount(0);
+  });
+
+  test('API failure keeps safe fallback without business routes', async ({
+    page,
+  }) => {
+    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 === 'menus-people') {
+        return route.fulfill({
+          status: 500,
+          headers: jsonHeaders(),
+          body: JSON.stringify({
+            response: {data: [], count: 0, error: 'fail', success: false},
+          }),
+        });
+      }
+
+      if (
+        pathname === 'people/companies/my' ||
+        pathname === 'people/company/default' ||
+        pathname.startsWith('people/') ||
+        pathname === 'companies'
+      ) {
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify(
+            pathname === 'people/companies/my'
+              ? collection([companyA])
+              : companyA,
+          ),
+        });
+      }
+
+      if (pathname === 'configs/discovery-configs') {
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify({configs: {}}),
+        });
+      }
+
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([])),
+      });
+    });
+
+    await installSession(page, {companyId: 3});
+    await page.goto('/');
+
+    const nav = page.getByTestId('bottom-navigation');
+    await expect(nav).toBeVisible({timeout: 20000});
+    await expect(nav.getByText('Início')).toBeVisible();
+    await expect(nav.getByText('Perfil')).toBeVisible();
+    await expect(nav.getByText('Clientes')).toHaveCount(0);
+    await expect(nav.getByText('Oportunidades')).toHaveCount(0);
+  });
+});

package/src/tests/browser/manager/device-detail-alias-save.spec.js

@@ -0,0 +1,345 @@
+/**
+ * Smoke browser: Manager /device-detail alias save updates header without refresh.
+ * fluxo: manager-devices
+ * Refs: app-community#382
+ *
+ * Criteria:
+ * - Edit device name → save → displayed alias in header becomes the new value without page reload.
+ * - Modules under Devices/detail remain ≤ 500 lines (absolute limit).
+ */
+const { expect, test } = require('playwright/test');
+const fs = require('fs');
+const path = require('path');
+const packageJson = require('../../../../../../../package.json');
+const { API_ORIGIN } = require('../../../../../../../src/tests/browser/apiOrigin');
+
+const APP_VERSION = packageJson?.version || '1.0.0';
+const CURRENT_DEVICE_ID = 'web-7';
+const DEVICE_ENTITY_ID = 396;
+const INITIAL_ALIAS = 'Caixa atual';
+const NEXT_ALIAS = 'Caixa Renomeado #382';
+
+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 collection = (member) => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+  summary: {},
+});
+
+const currentDevice = {
+  '@id': `/devices/${DEVICE_ENTITY_ID}`,
+  '@type': 'Device',
+  id: DEVICE_ENTITY_ID,
+  device: CURRENT_DEVICE_ID,
+  alias: INITIAL_ALIAS,
+  metadata: {
+    runtime: 'web',
+    network: { publicIp: '127.0.0.1' },
+  },
+};
+
+const createDeviceConfig = ({ id, type, device = currentDevice }) => ({
+  '@id': `/device_configs/${id}`,
+  '@type': 'DeviceConfig',
+  id,
+  type,
+  people: '/people/3',
+  device,
+  configs: JSON.stringify({
+    'config-version': APP_VERSION,
+    'pos-gateway': 'infinite-pay',
+  }),
+});
+
+const detailDir = path.join(__dirname, '../../../react/pages/Devices/detail');
+
+const MODULES_MAX_500 = [
+  'DeviceDetailScreen.js',
+  'DeviceDetailHeader.js',
+  'DeviceDetailRenderers.js',
+  'DeviceDetailPdvConfigSection.js',
+  'DeviceDetailOrdersPrintSection.js',
+  'DeviceDetailAlertsCommandsSection.js',
+  'DeviceDetailMovementSections.js',
+  'DeviceDetailPaymentSection.js',
+  'deviceDetailConstants.js',
+  'deviceDetailHelpers.js',
+  'OptionButtonChip.js',
+  'useDeviceDetailStateA.js',
+  'useDeviceDetailStateB.js',
+  'useDeviceDetailLoaders.js',
+  'useDeviceDetailActions.js',
+  'useDeviceDetailSaves.js',
+];
+
+const mockDevicesApi = async (page) => {
+  const company = {
+    id: 3,
+    name: 'Teste',
+    alias: 'TESTE',
+    panel_enabled: true,
+    enabled: true,
+    commercial_enabled: true,
+    theme: {
+      colors: {
+        primary: '#0EA5E9',
+        cardBackground: '#FFFFFF',
+        cardBorder: '#D8E0EA',
+      },
+    },
+  };
+
+  const managerConfig = createDeviceConfig({ id: 487, type: 'MANAGER' });
+  const deviceConfigs = [managerConfig];
+  /** @type {Array<{id:number,alias:string}>} */
+  const savedAliasPuts = [];
+
+  // Live mutable alias for GET after PUT
+  let liveAlias = INITIAL_ALIAS;
+
+  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: { ...CORS_HEADERS, 'content-type': 'text/css; charset=utf-8' },
+        body: ':root { --primary: #0ea5e9; }',
+      });
+    }
+
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ ip: '127.0.0.1' }),
+      });
+    }
+
+    if (pathname === 'menus-people') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ modules: {} }),
+      });
+    }
+
+    if (pathname === 'people/companies/my') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+
+    if (pathname === 'people/company/default') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(company),
+      });
+    }
+
+    if (pathname === 'configs/discovery-configs') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ configs: {} }),
+      });
+    }
+
+    if (pathname === 'devices' && method === 'GET') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(
+          collection([{ ...currentDevice, alias: liveAlias }]),
+        ),
+      });
+    }
+
+    if (
+      (pathname === `devices/${DEVICE_ENTITY_ID}` ||
+        pathname === `devices/${CURRENT_DEVICE_ID}`) &&
+      method === 'GET'
+    ) {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ ...currentDevice, alias: liveAlias }),
+      });
+    }
+
+    // Alias save: PUT /devices/{id}
+    if (
+      (pathname === `devices/${DEVICE_ENTITY_ID}` ||
+        pathname === `devices/${CURRENT_DEVICE_ID}`) &&
+      (method === 'PUT' || method === 'PATCH')
+    ) {
+      let body = {};
+      try {
+        body = request.postDataJSON() || {};
+      } catch {
+        body = {};
+      }
+      const next = String(body.alias || body.name || '').trim() || liveAlias;
+      liveAlias = next;
+      savedAliasPuts.push({ id: DEVICE_ENTITY_ID, alias: next });
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ ...currentDevice, alias: next }),
+      });
+    }
+
+    if (pathname === 'devices' && method === 'POST') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ ...currentDevice, alias: liveAlias }),
+      });
+    }
+
+    if (pathname === 'device_configs' && method === 'GET') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection(deviceConfigs)),
+      });
+    }
+
+    if (pathname.startsWith('device_configs/') && method === 'GET') {
+      const id = Number(pathname.split('/')[1]);
+      const found = deviceConfigs.find((c) => c.id === id) || managerConfig;
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({
+          ...found,
+          device: { ...found.device, alias: liveAlias },
+        }),
+      });
+    }
+
+    // Fallback: empty collection / 200
+    return route.fulfill({
+      status: 200,
+      headers: jsonHeaders(),
+      body: JSON.stringify(collection([])),
+    });
+  });
+
+  await page.addInitScript(
+    ({ appVersion }) => {
+      localStorage.setItem('token', 'smoke-token-382');
+      localStorage.setItem('config', JSON.stringify({ language: 'pt-br' }));
+      localStorage.setItem(
+        'device',
+        JSON.stringify({
+          id: 'web-7',
+          device: 'web-7',
+          type: 'MANAGER',
+          appName: 'Browser Manager',
+          appVersion,
+          buildNumber: appVersion,
+          systemName: 'web',
+          systemVersion: 'web',
+          deviceType: 'web',
+          metadata: { runtime: 'web' },
+        }),
+      );
+    },
+    { appVersion: APP_VERSION },
+  );
+
+  return { savedAliasPuts, getLiveAlias: () => liveAlias };
+};
+
+test.describe('device-detail alias save (browser smoke #382)', () => {
+  test('all detail modules respect absolute 500-line limit', async () => {
+    for (const name of MODULES_MAX_500) {
+      const f = path.join(detailDir, name);
+      expect(fs.existsSync(f), `missing ${name}`).toBe(true);
+      const lines = fs.readFileSync(f, 'utf8').split(/\r?\n/).length;
+      expect(lines, `${name} has ${lines} lines (max 500)`).toBeLessThanOrEqual(
+        500,
+      );
+    }
+  });
+
+  test('deviceAliasSync helper exists for save path', async () => {
+    const helper = path.join(
+      __dirname,
+      '../../../react/utils/deviceAliasSync.js',
+    );
+    expect(fs.existsSync(helper)).toBe(true);
+    expect(fs.readFileSync(helper, 'utf8')).toMatch(/buildDeviceAliasStoreUpdates/);
+  });
+
+  test('edit alias → save → header shows new value without refresh', async ({
+    page,
+  }) => {
+    const api = await mockDevicesApi(page);
+
+    await page.goto('/devices-index?store=device_config');
+
+    // Open device detail (MANAGER profile of current device)
+    await page.getByTestId('device-config-487').click();
+    await expect(page).toHaveURL(/device-detail/);
+
+    // Header must show initial alias
+    await expect(page.getByText(INITIAL_ALIAS, { exact: true })).toBeVisible({
+      timeout: 15000,
+    });
+
+    // Header shows initial alias via testID
+    await expect(page.getByTestId('device-alias-text')).toHaveText(INITIAL_ALIAS, {
+      timeout: 15000,
+    });
+
+    // Start edit via testID
+    await page.getByTestId('device-alias-edit').click();
+
+    // Fill input (testID on RN TextInput maps to data-testid on web)
+    const aliasInput = page.getByTestId('device-alias-input');
+    await expect(aliasInput).toBeVisible({ timeout: 10000 });
+    await aliasInput.fill(NEXT_ALIAS);
+
+    // Save via testID
+    await page.getByTestId('device-alias-save').click();
+
+    // Wait for PUT
+    await expect
+      .poll(() => api.savedAliasPuts.length, { timeout: 15000 })
+      .toBeGreaterThanOrEqual(1);
+    expect(api.savedAliasPuts[api.savedAliasPuts.length - 1].alias).toBe(
+      NEXT_ALIAS,
+    );
+
+    // CRITICAL acceptance: header shows NEW alias without page reload
+    await expect(page.getByText(NEXT_ALIAS, { exact: true })).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page).toHaveURL(/device-detail/);
+  });
+});