@nordicsemiconductor/pc-nrfconnect-shared 121.0.0 → 123.0.0

package/scripts/nordic-publish.ts

@@ -14,7 +14,7 @@ import semver from 'semver';
 import calculateShasum from 'shasum';
 
 import { AppInfo, SourceJson } from '../ipc/MetaFiles';
-import { PackageJson } from '../ipc/schema/packageJson';
+import { PackageJsonApp } from '../ipc/schema/packageJson';
 import checkAppProperties from './check-app-properties';
 
 interface LegacyAppInfo {
@@ -41,7 +41,7 @@ interface App {
     releaseNotesFilename: string;
     iconFilename: string;
     isOfficial: boolean;
-    packageJson: PackageJson;
+    packageJson: PackageJsonApp;
 }
 
 const client = new FtpClient();
@@ -113,7 +113,7 @@ const parseOptions = (): Options => {
     };
 };
 
-const readPackageJson = (): PackageJson =>
+const readPackageJson = (): PackageJsonApp =>
     JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
 
 const packPackage = () => {

package/scripts/release-shared.ts

@@ -25,7 +25,7 @@
 */
 import { execSync, spawnSync } from 'node:child_process';
 
-import { PackageJson } from '../ipc/schema/packageJson';
+import { PackageJsonApp } from '../ipc/schema/packageJson';
 
 const logError = (message: string) => {
     console.error(message);
@@ -88,7 +88,7 @@ export const packageJsonIsCorrect = (
     }
 ) => {
     const expectedVersionString = `${expectedVersionNumber}.0.0`;
-    const actualVersionString = parseJson<PackageJson>(packageJson).version;
+    const actualVersionString = parseJson<PackageJsonApp>(packageJson).version;
 
     return equality(
         expectedVersionString,

package/src/About/ApplicationCard.tsx

@@ -6,12 +6,10 @@
 
 import React, { useEffect, useState } from 'react';
 
-import {
-    AppDetailsFromLauncher,
-    inMain as appDetails,
-} from '../../ipc/appDetails';
+import { AppDetailsFromLauncher } from '../../ipc/appDetails';
 import Card from '../Card/Card';
 import FactoryResetButton from '../FactoryReset/FactoryResetButton';
+import appDetails from '../utils/appDetails';
 import AboutButton from './AboutButton';
 import Section from './Section';
 import ShortcutButton from './ShortcutButton';
@@ -20,7 +18,7 @@ export default () => {
     const [appInfo, setAppInfo] = useState<AppDetailsFromLauncher>();
 
     useEffect(() => {
-        appDetails.getAppDetails().then(setAppInfo);
+        appDetails().then(setAppInfo);
     }, [setAppInfo]);
 
     if (appInfo == null) return null;

package/src/About/DeviceCard.tsx

@@ -13,7 +13,7 @@ import {
     deviceInfo,
     productPageUrl,
 } from '../Device/deviceInfo/deviceInfo';
-import { selectedDevice } from '../Device/deviceSlice';
+import { selectedDevice, selectedDeviceInfo } from '../Device/deviceSlice';
 import AboutButton from './AboutButton';
 import Section from './Section';
 
@@ -27,6 +27,7 @@ const memorySize = (memoryInBytes: number) => {
 
 export default () => {
     const device = useSelector(selectedDevice);
+    const info = useSelector(selectedDeviceInfo);
 
     if (device == null) {
         return (
@@ -36,7 +37,7 @@ export default () => {
         );
     }
 
-    const pca = device.jlink?.boardVersion;
+    const pca = device.devkit?.boardVersion;
     const { name, cores } = deviceInfo(device);
 
     return (
@@ -47,13 +48,13 @@ export default () => {
                 <Section title="PCA">{pca || 'Unknown'}</Section>
                 <Section title="Cores">{cores || 'Unknown'}</Section>
 
-                {device.hwInfo && (
+                {info?.hwInfo && (
                     <>
                         <Section title="RAM">
-                            {memorySize(device.hwInfo.ramSize)}
+                            {memorySize(info.hwInfo.ramSize)}
                         </Section>
                         <Section title="Flash">
-                            {memorySize(device.hwInfo.romSize)}
+                            {memorySize(info.hwInfo.romSize)}
                         </Section>
                     </>
                 )}

package/src/About/SupportCard.tsx

@@ -12,8 +12,8 @@ import NrfutilDeviceLib from '../../nrfutil/device/device';
 import Button from '../Button/Button';
 import Card from '../Card/Card';
 import {
-    deviceInfo,
     getDevices,
+    selectedDevice,
     selectedSerialNumber,
 } from '../Device/deviceSlice';
 import { isLoggingVerbose, setIsLoggingVerbose } from '../Log/logSlice';
@@ -28,7 +28,7 @@ export default () => {
     const devices = useSelector(getDevices);
     const currentSerialNumber = useSelector(selectedSerialNumber);
     const verboseLogging = useSelector(isLoggingVerbose);
-    const currentDevice = useSelector(deviceInfo);
+    const currentDevice = useSelector(selectedDevice);
 
     return (
         <Card title="Support">

package/src/App/App.test.tsx

@@ -7,6 +7,7 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 
+import packageJsonFromShared from '../../package.json';
 import render from '../../test/testrenderer';
 import App, { Pane } from './App';
 
@@ -17,6 +18,12 @@ jest.mock('../Log/LogViewer', () => ({
 
 jest.mock('../logging/index.ts', () => ({
     initialise: () => {},
+    debug: () => {},
+}));
+
+jest.mock('../utils/packageJson', () => ({
+    isLauncher: () => false,
+    packageJson: () => packageJsonFromShared,
 }));
 
 const renderApp = (panes: Pane[]) => {

package/src/App/App.tsx

@@ -30,9 +30,8 @@ import LogViewer from '../Log/LogViewer';
 import logger from '../logging';
 import NavBar from '../NavBar/NavBar';
 import classNames from '../utils/classNames';
-import packageJson from '../utils/packageJson';
 import { getPersistedCurrentPane } from '../utils/persistentStore';
-import { init as usageDataInit, setUsageLogger } from '../utils/usageData';
+import usageData from '../utils/usageData';
 import useHotKey from '../utils/useHotKey';
 import {
     currentPane as currentPaneSelector,
@@ -49,19 +48,6 @@ import './app.scss';
 import './shared.scss';
 import './tailwind.css';
 
-let usageDataAlreadyInitialised = false;
-const initialiseUsageData = () => {
-    if (!usageDataAlreadyInitialised) {
-        usageDataAlreadyInitialised = true;
-        try {
-            usageDataInit(packageJson());
-        } catch (error) {
-            // No need to display the error message for the user
-            console.log(error);
-        }
-    }
-};
-
 export interface PaneProps {
     active: boolean;
 }
@@ -77,7 +63,6 @@ interface ConnectedAppProps {
     panes: Pane[];
     sidePanel?: ReactNode;
     showLogByDefault?: boolean;
-    reportUsageData?: boolean;
     documentation?: ReactNode[];
     feedback?: boolean | FeedbackPaneProps;
     children?: ReactNode;
@@ -89,25 +74,25 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
     panes,
     sidePanel,
     showLogByDefault = true,
-    reportUsageData = false,
     documentation,
     feedback,
     children,
     autoReselectByDefault = false,
 }) => {
-    const initialisedLogger = useRef(false);
+    const initApp = useRef(false);
 
-    if (!initialisedLogger.current) {
+    if (!initApp.current) {
         logger.initialise();
         setNrfutilLogger(logger);
-        setUsageLogger(logger);
-        initialisedLogger.current = true;
+        usageData.setLogger(logger);
+        initApp.current = true;
     }
 
     usePersistedPane();
     const isLogVisible = useSelector(isLogVisibleSelector);
     const currentPane = useSelector(currentPaneSelector);
     const allPanes = useAllPanes(panes, documentation, feedback);
+    const paneName = useRef(allPanes.map(({ name }) => name));
     const dispatch = useDispatch();
 
     useHotKey({
@@ -117,6 +102,14 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
         action: openWindow.openLauncher,
     });
 
+    useEffect(() => {
+        paneName.current = allPanes.map(({ name }) => name);
+    }, [allPanes]);
+
+    useEffect(() => {
+        usageData.sendPageView(paneName.current[currentPane]);
+    }, [currentPane]);
+
     useEffect(() => {
         dispatch(setAutoReselect(autoReselectByDefault));
     }, [dispatch, autoReselectByDefault]);
@@ -134,12 +127,6 @@ const ConnectedApp: FC<ConnectedAppProps> = ({
     const isSidePanelVisible =
         useSelector(isSidePanelVisibleSelector) && currentSidePanel;
 
-    useEffect(() => {
-        if (reportUsageData) {
-            initialiseUsageData();
-        }
-    }, [reportUsageData]);
-
     return (
         <div className="core19-app">
             <NavBar deviceSelect={deviceSelect} />

package/src/Device/DeviceSelector/BasicDeviceInfo.tsx

@@ -28,13 +28,15 @@ interface Props {
 const DeviceName = ({ device, inputRef, messageType }: Props) => {
     const dispatch = useDispatch();
     const setOrResetNickname = (name: string) => {
+        if (!device.serialNumber) return;
+
         const newNameIsEqualToDefaultName =
             name === displayedDeviceName(device, { respectNickname: false });
 
         if (newNameIsEqualToDefaultName) {
-            dispatch(resetDeviceNickname(device.serialNumber));
+            dispatch(resetDeviceNickname(device));
         } else {
-            dispatch(setDeviceNickname(device.serialNumber, name));
+            dispatch(setDeviceNickname(device, name));
         }
     };
 
@@ -79,7 +81,9 @@ export default ({
     const autoReselectDevice = useSelector(getAutoReselectDevice);
     const waitingToAutoReselect = useSelector(getWaitingToAutoReselect);
     const waitingForDevice = useSelector(getWaitingForDeviceTimeout);
-    const thisDevice = device.serialNumber === autoReselectDevice?.serialNumber;
+    const thisDevice =
+        device.serialNumber &&
+        device.serialNumber === autoReselectDevice?.serialNumber;
 
     useEffect(() => {
         if (!showWaitingStatus) {
@@ -99,9 +103,9 @@ export default ({
     ]);
 
     return (
-        <div className="basic-device-info">
+        <div className="basic-device-info tw-h-[42px]">
             <DeviceIcon device={device} />
-            <div className="details">
+            <div className="details tw-flex tw-flex-col">
                 <DeviceName
                     device={device}
                     inputRef={deviceNameInputRef}
@@ -109,7 +113,9 @@ export default ({
                 />
                 <DeviceSerialNumber device={device} />
             </div>
-            <div className="toggles">{toggles}</div>
+            <div className="tw-mr-2.5 tw-flex tw-h-full tw-w-11 tw-flex-col tw-items-center tw-justify-center">
+                {toggles}
+            </div>
         </div>
     );
 };

package/src/Device/DeviceSelector/DeviceList/AnimatedList.tsx

@@ -57,6 +57,6 @@ export const AnimatedItem: FC<{
     children: ReactNode;
 }> = ({ children, itemKey }) => (
     <Flipped flipId={itemKey} onAppear={fadeIn} onExit={fadeOut}>
-        <li>{children}</li>
+        <li className="tw-group">{children}</li>
     </Flipped>
 );

package/src/Device/DeviceSelector/DeviceList/Device.tsx

@@ -14,8 +14,6 @@ import { FavoriteIndicator } from '../Favorite';
 import EditDeviceButtons from './EditDeviceButtons';
 import MoreDeviceInfo from './MoreDeviceInfo';
 
-import './device.scss';
-
 const ShowMoreInfo = ({
     isVisible,
     toggleVisible,
@@ -24,7 +22,10 @@ const ShowMoreInfo = ({
     toggleVisible: () => void;
 }) => (
     <PseudoButton
-        className={`show-more mdi mdi-chevron-${isVisible ? 'up' : 'down'}`}
+        className={classNames(
+            isVisible ? 'tw-visible' : 'tw-invisible  group-hover:tw-visible',
+            `mdi mdi-chevron-${isVisible ? 'up' : 'down'}`
+        )}
         testId="show-more-device-info"
         onClick={toggleVisible}
     />
@@ -52,8 +53,9 @@ export default ({ device, doSelectDevice, allowMoreInfoVisible }: Props) => {
     return (
         <PseudoButton
             className={classNames(
-                'device',
-                moreVisible && 'more-infos-visible'
+                'tw-flex tw-flex-col tw-gap-2 tw-py-3 tw-font-light group-hover:tw-bg-white',
+                moreVisible && 'tw-bg-white',
+                moreVisible && device.serialNumber && 'tw-pb-0'
             )}
             onClick={() => doSelectDevice(device, false)}
         >

package/src/Device/DeviceSelector/DeviceList/DeviceList.tsx

@@ -11,7 +11,11 @@ import { Toggle } from '../../../Toggle/Toggle';
 import classNames from '../../../utils/classNames';
 import { getAutoReselect, setAutoReselect } from '../../deviceAutoSelectSlice';
 import { displayedDeviceName } from '../../deviceInfo/deviceInfo';
-import { Device as DeviceProps, getDevices } from '../../deviceSlice';
+import {
+    Device as DeviceProps,
+    getDevices,
+    selectedDevice,
+} from '../../deviceSlice';
 import { AnimatedItem, AnimatedList } from './AnimatedList';
 import BrokenDevice from './BrokenDevice';
 import Device from './Device';
@@ -40,7 +44,7 @@ const showAllDevices = () => true;
 
 const sorted = (devices: DeviceProps[]) =>
     [...devices].sort((a, b) => {
-        if (a.favorite !== b.favorite) {
+        if (!!a.favorite !== !!b.favorite) {
             return a.favorite ? -1 : 1;
         }
 
@@ -60,6 +64,7 @@ const DeviceList: FC<Props> = ({
     const dispatch = useDispatch();
     const autoReconnect = useSelector(getAutoReselect);
     const devices = useSelector(getDevices);
+    const currentDevice = useSelector(selectedDevice);
 
     const sortedDevices = useMemo(
         () => sorted([...devices.values()]),
@@ -71,13 +76,26 @@ const DeviceList: FC<Props> = ({
         [deviceFilter, sortedDevices]
     );
 
+    const canUseAutoReconnect =
+        (!!currentDevice && !!currentDevice?.serialNumber) || !currentDevice;
+
     return (
         <div className={classNames('device-list', isVisible || 'hidden')}>
             <div className="global-auto-reconnect">
                 <Toggle
                     id="toggle-global-auto-reconnect"
                     label="Auto Reconnect"
-                    isToggled={autoReconnect}
+                    title={
+                        !canUseAutoReconnect
+                            ? 'Cannot auto reconnect to a device with no serial number'
+                            : ''
+                    }
+                    disabled={!canUseAutoReconnect}
+                    isToggled={
+                        autoReconnect &&
+                        ((!!currentDevice && !!currentDevice?.serialNumber) ||
+                            !currentDevice)
+                    }
                     onToggle={value => {
                         dispatch(setAutoReselect(value));
                     }}
@@ -90,8 +108,8 @@ const DeviceList: FC<Props> = ({
                 <AnimatedList devices={sortedDevices}>
                     {filteredDevices.map(device => (
                         <AnimatedItem
-                            key={device.serialNumber}
-                            itemKey={device.serialNumber}
+                            key={device.id.toString()}
+                            itemKey={device.id.toString()}
                         >
                             {device.traits.broken ? (
                                 <BrokenDevice device={device} />

package/src/Device/DeviceSelector/DeviceList/EditDeviceButtons.tsx

@@ -18,11 +18,12 @@ interface Props {
     startEditingDeviceName: () => void;
 }
 
-const EditDeviceButtons: FC<Props> = ({ device, startEditingDeviceName }) => (
-    <ButtonGroup className="edit-device-buttons">
-        <MakeDeviceFavorite device={device} />
-        <RenameDevice startEditingDeviceName={startEditingDeviceName} />
-    </ButtonGroup>
-);
+const EditDeviceButtons: FC<Props> = ({ device, startEditingDeviceName }) =>
+    device.serialNumber ? (
+        <ButtonGroup className="edit-device-buttons">
+            <MakeDeviceFavorite device={device} />
+            <RenameDevice startEditingDeviceName={startEditingDeviceName} />
+        </ButtonGroup>
+    ) : null;
 
 export default EditDeviceButtons;

package/src/Device/DeviceSelector/DeviceList/MoreDeviceInfo.tsx

@@ -10,56 +10,52 @@ import { SerialPort } from '../../../../nrfutil/device/common';
 import { displayedDeviceName } from '../../deviceInfo/deviceInfo';
 import { Device } from '../../deviceSlice';
 
-import './more-device-info.scss';
-
 const Row = ({ children }: { children: ReactNode }) => (
-    <div className="info-row">
-        <div className="flex-space" />
+    <div className=" tw-flex tw-flex-row tw-pr-5">
+        <div className=" tw-w-[68px]" />
         {children}
     </div>
 );
 
 const PcaNumber = ({ device }: { device: Device }) => {
-    if (!device.jlink?.boardVersion) {
+    if (!device.devkit?.boardVersion) {
         return null;
     }
 
-    return <div>{device.jlink.boardVersion}</div>;
+    return (
+        <Row>
+            <div>{device.devkit.boardVersion}</div>
+        </Row>
+    );
 };
 
 const MaybeDeviceName = ({ device }: { device: Device }) => {
-    const hasNickname = device.nickname !== '';
-    if (!hasNickname) {
+    if (!device.nickname) {
         return null;
     }
 
     return (
-        <div className="name">
-            {displayedDeviceName(device, { respectNickname: false })}
-        </div>
+        <Row>
+            <div>{displayedDeviceName(device, { respectNickname: false })}</div>
+        </Row>
     );
 };
 
-const Serialports = ({ ports }: { ports: SerialPort[] }) => (
-    <ul className="ports">
-        {ports.map(port => (
-            <li key={port.path}>{port.comName}</li>
-        ))}
-    </ul>
-);
-
-export default ({ device }: { device: Device }) => (
-    <div className="more-infos">
+const Serialports = ({ ports }: { ports: SerialPort[] }) =>
+    ports.length > 0 ? (
         <Row>
-            <PcaNumber device={device} />
+            <ul className="tw-underline">
+                {ports.map(port => (
+                    <li key={port.path}>{port.comName}</li>
+                ))}
+            </ul>
         </Row>
-        <Row>
-            <MaybeDeviceName device={device} />
-        </Row>
-        {device.serialPorts && (
-            <Row>
-                <Serialports ports={device.serialPorts} />
-            </Row>
-        )}
+    ) : null;
+
+export default ({ device }: { device: Device }) => (
+    <div className="tw-preflight tw-flex tw-flex-col tw-gap-2">
+        <PcaNumber device={device} />
+        <MaybeDeviceName device={device} />
+        <Serialports ports={device.serialPorts ?? []} />
     </div>
 );

package/src/Device/DeviceSelector/DeviceList/edit-device-buttons.scss

@@ -4,11 +4,10 @@
  * SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
  */
 
-@import "../../../variables";
+@import '../../../variables';
 
 .core19-device-selector {
     .edit-device-buttons {
-        margin-top: 10px;
         height: 35px;
 
         font-size: 11px;

package/src/Device/DeviceSelector/DeviceSelector.test.tsx

@@ -14,18 +14,13 @@ import DeviceSelector from './DeviceSelector';
 
 jest.mock('../../../nrfutil/device/device');
 
+const DEVICE_SERIAL_NUMBER = '000000001';
+
 const testDevice: Device = {
     id: 1,
-    hwInfo: {
-        romSize: 123,
-        ramSize: 456,
-        romPageSize: 789,
-        deviceFamily: 'PCATest',
-        deviceVersion: 'PCATest',
-    },
     broken: null,
     usb: {
-        serialNumber: '000000001',
+        serialNumber: DEVICE_SERIAL_NUMBER,
         manufacturer: 'testManufacturer',
         product: 'testProduct',
         osDevicePath: '/some-path',
@@ -66,26 +61,13 @@ const testDevice: Device = {
             vcom: 2,
         },
     ],
-    boardVersion: 'PCATest',
-    serialport: {
-        path: 'COM1',
-        manufacturer: 'testManufacturer',
-        productId: 'testProduct',
-        serialNumber: '000000001',
-        vendorId: 'testVendor',
-        comName: 'COM1',
-        vcom: 0,
-    },
     favorite: false,
     traits: {
         jlink: true,
     },
-    jlink: {
+    devkit: {
         boardVersion: 'PCATest',
-        serialNumber: 'PCATest',
-        jlinkObFirmwareVersion: 'PCATest',
         deviceFamily: 'PCATest',
-        deviceVersion: 'PCATest',
     },
 };
 
@@ -151,7 +133,7 @@ describe('DeviceSelector', () => {
             />,
             [addDevice(testDevice)]
         );
-        expect(screen.getByText(testDevice.serialNumber)).toBeInTheDocument();
+        expect(screen.getByText(DEVICE_SERIAL_NUMBER)).toBeInTheDocument();
     });
 
     it('should unlist disconnected devices', () => {
@@ -166,7 +148,7 @@ describe('DeviceSelector', () => {
             />,
             [addDevice(testDevice), removeDevice(testDevice)]
         );
-        expect(screen.queryByText(testDevice.serialNumber)).toBeNull();
+        expect(screen.queryByText(DEVICE_SERIAL_NUMBER)).toBeNull();
     });
 
     it('should show more device info when selecting the expand button', () => {
@@ -200,8 +182,8 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 
     it('can deselect selected devices', async () => {
@@ -217,10 +199,10 @@ describe('DeviceSelector', () => {
             [addDevice(testDevice)]
         );
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
         await screen.findByTestId('disconnect-device');
         fireEvent.click(screen.getByTestId('disconnect-device'));
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(1);
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(1);
         expect(screen.getByText('Select device')).toBeInTheDocument();
     });
 
@@ -250,10 +232,10 @@ describe('DeviceSelector', () => {
             [addDevice(testDevice)]
         );
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         expect(screen.queryByText('OK')).toBeNull();
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 
     it('should deselect device when custom devices are disabled and no valid firmware is defined', async () => {
@@ -283,13 +265,11 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         expect(screen.queryByText('OK')).toBeNull();
         await waitFor(() => {
-            expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(
-                1
-            );
+            expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(1);
         });
         await screen.findByText('Select device');
     });
@@ -309,7 +289,7 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         await screen.findByText(
             'Device must be programmed, do you want to proceed?'
@@ -331,7 +311,7 @@ describe('DeviceSelector', () => {
         );
 
         fireEvent.click(screen.getByText('Select device'));
-        fireEvent.click(screen.getByText(testDevice.serialNumber));
+        fireEvent.click(screen.getByText(DEVICE_SERIAL_NUMBER));
 
         await screen.findByText(
             'Device must be programmed, do you want to proceed?'
@@ -345,6 +325,6 @@ describe('DeviceSelector', () => {
             )
         ).toBeNull();
 
-        expect(screen.getAllByText(testDevice.serialNumber)).toHaveLength(2);
+        expect(screen.getAllByText(DEVICE_SERIAL_NUMBER)).toHaveLength(2);
     });
 });