@ledgerhq/device-mockserver-react 0.0.0-mockserver-react-20260929114136 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/lib/cjs/package.json +9 -9
- package/lib/cjs/src/DeviceOsInfo.js +1 -1
- package/lib/cjs/src/DeviceOsInfo.js.map +2 -2
- package/lib/cjs/src/DeviceOsInfo.test.js +2 -0
- package/lib/cjs/src/DeviceOsInfo.test.js.map +7 -0
- package/lib/cjs/src/DeviceScreen.js +1 -1
- package/lib/cjs/src/DeviceScreen.js.map +3 -3
- package/lib/cjs/src/DeviceScreen.test.js +2 -0
- package/lib/cjs/src/DeviceScreen.test.js.map +7 -0
- package/lib/cjs/src/DeviceScreenButtons.test.js +2 -0
- package/lib/cjs/src/DeviceScreenButtons.test.js.map +7 -0
- package/lib/cjs/src/DeviceScreenImage.test.js +2 -0
- package/lib/cjs/src/DeviceScreenImage.test.js.map +7 -0
- package/lib/cjs/src/MockServerDevice.js.map +1 -1
- package/lib/cjs/src/MockServerDevice.test.js +2 -0
- package/lib/cjs/src/MockServerDevice.test.js.map +7 -0
- package/lib/cjs/src/deviceModels.test.js +2 -0
- package/lib/cjs/src/deviceModels.test.js.map +7 -0
- package/lib/cjs/src/index.js +1 -1
- package/lib/cjs/src/index.js.map +1 -1
- package/lib/cjs/src/mockServerScreenApi.js +1 -1
- package/lib/cjs/src/mockServerScreenApi.js.map +2 -2
- package/lib/cjs/src/mockServerScreenApi.test.js.map +2 -2
- package/lib/cjs/src/types.js +1 -1
- package/lib/cjs/src/types.js.map +1 -1
- package/lib/cjs/src/useMockServerDevice.js +1 -1
- package/lib/cjs/src/useMockServerDevice.js.map +3 -3
- package/lib/cjs/src/useMockServerDevice.test.js +2 -0
- package/lib/cjs/src/useMockServerDevice.test.js.map +7 -0
- package/lib/esm/package.json +9 -9
- package/lib/esm/src/DeviceOsInfo.js +1 -1
- package/lib/esm/src/DeviceOsInfo.js.map +2 -2
- package/lib/esm/src/DeviceOsInfo.test.js +2 -0
- package/lib/esm/src/DeviceOsInfo.test.js.map +7 -0
- package/lib/esm/src/DeviceScreen.js +1 -1
- package/lib/esm/src/DeviceScreen.js.map +3 -3
- package/lib/esm/src/DeviceScreen.test.js +2 -0
- package/lib/esm/src/DeviceScreen.test.js.map +7 -0
- package/lib/esm/src/DeviceScreenButtons.test.js +2 -0
- package/lib/esm/src/DeviceScreenButtons.test.js.map +7 -0
- package/lib/esm/src/DeviceScreenImage.test.js +2 -0
- package/lib/esm/src/DeviceScreenImage.test.js.map +7 -0
- package/lib/esm/src/MockServerDevice.js.map +1 -1
- package/lib/esm/src/MockServerDevice.test.js +2 -0
- package/lib/esm/src/MockServerDevice.test.js.map +7 -0
- package/lib/esm/src/deviceModels.test.js +2 -0
- package/lib/esm/src/deviceModels.test.js.map +7 -0
- package/lib/esm/src/index.js.map +1 -1
- package/lib/esm/src/mockServerScreenApi.js +1 -1
- package/lib/esm/src/mockServerScreenApi.js.map +2 -2
- package/lib/esm/src/mockServerScreenApi.test.js.map +2 -2
- package/lib/esm/src/useMockServerDevice.js +1 -1
- package/lib/esm/src/useMockServerDevice.js.map +3 -3
- package/lib/esm/src/useMockServerDevice.test.js +2 -0
- package/lib/esm/src/useMockServerDevice.test.js.map +7 -0
- package/lib/types/src/DeviceOsInfo.test.d.ts +2 -0
- package/lib/types/src/DeviceOsInfo.test.d.ts.map +1 -0
- package/lib/types/src/DeviceScreen.d.ts.map +1 -1
- package/lib/types/src/DeviceScreen.test.d.ts +2 -0
- package/lib/types/src/DeviceScreen.test.d.ts.map +1 -0
- package/lib/types/src/DeviceScreenButtons.test.d.ts +2 -0
- package/lib/types/src/DeviceScreenButtons.test.d.ts.map +1 -0
- package/lib/types/src/DeviceScreenImage.test.d.ts +2 -0
- package/lib/types/src/DeviceScreenImage.test.d.ts.map +1 -0
- package/lib/types/src/MockServerDevice.d.ts +2 -2
- package/lib/types/src/MockServerDevice.d.ts.map +1 -1
- package/lib/types/src/MockServerDevice.test.d.ts +2 -0
- package/lib/types/src/MockServerDevice.test.d.ts.map +1 -0
- package/lib/types/src/deviceModels.test.d.ts +2 -0
- package/lib/types/src/deviceModels.test.d.ts.map +1 -0
- package/lib/types/src/index.d.ts +1 -1
- package/lib/types/src/index.d.ts.map +1 -1
- package/lib/types/src/mockServerScreenApi.d.ts +2 -3
- package/lib/types/src/mockServerScreenApi.d.ts.map +1 -1
- package/lib/types/src/types.d.ts +6 -1
- package/lib/types/src/types.d.ts.map +1 -1
- package/lib/types/src/useMockServerDevice.d.ts +5 -3
- package/lib/types/src/useMockServerDevice.d.ts.map +1 -1
- package/lib/types/src/useMockServerDevice.test.d.ts +2 -0
- package/lib/types/src/useMockServerDevice.test.d.ts.map +1 -0
- package/lib/types/tsconfig.prod.tsbuildinfo +1 -1
- package/package.json +9 -9
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/mockServerScreenApi.test.ts"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { mockServerScreenApi } from \"./mockServerScreenApi\";\nimport { type MockServerClient } from \"./types\";\n\nconst aClient = (overrides: Partial<Record<keyof MockServerClient, unknown>>) =>\n ({\n getScreenshot: vi.fn(),\n getDevice: vi.fn(),\n pressButton: vi.fn(() => Promise.resolve()),\n touchScreen: vi.fn(() => Promise.resolve()),\n ...overrides,\n }) as unknown as MockServerClient;\n\ndescribe(\"mockServerScreenApi\", () => {\n it(\"resolves the screenshot of the device\", async () => {\n const blob = new Blob([\"png\"]);\n const client = aClient({\n getScreenshot: vi.fn(() => Promise.resolve(blob)),\n });\n\n await expect(\n mockServerScreenApi(client, \"device-1\").screenshot(),\n ).resolves.toBe(blob);\n expect(client.getScreenshot).toHaveBeenCalledWith(\"device-1\");\n });\n\n it(\"resolves no screenshot when the device has no Speculos instance\", async () => {\n const client = aClient({\n getScreenshot: vi.fn(() => Promise.reject({ status: 409 })),\n });\n\n await expect(\n mockServerScreenApi(client, \"device-1\").screenshot(),\n ).resolves.toBeNull();\n });\n\n it(\"rethrows any other screenshot failure\", async () => {\n const error = Object.assign(new Error(\"boom\"), { status: 500 });\n const client = aClient({\n getScreenshot: vi.fn(() => Promise.reject(error)),\n });\n\n await expect(\n mockServerScreenApi(client, \"device-1\").screenshot(),\n ).rejects.toBe(error);\n });\n\n it(\"shows the device record while idle\", async () => {\n const device = { id: \"device-1\", device_type: \"nanoX\" };\n const client = aClient({ getDevice: vi.fn(() => Promise.resolve(device)) });\n\n await expect(\n mockServerScreenApi(client, \"device-1\").idle?.(),\n ).resolves.toEqual({\n kind: \"os-info\",\n device,\n });\n });\n\n it(\"forwards buttons and touches to the device\", async () => {\n const client = aClient({});\n const api = mockServerScreenApi(client, \"device-1\");\n\n await api.pressButton(\"left\", \"press\");\n await api.touch(10, 20, \"release\");\n\n expect(client.pressButton).toHaveBeenCalledWith(\n \"device-1\",\n \"left\",\n \"press\",\n );\n expect(client.touchScreen).toHaveBeenCalledWith(\n \"device-1\",\n 10,\n 20,\n \"release\",\n );\n });\n\n it(\"opens an app by name\", async () => {\n const sendApdu = vi.fn(() => Promise.resolve({ response: \"9000\" }));\n const api = mockServerScreenApi(aClient({ sendApdu }), \"device-1\");\n\n await api.openApp?.(\"Bitcoin\");\n\n expect(sendApdu).toHaveBeenCalledWith(\n \"device-1\",\n Uint8Array.from([\n 0xe0,\n 0xd8,\n 0x00,\n 0x00,\n 0x07,\n ...new TextEncoder().encode(\"Bitcoin\"),\n ]),\n );\n });\n\n it(\"fails to open an app the device refuses\", async () => {\n const sendApdu = vi.fn(() => Promise.resolve({ response: \"6807\" }));\n const api = mockServerScreenApi(aClient({ sendApdu }), \"device-1\");\n\n await expect(api.openApp?.(\"Bitcoin\")).rejects.toThrow(\"6807\");\n });\n\n it(\"refuses an app name too long for one APDU\", async () => {\n const sendApdu = vi.fn(() => Promise.resolve({ response: \"9000\" }));\n const api = mockServerScreenApi(aClient({ sendApdu }), \"device-1\");\n\n await expect(api.openApp?.(\"a\".repeat(256))).rejects.toThrow(\"too long\");\n expect(sendApdu).not.toHaveBeenCalled();\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_mockServerScreenApi", "aClient", "overrides", "blob", "client", "error", "device", "api", "sendApdu"]
|
|
7
7
|
}
|
package/lib/cjs/src/types.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var u=(t,e,c,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!s.call(t,o)&&o!==c&&i(t,o,{get:()=>e[o],enumerable:!(n=r(e,o))||n.enumerable});return t};var S=t=>u(i({},"__esModule",{value:!0}),t);var l={};module.exports=S(l);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
package/lib/cjs/src/types.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n type Device,\n type SpeculosAction,\n type SpeculosButton,\n} from \"@ledgerhq/device-mockserver-client\";\n\n/**\n * How the screen is reached. The mock server proxies to the Speculos instance\n * backing a device and a Speculos transport talks to one directly, but both\n * answer the same calls.\n */\nexport interface ScreenApi {\n /** Resolves null when there is no screen to capture right now. */\n screenshot(): Promise<Blob | null>;\n /** What to show while `screenshot` keeps resolving null. */\n idle?(): Promise<DeviceScreenState>;\n pressButton(button: SpeculosButton, action: SpeculosAction): Promise<void>;\n /** Coordinates in device screen pixels. */\n touch(x: number, y: number, action: SpeculosAction): Promise<void>;\n /** Omitted by apis whose device always runs an app. */\n openApp?(appName: string): Promise<void>;\n}\n\n/**\n * Press and release are separate so a hold reaches the device as a hold: Stax\n * and Flex gate their confirmations behind one.\n */\nexport interface DeviceScreenInput {\n pressButton(button: SpeculosButton, action: SpeculosAction): void;\n touch(x: number, y: number, action: SpeculosAction): void;\n}\n\nexport type DeviceScreenState =\n | { kind: \"loading\" }\n /** No app runs, so no Speculos instance: the device record stands in. */\n | { kind: \"os-info\"; device: Device }\n | { kind: \"image\"; src: string; input: DeviceScreenInput }\n | { kind: \"error\"; message: string };\n"],
|
|
4
|
+
"sourcesContent": ["import {\n type Device,\n type MockClient,\n type SpeculosAction,\n type SpeculosButton,\n} from \"@ledgerhq/device-mockserver-client\";\n\n/**\n * The MockClient calls this library makes. Picking them drops the class's\n * private fields, so a client from another copy of the package still fits.\n */\nexport type MockServerClient = Pick<\n MockClient,\n \"getDevice\" | \"getScreenshot\" | \"pressButton\" | \"touchScreen\" | \"sendApdu\"\n>;\n\n/**\n * How the screen is reached. The mock server proxies to the Speculos instance\n * backing a device and a Speculos transport talks to one directly, but both\n * answer the same calls.\n */\nexport interface ScreenApi {\n /** Resolves null when there is no screen to capture right now. */\n screenshot(): Promise<Blob | null>;\n /** What to show while `screenshot` keeps resolving null. */\n idle?(): Promise<DeviceScreenState>;\n pressButton(button: SpeculosButton, action: SpeculosAction): Promise<void>;\n /** Coordinates in device screen pixels. */\n touch(x: number, y: number, action: SpeculosAction): Promise<void>;\n /** Omitted by apis whose device always runs an app. */\n openApp?(appName: string): Promise<void>;\n}\n\n/**\n * Press and release are separate so a hold reaches the device as a hold: Stax\n * and Flex gate their confirmations behind one.\n */\nexport interface DeviceScreenInput {\n pressButton(button: SpeculosButton, action: SpeculosAction): void;\n touch(x: number, y: number, action: SpeculosAction): void;\n}\n\nexport type DeviceScreenState =\n | { kind: \"loading\" }\n /** No app runs, so no Speculos instance: the device record stands in. */\n | { kind: \"os-info\"; device: Device }\n | { kind: \"image\"; src: string; input: DeviceScreenInput }\n | { kind: \"error\"; message: string };\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var u=Object.defineProperty;var
|
|
1
|
+
"use strict";var u=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var v=(t,e)=>{for(var n in e)u(t,n,{get:e[n],enumerable:!0})},D=(t,e,n,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!p.call(t,r)&&r!==n&&u(t,r,{get:()=>e[r],enumerable:!(i=s(e,r))||i.enumerable});return t};var a=t=>D(u({},"__esModule",{value:!0}),t);var S={};v(S,{useMockServerDevice:()=>y});module.exports=a(S);var o=require("react");const d=2e3;function y(t,e){const[n,i]=(0,o.useState)();return(0,o.useEffect)(()=>{let r=!1,c;if(i(void 0),!e)return;const f=()=>{t.getDevice(e).then(l=>{r||i(l)},()=>{r||(i(null),c=setTimeout(f,d))})};return f(),()=>{r=!0,clearTimeout(c)}},[t,e]),n}0&&(module.exports={useMockServerDevice});
|
|
2
2
|
//# sourceMappingURL=useMockServerDevice.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/useMockServerDevice.ts"],
|
|
4
|
-
"sourcesContent": ["import { useEffect, useState } from \"react\";\nimport {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,
|
|
6
|
-
"names": ["useMockServerDevice_exports", "__export", "useMockServerDevice", "__toCommonJS", "import_react", "client", "deviceId", "device", "setDevice", "cancelled", "record"]
|
|
4
|
+
"sourcesContent": ["import { useEffect, useState } from \"react\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { type MockServerClient } from \"./types\";\n\nconst RETRY_MS = 2000;\n\n/**\n * The mock server's record of a device: undefined while it loads, or while no\n * device id is given, and null while it cannot be read. A failed read is\n * retried, so a transient error does not leave the device without its model.\n */\nexport function useMockServerDevice(\n client: MockServerClient,\n deviceId: string,\n): Device | null | undefined {\n const [device, setDevice] = useState<Device | null>();\n\n useEffect(() => {\n let cancelled = false;\n let retry: ReturnType<typeof setTimeout> | undefined;\n setDevice(undefined);\n if (!deviceId) return;\n\n const load = () => {\n client.getDevice(deviceId).then(\n (record) => {\n if (!cancelled) setDevice(record);\n },\n () => {\n if (cancelled) return;\n setDevice(null);\n retry = setTimeout(load, RETRY_MS);\n },\n );\n };\n load();\n\n return () => {\n cancelled = true;\n clearTimeout(retry);\n };\n }, [client, deviceId]);\n\n return device;\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,yBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,iBAKpC,MAAMC,EAAW,IAOV,SAASH,EACdI,EACAC,EAC2B,CAC3B,KAAM,CAACC,EAAQC,CAAS,KAAI,YAAwB,EAEpD,sBAAU,IAAM,CACd,IAAIC,EAAY,GACZC,EAEJ,GADAF,EAAU,MAAS,EACf,CAACF,EAAU,OAEf,MAAMK,EAAO,IAAM,CACjBN,EAAO,UAAUC,CAAQ,EAAE,KACxBM,GAAW,CACLH,GAAWD,EAAUI,CAAM,CAClC,EACA,IAAM,CACAH,IACJD,EAAU,IAAI,EACdE,EAAQ,WAAWC,EAAMP,CAAQ,EACnC,CACF,CACF,EACA,OAAAO,EAAK,EAEE,IAAM,CACXF,EAAY,GACZ,aAAaC,CAAK,CACpB,CACF,EAAG,CAACL,EAAQC,CAAQ,CAAC,EAEdC,CACT",
|
|
6
|
+
"names": ["useMockServerDevice_exports", "__export", "useMockServerDevice", "__toCommonJS", "import_react", "RETRY_MS", "client", "deviceId", "device", "setDevice", "cancelled", "retry", "load", "record"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var u=Object.create;var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var k=(i,n,t,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of C(n))!h.call(i,r)&&r!==t&&d(i,r,{get:()=>n[r],enumerable:!(l=f(n,r))||l.enumerable});return i};var S=(i,n,t)=>(t=i!=null?u(y(i)):{},k(n||!i||!i.__esModule?d(t,"default",{value:i,enumerable:!0}):t,i));var c=S(require("react")),m=require("react-dom/client"),p=require("./useMockServerDevice");Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});const s={id:"device-1",device_type:"stax"};describe("useMockServerDevice",()=>{let i,n,t;const l=({client:e,deviceId:o})=>(t=(0,p.useMockServerDevice)(e,o),null),r=e=>({getDevice:vi.fn(e)}),a=(e,o="device-1")=>(0,c.act)(()=>n.render(c.default.createElement(l,{client:e,deviceId:o}))),v=()=>(0,c.act)(()=>vi.advanceTimersByTimeAsync(0));beforeEach(()=>{vi.useFakeTimers(),t=void 0,i=document.createElement("div"),n=(0,m.createRoot)(i)}),afterEach(()=>{(0,c.act)(()=>n.unmount()),vi.useRealTimers()}),it("reads the device record",async()=>{const e=r(()=>Promise.resolve(s));a(e),expect(t).toBeUndefined(),await v(),expect(t).toBe(s),expect(e.getDevice).toHaveBeenCalledWith("device-1")}),it("accepts a client from another copy of the package",async()=>{class e{record=s;getDevice=vi.fn(()=>Promise.resolve(this.record));getScreenshot=vi.fn();pressButton=vi.fn();touchScreen=vi.fn();sendApdu=vi.fn()}const o=new e;a(o),await v(),expect(t).toBe(s)}),it("reads nothing without a device id",async()=>{const e=r(()=>Promise.resolve(s));a(e,""),await v(),expect(t).toBeUndefined(),expect(e.getDevice).not.toHaveBeenCalled()}),it("retries a failed read until it succeeds",async()=>{const e=vi.fn().mockRejectedValueOnce(new Error("offline")).mockResolvedValue(s),o=r(e);a(o),await v(),expect(t).toBeNull(),await(0,c.act)(()=>vi.advanceTimersByTimeAsync(2e3)),expect(t).toBe(s),expect(e).toHaveBeenCalledTimes(2)}),it("stops retrying once unmounted",async()=>{const e=r(()=>Promise.reject(new Error("offline")));a(e),await v(),(0,c.act)(()=>n.render(c.default.createElement(c.default.Fragment,null))),await(0,c.act)(()=>vi.advanceTimersByTimeAsync(1e4)),expect(e.getDevice).toHaveBeenCalledOnce()})});
|
|
2
|
+
//# sourceMappingURL=useMockServerDevice.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/useMockServerDevice.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { type MockServerClient } from \"./types\";\nimport { useMockServerDevice } from \"./useMockServerDevice\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nconst DEVICE = { id: \"device-1\", device_type: \"stax\" } as Device;\n\ndescribe(\"useMockServerDevice\", () => {\n let container: HTMLDivElement;\n let root: Root;\n let result: Device | null | undefined;\n\n const Probe: React.FC<{ client: MockServerClient; deviceId: string }> = ({\n client,\n deviceId,\n }) => {\n result = useMockServerDevice(client, deviceId);\n return null;\n };\n const aClient = (getDevice: () => Promise<Device>) =>\n ({ getDevice: vi.fn(getDevice) }) as unknown as MockServerClient;\n const render = (client: MockServerClient, deviceId = \"device-1\") =>\n act(() => root.render(<Probe client={client} deviceId={deviceId} />));\n const flush = () => act(() => vi.advanceTimersByTimeAsync(0));\n\n beforeEach(() => {\n vi.useFakeTimers();\n result = undefined;\n container = document.createElement(\"div\");\n root = createRoot(container);\n });\n\n afterEach(() => {\n act(() => root.unmount());\n vi.useRealTimers();\n });\n\n it(\"reads the device record\", async () => {\n const client = aClient(() => Promise.resolve(DEVICE));\n\n render(client);\n expect(result).toBeUndefined();\n await flush();\n\n expect(result).toBe(DEVICE);\n expect(client.getDevice).toHaveBeenCalledWith(\"device-1\");\n });\n\n it(\"accepts a client from another copy of the package\", async () => {\n // Its own private field, as a MockClient from a second install would have:\n // only the public calls must match.\n class OtherCopyClient implements MockServerClient {\n private readonly record = DEVICE;\n getDevice = vi.fn(() => Promise.resolve(this.record));\n getScreenshot = vi.fn<MockServerClient[\"getScreenshot\"]>();\n pressButton = vi.fn<MockServerClient[\"pressButton\"]>();\n touchScreen = vi.fn<MockServerClient[\"touchScreen\"]>();\n sendApdu = vi.fn<MockServerClient[\"sendApdu\"]>();\n }\n const client = new OtherCopyClient();\n\n render(client);\n await flush();\n\n expect(result).toBe(DEVICE);\n });\n\n it(\"reads nothing without a device id\", async () => {\n const client = aClient(() => Promise.resolve(DEVICE));\n\n render(client, \"\");\n await flush();\n\n expect(result).toBeUndefined();\n expect(client.getDevice).not.toHaveBeenCalled();\n });\n\n it(\"retries a failed read until it succeeds\", async () => {\n const getDevice = vi\n .fn<() => Promise<Device>>()\n .mockRejectedValueOnce(new Error(\"offline\"))\n .mockResolvedValue(DEVICE);\n const client = aClient(getDevice);\n\n render(client);\n await flush();\n expect(result).toBeNull();\n\n await act(() => vi.advanceTimersByTimeAsync(2000));\n\n expect(result).toBe(DEVICE);\n expect(getDevice).toHaveBeenCalledTimes(2);\n });\n\n it(\"stops retrying once unmounted\", async () => {\n const client = aClient(() => Promise.reject(new Error(\"offline\")));\n\n render(client);\n await flush();\n act(() => root.render(<></>));\n await act(() => vi.advanceTimersByTimeAsync(10_000));\n\n expect(client.getDevice).toHaveBeenCalledOnce();\n });\n});\n"],
|
|
5
|
+
"mappings": "wdAAA,IAAAA,EAA2B,oBAC3BC,EAAsC,4BAItCC,EAAoC,iCAEpC,OAAO,OAAO,WAAY,CAAE,yBAA0B,EAAK,CAAC,EAE5D,MAAMC,EAAS,CAAE,GAAI,WAAY,YAAa,MAAO,EAErD,SAAS,sBAAuB,IAAM,CACpC,IAAIC,EACAC,EACAC,EAEJ,MAAMC,EAAkE,CAAC,CACvE,OAAAC,EACA,SAAAC,CACF,KACEH,KAAS,uBAAoBE,EAAQC,CAAQ,EACtC,MAEHC,EAAWC,IACd,CAAE,UAAW,GAAG,GAAGA,CAAS,CAAE,GAC3BC,EAAS,CAACJ,EAA0BC,EAAW,gBACnD,OAAI,IAAMJ,EAAK,OAAO,EAAAQ,QAAA,cAACN,EAAA,CAAM,OAAQC,EAAQ,SAAUC,EAAU,CAAE,CAAC,EAChEK,EAAQ,OAAM,OAAI,IAAM,GAAG,yBAAyB,CAAC,CAAC,EAE5D,WAAW,IAAM,CACf,GAAG,cAAc,EACjBR,EAAS,OACTF,EAAY,SAAS,cAAc,KAAK,EACxCC,KAAO,cAAWD,CAAS,CAC7B,CAAC,EAED,UAAU,IAAM,IACd,OAAI,IAAMC,EAAK,QAAQ,CAAC,EACxB,GAAG,cAAc,CACnB,CAAC,EAED,GAAG,0BAA2B,SAAY,CACxC,MAAMG,EAASE,EAAQ,IAAM,QAAQ,QAAQP,CAAM,CAAC,EAEpDS,EAAOJ,CAAM,EACb,OAAOF,CAAM,EAAE,cAAc,EAC7B,MAAMQ,EAAM,EAEZ,OAAOR,CAAM,EAAE,KAAKH,CAAM,EAC1B,OAAOK,EAAO,SAAS,EAAE,qBAAqB,UAAU,CAC1D,CAAC,EAED,GAAG,oDAAqD,SAAY,CAGlE,MAAMO,CAA4C,CAC/B,OAASZ,EAC1B,UAAY,GAAG,GAAG,IAAM,QAAQ,QAAQ,KAAK,MAAM,CAAC,EACpD,cAAgB,GAAG,GAAsC,EACzD,YAAc,GAAG,GAAoC,EACrD,YAAc,GAAG,GAAoC,EACrD,SAAW,GAAG,GAAiC,CACjD,CACA,MAAMK,EAAS,IAAIO,EAEnBH,EAAOJ,CAAM,EACb,MAAMM,EAAM,EAEZ,OAAOR,CAAM,EAAE,KAAKH,CAAM,CAC5B,CAAC,EAED,GAAG,oCAAqC,SAAY,CAClD,MAAMK,EAASE,EAAQ,IAAM,QAAQ,QAAQP,CAAM,CAAC,EAEpDS,EAAOJ,EAAQ,EAAE,EACjB,MAAMM,EAAM,EAEZ,OAAOR,CAAM,EAAE,cAAc,EAC7B,OAAOE,EAAO,SAAS,EAAE,IAAI,iBAAiB,CAChD,CAAC,EAED,GAAG,0CAA2C,SAAY,CACxD,MAAMG,EAAY,GACf,GAA0B,EAC1B,sBAAsB,IAAI,MAAM,SAAS,CAAC,EAC1C,kBAAkBR,CAAM,EACrBK,EAASE,EAAQC,CAAS,EAEhCC,EAAOJ,CAAM,EACb,MAAMM,EAAM,EACZ,OAAOR,CAAM,EAAE,SAAS,EAExB,QAAM,OAAI,IAAM,GAAG,yBAAyB,GAAI,CAAC,EAEjD,OAAOA,CAAM,EAAE,KAAKH,CAAM,EAC1B,OAAOQ,CAAS,EAAE,sBAAsB,CAAC,CAC3C,CAAC,EAED,GAAG,gCAAiC,SAAY,CAC9C,MAAMH,EAASE,EAAQ,IAAM,QAAQ,OAAO,IAAI,MAAM,SAAS,CAAC,CAAC,EAEjEE,EAAOJ,CAAM,EACb,MAAMM,EAAM,KACZ,OAAI,IAAMT,EAAK,OAAO,EAAAQ,QAAA,gBAAAA,QAAA,aAAE,CAAG,CAAC,EAC5B,QAAM,OAAI,IAAM,GAAG,yBAAyB,GAAM,CAAC,EAEnD,OAAOL,EAAO,SAAS,EAAE,qBAAqB,CAChD,CAAC,CACH,CAAC",
|
|
6
|
+
"names": ["import_react", "import_client", "import_useMockServerDevice", "DEVICE", "container", "root", "result", "Probe", "client", "deviceId", "aClient", "getDevice", "render", "React", "flush", "OtherCopyClient"]
|
|
7
|
+
}
|
package/lib/esm/package.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"dependencies": {
|
|
3
|
-
"@ledgerhq/device-mockserver-client": "
|
|
3
|
+
"@ledgerhq/device-mockserver-client": "^1.3.0"
|
|
4
4
|
},
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@ledgerhq/device-management-kit": "workspace
|
|
7
|
-
"@ledgerhq/eslint-config-dsdk": "workspace
|
|
8
|
-
"@ledgerhq/ldmk-tool": "workspace
|
|
6
|
+
"@ledgerhq/device-management-kit": "workspace:^",
|
|
7
|
+
"@ledgerhq/eslint-config-dsdk": "workspace:^",
|
|
8
|
+
"@ledgerhq/ldmk-tool": "workspace:^",
|
|
9
9
|
"@ledgerhq/lumen-design-core": "0.1.26",
|
|
10
10
|
"@ledgerhq/lumen-ui-react": "0.1.55",
|
|
11
|
-
"@ledgerhq/prettier-config-dsdk": "workspace
|
|
12
|
-
"@ledgerhq/tsconfig-dsdk": "workspace
|
|
13
|
-
"@ledgerhq/vitest-config-dmk": "workspace
|
|
11
|
+
"@ledgerhq/prettier-config-dsdk": "workspace:^",
|
|
12
|
+
"@ledgerhq/tsconfig-dsdk": "workspace:^",
|
|
13
|
+
"@ledgerhq/vitest-config-dmk": "workspace:^",
|
|
14
14
|
"@types/react": "catalog:",
|
|
15
15
|
"@types/react-dom": "catalog:",
|
|
16
16
|
"react": "catalog:",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"main": "lib/index.js",
|
|
38
38
|
"name": "@ledgerhq/device-mockserver-react",
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"@ledgerhq/device-management-kit": "workspace
|
|
40
|
+
"@ledgerhq/device-management-kit": "workspace:^",
|
|
41
41
|
"@ledgerhq/lumen-ui-react": "^0.1.55",
|
|
42
42
|
"react": "catalog:",
|
|
43
43
|
"react-dom": "catalog:"
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"watch:types": "concurrently \"tsc --watch -p tsconfig.prod.json\" \"tsc-alias --watch -p tsconfig.prod.json\""
|
|
64
64
|
},
|
|
65
65
|
"types": "lib/index.d.ts",
|
|
66
|
-
"version": "0.
|
|
66
|
+
"version": "0.1.0"
|
|
67
67
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{useEffect as w,useRef as v,useState as u}from"react";import{ScreenFrame as x}from"./ScreenFrame";const h="BOLOS",y=1e4,k="[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",q=n=>`https://cdn.live.ledger.com/icons/${n.toLowerCase().
|
|
1
|
+
import e,{useEffect as w,useRef as v,useState as u}from"react";import{ScreenFrame as x}from"./ScreenFrame";const h="BOLOS",y=1e4,k="[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full",q=n=>`https://cdn.live.ledger.com/icons/${n.toLowerCase().replaceAll(" ","_")}.png`,f=({name:n})=>{const[r,i]=u(!1);return r?e.createElement("span",{className:"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold"},n.charAt(0)):e.createElement("img",{src:q(n),alt:"",draggable:!1,className:"size-[12.5cqw] rounded-full",onError:()=>i(!0)})},S=({device:n,model:r,onOpenApp:i})=>{const p=(n.apps??[]).filter(({name:t})=>t!==h),[o,c]=u(),[b,a]=u(),s=r.lightScreen?{background:"bg-white",text:"text-black",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-black/30",overlay:"bg-white/70"}:{background:"bg-black",text:"text-white",scrollbar:"[&::-webkit-scrollbar-thumb]:bg-white/30",overlay:"bg-black/70"},l=r.touch?{scroll:"overflow-y-auto",list:"grid grid-cols-3 gap-[1.5cqw]",tile:"min-w-0 py-[3cqw]",opening:"flex-col"}:{scroll:"flex items-center overflow-x-auto",list:"flex gap-[2.5cqw]",tile:"w-[28cqw] shrink-0 py-[1.5cqw]",opening:"flex-row"},m=v(void 0);w(()=>()=>clearTimeout(m.current),[]);const g=t=>{!i||o||(c(t),a(void 0),i(t).then(()=>{m.current=setTimeout(()=>{c(void 0),a(`${t} opened but its screen never showed up`)},y)},d=>{c(void 0),a(d instanceof Error?d.message:String(d))}))};return e.createElement("div",{className:"flex flex-col gap-8","data-testid":"container_device-os-info"},e.createElement(x,null,e.createElement("div",{className:`${s.background} ${l.scroll} ${k} ${s.scrollbar} p-[3cqw]`,style:{aspectRatio:r.screenWidth/r.screenHeight},"data-testid":"list_device-apps"},p.length===0?e.createElement("p",{className:`text-[length:5.5cqw] ${s.text} flex h-full w-full items-center justify-center opacity-60`},"No apps installed"):e.createElement("div",{className:l.list},p.map(t=>e.createElement("button",{key:t.name,type:"button",title:`${t.name} ${t.version}`,disabled:!i||o!==void 0,onClick:()=>g(t.name),className:`${s.text} ${l.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`,"data-testid":`button_open-app-${t.name}`},e.createElement(f,{name:t.name}),e.createElement("span",{className:"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]"},t.name))))),o!==void 0?e.createElement("div",{className:`${s.text} ${s.overlay} ${l.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`,"data-testid":"spinner_opening-app-screen"},e.createElement("div",{className:"relative flex size-[18cqw] shrink-0 items-center justify-center"},e.createElement("span",{className:"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15"}),e.createElement("span",{className:"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current"}),e.createElement(f,{name:o})),e.createElement("span",{className:"animate-pulse text-[length:4.7cqw] font-semibold"},"Opening ",o)):null),b?e.createElement("p",{className:"body-4 text-error text-center"},b):null)};export{S as DeviceOsInfo};
|
|
2
2
|
//# sourceMappingURL=DeviceOsInfo.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/DeviceOsInfo.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { type DeviceScreenModel } from \"./deviceModels\";\nimport { ScreenFrame } from \"./ScreenFrame\";\n\n/** The OS reports itself as an app; it is not one the user can open. */\nconst OS_APP_NAME = \"BOLOS\";\n\nconst OPEN_TIMEOUT_MS = 10_000;\n\n/** A styled scrollbar stays visible where the OS would hide an overlay one. */\nconst SCROLLBAR =\n \"[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full\";\n\n/** Ledger Live's app icons, keyed by the app's Manager API icon name. */\nconst iconUrl = (appName: string) =>\n `https://cdn.live.ledger.com/icons/${appName.toLowerCase().
|
|
5
|
-
"mappings": "AAAA,OAAOA,GAAS,aAAAC,EAAW,UAAAC,EAAQ,YAAAC,MAAgB,QAInD,OAAS,eAAAC,MAAmB,gBAG5B,MAAMC,EAAc,QAEdC,EAAkB,IAGlBC,EACJ,0HAGIC,EAAWC,GACf,qCAAqCA,EAAQ,YAAY,EAAE,
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { type DeviceScreenModel } from \"./deviceModels\";\nimport { ScreenFrame } from \"./ScreenFrame\";\n\n/** The OS reports itself as an app; it is not one the user can open. */\nconst OS_APP_NAME = \"BOLOS\";\n\nconst OPEN_TIMEOUT_MS = 10_000;\n\n/** A styled scrollbar stays visible where the OS would hide an overlay one. */\nconst SCROLLBAR =\n \"[&::-webkit-scrollbar]:size-[6px] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full\";\n\n/** Ledger Live's app icons, keyed by the app's Manager API icon name. */\nconst iconUrl = (appName: string) =>\n `https://cdn.live.ledger.com/icons/${appName.toLowerCase().replaceAll(\" \", \"_\")}.png`;\n\ntype AppIconProps = {\n name: string;\n};\n\nconst AppIcon: React.FC<AppIconProps> = ({ name }) => {\n const [missing, setMissing] = useState(false);\n\n if (missing) {\n return (\n <span className=\"text-muted bg-muted flex size-[12.5cqw] items-center justify-center rounded-full text-[length:6cqw] font-semibold\">\n {name.charAt(0)}\n </span>\n );\n }\n\n return (\n <img\n src={iconUrl(name)}\n alt=\"\"\n draggable={false}\n className=\"size-[12.5cqw] rounded-full\"\n onError={() => setMissing(true)}\n />\n );\n};\n\ntype DeviceOsInfoProps = {\n device: Device;\n model: DeviceScreenModel;\n /** Omitted, the apps are listed but cannot be opened. */\n onOpenApp?: (appName: string) => Promise<void>;\n};\n\nexport const DeviceOsInfo: React.FC<DeviceOsInfoProps> = ({\n device,\n model,\n onOpenApp,\n}) => {\n const apps = (device.apps ?? []).filter(({ name }) => name !== OS_APP_NAME);\n /** Kept on success, until the live screen replaces the grid or times out. */\n const [opening, setOpening] = useState<string>();\n const [error, setError] = useState<string>();\n const screen = model.lightScreen\n ? {\n background: \"bg-white\",\n text: \"text-black\",\n scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-black/30\",\n overlay: \"bg-white/70\",\n }\n : {\n background: \"bg-black\",\n text: \"text-white\",\n scrollbar: \"[&::-webkit-scrollbar-thumb]:bg-white/30\",\n overlay: \"bg-black/70\",\n };\n const layout = model.touch\n ? {\n scroll: \"overflow-y-auto\",\n list: \"grid grid-cols-3 gap-[1.5cqw]\",\n tile: \"min-w-0 py-[3cqw]\",\n opening: \"flex-col\",\n }\n : {\n scroll: \"flex items-center overflow-x-auto\",\n list: \"flex gap-[2.5cqw]\",\n tile: \"w-[28cqw] shrink-0 py-[1.5cqw]\",\n opening: \"flex-row\",\n };\n\n const openTimer = useRef<ReturnType<typeof setTimeout> | undefined>(\n undefined,\n );\n useEffect(() => () => clearTimeout(openTimer.current), []);\n\n const open = (appName: string) => {\n if (!onOpenApp || opening) return;\n setOpening(appName);\n setError(undefined);\n onOpenApp(appName).then(\n () => {\n openTimer.current = setTimeout(() => {\n setOpening(undefined);\n setError(`${appName} opened but its screen never showed up`);\n }, OPEN_TIMEOUT_MS);\n },\n (cause: unknown) => {\n setOpening(undefined);\n setError(cause instanceof Error ? cause.message : String(cause));\n },\n );\n };\n\n return (\n <div className=\"flex flex-col gap-8\" data-testid=\"container_device-os-info\">\n <ScreenFrame>\n <div\n className={`${screen.background} ${layout.scroll} ${SCROLLBAR} ${screen.scrollbar} p-[3cqw]`}\n style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n data-testid=\"list_device-apps\"\n >\n {apps.length === 0 ? (\n <p\n className={`text-[length:5.5cqw] ${screen.text} flex h-full w-full items-center justify-center opacity-60`}\n >\n No apps installed\n </p>\n ) : (\n <div className={layout.list}>\n {apps.map((app) => (\n <button\n key={app.name}\n type=\"button\"\n title={`${app.name} ${app.version}`}\n disabled={!onOpenApp || opening !== undefined}\n onClick={() => open(app.name)}\n className={`${screen.text} ${layout.tile} flex flex-col items-center gap-[1.5cqw] border-0 bg-transparent px-[1.5cqw] disabled:cursor-default enabled:cursor-pointer`}\n data-testid={`button_open-app-${app.name}`}\n >\n <AppIcon name={app.name} />\n <span className=\"w-full truncate text-center text-[length:4.7cqw] leading-[1.3]\">\n {app.name}\n </span>\n </button>\n ))}\n </div>\n )}\n </div>\n {opening !== undefined ? (\n <div\n className={`${screen.text} ${screen.overlay} ${layout.opening} pointer-events-none absolute inset-0 flex items-center justify-center gap-[3cqw] backdrop-blur-[1cqw]`}\n data-testid=\"spinner_opening-app-screen\"\n >\n <div className=\"relative flex size-[18cqw] shrink-0 items-center justify-center\">\n <span className=\"absolute inset-0 rounded-full border-[0.8cqw] border-current opacity-15\" />\n <span className=\"absolute inset-0 animate-spin rounded-full border-[0.8cqw] border-transparent border-t-current\" />\n <AppIcon name={opening} />\n </div>\n <span className=\"animate-pulse text-[length:4.7cqw] font-semibold\">\n Opening {opening}\n </span>\n </div>\n ) : null}\n </ScreenFrame>\n {error ? <p className=\"body-4 text-error text-center\">{error}</p> : null}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "useEffect", "useRef", "useState", "ScreenFrame", "OS_APP_NAME", "OPEN_TIMEOUT_MS", "SCROLLBAR", "iconUrl", "appName", "AppIcon", "name", "missing", "setMissing", "DeviceOsInfo", "device", "model", "onOpenApp", "apps", "opening", "setOpening", "error", "setError", "screen", "layout", "openTimer", "open", "cause", "app"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import i,{act as r}from"react";import{createRoot as m}from"react-dom/client";import{findDeviceScreenModel as p}from"./deviceModels";import{DeviceOsInfo as s}from"./DeviceOsInfo";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});const a=t=>({id:"device-1",device_type:"stax",apps:t}),c=[{name:"BOLOS",version:"1.10.1"},{name:"Bitcoin",version:"2.5.0"},{name:"Ethereum",version:"1.22.3"}];describe("DeviceOsInfo",()=>{let t,l;const e=n=>t.querySelector(`[data-testid="${n}"]`),o=n=>r(()=>l.render(n)),d=async n=>r(async()=>{e(n).click(),await Promise.resolve()});beforeEach(()=>{vi.useFakeTimers(),t=document.createElement("div"),document.body.append(t),l=m(t)}),afterEach(()=>{r(()=>l.unmount()),t.remove(),vi.useRealTimers()}),it("lists the installed apps, without the OS",()=>{o(i.createElement(s,{device:a(c),model:p("stax")})),expect(e("button_open-app-Bitcoin")).not.toBeNull(),expect(e("button_open-app-Ethereum")).not.toBeNull(),expect(e("button_open-app-BOLOS")).toBeNull()}),it("says when no app is installed",()=>{o(i.createElement(s,{device:a([c[0]]),model:p("nanoX")})),expect(e("list_device-apps")?.textContent).toBe("No apps installed")}),it("cannot open apps without an emulator",()=>{o(i.createElement(s,{device:a(c),model:p("nanoS")})),expect(e("button_open-app-Bitcoin").disabled).toBe(!0)}),it("shows the app being opened",async()=>{const n=vi.fn(()=>new Promise(()=>{}));o(i.createElement(s,{device:a(c),model:p("stax"),onOpenApp:n})),await d("button_open-app-Bitcoin"),expect(n).toHaveBeenCalledWith("Bitcoin"),expect(e("spinner_opening-app-screen")?.textContent).toContain("Opening Bitcoin")}),it("shows why an app could not be opened",async()=>{o(i.createElement(s,{device:a(c),model:p("stax"),onOpenApp:()=>Promise.reject(new Error("Could not open (6d00)"))})),await d("button_open-app-Bitcoin"),expect(e("spinner_opening-app-screen")).toBeNull(),expect(t.textContent).toContain("Could not open (6d00)")}),it("gives up when an opened app never shows its screen",async()=>{o(i.createElement(s,{device:a(c),model:p("stax"),onOpenApp:()=>Promise.resolve()})),await d("button_open-app-Ethereum"),r(()=>{vi.advanceTimersByTime(1e4)}),expect(t.textContent).toContain("Ethereum opened but its screen never showed up")}),it("falls back to the app's initial when its icon is missing",()=>{o(i.createElement(s,{device:a(c),model:p("stax")})),r(()=>{e("button_open-app-Bitcoin").querySelector("img").dispatchEvent(new Event("error"))}),expect(e("button_open-app-Bitcoin")?.querySelector("img")).toBeNull(),expect(e("button_open-app-Bitcoin")?.textContent).toBe("BBitcoin")})});
|
|
2
|
+
//# sourceMappingURL=DeviceOsInfo.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/DeviceOsInfo.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { findDeviceScreenModel } from \"./deviceModels\";\nimport { DeviceOsInfo } from \"./DeviceOsInfo\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nconst aDevice = (apps: { name: string; version: string }[]) =>\n ({ id: \"device-1\", device_type: \"stax\", apps }) as unknown as Device;\n\nconst APPS = [\n { name: \"BOLOS\", version: \"1.10.1\" },\n { name: \"Bitcoin\", version: \"2.5.0\" },\n { name: \"Ethereum\", version: \"1.22.3\" },\n];\n\ndescribe(\"DeviceOsInfo\", () => {\n let container: HTMLDivElement;\n let root: Root;\n\n const query = (testId: string) =>\n container.querySelector<HTMLElement>(`[data-testid=\"${testId}\"]`);\n const render = (\n element: React.ReactElement<React.ComponentProps<typeof DeviceOsInfo>>,\n ) => act(() => root.render(element));\n const click = async (testId: string) =>\n act(async () => {\n query(testId)!.click();\n await Promise.resolve();\n });\n\n beforeEach(() => {\n vi.useFakeTimers();\n container = document.createElement(\"div\");\n document.body.append(container);\n root = createRoot(container);\n });\n\n afterEach(() => {\n act(() => root.unmount());\n container.remove();\n vi.useRealTimers();\n });\n\n it(\"lists the installed apps, without the OS\", () => {\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"stax\")}\n />,\n );\n\n expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n expect(query(\"button_open-app-Ethereum\")).not.toBeNull();\n expect(query(\"button_open-app-BOLOS\")).toBeNull();\n });\n\n it(\"says when no app is installed\", () => {\n render(\n <DeviceOsInfo\n device={aDevice([APPS[0]!])}\n model={findDeviceScreenModel(\"nanoX\")}\n />,\n );\n\n expect(query(\"list_device-apps\")?.textContent).toBe(\"No apps installed\");\n });\n\n it(\"cannot open apps without an emulator\", () => {\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"nanoS\")}\n />,\n );\n\n expect(\n (query(\"button_open-app-Bitcoin\") as HTMLButtonElement).disabled,\n ).toBe(true);\n });\n\n it(\"shows the app being opened\", async () => {\n const onOpenApp = vi.fn(() => new Promise<void>(() => {}));\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"stax\")}\n onOpenApp={onOpenApp}\n />,\n );\n\n await click(\"button_open-app-Bitcoin\");\n\n expect(onOpenApp).toHaveBeenCalledWith(\"Bitcoin\");\n expect(query(\"spinner_opening-app-screen\")?.textContent).toContain(\n \"Opening Bitcoin\",\n );\n });\n\n it(\"shows why an app could not be opened\", async () => {\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"stax\")}\n onOpenApp={() => Promise.reject(new Error(\"Could not open (6d00)\"))}\n />,\n );\n\n await click(\"button_open-app-Bitcoin\");\n\n expect(query(\"spinner_opening-app-screen\")).toBeNull();\n expect(container.textContent).toContain(\"Could not open (6d00)\");\n });\n\n it(\"gives up when an opened app never shows its screen\", async () => {\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"stax\")}\n onOpenApp={() => Promise.resolve()}\n />,\n );\n\n await click(\"button_open-app-Ethereum\");\n act(() => {\n vi.advanceTimersByTime(10_000);\n });\n\n expect(container.textContent).toContain(\n \"Ethereum opened but its screen never showed up\",\n );\n });\n\n it(\"falls back to the app's initial when its icon is missing\", () => {\n render(\n <DeviceOsInfo\n device={aDevice(APPS)}\n model={findDeviceScreenModel(\"stax\")}\n />,\n );\n\n act(() => {\n query(\"button_open-app-Bitcoin\")!\n .querySelector(\"img\")!\n .dispatchEvent(new Event(\"error\"));\n });\n\n expect(query(\"button_open-app-Bitcoin\")?.querySelector(\"img\")).toBeNull();\n expect(query(\"button_open-app-Bitcoin\")?.textContent).toBe(\"BBitcoin\");\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "act", "createRoot", "findDeviceScreenModel", "DeviceOsInfo", "aDevice", "apps", "APPS", "container", "root", "query", "testId", "render", "element", "click", "onOpenApp"]
|
|
7
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{useRef as h,useState as b}from"react";import{Banner as
|
|
1
|
+
import e,{useEffect as z,useRef as h,useState as b}from"react";import{Banner as P,IconButton as N}from"@ledgerhq/lumen-ui-react";import{ChevronDown as _,ChevronUp as H}from"@ledgerhq/lumen-ui-react/symbols";import{findDeviceScreenModel as I}from"./deviceModels";import{DeviceOsInfo as W}from"./DeviceOsInfo";import{DeviceScreenButtons as A}from"./DeviceScreenButtons";import{DeviceScreenImage as B}from"./DeviceScreenImage";import{ScreenFrame as F}from"./ScreenFrame";import{useScreenPolling as L}from"./useScreenPolling";const v=16,X=224,k=200,D=(o,n,c)=>{const s=(l,i)=>Math.min(Math.max(l,0),Math.max(i,0));return{left:s(o,window.innerWidth-c.width),top:s(n,window.innerHeight-c.height)}},U=(o,n)=>n?`${o} - ${n}`:o,Z=({api:o,deviceType:n,firmwareVersion:c,floating:s=!1,defaultCollapsed:l=!1})=>{const i=I(n),[m,a]=b(l),g=L(o,!s||!m);return s?e.createElement($,{title:U(i.label,c),model:i,collapsed:m,onToggle:()=>a(f=>!f)},S(g,i,o)):e.createElement("div",{className:"mx-auto flex w-full max-w-[420px] flex-col gap-8","data-testid":"container_device-screen"},S(g,i,o))},$=({title:o,model:n,collapsed:c,onToggle:s,children:l})=>{const i=h(null),[m,a]=b(),[g,f]=b(X),d=h(null),u=h(null);z(()=>{const t=()=>{const r=i.current?.getBoundingClientRect();r&&a(p=>p&&D(p.left,p.top,r))};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const M=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||t.target.closest("button")||(t.currentTarget.setPointerCapture(t.pointerId),d.current={dx:t.clientX-r.left,dy:t.clientY-r.top})},y=t=>{const r=i.current?.getBoundingClientRect();!d.current||!r||a(D(t.clientX-d.current.dx,t.clientY-d.current.dy,r))},w=()=>{d.current=null},C=t=>{const r=i.current?.getBoundingClientRect();!r||t.button!==0||(t.currentTarget.setPointerCapture(t.pointerId),a({left:r.left,top:r.top}),u.current={x:t.clientX,width:r.width})},E=t=>{const r=i.current?.getBoundingClientRect();if(!u.current||!r)return;const p=u.current.width+t.clientX-u.current.x,T=window.innerWidth-r.left-v;f(Math.max(k,Math.min(p,T)))},x=()=>{u.current=null};return e.createElement("div",{ref:i,className:"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg",style:{zIndex:1e3,width:g,...m??{right:v,bottom:v}},"data-testid":"container_device-screen"},e.createElement("div",{className:"flex cursor-move items-center gap-8 px-12 py-8 select-none",style:{touchAction:"none"},onPointerDown:M,onPointerMove:y,onPointerUp:w,onPointerCancel:w},e.createElement(n.icon,{size:16}),e.createElement("span",{className:"body-3-semi-bold text-base flex-1"},o),e.createElement(N,{appearance:"no-background",size:"xs",icon:c?H:_,"aria-label":c?"Expand device screen":"Collapse device screen",onClick:s,"data-testid":"button_toggle-device-screen"})),c?null:e.createElement(e.Fragment,null,e.createElement("div",{className:"flex flex-col gap-8 px-12 pb-12"},l),e.createElement("div",{className:"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center",style:{touchAction:"none"},onPointerDown:C,onPointerMove:E,onPointerUp:x,onPointerCancel:x,"aria-hidden":!0,"data-testid":"handle_resize-device-screen"},e.createElement("span",{className:"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors"}))))};function S(o,n,c){switch(o.kind){case"loading":return e.createElement(F,null,e.createElement("div",{className:`${n.lightScreen?"bg-white text-black":"bg-black text-white"} flex items-center justify-center`,style:{aspectRatio:n.screenWidth/n.screenHeight},"data-testid":"placeholder_device-screen-loading"},e.createElement("span",{className:"animate-pulse opacity-60"},e.createElement(n.icon,{size:32}))));case"error":return e.createElement(P,{appearance:"error",title:"Screen unavailable",description:o.message});case"os-info":return e.createElement(e.Fragment,null,e.createElement(W,{device:o.device,model:n,onOpenApp:n.speculos?c.openApp:void 0}),n.speculos?null:e.createElement(P,{appearance:"info",title:"No screen to capture",description:`Speculos has no emulator for the ${n.label}, so this device is mocked all the way through and has no screen.`,"data-testid":"banner_device-screen-no-emulator"}));case"image":return e.createElement(e.Fragment,null,e.createElement(B,{src:o.src,onTouch:n.touch?o.input.touch:void 0}),n.touch?null:e.createElement(A,{onPress:o.input.pressButton}))}}export{Z as DeviceScreen};
|
|
2
2
|
//# sourceMappingURL=DeviceScreen.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/DeviceScreen.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState } from \"react\";\nimport { Banner, IconButton } from \"@ledgerhq/lumen-ui-react\";\nimport { ChevronDown, ChevronUp } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nimport { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nimport { DeviceOsInfo } from \"./DeviceOsInfo\";\nimport { DeviceScreenButtons } from \"./DeviceScreenButtons\";\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\nimport { ScreenFrame } from \"./ScreenFrame\";\nimport { type DeviceScreenState, type ScreenApi } from \"./types\";\nimport { useScreenPolling } from \"./useScreenPolling\";\n\nexport type DeviceScreenProps = {\n api: ScreenApi;\n /** The mock server's `device_type`, a DMK `DeviceModelId`. */\n deviceType: string;\n /** Shown next to the model name in the floating window's header. */\n firmwareVersion?: string;\n /**\n * Render as a window over the page that can be dragged by its header and\n * collapsed to it, rather than inline where it is placed.\n */\n floating?: boolean;\n defaultCollapsed?: boolean;\n};\n\ninterface Position {\n readonly left: number;\n readonly top: number;\n}\n\nconst EDGE_MARGIN_PX = 16;\nconst DEFAULT_WIDTH_PX = 224;\nconst MIN_WIDTH_PX = 200;\n\nconst deviceScreenTitle = (label: string, firmwareVersion?: string) =>\n firmwareVersion ? `${label} - ${firmwareVersion}` : label;\n\nexport const DeviceScreen: React.FC<DeviceScreenProps> = ({\n api,\n deviceType,\n firmwareVersion,\n floating = false,\n defaultCollapsed = false,\n}) => {\n const model = findDeviceScreenModel(deviceType);\n const [collapsed, setCollapsed] = useState(defaultCollapsed);\n const state = useScreenPolling(api, !floating || !collapsed);\n\n if (!floating) {\n return (\n <div\n className=\"mx-auto flex w-full max-w-[420px] flex-col gap-8\"\n data-testid=\"container_device-screen\"\n >\n {renderScreen(state, model, api)}\n </div>\n );\n }\n\n return (\n <FloatingWindow\n title={deviceScreenTitle(model.label, firmwareVersion)}\n model={model}\n collapsed={collapsed}\n onToggle={() => setCollapsed((value) => !value)}\n >\n {renderScreen(state, model, api)}\n </FloatingWindow>\n );\n};\n\ntype FloatingWindowProps = {\n title: string;\n model: DeviceScreenModel;\n collapsed: boolean;\n onToggle: () => void;\n children: React.ReactNode;\n};\n\nconst FloatingWindow: React.FC<FloatingWindowProps> = ({\n title,\n model,\n collapsed,\n onToggle,\n children,\n}) => {\n const windowRef = useRef<HTMLDivElement>(null);\n /** Unset until first dragged: the window starts in the bottom right corner. */\n const [position, setPosition] = useState<Position>();\n const [width, setWidth] = useState(DEFAULT_WIDTH_PX);\n const drag = useRef<{ dx: number; dy: number } | null>(null);\n const resize = useRef<{ x: number; width: number } | null>(null);\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n // A drag captures the pointer, which would steal the button's click.\n if (\n !rect ||\n event.button !== 0 ||\n (event.target as HTMLElement).closest(\"button\")\n ) {\n return;\n }\n event.currentTarget.setPointerCapture(event.pointerId);\n drag.current = {\n dx: event.clientX - rect.left,\n dy: event.clientY - rect.top,\n };\n };\n\n const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n if (!drag.current || !rect) return;\n
|
|
5
|
-
"mappings": "AAAA,OAAOA,GAAS,UAAAC,EAAQ,YAAAC,MAAgB,
|
|
6
|
-
"names": ["React", "useRef", "useState", "Banner", "IconButton", "ChevronDown", "ChevronUp", "findDeviceScreenModel", "DeviceOsInfo", "DeviceScreenButtons", "DeviceScreenImage", "ScreenFrame", "useScreenPolling", "EDGE_MARGIN_PX", "DEFAULT_WIDTH_PX", "MIN_WIDTH_PX", "deviceScreenTitle", "label", "firmwareVersion", "DeviceScreen", "api", "deviceType", "floating", "defaultCollapsed", "model", "collapsed", "setCollapsed", "state", "FloatingWindow", "
|
|
4
|
+
"sourcesContent": ["import React, { useEffect, useRef, useState } from \"react\";\nimport { Banner, IconButton } from \"@ledgerhq/lumen-ui-react\";\nimport { ChevronDown, ChevronUp } from \"@ledgerhq/lumen-ui-react/symbols\";\n\nimport { type DeviceScreenModel, findDeviceScreenModel } from \"./deviceModels\";\nimport { DeviceOsInfo } from \"./DeviceOsInfo\";\nimport { DeviceScreenButtons } from \"./DeviceScreenButtons\";\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\nimport { ScreenFrame } from \"./ScreenFrame\";\nimport { type DeviceScreenState, type ScreenApi } from \"./types\";\nimport { useScreenPolling } from \"./useScreenPolling\";\n\nexport type DeviceScreenProps = {\n api: ScreenApi;\n /** The mock server's `device_type`, a DMK `DeviceModelId`. */\n deviceType: string;\n /** Shown next to the model name in the floating window's header. */\n firmwareVersion?: string;\n /**\n * Render as a window over the page that can be dragged by its header and\n * collapsed to it, rather than inline where it is placed.\n */\n floating?: boolean;\n defaultCollapsed?: boolean;\n};\n\ninterface Position {\n readonly left: number;\n readonly top: number;\n}\n\nconst EDGE_MARGIN_PX = 16;\nconst DEFAULT_WIDTH_PX = 224;\nconst MIN_WIDTH_PX = 200;\n\n/** Keeps the whole window, header included, where it can be dragged back. */\nconst clampToViewport = (\n left: number,\n top: number,\n rect: DOMRect,\n): Position => {\n const clamp = (value: number, max: number) =>\n Math.min(Math.max(value, 0), Math.max(max, 0));\n return {\n left: clamp(left, window.innerWidth - rect.width),\n top: clamp(top, window.innerHeight - rect.height),\n };\n};\n\nconst deviceScreenTitle = (label: string, firmwareVersion?: string) =>\n firmwareVersion ? `${label} - ${firmwareVersion}` : label;\n\nexport const DeviceScreen: React.FC<DeviceScreenProps> = ({\n api,\n deviceType,\n firmwareVersion,\n floating = false,\n defaultCollapsed = false,\n}) => {\n const model = findDeviceScreenModel(deviceType);\n const [collapsed, setCollapsed] = useState(defaultCollapsed);\n const state = useScreenPolling(api, !floating || !collapsed);\n\n if (!floating) {\n return (\n <div\n className=\"mx-auto flex w-full max-w-[420px] flex-col gap-8\"\n data-testid=\"container_device-screen\"\n >\n {renderScreen(state, model, api)}\n </div>\n );\n }\n\n return (\n <FloatingWindow\n title={deviceScreenTitle(model.label, firmwareVersion)}\n model={model}\n collapsed={collapsed}\n onToggle={() => setCollapsed((value) => !value)}\n >\n {renderScreen(state, model, api)}\n </FloatingWindow>\n );\n};\n\ntype FloatingWindowProps = {\n title: string;\n model: DeviceScreenModel;\n collapsed: boolean;\n onToggle: () => void;\n children: React.ReactNode;\n};\n\nconst FloatingWindow: React.FC<FloatingWindowProps> = ({\n title,\n model,\n collapsed,\n onToggle,\n children,\n}) => {\n const windowRef = useRef<HTMLDivElement>(null);\n /** Unset until first dragged: the window starts in the bottom right corner. */\n const [position, setPosition] = useState<Position>();\n const [width, setWidth] = useState(DEFAULT_WIDTH_PX);\n const drag = useRef<{ dx: number; dy: number } | null>(null);\n const resize = useRef<{ x: number; width: number } | null>(null);\n\n // Once moved, the window holds fixed coordinates that a shrinking viewport\n // could leave off-screen.\n useEffect(() => {\n const handleViewportResize = () => {\n const rect = windowRef.current?.getBoundingClientRect();\n if (!rect) return;\n setPosition(\n (current) =>\n current && clampToViewport(current.left, current.top, rect),\n );\n };\n window.addEventListener(\"resize\", handleViewportResize);\n return () => window.removeEventListener(\"resize\", handleViewportResize);\n }, []);\n\n const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n // A drag captures the pointer, which would steal the button's click.\n if (\n !rect ||\n event.button !== 0 ||\n (event.target as HTMLElement).closest(\"button\")\n ) {\n return;\n }\n event.currentTarget.setPointerCapture(event.pointerId);\n drag.current = {\n dx: event.clientX - rect.left,\n dy: event.clientY - rect.top,\n };\n };\n\n const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n if (!drag.current || !rect) return;\n setPosition(\n clampToViewport(\n event.clientX - drag.current.dx,\n event.clientY - drag.current.dy,\n rect,\n ),\n );\n };\n\n const handlePointerUp = () => {\n drag.current = null;\n };\n\n const handleResizeDown = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n if (!rect || event.button !== 0) return;\n event.currentTarget.setPointerCapture(event.pointerId);\n // Pin the top left corner, or growing would push the window leftwards\n // while it is still anchored to the bottom right.\n setPosition({ left: rect.left, top: rect.top });\n resize.current = { x: event.clientX, width: rect.width };\n };\n\n const handleResizeMove = (event: React.PointerEvent<HTMLDivElement>) => {\n const rect = windowRef.current?.getBoundingClientRect();\n if (!resize.current || !rect) return;\n const next = resize.current.width + event.clientX - resize.current.x;\n const max = window.innerWidth - rect.left - EDGE_MARGIN_PX;\n setWidth(Math.max(MIN_WIDTH_PX, Math.min(next, max)));\n };\n\n const handleResizeUp = () => {\n resize.current = null;\n };\n\n return (\n <div\n ref={windowRef}\n className=\"bg-base border-muted fixed flex max-w-[calc(100vw-32px)] flex-col rounded-lg border shadow-lg\"\n style={{\n zIndex: 1000,\n width,\n ...(position ?? { right: EDGE_MARGIN_PX, bottom: EDGE_MARGIN_PX }),\n }}\n data-testid=\"container_device-screen\"\n >\n <div\n className=\"flex cursor-move items-center gap-8 px-12 py-8 select-none\"\n style={{ touchAction: \"none\" }}\n onPointerDown={handlePointerDown}\n onPointerMove={handlePointerMove}\n onPointerUp={handlePointerUp}\n onPointerCancel={handlePointerUp}\n >\n <model.icon size={16} />\n <span className=\"body-3-semi-bold text-base flex-1\">{title}</span>\n <IconButton\n appearance=\"no-background\"\n size=\"xs\"\n icon={collapsed ? ChevronUp : ChevronDown}\n aria-label={\n collapsed ? \"Expand device screen\" : \"Collapse device screen\"\n }\n onClick={onToggle}\n data-testid=\"button_toggle-device-screen\"\n />\n </div>\n {collapsed ? null : (\n <>\n <div className=\"flex flex-col gap-8 px-12 pb-12\">{children}</div>\n <div\n className=\"group absolute top-0 right-[-6px] bottom-0 flex w-[12px] cursor-ew-resize items-center justify-center\"\n style={{ touchAction: \"none\" }}\n onPointerDown={handleResizeDown}\n onPointerMove={handleResizeMove}\n onPointerUp={handleResizeUp}\n onPointerCancel={handleResizeUp}\n aria-hidden\n data-testid=\"handle_resize-device-screen\"\n >\n <span className=\"border-muted bg-base group-hover:bg-muted group-active:bg-muted h-40 w-[6px] rounded-full border transition-colors\" />\n </div>\n </>\n )}\n </div>\n );\n};\n\nfunction renderScreen(\n state: DeviceScreenState,\n model: DeviceScreenModel,\n api: ScreenApi,\n) {\n switch (state.kind) {\n case \"loading\":\n return (\n <ScreenFrame>\n <div\n className={`${model.lightScreen ? \"bg-white text-black\" : \"bg-black text-white\"} flex items-center justify-center`}\n style={{ aspectRatio: model.screenWidth / model.screenHeight }}\n data-testid=\"placeholder_device-screen-loading\"\n >\n <span className=\"animate-pulse opacity-60\">\n <model.icon size={32} />\n </span>\n </div>\n </ScreenFrame>\n );\n case \"error\":\n return (\n <Banner\n appearance=\"error\"\n title=\"Screen unavailable\"\n description={state.message}\n />\n );\n case \"os-info\":\n return (\n <>\n <DeviceOsInfo\n device={state.device}\n model={model}\n onOpenApp={model.speculos ? api.openApp : undefined}\n />\n {model.speculos ? null : (\n <Banner\n appearance=\"info\"\n title=\"No screen to capture\"\n description={`Speculos has no emulator for the ${model.label}, so this device is mocked all the way through and has no screen.`}\n data-testid=\"banner_device-screen-no-emulator\"\n />\n )}\n </>\n );\n case \"image\":\n return (\n <>\n <DeviceScreenImage\n src={state.src}\n onTouch={model.touch ? state.input.touch : undefined}\n />\n {model.touch ? null : (\n <DeviceScreenButtons onPress={state.input.pressButton} />\n )}\n </>\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "useEffect", "useRef", "useState", "Banner", "IconButton", "ChevronDown", "ChevronUp", "findDeviceScreenModel", "DeviceOsInfo", "DeviceScreenButtons", "DeviceScreenImage", "ScreenFrame", "useScreenPolling", "EDGE_MARGIN_PX", "DEFAULT_WIDTH_PX", "MIN_WIDTH_PX", "clampToViewport", "left", "top", "rect", "clamp", "value", "max", "deviceScreenTitle", "label", "firmwareVersion", "DeviceScreen", "api", "deviceType", "floating", "defaultCollapsed", "model", "collapsed", "setCollapsed", "state", "FloatingWindow", "renderScreen", "title", "onToggle", "children", "windowRef", "position", "setPosition", "width", "setWidth", "drag", "resize", "handleViewportResize", "current", "handlePointerDown", "event", "handlePointerMove", "handlePointerUp", "handleResizeDown", "handleResizeMove", "next", "handleResizeUp"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import u,{act as l}from"react";import{createRoot as v}from"react-dom/client";import{DeviceScreen as m}from"./DeviceScreen";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});const f={id:"device-1",device_type:"stax",apps:[{name:"Bitcoin",version:"2.5.0"}]},o=(c={})=>({screenshot:vi.fn(()=>Promise.resolve(null)),idle:vi.fn(()=>Promise.resolve({kind:"os-info",device:f})),pressButton:vi.fn(()=>Promise.resolve()),touch:vi.fn(()=>Promise.resolve()),openApp:vi.fn(()=>Promise.resolve()),...c});describe("DeviceScreen",()=>{let c,p;const a=e=>c.querySelector(`[data-testid="${e}"]`),n=e=>l(()=>p.render(u.createElement(m,{deviceType:"stax",...e}))),t=(e=0)=>l(()=>vi.advanceTimersByTimeAsync(e)),i=(e,s,r={})=>l(()=>{e.dispatchEvent(new MouseEvent(s,{bubbles:!0,button:0,...r}))});beforeEach(()=>{vi.useFakeTimers(),URL.createObjectURL=vi.fn(()=>"blob:frame"),URL.revokeObjectURL=vi.fn(),HTMLElement.prototype.setPointerCapture=vi.fn(),HTMLElement.prototype.releasePointerCapture=vi.fn(),c=document.createElement("div"),document.body.append(c),p=v(c)}),afterEach(()=>{l(()=>p.unmount()),c.remove(),vi.useRealTimers()}),describe("inline",()=>{it("shows a placeholder until the screen answers",()=>{n({api:o({screenshot:()=>new Promise(()=>{})})}),expect(a("placeholder_device-screen-loading")).not.toBeNull()}),it("shows the live screen of a running app",async()=>{n({api:o({screenshot:()=>Promise.resolve(new Blob(["png"]))})}),await t(),expect(a("image_device-screen")?.getAttribute("src")).toBe("blob:frame")}),it("shows the installed apps while no app runs",async()=>{n({api:o()}),await t(),expect(a("button_open-app-Bitcoin")).not.toBeNull()}),it("says why a device without an emulator has no screen",async()=>{n({api:o(),deviceType:"nanoS"}),await t(),expect(a("button_open-app-Bitcoin")).not.toBeNull(),expect(c.textContent).toContain("Speculos has no emulator for the Nano S")}),it("says nothing about emulators for a device that has one",async()=>{n({api:o()}),await t(),expect(c.textContent).not.toContain("has no emulator")}),it("says there is no screen when the api has nothing to show instead",async()=>{n({api:o({idle:void 0})}),await t(),expect(c.textContent).toContain("No screen to capture")}),it("shows why the screen is unavailable",async()=>{n({api:o({screenshot:()=>Promise.reject(new Error("offline"))})}),await t(),expect(c.textContent).toContain("Screen unavailable"),expect(c.textContent).toContain("offline")}),it("keeps the last frame through a few failures while live",async()=>{const e=vi.fn().mockResolvedValueOnce(new Blob(["png"])).mockRejectedValue(new Error("app quitting")),s=()=>e.mock.calls.length-1;for(n({api:o({screenshot:e})}),await t();s()<3;)await t(500);for(expect(a("image_device-screen")).not.toBeNull();s()<4;)await t(500);expect(a("image_device-screen")).toBeNull(),expect(c.textContent).toContain("app quitting")}),it("drives a Nano with its buttons and refreshes after",async()=>{const e=o({screenshot:vi.fn(()=>Promise.resolve(new Blob(["png"])))});n({api:e,deviceType:"nanoX"}),await t(),i(a("button_device-screen-left"),"pointerdown"),i(a("button_device-screen-left"),"pointerup"),await t(),expect(e.pressButton).toHaveBeenCalledWith("left","press-and-release"),expect(e.screenshot).toHaveBeenCalledTimes(2)}),it("drives a touch device by its screen, without buttons",async()=>{n({api:o({screenshot:()=>Promise.resolve(new Blob(["png"]))})}),await t(),expect(a("image_device-screen")).not.toBeNull(),expect(a("button_device-screen-left")).toBeNull()})}),describe("floating",()=>{const e=()=>a("container_device-screen"),s=()=>e().firstElementChild;it("titles the window with the model and firmware",async()=>{n({api:o(),floating:!0,firmwareVersion:"1.10.1"}),await t(),expect(e().textContent).toContain("Stax - 1.10.1"),expect(e().style.width).toBe("224px")}),it("stops polling while collapsed",async()=>{const r=o();n({api:r,floating:!0,defaultCollapsed:!0}),await t(5e3),expect(r.screenshot).not.toHaveBeenCalled(),expect(a("button_open-app-Bitcoin")).toBeNull(),l(()=>a("button_toggle-device-screen").click()),await t(),expect(r.screenshot).toHaveBeenCalled(),expect(a("button_open-app-Bitcoin")).not.toBeNull()}),it("is dragged by its header",async()=>{n({api:o(),floating:!0}),await t(),i(s(),"pointerdown",{clientX:10,clientY:10}),i(s(),"pointermove",{clientX:110,clientY:60}),i(s(),"pointerup"),i(s(),"pointermove",{clientX:500,clientY:500}),expect(e().style.left).toBe("100px"),expect(e().style.top).toBe("50px")}),describe("when the viewport shrinks",()=>{const r={width:window.innerWidth,height:window.innerHeight},d=(h,w)=>l(()=>{Object.assign(window,{innerWidth:h,innerHeight:w}),window.dispatchEvent(new Event("resize"))});afterEach(()=>{Object.assign(window,{innerWidth:r.width,innerHeight:r.height})}),it("pulls a dragged window back on screen",async()=>{n({api:o(),floating:!0}),await t(),e().getBoundingClientRect=()=>({left:0,top:0,width:224,height:300}),i(s(),"pointerdown",{clientX:10,clientY:10}),i(s(),"pointermove",{clientX:610,clientY:410}),i(s(),"pointerup"),expect(e().style.left).toBe("600px"),d(500,500),expect(e().style.left).toBe("276px"),expect(e().style.top).toBe("200px")}),it("leaves a window that was never moved in its corner",async()=>{n({api:o(),floating:!0}),await t(),d(500,500),expect(e().style.left).toBe(""),expect(e().style.right).toBe("16px")})}),it("is not dragged from its button or with another mouse button",async()=>{n({api:o(),floating:!0}),await t(),i(a("button_toggle-device-screen"),"pointerdown"),i(s(),"pointerdown",{button:2}),i(s(),"pointermove",{clientX:110,clientY:60}),expect(e().style.left).toBe("")}),it("is resized from its edge, down to a minimum width",async()=>{n({api:o(),floating:!0}),await t(),e().getBoundingClientRect=()=>({left:100,top:80,width:224,height:300});const r=a("handle_resize-device-screen");i(r,"pointerdown",{clientX:324}),i(r,"pointermove",{clientX:424}),expect(e().style.width).toBe("324px"),expect(e().style.left).toBe("100px"),i(r,"pointermove",{clientX:0}),i(r,"pointerup"),i(r,"pointermove",{clientX:600}),expect(e().style.width).toBe("200px")})})});
|
|
2
|
+
//# sourceMappingURL=DeviceScreen.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/DeviceScreen.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { type Device } from \"@ledgerhq/device-mockserver-client\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nimport { type ScreenApi } from \"./types\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nconst DEVICE = {\n id: \"device-1\",\n device_type: \"stax\",\n apps: [{ name: \"Bitcoin\", version: \"2.5.0\" }],\n} as unknown as Device;\n\nconst anApi = (overrides: Partial<ScreenApi> = {}): ScreenApi => ({\n screenshot: vi.fn(() => Promise.resolve(null)),\n idle: vi.fn(() =>\n Promise.resolve({ kind: \"os-info\" as const, device: DEVICE }),\n ),\n pressButton: vi.fn(() => Promise.resolve()),\n touch: vi.fn(() => Promise.resolve()),\n openApp: vi.fn(() => Promise.resolve()),\n ...overrides,\n});\n\ndescribe(\"DeviceScreen\", () => {\n let container: HTMLDivElement;\n let root: Root;\n\n const query = (testId: string) =>\n container.querySelector<HTMLElement>(`[data-testid=\"${testId}\"]`);\n const render = (props: Partial<DeviceScreenProps> & { api: ScreenApi }) =>\n act(() => root.render(<DeviceScreen deviceType=\"stax\" {...props} />));\n const wait = (ms = 0) => act(() => vi.advanceTimersByTimeAsync(ms));\n const pointer = (target: Element, type: string, init: MouseEventInit = {}) =>\n act(() => {\n target.dispatchEvent(\n new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n );\n });\n\n beforeEach(() => {\n vi.useFakeTimers();\n URL.createObjectURL = vi.fn(() => \"blob:frame\");\n URL.revokeObjectURL = vi.fn();\n HTMLElement.prototype.setPointerCapture = vi.fn();\n HTMLElement.prototype.releasePointerCapture = vi.fn();\n container = document.createElement(\"div\");\n document.body.append(container);\n root = createRoot(container);\n });\n\n afterEach(() => {\n act(() => root.unmount());\n container.remove();\n vi.useRealTimers();\n });\n\n describe(\"inline\", () => {\n it(\"shows a placeholder until the screen answers\", () => {\n render({ api: anApi({ screenshot: () => new Promise(() => {}) }) });\n\n expect(query(\"placeholder_device-screen-loading\")).not.toBeNull();\n });\n\n it(\"shows the live screen of a running app\", async () => {\n render({\n api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n });\n await wait();\n\n expect(query(\"image_device-screen\")?.getAttribute(\"src\")).toBe(\n \"blob:frame\",\n );\n });\n\n it(\"shows the installed apps while no app runs\", async () => {\n render({ api: anApi() });\n await wait();\n\n expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n });\n\n it(\"says why a device without an emulator has no screen\", async () => {\n render({ api: anApi(), deviceType: \"nanoS\" });\n await wait();\n\n expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n expect(container.textContent).toContain(\n \"Speculos has no emulator for the Nano S\",\n );\n });\n\n it(\"says nothing about emulators for a device that has one\", async () => {\n render({ api: anApi() });\n await wait();\n\n expect(container.textContent).not.toContain(\"has no emulator\");\n });\n\n it(\"says there is no screen when the api has nothing to show instead\", async () => {\n render({ api: anApi({ idle: undefined }) });\n await wait();\n\n expect(container.textContent).toContain(\"No screen to capture\");\n });\n\n it(\"shows why the screen is unavailable\", async () => {\n render({\n api: anApi({ screenshot: () => Promise.reject(new Error(\"offline\")) }),\n });\n await wait();\n\n expect(container.textContent).toContain(\"Screen unavailable\");\n expect(container.textContent).toContain(\"offline\");\n });\n\n it(\"keeps the last frame through a few failures while live\", async () => {\n const screenshot = vi\n .fn<() => Promise<Blob | null>>()\n .mockResolvedValueOnce(new Blob([\"png\"]))\n .mockRejectedValue(new Error(\"app quitting\"));\n const failures = () => screenshot.mock.calls.length - 1;\n render({ api: anApi({ screenshot }) });\n await wait();\n\n while (failures() < 3) await wait(500);\n expect(query(\"image_device-screen\")).not.toBeNull();\n\n while (failures() < 4) await wait(500);\n expect(query(\"image_device-screen\")).toBeNull();\n expect(container.textContent).toContain(\"app quitting\");\n });\n\n it(\"drives a Nano with its buttons and refreshes after\", async () => {\n const api = anApi({\n screenshot: vi.fn(() => Promise.resolve(new Blob([\"png\"]))),\n });\n render({ api, deviceType: \"nanoX\" });\n await wait();\n\n pointer(query(\"button_device-screen-left\")!, \"pointerdown\");\n pointer(query(\"button_device-screen-left\")!, \"pointerup\");\n await wait();\n\n expect(api.pressButton).toHaveBeenCalledWith(\"left\", \"press-and-release\");\n expect(api.screenshot).toHaveBeenCalledTimes(2);\n });\n\n it(\"drives a touch device by its screen, without buttons\", async () => {\n render({\n api: anApi({ screenshot: () => Promise.resolve(new Blob([\"png\"])) }),\n });\n await wait();\n\n expect(query(\"image_device-screen\")).not.toBeNull();\n expect(query(\"button_device-screen-left\")).toBeNull();\n });\n });\n\n describe(\"floating\", () => {\n const windowElement = () => query(\"container_device-screen\")!;\n const header = () => windowElement().firstElementChild!;\n\n it(\"titles the window with the model and firmware\", async () => {\n render({ api: anApi(), floating: true, firmwareVersion: \"1.10.1\" });\n await wait();\n\n expect(windowElement().textContent).toContain(\"Stax - 1.10.1\");\n expect(windowElement().style.width).toBe(\"224px\");\n });\n\n it(\"stops polling while collapsed\", async () => {\n const api = anApi();\n render({ api, floating: true, defaultCollapsed: true });\n await wait(5000);\n\n expect(api.screenshot).not.toHaveBeenCalled();\n expect(query(\"button_open-app-Bitcoin\")).toBeNull();\n\n act(() => query(\"button_toggle-device-screen\")!.click());\n await wait();\n\n expect(api.screenshot).toHaveBeenCalled();\n expect(query(\"button_open-app-Bitcoin\")).not.toBeNull();\n });\n\n it(\"is dragged by its header\", async () => {\n render({ api: anApi(), floating: true });\n await wait();\n\n pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n pointer(header(), \"pointerup\");\n pointer(header(), \"pointermove\", { clientX: 500, clientY: 500 });\n\n expect(windowElement().style.left).toBe(\"100px\");\n expect(windowElement().style.top).toBe(\"50px\");\n });\n\n describe(\"when the viewport shrinks\", () => {\n const viewport = { width: window.innerWidth, height: window.innerHeight };\n const resizeViewport = (width: number, height: number) =>\n act(() => {\n Object.assign(window, { innerWidth: width, innerHeight: height });\n window.dispatchEvent(new Event(\"resize\"));\n });\n\n afterEach(() => {\n Object.assign(window, {\n innerWidth: viewport.width,\n innerHeight: viewport.height,\n });\n });\n\n it(\"pulls a dragged window back on screen\", async () => {\n render({ api: anApi(), floating: true });\n await wait();\n windowElement().getBoundingClientRect = () =>\n ({ left: 0, top: 0, width: 224, height: 300 }) as DOMRect;\n pointer(header(), \"pointerdown\", { clientX: 10, clientY: 10 });\n pointer(header(), \"pointermove\", { clientX: 610, clientY: 410 });\n pointer(header(), \"pointerup\");\n expect(windowElement().style.left).toBe(\"600px\");\n\n resizeViewport(500, 500);\n\n expect(windowElement().style.left).toBe(\"276px\");\n expect(windowElement().style.top).toBe(\"200px\");\n });\n\n it(\"leaves a window that was never moved in its corner\", async () => {\n render({ api: anApi(), floating: true });\n await wait();\n\n resizeViewport(500, 500);\n\n expect(windowElement().style.left).toBe(\"\");\n expect(windowElement().style.right).toBe(\"16px\");\n });\n });\n\n it(\"is not dragged from its button or with another mouse button\", async () => {\n render({ api: anApi(), floating: true });\n await wait();\n\n pointer(query(\"button_toggle-device-screen\")!, \"pointerdown\");\n pointer(header(), \"pointerdown\", { button: 2 });\n pointer(header(), \"pointermove\", { clientX: 110, clientY: 60 });\n\n expect(windowElement().style.left).toBe(\"\");\n });\n\n it(\"is resized from its edge, down to a minimum width\", async () => {\n render({ api: anApi(), floating: true });\n await wait();\n windowElement().getBoundingClientRect = () =>\n ({ left: 100, top: 80, width: 224, height: 300 }) as DOMRect;\n const handle = query(\"handle_resize-device-screen\")!;\n\n pointer(handle, \"pointerdown\", { clientX: 324 });\n pointer(handle, \"pointermove\", { clientX: 424 });\n expect(windowElement().style.width).toBe(\"324px\");\n expect(windowElement().style.left).toBe(\"100px\");\n\n pointer(handle, \"pointermove\", { clientX: 0 });\n pointer(handle, \"pointerup\");\n pointer(handle, \"pointermove\", { clientX: 600 });\n expect(windowElement().style.width).toBe(\"200px\");\n });\n });\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["React", "act", "createRoot", "DeviceScreen", "DEVICE", "anApi", "overrides", "container", "root", "query", "testId", "render", "props", "wait", "ms", "pointer", "target", "type", "init", "screenshot", "failures", "api", "windowElement", "header", "viewport", "resizeViewport", "width", "height", "handle"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import p,{act as o}from"react";import{createRoot as c}from"react-dom/client";import{DeviceScreenButtons as u}from"./DeviceScreenButtons";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});describe("DeviceScreenButtons",()=>{let r,i;const t=vi.fn(),e=s=>r.querySelector(`[data-testid="button_device-screen-${s}"]`),n=(s,l,d={})=>o(()=>{s.dispatchEvent(new MouseEvent(l,{bubbles:!0,button:0,...d}))}),a=(s,l,d)=>o(()=>{s.dispatchEvent(new KeyboardEvent(l,{bubbles:!0,key:d}))});beforeEach(()=>{vi.useFakeTimers(),t.mockReset(),HTMLElement.prototype.setPointerCapture=vi.fn(),r=document.createElement("div"),document.body.append(r),i=c(r),o(()=>i.render(p.createElement(u,{onPress:t})))}),afterEach(()=>{o(()=>i.unmount()),r.remove(),vi.useRealTimers()}),it("sends a quick click as one press-and-release",()=>{n(e("left"),"pointerdown"),n(e("left"),"pointerup"),expect(t).toHaveBeenCalledOnce(),expect(t).toHaveBeenCalledWith("left","press-and-release")}),it("sends a hold as a press then a release",()=>{n(e("both"),"pointerdown"),o(()=>{vi.advanceTimersByTime(200)}),n(e("both"),"pointerup"),expect(t.mock.calls).toEqual([["both","press"],["both","release"]])}),it("ignores buttons other than the main one",()=>{n(e("right"),"pointerdown",{button:2}),n(e("right"),"pointerup",{button:2}),expect(t).not.toHaveBeenCalled()}),it("handles one button at a time",()=>{n(e("left"),"pointerdown"),n(e("right"),"pointerdown"),n(e("left"),"pointerup"),expect(t).toHaveBeenCalledWith("left","press-and-release"),expect(t).toHaveBeenCalledOnce()}),it("drives the buttons from the keyboard",()=>{a(e("right"),"keydown","Enter"),a(e("right"),"keyup","Enter"),a(e("right"),"keydown","a"),expect(t).toHaveBeenCalledOnce(),expect(t).toHaveBeenCalledWith("right","press-and-release")}),it("releases a held button when unmounted",()=>{n(e("left"),"pointerdown"),o(()=>{vi.advanceTimersByTime(200)}),o(()=>i.render(p.createElement(p.Fragment,null))),expect(t).toHaveBeenLastCalledWith("left","release")})});
|
|
2
|
+
//# sourceMappingURL=DeviceScreenButtons.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/DeviceScreenButtons.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\nimport { DeviceScreenButtons } from \"./DeviceScreenButtons\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\ndescribe(\"DeviceScreenButtons\", () => {\n let container: HTMLDivElement;\n let root: Root;\n const onPress = vi.fn();\n\n const button = (name: string) =>\n container.querySelector<HTMLButtonElement>(\n `[data-testid=\"button_device-screen-${name}\"]`,\n )!;\n const pointer = (target: Element, type: string, init: MouseEventInit = {}) =>\n act(() => {\n target.dispatchEvent(\n new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n );\n });\n const key = (target: Element, type: string, value: string) =>\n act(() => {\n target.dispatchEvent(\n new KeyboardEvent(type, { bubbles: true, key: value }),\n );\n });\n\n beforeEach(() => {\n vi.useFakeTimers();\n onPress.mockReset();\n HTMLElement.prototype.setPointerCapture = vi.fn();\n container = document.createElement(\"div\");\n document.body.append(container);\n root = createRoot(container);\n act(() => root.render(<DeviceScreenButtons onPress={onPress} />));\n });\n\n afterEach(() => {\n act(() => root.unmount());\n container.remove();\n vi.useRealTimers();\n });\n\n it(\"sends a quick click as one press-and-release\", () => {\n pointer(button(\"left\"), \"pointerdown\");\n pointer(button(\"left\"), \"pointerup\");\n\n expect(onPress).toHaveBeenCalledOnce();\n expect(onPress).toHaveBeenCalledWith(\"left\", \"press-and-release\");\n });\n\n it(\"sends a hold as a press then a release\", () => {\n pointer(button(\"both\"), \"pointerdown\");\n act(() => {\n vi.advanceTimersByTime(200);\n });\n pointer(button(\"both\"), \"pointerup\");\n\n expect(onPress.mock.calls).toEqual([\n [\"both\", \"press\"],\n [\"both\", \"release\"],\n ]);\n });\n\n it(\"ignores buttons other than the main one\", () => {\n pointer(button(\"right\"), \"pointerdown\", { button: 2 });\n pointer(button(\"right\"), \"pointerup\", { button: 2 });\n\n expect(onPress).not.toHaveBeenCalled();\n });\n\n it(\"handles one button at a time\", () => {\n pointer(button(\"left\"), \"pointerdown\");\n pointer(button(\"right\"), \"pointerdown\");\n pointer(button(\"left\"), \"pointerup\");\n\n expect(onPress).toHaveBeenCalledWith(\"left\", \"press-and-release\");\n expect(onPress).toHaveBeenCalledOnce();\n });\n\n it(\"drives the buttons from the keyboard\", () => {\n key(button(\"right\"), \"keydown\", \"Enter\");\n key(button(\"right\"), \"keyup\", \"Enter\");\n key(button(\"right\"), \"keydown\", \"a\");\n\n expect(onPress).toHaveBeenCalledOnce();\n expect(onPress).toHaveBeenCalledWith(\"right\", \"press-and-release\");\n });\n\n it(\"releases a held button when unmounted\", () => {\n pointer(button(\"left\"), \"pointerdown\");\n act(() => {\n vi.advanceTimersByTime(200);\n });\n act(() => root.render(<></>));\n\n expect(onPress).toHaveBeenLastCalledWith(\"left\", \"release\");\n });\n});\n"],
|
|
5
|
+
"mappings": "AAAA,OAAOA,GAAS,OAAAC,MAAW,QAC3B,OAAS,cAAAC,MAA6B,mBAEtC,OAAS,uBAAAC,MAA2B,wBAEpC,OAAO,OAAO,WAAY,CAAE,yBAA0B,EAAK,CAAC,EAE5D,SAAS,sBAAuB,IAAM,CACpC,IAAIC,EACAC,EACJ,MAAMC,EAAU,GAAG,GAAG,EAEhBC,EAAUC,GACdJ,EAAU,cACR,sCAAsCI,CAAI,IAC5C,EACIC,EAAU,CAACC,EAAiBC,EAAcC,EAAuB,CAAC,IACtEX,EAAI,IAAM,CACRS,EAAO,cACL,IAAI,WAAWC,EAAM,CAAE,QAAS,GAAM,OAAQ,EAAG,GAAGC,CAAK,CAAC,CAC5D,CACF,CAAC,EACGC,EAAM,CAACH,EAAiBC,EAAcG,IAC1Cb,EAAI,IAAM,CACRS,EAAO,cACL,IAAI,cAAcC,EAAM,CAAE,QAAS,GAAM,IAAKG,CAAM,CAAC,CACvD,CACF,CAAC,EAEH,WAAW,IAAM,CACf,GAAG,cAAc,EACjBR,EAAQ,UAAU,EAClB,YAAY,UAAU,kBAAoB,GAAG,GAAG,EAChDF,EAAY,SAAS,cAAc,KAAK,EACxC,SAAS,KAAK,OAAOA,CAAS,EAC9BC,EAAOH,EAAWE,CAAS,EAC3BH,EAAI,IAAMI,EAAK,OAAOL,EAAA,cAACG,EAAA,CAAoB,QAASG,EAAS,CAAE,CAAC,CAClE,CAAC,EAED,UAAU,IAAM,CACdL,EAAI,IAAMI,EAAK,QAAQ,CAAC,EACxBD,EAAU,OAAO,EACjB,GAAG,cAAc,CACnB,CAAC,EAED,GAAG,+CAAgD,IAAM,CACvDK,EAAQF,EAAO,MAAM,EAAG,aAAa,EACrCE,EAAQF,EAAO,MAAM,EAAG,WAAW,EAEnC,OAAOD,CAAO,EAAE,qBAAqB,EACrC,OAAOA,CAAO,EAAE,qBAAqB,OAAQ,mBAAmB,CAClE,CAAC,EAED,GAAG,yCAA0C,IAAM,CACjDG,EAAQF,EAAO,MAAM,EAAG,aAAa,EACrCN,EAAI,IAAM,CACR,GAAG,oBAAoB,GAAG,CAC5B,CAAC,EACDQ,EAAQF,EAAO,MAAM,EAAG,WAAW,EAEnC,OAAOD,EAAQ,KAAK,KAAK,EAAE,QAAQ,CACjC,CAAC,OAAQ,OAAO,EAChB,CAAC,OAAQ,SAAS,CACpB,CAAC,CACH,CAAC,EAED,GAAG,0CAA2C,IAAM,CAClDG,EAAQF,EAAO,OAAO,EAAG,cAAe,CAAE,OAAQ,CAAE,CAAC,EACrDE,EAAQF,EAAO,OAAO,EAAG,YAAa,CAAE,OAAQ,CAAE,CAAC,EAEnD,OAAOD,CAAO,EAAE,IAAI,iBAAiB,CACvC,CAAC,EAED,GAAG,+BAAgC,IAAM,CACvCG,EAAQF,EAAO,MAAM,EAAG,aAAa,EACrCE,EAAQF,EAAO,OAAO,EAAG,aAAa,EACtCE,EAAQF,EAAO,MAAM,EAAG,WAAW,EAEnC,OAAOD,CAAO,EAAE,qBAAqB,OAAQ,mBAAmB,EAChE,OAAOA,CAAO,EAAE,qBAAqB,CACvC,CAAC,EAED,GAAG,uCAAwC,IAAM,CAC/CO,EAAIN,EAAO,OAAO,EAAG,UAAW,OAAO,EACvCM,EAAIN,EAAO,OAAO,EAAG,QAAS,OAAO,EACrCM,EAAIN,EAAO,OAAO,EAAG,UAAW,GAAG,EAEnC,OAAOD,CAAO,EAAE,qBAAqB,EACrC,OAAOA,CAAO,EAAE,qBAAqB,QAAS,mBAAmB,CACnE,CAAC,EAED,GAAG,wCAAyC,IAAM,CAChDG,EAAQF,EAAO,MAAM,EAAG,aAAa,EACrCN,EAAI,IAAM,CACR,GAAG,oBAAoB,GAAG,CAC5B,CAAC,EACDA,EAAI,IAAMI,EAAK,OAAOL,EAAA,cAAAA,EAAA,aAAE,CAAG,CAAC,EAE5B,OAAOM,CAAO,EAAE,yBAAyB,OAAQ,SAAS,CAC5D,CAAC,CACH,CAAC",
|
|
6
|
+
"names": ["React", "act", "createRoot", "DeviceScreenButtons", "container", "root", "onPress", "button", "name", "pointer", "target", "type", "init", "key", "value"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import s,{act as r}from"react";import{createRoot as p}from"react-dom/client";import{DeviceScreenImage as u}from"./DeviceScreenImage";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});describe("DeviceScreenImage",()=>{let n,c;const e=vi.fn(),i=()=>n.querySelector('[data-testid="image_device-screen"]'),o=l=>r(()=>c.render(s.createElement(u,{src:"blob:1",onTouch:l}))),t=(l,d={})=>r(()=>{i().dispatchEvent(new MouseEvent(l,{bubbles:!0,button:0,...d}))}),a=()=>{Object.defineProperty(i(),"naturalWidth",{value:400}),Object.defineProperty(i(),"naturalHeight",{value:600}),i().getBoundingClientRect=()=>({left:0,top:0,width:200,height:300})};beforeEach(()=>{e.mockReset(),HTMLElement.prototype.setPointerCapture=vi.fn(),HTMLElement.prototype.releasePointerCapture=vi.fn(),n=document.createElement("div"),document.body.append(n),c=p(n)}),afterEach(()=>{r(()=>c.unmount()),n.remove()}),it("maps a touch to device pixels and releases it where it went down",()=>{o(e),a(),t("pointerdown",{clientX:50,clientY:150}),t("pointerup",{clientX:190,clientY:10}),expect(e.mock.calls).toEqual([[100,300,"press"],[100,300,"release"]])}),it("clamps a touch on the far edge to the last pixel",()=>{o(e),a(),t("pointerdown",{clientX:200,clientY:300}),expect(e).toHaveBeenCalledWith(399,599,"press")}),it("ignores touches before the image has a size",()=>{o(e),t("pointerdown",{clientX:10,clientY:10}),t("pointerup"),expect(e).not.toHaveBeenCalled()}),it("ignores touches on a button-driven device",()=>{o(),a(),t("pointerdown",{clientX:10,clientY:10}),expect(e).not.toHaveBeenCalled()}),it("releases a held touch when unmounted",()=>{o(e),a(),t("pointerdown",{clientX:50,clientY:150}),r(()=>c.render(s.createElement(s.Fragment,null))),expect(e).toHaveBeenLastCalledWith(100,300,"release")}),it("says so when the screenshot cannot be decoded",()=>{o(e),r(()=>{i().dispatchEvent(new Event("error"))}),expect(n.querySelector('[data-testid="text_device-screen-undecodable"]')).not.toBeNull()})});
|
|
2
|
+
//# sourceMappingURL=DeviceScreenImage.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/DeviceScreenImage.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\nimport { DeviceScreenImage } from \"./DeviceScreenImage\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\ndescribe(\"DeviceScreenImage\", () => {\n let container: HTMLDivElement;\n let root: Root;\n const onTouch = vi.fn();\n\n const image = () =>\n container.querySelector<HTMLImageElement>(\n '[data-testid=\"image_device-screen\"]',\n )!;\n const render = (touch?: typeof onTouch) =>\n act(() => root.render(<DeviceScreenImage src=\"blob:1\" onTouch={touch} />));\n const pointer = (type: string, init: MouseEventInit = {}) =>\n act(() => {\n image().dispatchEvent(\n new MouseEvent(type, { bubbles: true, button: 0, ...init }),\n );\n });\n /** A 400x600 screen drawn at 200x300 from the page's top left corner. */\n const sizeImage = () => {\n Object.defineProperty(image(), \"naturalWidth\", { value: 400 });\n Object.defineProperty(image(), \"naturalHeight\", { value: 600 });\n image().getBoundingClientRect = () =>\n ({ left: 0, top: 0, width: 200, height: 300 }) as DOMRect;\n };\n\n beforeEach(() => {\n onTouch.mockReset();\n HTMLElement.prototype.setPointerCapture = vi.fn();\n HTMLElement.prototype.releasePointerCapture = vi.fn();\n container = document.createElement(\"div\");\n document.body.append(container);\n root = createRoot(container);\n });\n\n afterEach(() => {\n act(() => root.unmount());\n container.remove();\n });\n\n it(\"maps a touch to device pixels and releases it where it went down\", () => {\n render(onTouch);\n sizeImage();\n\n pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n pointer(\"pointerup\", { clientX: 190, clientY: 10 });\n\n expect(onTouch.mock.calls).toEqual([\n [100, 300, \"press\"],\n [100, 300, \"release\"],\n ]);\n });\n\n it(\"clamps a touch on the far edge to the last pixel\", () => {\n render(onTouch);\n sizeImage();\n\n pointer(\"pointerdown\", { clientX: 200, clientY: 300 });\n\n expect(onTouch).toHaveBeenCalledWith(399, 599, \"press\");\n });\n\n it(\"ignores touches before the image has a size\", () => {\n render(onTouch);\n\n pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n pointer(\"pointerup\");\n\n expect(onTouch).not.toHaveBeenCalled();\n });\n\n it(\"ignores touches on a button-driven device\", () => {\n render();\n sizeImage();\n\n pointer(\"pointerdown\", { clientX: 10, clientY: 10 });\n\n expect(onTouch).not.toHaveBeenCalled();\n });\n\n it(\"releases a held touch when unmounted\", () => {\n render(onTouch);\n sizeImage();\n pointer(\"pointerdown\", { clientX: 50, clientY: 150 });\n\n act(() => root.render(<></>));\n\n expect(onTouch).toHaveBeenLastCalledWith(100, 300, \"release\");\n });\n\n it(\"says so when the screenshot cannot be decoded\", () => {\n render(onTouch);\n\n act(() => {\n image().dispatchEvent(new Event(\"error\"));\n });\n\n expect(\n container.querySelector('[data-testid=\"text_device-screen-undecodable\"]'),\n ).not.toBeNull();\n });\n});\n"],
|
|
5
|
+
"mappings": "AAAA,OAAOA,GAAS,OAAAC,MAAW,QAC3B,OAAS,cAAAC,MAA6B,mBAEtC,OAAS,qBAAAC,MAAyB,sBAElC,OAAO,OAAO,WAAY,CAAE,yBAA0B,EAAK,CAAC,EAE5D,SAAS,oBAAqB,IAAM,CAClC,IAAIC,EACAC,EACJ,MAAMC,EAAU,GAAG,GAAG,EAEhBC,EAAQ,IACZH,EAAU,cACR,qCACF,EACII,EAAUC,GACdR,EAAI,IAAMI,EAAK,OAAOL,EAAA,cAACG,EAAA,CAAkB,IAAI,SAAS,QAASM,EAAO,CAAE,CAAC,EACrEC,EAAU,CAACC,EAAcC,EAAuB,CAAC,IACrDX,EAAI,IAAM,CACRM,EAAM,EAAE,cACN,IAAI,WAAWI,EAAM,CAAE,QAAS,GAAM,OAAQ,EAAG,GAAGC,CAAK,CAAC,CAC5D,CACF,CAAC,EAEGC,EAAY,IAAM,CACtB,OAAO,eAAeN,EAAM,EAAG,eAAgB,CAAE,MAAO,GAAI,CAAC,EAC7D,OAAO,eAAeA,EAAM,EAAG,gBAAiB,CAAE,MAAO,GAAI,CAAC,EAC9DA,EAAM,EAAE,sBAAwB,KAC7B,CAAE,KAAM,EAAG,IAAK,EAAG,MAAO,IAAK,OAAQ,GAAI,EAChD,EAEA,WAAW,IAAM,CACfD,EAAQ,UAAU,EAClB,YAAY,UAAU,kBAAoB,GAAG,GAAG,EAChD,YAAY,UAAU,sBAAwB,GAAG,GAAG,EACpDF,EAAY,SAAS,cAAc,KAAK,EACxC,SAAS,KAAK,OAAOA,CAAS,EAC9BC,EAAOH,EAAWE,CAAS,CAC7B,CAAC,EAED,UAAU,IAAM,CACdH,EAAI,IAAMI,EAAK,QAAQ,CAAC,EACxBD,EAAU,OAAO,CACnB,CAAC,EAED,GAAG,mEAAoE,IAAM,CAC3EI,EAAOF,CAAO,EACdO,EAAU,EAEVH,EAAQ,cAAe,CAAE,QAAS,GAAI,QAAS,GAAI,CAAC,EACpDA,EAAQ,YAAa,CAAE,QAAS,IAAK,QAAS,EAAG,CAAC,EAElD,OAAOJ,EAAQ,KAAK,KAAK,EAAE,QAAQ,CACjC,CAAC,IAAK,IAAK,OAAO,EAClB,CAAC,IAAK,IAAK,SAAS,CACtB,CAAC,CACH,CAAC,EAED,GAAG,mDAAoD,IAAM,CAC3DE,EAAOF,CAAO,EACdO,EAAU,EAEVH,EAAQ,cAAe,CAAE,QAAS,IAAK,QAAS,GAAI,CAAC,EAErD,OAAOJ,CAAO,EAAE,qBAAqB,IAAK,IAAK,OAAO,CACxD,CAAC,EAED,GAAG,8CAA+C,IAAM,CACtDE,EAAOF,CAAO,EAEdI,EAAQ,cAAe,CAAE,QAAS,GAAI,QAAS,EAAG,CAAC,EACnDA,EAAQ,WAAW,EAEnB,OAAOJ,CAAO,EAAE,IAAI,iBAAiB,CACvC,CAAC,EAED,GAAG,4CAA6C,IAAM,CACpDE,EAAO,EACPK,EAAU,EAEVH,EAAQ,cAAe,CAAE,QAAS,GAAI,QAAS,EAAG,CAAC,EAEnD,OAAOJ,CAAO,EAAE,IAAI,iBAAiB,CACvC,CAAC,EAED,GAAG,uCAAwC,IAAM,CAC/CE,EAAOF,CAAO,EACdO,EAAU,EACVH,EAAQ,cAAe,CAAE,QAAS,GAAI,QAAS,GAAI,CAAC,EAEpDT,EAAI,IAAMI,EAAK,OAAOL,EAAA,cAAAA,EAAA,aAAE,CAAG,CAAC,EAE5B,OAAOM,CAAO,EAAE,yBAAyB,IAAK,IAAK,SAAS,CAC9D,CAAC,EAED,GAAG,gDAAiD,IAAM,CACxDE,EAAOF,CAAO,EAEdL,EAAI,IAAM,CACRM,EAAM,EAAE,cAAc,IAAI,MAAM,OAAO,CAAC,CAC1C,CAAC,EAED,OACEH,EAAU,cAAc,gDAAgD,CAC1E,EAAE,IAAI,SAAS,CACjB,CAAC,CACH,CAAC",
|
|
6
|
+
"names": ["React", "act", "createRoot", "DeviceScreenImage", "container", "root", "onTouch", "image", "render", "touch", "pointer", "type", "init", "sizeImage"]
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/MockServerDevice.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { MockClient } from \"@ledgerhq/device-mockserver-client\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nimport { mockServerScreenApi } from \"./mockServerScreenApi\";\nimport { useMockServerDevice } from \"./useMockServerDevice\";\n\nexport type MockServerDeviceProps = Pick<\n DeviceScreenProps,\n \"floating\" | \"defaultCollapsed\"\n> & {\n url: string;\n /**
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { MockClient } from \"@ledgerhq/device-mockserver-client\";\n\nimport { DeviceScreen, type DeviceScreenProps } from \"./DeviceScreen\";\nimport { mockServerScreenApi } from \"./mockServerScreenApi\";\nimport { useMockServerDevice } from \"./useMockServerDevice\";\n\nexport type MockServerDeviceProps = Pick<\n DeviceScreenProps,\n \"floating\" | \"defaultCollapsed\"\n> & {\n url: string;\n /** Of the session owning the device: devices are scoped to their session. */\n token: string;\n deviceId: string;\n};\n\nexport const MockServerDevice: React.FC<MockServerDeviceProps> = ({\n url,\n token,\n deviceId,\n ...props\n}) => {\n const client = useMemo(() => new MockClient(url, { token }), [url, token]);\n const api = useMemo(\n () => mockServerScreenApi(client, deviceId),\n [client, deviceId],\n );\n const device = useMockServerDevice(client, deviceId);\n\n // Decides touch or buttons, so nothing renders until it is known. An\n // unreadable record still shows the screen, and its errors.\n if (device === undefined) return null;\n\n return (\n <DeviceScreen\n api={api}\n deviceType={device?.device_type ?? \"\"}\n firmwareVersion={device?.firmware_version}\n {...props}\n />\n );\n};\n"],
|
|
5
5
|
"mappings": "AAAA,OAAOA,GAAS,WAAAC,MAAe,QAC/B,OAAS,cAAAC,MAAkB,qCAE3B,OAAS,gBAAAC,MAA4C,iBACrD,OAAS,uBAAAC,MAA2B,wBACpC,OAAS,uBAAAC,MAA2B,wBAY7B,MAAMC,EAAoD,CAAC,CAChE,IAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAAM,CACJ,MAAMC,EAASV,EAAQ,IAAM,IAAIC,EAAWK,EAAK,CAAE,MAAAC,CAAM,CAAC,EAAG,CAACD,EAAKC,CAAK,CAAC,EACnEI,EAAMX,EACV,IAAMG,EAAoBO,EAAQF,CAAQ,EAC1C,CAACE,EAAQF,CAAQ,CACnB,EACMI,EAASR,EAAoBM,EAAQF,CAAQ,EAInD,OAAII,IAAW,OAAkB,KAG/Bb,EAAA,cAACG,EAAA,CACC,IAAKS,EACL,WAAYC,GAAQ,aAAe,GACnC,gBAAiBA,GAAQ,iBACxB,GAAGH,EACN,CAEJ",
|
|
6
6
|
"names": ["React", "useMemo", "MockClient", "DeviceScreen", "mockServerScreenApi", "useMockServerDevice", "MockServerDevice", "url", "token", "deviceId", "props", "client", "api", "device"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import r,{act as o}from"react";import{createRoot as s}from"react-dom/client";import{MockClient as c}from"@ledgerhq/device-mockserver-client";import{MockServerDevice as a}from"./MockServerDevice";Object.assign(globalThis,{IS_REACT_ACT_ENVIRONMENT:!0});vi.mock("@ledgerhq/device-mockserver-client",()=>({MockClient:vi.fn()}));describe("MockServerDevice",()=>{let e,n;const t=vi.fn();beforeEach(()=>{vi.useFakeTimers(),t.mockReset(),vi.mocked(c).mockImplementation(()=>({getDevice:t,getScreenshot:()=>new Promise(()=>{})})),e=document.createElement("div"),document.body.append(e),n=s(e)}),afterEach(()=>{o(()=>n.unmount()),e.remove(),vi.useRealTimers()});const i=()=>o(()=>n.render(r.createElement(a,{url:"http://mock",token:"session-token",deviceId:"device-1",floating:!0})));it("renders nothing until the device's model is known",()=>{t.mockReturnValue(new Promise(()=>{})),i(),expect(e.childElementCount).toBe(0)}),it("shows the device's screen in its session",async()=>{t.mockResolvedValue({id:"device-1",device_type:"flex",firmware_version:"1.6.1"}),i(),await o(()=>vi.advanceTimersByTimeAsync(0)),expect(c).toHaveBeenCalledWith("http://mock",{token:"session-token"}),expect(t).toHaveBeenCalledWith("device-1"),expect(e.textContent).toContain("Flex - 1.6.1")}),it("still shows the screen when the device cannot be read",async()=>{t.mockRejectedValue(new Error("offline")),i(),await o(()=>vi.advanceTimersByTimeAsync(0)),expect(e.querySelector('[data-testid="container_device-screen"]')).not.toBeNull()})});
|
|
2
|
+
//# sourceMappingURL=MockServerDevice.test.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/MockServerDevice.test.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { act } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\nimport { MockClient } from \"@ledgerhq/device-mockserver-client\";\n\nimport { MockServerDevice } from \"./MockServerDevice\";\n\nObject.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });\n\nvi.mock(\"@ledgerhq/device-mockserver-client\", () => ({\n MockClient: vi.fn(),\n}));\n\ndescribe(\"MockServerDevice\", () => {\n let container: HTMLDivElement;\n let root: Root;\n const getDevice = vi.fn();\n\n beforeEach(() => {\n vi.useFakeTimers();\n getDevice.mockReset();\n vi.mocked(MockClient).mockImplementation(\n () =>\n ({\n getDevice,\n getScreenshot: () => new Promise(() => {}),\n }) as unknown as MockClient,\n );\n container = document.createElement(\"div\");\n document.body.append(container);\n root = createRoot(container);\n });\n\n afterEach(() => {\n act(() => root.unmount());\n container.remove();\n vi.useRealTimers();\n });\n\n const render = () =>\n act(() =>\n root.render(\n <MockServerDevice\n url=\"http://mock\"\n token=\"session-token\"\n deviceId=\"device-1\"\n floating\n />,\n ),\n );\n\n it(\"renders nothing until the device's model is known\", () => {\n getDevice.mockReturnValue(new Promise(() => {}));\n\n render();\n\n expect(container.childElementCount).toBe(0);\n });\n\n it(\"shows the device's screen in its session\", async () => {\n getDevice.mockResolvedValue({\n id: \"device-1\",\n device_type: \"flex\",\n firmware_version: \"1.6.1\",\n });\n\n render();\n await act(() => vi.advanceTimersByTimeAsync(0));\n\n expect(MockClient).toHaveBeenCalledWith(\"http://mock\", {\n token: \"session-token\",\n });\n expect(getDevice).toHaveBeenCalledWith(\"device-1\");\n expect(container.textContent).toContain(\"Flex - 1.6.1\");\n });\n\n it(\"still shows the screen when the device cannot be read\", async () => {\n getDevice.mockRejectedValue(new Error(\"offline\"));\n\n render();\n await act(() => vi.advanceTimersByTimeAsync(0));\n\n expect(\n container.querySelector('[data-testid=\"container_device-screen\"]'),\n ).not.toBeNull();\n });\n});\n"],
|
|
5
|
+
"mappings": "AAAA,OAAOA,GAAS,OAAAC,MAAW,QAC3B,OAAS,cAAAC,MAA6B,mBACtC,OAAS,cAAAC,MAAkB,qCAE3B,OAAS,oBAAAC,MAAwB,qBAEjC,OAAO,OAAO,WAAY,CAAE,yBAA0B,EAAK,CAAC,EAE5D,GAAG,KAAK,qCAAsC,KAAO,CACnD,WAAY,GAAG,GAAG,CACpB,EAAE,EAEF,SAAS,mBAAoB,IAAM,CACjC,IAAIC,EACAC,EACJ,MAAMC,EAAY,GAAG,GAAG,EAExB,WAAW,IAAM,CACf,GAAG,cAAc,EACjBA,EAAU,UAAU,EACpB,GAAG,OAAOJ,CAAU,EAAE,mBACpB,KACG,CACC,UAAAI,EACA,cAAe,IAAM,IAAI,QAAQ,IAAM,CAAC,CAAC,CAC3C,EACJ,EACAF,EAAY,SAAS,cAAc,KAAK,EACxC,SAAS,KAAK,OAAOA,CAAS,EAC9BC,EAAOJ,EAAWG,CAAS,CAC7B,CAAC,EAED,UAAU,IAAM,CACdJ,EAAI,IAAMK,EAAK,QAAQ,CAAC,EACxBD,EAAU,OAAO,EACjB,GAAG,cAAc,CACnB,CAAC,EAED,MAAMG,EAAS,IACbP,EAAI,IACFK,EAAK,OACHN,EAAA,cAACI,EAAA,CACC,IAAI,cACJ,MAAM,gBACN,SAAS,WACT,SAAQ,GACV,CACF,CACF,EAEF,GAAG,oDAAqD,IAAM,CAC5DG,EAAU,gBAAgB,IAAI,QAAQ,IAAM,CAAC,CAAC,CAAC,EAE/CC,EAAO,EAEP,OAAOH,EAAU,iBAAiB,EAAE,KAAK,CAAC,CAC5C,CAAC,EAED,GAAG,2CAA4C,SAAY,CACzDE,EAAU,kBAAkB,CAC1B,GAAI,WACJ,YAAa,OACb,iBAAkB,OACpB,CAAC,EAEDC,EAAO,EACP,MAAMP,EAAI,IAAM,GAAG,yBAAyB,CAAC,CAAC,EAE9C,OAAOE,CAAU,EAAE,qBAAqB,cAAe,CACrD,MAAO,eACT,CAAC,EACD,OAAOI,CAAS,EAAE,qBAAqB,UAAU,EACjD,OAAOF,EAAU,WAAW,EAAE,UAAU,cAAc,CACxD,CAAC,EAED,GAAG,wDAAyD,SAAY,CACtEE,EAAU,kBAAkB,IAAI,MAAM,SAAS,CAAC,EAEhDC,EAAO,EACP,MAAMP,EAAI,IAAM,GAAG,yBAAyB,CAAC,CAAC,EAE9C,OACEI,EAAU,cAAc,yCAAyC,CACnE,EAAE,IAAI,SAAS,CACjB,CAAC,CACH,CAAC",
|
|
6
|
+
"names": ["React", "act", "createRoot", "MockClient", "MockServerDevice", "container", "root", "getDevice", "render"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{findDeviceScreenModel as e}from"./deviceModels";describe("findDeviceScreenModel",()=>{it("finds a model by the mock server's device type",()=>{expect(e("stax")).toMatchObject({label:"Stax",touch:!0,speculos:!0})}),it("marks Nano S as having no emulator",()=>{expect(e("nanoS").speculos).toBe(!1)}),it("falls back to a button-driven model for an unknown type",()=>{expect(e("unknown")).toMatchObject({label:"Device",touch:!1})})});
|
|
2
|
+
//# sourceMappingURL=deviceModels.test.js.map
|