951400782

pending completion

Build # 951400782

Build Type

Pull #3900

gitlab-ci

Committed by

web-flow

Commit Message

chore: bump @testing-library/jest-dom from 5.16.5 to 5.17.0

Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.16.5 to 5.17.0.
- [Release notes](https://github.com/testing-library/jest-dom/releases)
- [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/jest-dom/compare/v5.16.5...v5.17.0)

---
updated-dependencies:
- dependency-name: "@testing-library/jest-dom"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

Pull Request Pull Request #3900: chore: bump @testing-library/jest-dom from 5.16.5 to 5.17.0

Run Details

4446 of 6414 branches covered (69.32%)

8342 of 10084 relevant lines covered (82.73%)

186.0 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

63.74

/src/js/components/common/dialogs/physicaldeviceonboarding.js

// Copyright 2019 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';

import { Help as HelpIcon, InfoOutlined as InfoIcon } from '@mui/icons-material';
import { Autocomplete, TextField } from '@mui/material';
import { createFilterOptions } from '@mui/material/useAutocomplete';

import { advanceOnboarding, setOnboardingApproach, setOnboardingDeviceType } from '../../../actions/onboardingActions';
import { EXTERNAL_PROVIDER } from '../../../constants/deviceConstants';
import { onboardingSteps } from '../../../constants/onboardingConstants';
import { getDebConfigurationCode, versionCompare } from '../../../helpers';
import { getFeatures, getIsEnterprise, getIsPreview, getOnboardingState, getOrganization, getVersionInformation } from '../../../selectors';
import CopyCode from '../copy-code';
import DocsLink from '../docslink';
import { MenderTooltipClickable } from '../mendertooltip';

const filter = createFilterOptions();

const types = [
  { title: 'Raspberry Pi 3', value: 'raspberrypi3' },
  { title: 'Raspberry Pi 4', value: 'raspberrypi4' }
];

export const ConvertedImageNote = () => (
  <p>
    We prepared an image, ready for Mender, for you to start with. You can find it in the{' '}
    <DocsLink path="get-started/preparation/prepare-a-raspberry-pi-device" title="Prepare a Raspberry Pi device" /> documentation, which also contains
    instructions for initial device setup. Once you&apos;re done flashing you can go ahead and proceed to the next step.
  </p>
);

const IntegrationsLink = () => (
  <Link to="/settings/integrations" target="_blank">
    Integration settings
  </Link>
);

export const ExternalProviderTip = ({ hasExternalIntegration, integrationProvider }) => (
  <MenderTooltipClickable
    className="clickable flexbox muted"
    placement="bottom"
    style={{ alignItems: 'end', marginBottom: 3 }}
    title={
      <div style={{ maxWidth: 350 }}>
        {hasExternalIntegration ? (
          <p>
            Devices added here will be automatically integrated with the <i>{EXTERNAL_PROVIDER[integrationProvider].title}</i> you set in the{' '}
            <IntegrationsLink />.
          </p>
        ) : (
          <p>
            To connect your devices with <i>{EXTERNAL_PROVIDER[integrationProvider].title}</i>, go to <IntegrationsLink /> and set up the integration.
          </p>
        )}
      </div>
    }
  >
    <InfoIcon />
  </MenderTooltipClickable>
);

export const DeviceTypeTip = () => (
  <MenderTooltipClickable
    className="flexbox"
    placement="bottom"
    style={{ alignItems: 'end' }}
    title={
      <>
        <p>
          If you don&apos;t see your exact device on the list, choose <i>Generic ARMv6 or newer</i> to continue the tutorial for now.
        </p>
        <p>
          (Note: if your device is <i>not</i> based on ARMv6 or newer, the tutorial won&apos;t work - instead, go back and use the virtual device)
        </p>
      </>
    }
  >
    <div className="tooltip help" style={{ marginLeft: 0, position: 'initial' }}>
      <HelpIcon />
    </div>
  </MenderTooltipClickable>
);

export const DeviceTypeSelectionStep = ({
  hasConvertedImage,
  hasExternalIntegration,
  integrationProvider,
  onboardingState,
  onSelect,
  selection = '',
  version
}) => {
  const shouldShowOnboardingTip = !onboardingState.complete && onboardingState.showTips && onboardingState.showHelptips;
  const hasExternalIntegrationSupport = versionCompare(version, '3.2') > -1;
  return (
    <>
      <h4>Enter your device type</h4>
      <p>Setting this attribute on the device ensures that the device will only receive updates for compatible software releases.</p>

      <div style={{ display: 'grid', gridTemplateColumns: 'max-content 50px 150px', justifyItems: 'center' }}>
        <Autocomplete
          id="device-type-selection"
          autoSelect
          autoHighlight
          filterSelectedOptions
          freeSolo
          getOptionLabel={option => {
            // Value selected with enter, right from the input
            if (typeof option === 'string') {
              return option;
            }
            if (option.key === 'custom' && option.value === selection) {
              return option.value;
            }
            return option.title;
          }}
          handleHomeEndKeys
          includeInputInList
          filterOptions={(options, params) => {
            const filtered = filter(options, params);
            if (filtered.length !== 1 && params.inputValue !== '') {
              filtered.push({
                value: params.inputValue,
                key: 'custom',
                title: `Use "${params.inputValue}"`
              });
            }
            return filtered;
          }}
          options={types}
          onChange={onSelect}
          renderInput={params => (
            <TextField {...params} label="Device type" placeholder="Choose a device type" InputProps={{ ...params.InputProps }} style={{ marginTop: 0 }} />
          )}
          style={{ maxWidth: 300 }}
          value={selection}
        />
        {shouldShowOnboardingTip ? <DeviceTypeTip /> : <div />}
        {hasExternalIntegrationSupport && <ExternalProviderTip hasExternalIntegration={hasExternalIntegration} integrationProvider={integrationProvider} />}
      </div>
      {hasConvertedImage && <ConvertedImageNote />}
    </>
  );
};

export const InstallationStep = ({ advanceOnboarding, selection, onboardingState, ...remainingProps }) => {
  const codeToCopy = getDebConfigurationCode({ ...remainingProps, deviceType: selection, isOnboarding: !onboardingState.complete });
  return (
    <>
      <h4>Log into your device and install the Mender client</h4>
      <p>
        Copy & paste and run this command <b>on your device</b>:
      </p>
      <CopyCode code={codeToCopy} onCopy={() => advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START)} withDescription={true} />
      <p>This downloads the Mender client on the device, sets the configuration and starts the client.</p>
      <p>
        Once the client has started, your device will attempt to connect to the server. It will then appear in your Pending devices tab and you can continue.
      </p>
    </>
  );
};

const steps = {
  1: DeviceTypeSelectionStep,
  2: InstallationStep
};

const integrationProvider = EXTERNAL_PROVIDER['iot-hub'].provider;

export const PhysicalDeviceOnboarding = ({ progress }) => {
  const [selection, setSelection] = useState('');
  const hasExternalIntegration = useSelector(state => {
    const { credentials = {} } = state.organization.externalDeviceIntegrations.find(integration => integration.provider === integrationProvider) ?? {};
    const { [EXTERNAL_PROVIDER['iot-hub'].credentialsAttribute]: azureConnectionString = '' } = credentials;
    return !!azureConnectionString;
  });
  const ipAddress = useSelector(state => state.app.hostAddress);
  const isEnterprise = useSelector(getIsEnterprise);
  const { isDemoMode, isHosted } = useSelector(getFeatures);
  const isPreRelease = useSelector(getIsPreview);
  const onboardingState = useSelector(getOnboardingState);
  const { tenant_token: tenantToken } = useSelector(getOrganization);
  const { Integration: version } = useSelector(getVersionInformation);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setOnboardingApproach('physical'));
  }, []);

  const onSelect = (e, deviceType, reason) => {
    if (reason === 'selectOption') {
      dispatch(setOnboardingDeviceType(deviceType.value));
      setSelection(deviceType.value);
    } else if (reason === 'clear') {
      dispatch(setOnboardingDeviceType(''));
      setSelection('');
    }
  };

  const hasConvertedImage = !!selection && selection.length && (selection.startsWith('raspberrypi3') || selection.startsWith('raspberrypi4'));

  const ComponentToShow = steps[progress];
  return (
    <ComponentToShow
      advanceOnboarding={step => dispatch(advanceOnboarding(step))}
      hasExternalIntegration={hasExternalIntegration}
      hasConvertedImage={hasConvertedImage}
      integrationProvider={integrationProvider}
      ipAddress={ipAddress}
      isEnterprise={isEnterprise}
      isHosted={isHosted}
      isDemoMode={isDemoMode}
      isPreRelease={isPreRelease}
      onboardingState={onboardingState}
      onSelect={onSelect}
      selection={selection}
      tenantToken={tenantToken}
      version={version}
    />
  );
};

export default PhysicalDeviceOnboarding;

1	// Copyright 2019 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React, { useEffect, useState } from 'react';
15	import { useDispatch, useSelector } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import { Help as HelpIcon, InfoOutlined as InfoIcon } from '@mui/icons-material';
19	import { Autocomplete, TextField } from '@mui/material';
20	import { createFilterOptions } from '@mui/material/useAutocomplete';
21
22	import { advanceOnboarding, setOnboardingApproach, setOnboardingDeviceType } from '../../../actions/onboardingActions';
23	import { EXTERNAL_PROVIDER } from '../../../constants/deviceConstants';
24	import { onboardingSteps } from '../../../constants/onboardingConstants';
25	import { getDebConfigurationCode, versionCompare } from '../../../helpers';
26	import { getFeatures, getIsEnterprise, getIsPreview, getOnboardingState, getOrganization, getVersionInformation } from '../../../selectors';
27	import CopyCode from '../copy-code';
28	import DocsLink from '../docslink';
29	import { MenderTooltipClickable } from '../mendertooltip';
30
31	const filter = createFilterOptions();	4✔
32
33	const types = [	4✔
34	{ title: 'Raspberry Pi 3', value: 'raspberrypi3' },
35	{ title: 'Raspberry Pi 4', value: 'raspberrypi4' }
36	];
37
38	export const ConvertedImageNote = () => (	4✔
39	<p>	2✔
40	We prepared an image, ready for Mender, for you to start with. You can find it in the{' '}
41	<DocsLink path="get-started/preparation/prepare-a-raspberry-pi-device" title="Prepare a Raspberry Pi device" /> documentation, which also contains
42	instructions for initial device setup. Once you're done flashing you can go ahead and proceed to the next step.
43	</p>
44	);
45
46	const IntegrationsLink = () => (	4✔
47	<Link to="/settings/integrations" target="_blank">	×
48	Integration settings
49	</Link>
50	);
51
52	export const ExternalProviderTip = ({ hasExternalIntegration, integrationProvider }) => (	4✔
53	<MenderTooltipClickable	7✔
54	className="clickable flexbox muted"
55	placement="bottom"
56	style={{ alignItems: 'end', marginBottom: 3 }}
57	title={
58	<div style={{ maxWidth: 350 }}>
59	{hasExternalIntegration ? (	7✔
60	<p>
61	Devices added here will be automatically integrated with the <i>{EXTERNAL_PROVIDER[integrationProvider].title}</i> you set in the{' '}
62	<IntegrationsLink />.
63	</p>
64	) : (
65	<p>
66	To connect your devices with <i>{EXTERNAL_PROVIDER[integrationProvider].title}</i>, go to <IntegrationsLink /> and set up the integration.
67	</p>
68	)}
69	</div>
70	}
71	>
72	<InfoIcon />
73	</MenderTooltipClickable>
74	);
75
76	export const DeviceTypeTip = () => (	4✔
77	<MenderTooltipClickable	2✔
78	className="flexbox"
79	placement="bottom"
80	style={{ alignItems: 'end' }}
81	title={
82	<>
83	<p>
84	If you don't see your exact device on the list, choose <i>Generic ARMv6 or newer</i> to continue the tutorial for now.
85	</p>
86	<p>
87	(Note: if your device is <i>not</i> based on ARMv6 or newer, the tutorial won't work - instead, go back and use the virtual device)
88	</p>
89	</>
90	}
91	>
92	<div className="tooltip help" style={{ marginLeft: 0, position: 'initial' }}>
93	<HelpIcon />
94	</div>
95	</MenderTooltipClickable>
96	);
97
98	export const DeviceTypeSelectionStep = ({	4✔
99	hasConvertedImage,
100	hasExternalIntegration,
101	integrationProvider,
102	onboardingState,
103	onSelect,
104	selection = '',	×
105	version
106	}) => {
107	const shouldShowOnboardingTip = !onboardingState.complete && onboardingState.showTips && onboardingState.showHelptips;	5✔
108	const hasExternalIntegrationSupport = versionCompare(version, '3.2') > -1;	5✔
109	return (	5✔
110	<>
111	<h4>Enter your device type</h4>
112	<p>Setting this attribute on the device ensures that the device will only receive updates for compatible software releases.</p>
113
114	<div style={{ display: 'grid', gridTemplateColumns: 'max-content 50px 150px', justifyItems: 'center' }}>
115	<Autocomplete
116	id="device-type-selection"
117	autoSelect
118	autoHighlight
119	filterSelectedOptions
120	freeSolo
121	getOptionLabel={option => {
122	// Value selected with enter, right from the input
123	if (typeof option === 'string') {	9!
124	return option;	9✔
125	}
126	if (option.key === 'custom' && option.value === selection) {	×
127	return option.value;	×
128	}
129	return option.title;	×
130	}}
131	handleHomeEndKeys
132	includeInputInList
133	filterOptions={(options, params) => {
134	const filtered = filter(options, params);	×
135	if (filtered.length !== 1 && params.inputValue !== '') {	×
136	filtered.push({	×
137	value: params.inputValue,
138	key: 'custom',
139	title: `Use "${params.inputValue}"`
140	});
141	}
142	return filtered;	×
143	}}
144	options={types}
145	onChange={onSelect}
146	renderInput={params => (
147	<TextField {...params} label="Device type" placeholder="Choose a device type" InputProps={{ ...params.InputProps }} style={{ marginTop: 0 }} />	6✔
148	)}
149	style={{ maxWidth: 300 }}
150	value={selection}
151	/>
152	{shouldShowOnboardingTip ? <DeviceTypeTip /> : <div />}	5✔
153	{hasExternalIntegrationSupport && <ExternalProviderTip hasExternalIntegration={hasExternalIntegration} integrationProvider={integrationProvider} />}	10✔
154	</div>
155	{hasConvertedImage && <ConvertedImageNote />}	6✔
156	</>
157	);
158	};
159
160	export const InstallationStep = ({ advanceOnboarding, selection, onboardingState, ...remainingProps }) => {	4✔
161	const codeToCopy = getDebConfigurationCode({ ...remainingProps, deviceType: selection, isOnboarding: !onboardingState.complete });	1✔
162	return (	1✔
163	<>
164	<h4>Log into your device and install the Mender client</h4>
165	<p>
166	Copy & paste and run this command <b>on your device</b>:
167	</p>
168	<CopyCode code={codeToCopy} onCopy={() => advanceOnboarding(onboardingSteps.DASHBOARD_ONBOARDING_START)} withDescription={true} />	×
169	<p>This downloads the Mender client on the device, sets the configuration and starts the client.</p>
170	<p>
171	Once the client has started, your device will attempt to connect to the server. It will then appear in your Pending devices tab and you can continue.
172	</p>
173	</>
174	);
175	};
176
177	const steps = {	4✔
178	1: DeviceTypeSelectionStep,
179	2: InstallationStep
180	};
181
182	const integrationProvider = EXTERNAL_PROVIDER['iot-hub'].provider;	4✔
183
184	export const PhysicalDeviceOnboarding = ({ progress }) => {	4✔
185	const [selection, setSelection] = useState('');	4✔
186	const hasExternalIntegration = useSelector(state => {	4✔
187	const { credentials = {} } = state.organization.externalDeviceIntegrations.find(integration => integration.provider === integrationProvider) ?? {};	8✔
188	const { [EXTERNAL_PROVIDER['iot-hub'].credentialsAttribute]: azureConnectionString = '' } = credentials;	8✔
189	return !!azureConnectionString;	8✔
190	});
191	const ipAddress = useSelector(state => state.app.hostAddress);	8✔
192	const isEnterprise = useSelector(getIsEnterprise);	4✔
193	const { isDemoMode, isHosted } = useSelector(getFeatures);	4✔
194	const isPreRelease = useSelector(getIsPreview);	4✔
195	const onboardingState = useSelector(getOnboardingState);	4✔
196	const { tenant_token: tenantToken } = useSelector(getOrganization);	4✔
197	const { Integration: version } = useSelector(getVersionInformation);	4✔
198	const dispatch = useDispatch();	4✔
199
200	useEffect(() => {	4✔
201	dispatch(setOnboardingApproach('physical'));	2✔
202	}, []);
203
204	const onSelect = (e, deviceType, reason) => {	4✔
205	if (reason === 'selectOption') {	×
206	dispatch(setOnboardingDeviceType(deviceType.value));	×
207	setSelection(deviceType.value);	×
208	} else if (reason === 'clear') {	×
209	dispatch(setOnboardingDeviceType(''));	×
210	setSelection('');	×
211	}
212	};
213
214	const hasConvertedImage = !!selection && selection.length && (selection.startsWith('raspberrypi3') \|\| selection.startsWith('raspberrypi4'));	4!
215
216	const ComponentToShow = steps[progress];	4✔
217	return (	4✔
218	<ComponentToShow
219	advanceOnboarding={step => dispatch(advanceOnboarding(step))}	×
220	hasExternalIntegration={hasExternalIntegration}
221	hasConvertedImage={hasConvertedImage}
222	integrationProvider={integrationProvider}
223	ipAddress={ipAddress}
224	isEnterprise={isEnterprise}
225	isHosted={isHosted}
226	isDemoMode={isDemoMode}
227	isPreRelease={isPreRelease}
228	onboardingState={onboardingState}
229	onSelect={onSelect}
230	selection={selection}
231	tenantToken={tenantToken}
232	version={version}
233	/>
234	);
235	};
236
237	export default PhysicalDeviceOnboarding;

mendersoftware / gui / 951400782

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous