@controleonline/ui-customers 1.0.81 → 1.0.82

package/src/tests/browser/manager/client-details-identity-case.spec.js

@@ -0,0 +1,227 @@
+/**
+ * Browser smoke for app-community#376:
+ * GeneralTab name/alias inputs must keep exact mixed case on the value
+ * submitted via PUT/PATCH (no forced uppercase on the input → persist path).
+ */
+const {expect, test} = require('playwright/test');
+const {API_ORIGIN} = require('../../../../../../../src/tests/browser/apiOrigin');
+const {version: appVersion} = require('../../../../../../../package.json');
+
+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 collection = (member = [], summary = {}) => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+  summary,
+});
+
+const jsonHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'application/ld+json; charset=utf-8',
+});
+
+const textHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'text/css; charset=utf-8',
+});
+
+const createCompany = () => ({
+  id: 3,
+  name: 'Controle Online',
+  alias: 'CONTROLE ONLINE',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {
+    colors: {
+      primary: '#0EA5E9',
+      secondary: '#F97316',
+    },
+  },
+  configs: {},
+});
+
+const mockApi = async page => {
+  const company = createCompany();
+  const peopleWrites = [];
+
+  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; --secondary: #f97316; }',
+      });
+    }
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ip: '127.0.0.1'}),
+      });
+    }
+    if (pathname === 'people/company/default') {
+      return route.fulfill({status: 200, headers: jsonHeaders(), body: JSON.stringify(company)});
+    }
+    if (pathname === 'people/companies/my') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+    if (pathname === 'people/30') {
+      if (method === 'PUT' || method === 'PATCH') {
+        const body = await request.postDataJSON().catch(() => ({}));
+        peopleWrites.push({method, body});
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify({
+            '@id': '/people/30',
+            id: 30,
+            peopleType: 'F',
+            enable: true,
+            ...body,
+          }),
+        });
+      }
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({
+          '@id': '/people/30',
+          id: 30,
+          name: 'Joao Silva',
+          alias: 'Joao',
+          peopleType: 'F',
+          enable: true,
+        }),
+      });
+    }
+    if (pathname === 'people_links' || pathname.startsWith('people_links')) {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([])),
+      });
+    }
+    if (pathname === 'menus-people') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({modules: {}}),
+      });
+    }
+    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 page.addInitScript(
+    ({appVersion: ver}) => {
+      const set = (k, v) => {
+        try {
+          localStorage.setItem(k, v);
+        } catch {
+          // ignore
+        }
+      };
+      set(
+        'session',
+        JSON.stringify({
+          id: 7,
+          people: '/people/7',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: 3,
+          roles: ['ROLE_SUPER'],
+        }),
+      );
+      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: ver,
+          buildNumber: ver,
+          systemName: 'web',
+          systemVersion: 'web',
+          deviceType: 'web',
+          metadata: {},
+        }),
+      );
+    },
+    {appVersion},
+  );
+
+  return {peopleWrites};
+};
+
+test.describe('client-details identity case preservation (#376)', () => {
+  test('GeneralTab keeps exact mixed case on name/alias in people PUT body', async ({page}) => {
+    const api = await mockApi(page);
+
+    await page.goto('/client-details?clientId=30&contextKey=contacts&parentCompanyId=29');
+
+    await expect(page.getByText('Dados Cadastrais', {exact: true})).toBeVisible({
+      timeout: 15000,
+    });
+
+    const MIXED_NAME = 'Cláudia Mixed Case';
+    const MIXED_ALIAS = 'Claudia Alias';
+
+    const nameInput = page.getByPlaceholder(/nome|name/i).first();
+    const aliasInput = page.getByPlaceholder(/apelido|alias|nome fantasia/i).first();
+
+    if ((await nameInput.count()) > 0) {
+      await nameInput.fill(MIXED_NAME);
+    } else {
+      await page.locator('input[type="text"], input:not([type])').nth(0).fill(MIXED_NAME);
+    }
+
+    if ((await aliasInput.count()) > 0) {
+      await aliasInput.fill(MIXED_ALIAS);
+    } else {
+      await page.locator('input[type="text"], input:not([type])').nth(1).fill(MIXED_ALIAS);
+    }
+
+    await page.getByText(/Save Changes|Salvar alterações/i).click();
+
+    await expect.poll(() => api.peopleWrites.length, {timeout: 15000}).toBeGreaterThanOrEqual(1);
+
+    const body = api.peopleWrites[0].body || {};
+    expect(String(body.name)).toBe(MIXED_NAME);
+    if (body.alias != null && body.alias !== '') {
+      expect(String(body.alias)).toBe(MIXED_ALIAS);
+    }
+  });
+});

package/src/tests/browser/manager/client-details-people-type.manifest.md

@@ -0,0 +1,18 @@
+# Smoke manifesto — client-details peopleType
+
+- **Issue:** ControleOnline/app-community#625
+- **fluxo:** outros
+- **flowchartIds:** [1](https://admin.controleonline.com/admin/flowcharts/1)
+- **Spec:** `src/tests/browser/manager/client-details-people-type.spec.js`
+- **Modelo canônico:** `People.peopleType` = `F` | `J` (contrato não é peopleType)
+
+## Etapas (prints gerados em runtime)
+
+| # | Arquivo | Etapa |
+| --- | --- | --- |
+| 01 | `01-client-details-dados-cadastrais.png` | Abrir client-details → Dados Cadastrais |
+| 02 | `02-tipo-pf-sem-contrato.png` | Picker Tipo PF; sem opção inventada "contrato" |
+| 03 | `03-tipo-pj-selecionado.png` | Selecionar PJ (`J`) |
+| 04 | `04-pj-persistido-sem-f5.png` | Salvar; tipo permanece `J` sem F5; PUT `/people/30` com `peopleType: "J"` |
+
+Os PNGs e `manifest.json` são gravados em `testInfo.outputDir/client-details-people-type/` e anexados ao relatório Playwright (`testInfo.attach`).

package/src/tests/browser/manager/client-details-people-type.spec.js

@@ -0,0 +1,345 @@
+/**
+ * fluxo: outros
+ * flowchartIds: [1]
+ * app-community#625 — persist People.peopleType F/J on client-details.
+ */
+const fs = require('fs');
+const path = require('path');
+const {expect, test} = require('playwright/test');
+const {API_ORIGIN} = require('../../../../../../../src/tests/browser/apiOrigin');
+const {version: appVersion} = require('../../../../../../../package.json');
+
+const FLOW_ID = 'outros';
+const FLOWCHART_IDS = [1];
+const FLOWCHART_LINKS = FLOWCHART_IDS.map(
+  id => `https://admin.controleonline.com/admin/flowcharts/${id}`,
+);
+
+const evidenceSteps = [];
+
+const writeEvidence = async (page, outputDir, stepId, title) => {
+  fs.mkdirSync(outputDir, {recursive: true});
+  const fileName = `${stepId}.png`;
+  const filePath = path.join(outputDir, fileName);
+  await page.screenshot({path: filePath, fullPage: true});
+  evidenceSteps.push({
+    id: stepId,
+    title,
+    screenshot: fileName,
+    url: page.url(),
+  });
+  return filePath;
+};
+
+const writeManifest = outputDir => {
+  const manifest = {
+    fluxo: FLOW_ID,
+    flowchartIds: FLOWCHART_IDS,
+    flowchartLinks: FLOWCHART_LINKS,
+    title: 'client-details peopleType F/J persist without invented contrato',
+    issue: 'ControleOnline/app-community#625',
+    steps: evidenceSteps,
+  };
+  fs.writeFileSync(
+    path.join(outputDir, 'manifest.json'),
+    `${JSON.stringify(manifest, null, 2)}\n`,
+  );
+  return manifest;
+};
+
+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 collection = (member = []) => ({
+  member,
+  'hydra:member': member,
+  totalItems: member.length,
+  'hydra:totalItems': member.length,
+});
+
+const jsonHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'application/ld+json; charset=utf-8',
+});
+
+const textHeaders = () => ({
+  ...CORS_HEADERS,
+  'content-type': 'text/css; charset=utf-8',
+});
+
+const createCompany = () => ({
+  id: 3,
+  name: 'Controle Online',
+  alias: 'CONTROLE ONLINE',
+  panel_enabled: true,
+  enabled: true,
+  commercial_enabled: true,
+  theme: {
+    colors: {
+      primary: '#0EA5E9',
+      secondary: '#F97316',
+    },
+  },
+  configs: {},
+});
+
+const mockClientDetailsPeopleTypeApi = async page => {
+  const company = createCompany();
+  let peopleType = 'F';
+  const peopleWrites = [];
+
+  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; --secondary: #f97316; }',
+      });
+    }
+
+    if (pathname === 'runtime/ip') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({ip: '127.0.0.1'}),
+      });
+    }
+
+    if (pathname === 'people/company/default') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(company),
+      });
+    }
+
+    if (pathname === 'people/companies/my') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(collection([company])),
+      });
+    }
+
+    if (pathname === 'people/30') {
+      if (method === 'PUT' || method === 'PATCH') {
+        const body = await request.postDataJSON().catch(() => ({}));
+        peopleWrites.push({method, body});
+        if (body.peopleType === 'F' || body.peopleType === 'J') {
+          peopleType = body.peopleType;
+        }
+        return route.fulfill({
+          status: 200,
+          headers: jsonHeaders(),
+          body: JSON.stringify({
+            '@id': '/people/30',
+            id: 30,
+            name: 'JOAO SILVA',
+            alias: 'JOAO SILVA',
+            peopleType,
+            enable: true,
+          }),
+        });
+      }
+
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({
+          '@id': '/people/30',
+          id: 30,
+          name: 'JOAO SILVA',
+          alias: 'JOAO SILVA',
+          peopleType,
+          enable: true,
+        }),
+      });
+    }
+
+    if (pathname === 'people_links' || pathname.startsWith('people_links')) {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify(
+          collection([
+            {
+              id: 8,
+              linkType: 'employee',
+              company: {'@id': '/people/29', id: 29},
+              people: {
+                '@id': '/people/30',
+                id: 30,
+                name: 'JOAO SILVA',
+                alias: 'JOAO SILVA',
+                peopleType,
+              },
+            },
+          ]),
+        ),
+      });
+    }
+
+    if (pathname === 'menus-people') {
+      return route.fulfill({
+        status: 200,
+        headers: jsonHeaders(),
+        body: JSON.stringify({modules: {}}),
+      });
+    }
+
+    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 page.addInitScript(
+    ({appVersion}) => {
+      const setLocalStorageItem = (key, value) => {
+        try {
+          localStorage.setItem(key, value);
+        } catch {
+          // ignore
+        }
+      };
+
+      setLocalStorageItem(
+        'session',
+        JSON.stringify({
+          id: 7,
+          people: '/people/7',
+          api_key: 'test-api-key',
+          active: 1,
+          mycompany: 3,
+          roles: ['ROLE_SUPER'],
+        }),
+      );
+      setLocalStorageItem('config', JSON.stringify({language: 'pt-br'}));
+      setLocalStorageItem('app-type', 'MANAGER');
+      setLocalStorageItem(
+        '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},
+  );
+
+  return {getPeopleWrites: () => peopleWrites};
+};
+
+test.describe('client details peopleType browser smoke', () => {
+  test('selects PJ and persists peopleType without inventing contrato', async ({
+    page,
+  }, testInfo) => {
+    const api = await mockClientDetailsPeopleTypeApi(page);
+    const outputDir = path.join(
+      testInfo.outputDir,
+      'client-details-people-type',
+    );
+
+    await page.goto(
+      '/client-details?clientId=30&contextKey=contacts&parentCompanyId=29&initialTab=general',
+    );
+
+    await expect(page.getByText('Dados Cadastrais', {exact: true})).toBeVisible({
+      timeout: 15000,
+    });
+    await writeEvidence(
+      page,
+      outputDir,
+      '01-client-details-dados-cadastrais',
+      'Abrir client-details na aba Dados Cadastrais',
+    );
+
+    const typePicker = page.getByLabel('Tipo de colaborador');
+    await expect(typePicker).toBeVisible();
+    await expect(typePicker).toHaveValue('F');
+    await expect(page.getByText('Pessoa Física')).toBeVisible();
+    await expect(page.getByText('contrato', {exact: true})).toHaveCount(0);
+    await writeEvidence(
+      page,
+      outputDir,
+      '02-tipo-pf-sem-contrato',
+      'Tipo PF visível; opção inventada contrato ausente',
+    );
+
+    await typePicker.selectOption('J');
+    await expect(typePicker).toHaveValue('J');
+    await writeEvidence(
+      page,
+      outputDir,
+      '03-tipo-pj-selecionado',
+      'Selecionar Pessoa Jurídica no picker F|J',
+    );
+
+    await page.getByText(/Save Changes|Salvar alterações/i).click();
+
+    await expect.poll(() => api.getPeopleWrites().length).toBeGreaterThan(0);
+    const lastWrite = api.getPeopleWrites().at(-1);
+    expect(lastWrite.body.peopleType).toBe('J');
+    expect(lastWrite.body.peopleType).not.toBe('contrato');
+
+    await expect(typePicker).toHaveValue('J');
+    await writeEvidence(
+      page,
+      outputDir,
+      '04-pj-persistido-sem-f5',
+      'Após Salvar, tipo permanece J sem F5 (PUT peopleType=J)',
+    );
+
+    const manifest = writeManifest(outputDir);
+    expect(manifest.fluxo).toBe(FLOW_ID);
+    expect(manifest.flowchartIds).toEqual(FLOWCHART_IDS);
+    expect(manifest.steps).toHaveLength(4);
+    await testInfo.attach('smoke-manifest', {
+      body: Buffer.from(JSON.stringify(manifest, null, 2)),
+      contentType: 'application/json',
+    });
+    for (const step of evidenceSteps) {
+      const pngPath = path.join(outputDir, step.screenshot);
+      if (fs.existsSync(pngPath)) {
+        await testInfo.attach(step.id, {
+          path: pngPath,
+          contentType: 'image/png',
+        });
+      }
+    }
+  });
+});