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

80.85

/src/js/components/helptips/helptooltips.js

// Copyright 2017 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 from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

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

import { setSnackbar } from '../../actions/appActions';
import { toggleHelptips } from '../../actions/userActions';
import { getDeviceById } from '../../selectors';
import ConfigurationObject from '../common/configurationobject';
import DocsLink from '../common/docslink';
import MenderTooltip, { MenderTooltipClickable } from '../common/mendertooltip';

const actionCreators = { setSnackbar, toggleHelptips };
const mapStateToProps = (state, ownProps) => ({ device: getDeviceById(state, ownProps.deviceId) });

const HideHelptipsButton = ({ toggleHelptips }) => (
  <p>
    <a className="hidehelp" onClick={toggleHelptips}>
      Hide all help tips
    </a>
  </p>
);

const AuthExplainComponent = () => (
  <MenderTooltipClickable
    placement="left"
    className="absolute clickable"
    style={{ right: 0, top: -70 }}
    title={
      <>
        <h3>Device authorization status</h3>
        <p>
          Each device sends an authentication request containing its identity attributes and its current public key. You can accept, reject or dismiss these
          requests to determine the authorization status of the device.
        </p>
        <p>
          In cases such as key rotation, each device may have more than one identity/key combination listed. See the documentation for more on{' '}
          <DocsLink path="overview/device-authentication" title="Device authentication" />.
        </p>
      </>
    }
  >
    <InfoIcon />
  </MenderTooltipClickable>
);
export const AuthExplainButton = connect(mapStateToProps, actionCreators)(AuthExplainComponent);

const AuthButtonComponent = ({ highlightHelp, toggleHelptips }) => (
  <MenderTooltipClickable
    className={highlightHelp ? 'tooltip help highlight' : 'tooltip help'}
    style={{ left: '75%', top: 0 }}
    title={
      <div style={{ whiteSpace: 'normal' }}>
        <h3>Authorize devices</h3>
        <hr />
        <p>
          Expand this section to view the authentication options for this device. You can decide whether to accept it, reject it, or just dismiss this device
          for now.
        </p>
        <p>
          See the documentation for more on <DocsLink path="overview/device-authentication" title="Device authentication" />.
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </div>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const AuthButton = connect(mapStateToProps, actionCreators)(AuthButtonComponent);

const AddGroupComponent = ({ toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ bottom: -10 }}
    title={
      <>
        <h3>Device groups</h3>
        <hr />
        <p>
          It is possible to create groups of devices. Once you have created a group and added one or more devices to it, you can deploy an update to that
          specific group only.
        </p>
        <p>To avoid accidents, Mender only allows a device to be in one group at the time.</p>
        <p>
          You can find out additional information about device groups in <Link to="/help/devices">the help section</Link>.
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const AddGroup = connect(mapStateToProps, actionCreators)(AddGroupComponent);

const ExpandDeviceComponent = ({ toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ left: 'inherit', right: '45px' }}
    title={
      <>
        <h3>Device inventory</h3>
        <hr />
        <p>
          Mender automatically collects identity and inventory information from connected devices. You can view this information by clicking on a device to
          expand the row.
        </p>
        <p>
          Which information is collected about devices is fully configurable;{' '}
          <DocsLink path="client-installation/identity" title="see the documentation for how to configure this" />.
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const ExpandDevice = connect(mapStateToProps, actionCreators)(ExpandDeviceComponent);

const ExpandArtifactComponent = ({ toggleHelptips }) => (
  <MenderTooltipClickable
    className="tooltip help"
    title={
      <>
        <h3>Device type compatibility</h3>
        <hr />
        <p>
          Mender Artifacts have <b>Device types compatible</b> as part of their metadata. All devices report which device type they are, as part of their
          inventory information. During a deployment, Mender makes sure that a device will only download and install an Artifact it is compatible with.
        </p>
        <p>You can click on each Artifact in the Release to expand the row and view more information about it.</p>
        <p>
          For more information on how to specify the device type compatibility and other artifact metadata,{' '}
          <DocsLink path="artifact-creation/create-an-artifact" title="see the documentation" />.
        </p>
        <HideHelptipsButton toggleHelptips={toggleHelptips} />
      </>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);
export const ExpandArtifact = connect(mapStateToProps, actionCreators)(ExpandArtifactComponent);

const DeviceSupportTipComponent = () => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ bottom: '2.5%', left: '88%' }}
    title={
      <p>
        The steps in the guide should work on most operating systems in the Debian family (e.g. Debian, Ubuntu, Raspberry Pi OS) and devices based on ARMv6 or
        newer (e.g. Raspberry Pi 2/3/4, Beaglebone). Visit <DocsLink path="overview/device-support" title="our documentation" /> for more information about
        device support.
      </p>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);

export const DeviceSupportTip = connect(mapStateToProps, actionCreators)(DeviceSupportTipComponent);

const ConfigureTimezoneTipComponent = ({ anchor, device, toggleHelptips }) => {
  const { attributes = {} } = device;
  if (!['qemux86-64', 'raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {
    return null;
  }
  return (
    <MenderTooltipClickable
      className="fadeIn tooltip help"
      style={anchor}
      title={
        <>
          To see the effects of applying a configuration to your device you can set one of the below values to modify the timezone of your device. While all
          values from <i>timedatectl list-timezones</i> will work, to easily see the impact of the changed value you can use one of the following values:
          <ul>
            <li>Europe/Oslo</li>
            <li>America/Los_Angeles</li>
            <li>Asia/Tokyo</li>
          </ul>
          Once the configuration has been applied you can see the effect by opening the Remote Terminal to the device and executing the <i>date</i> command.
          <HideHelptipsButton toggleHelptips={toggleHelptips} />
        </>
      }
    >
      <HelpIcon />
    </MenderTooltipClickable>
  );
};

export const ConfigureTimezoneTip = connect(mapStateToProps, actionCreators)(ConfigureTimezoneTipComponent);

const ConfigureRaspberryLedComponent = ({ anchor, device, setSnackbar, toggleHelptips }) => {
  const { attributes = {} } = device;
  if (!['raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {
    return null;
  }
  return (
    <MenderTooltipClickable
      className="fadeIn tooltip help"
      style={anchor}
      title={
        <>
          To see the effects of applying a configuration to your device you can set one of the below values to modify the behaviour of your Raspberry Pi green
          status LED
          <ConfigurationObject
            className="margin-top-small margin-bottom-small"
            config={{
              mmc0: 'The default, which blinks the led on storage activity',
              on: 'Turn on the light permanently',
              off: 'Turn off the light permanently',
              heartbeat: 'Enable heartbeat blinking'
            }}
            compact
            setSnackbar={setSnackbar}
          />
          There are other possible values, but we won&apos;t advertise them here. See
          <a href="http://www.d3noob.org/2020/07/controlling-activity-led-on-raspberry-pi.html" target="_blank" rel="noopener noreferrer">
            this blog post
          </a>{' '}
          or{' '}
          <a href="https://www.raspberrypi.org/forums/viewtopic.php?t=273194#p1658930" target="_blank" rel="noopener noreferrer">
            in the Raspberry Pi forums
          </a>{' '}
          for more information.
          <HideHelptipsButton toggleHelptips={toggleHelptips} />
        </>
      }
    >
      <HelpIcon />
    </MenderTooltipClickable>
  );
};

export const ConfigureRaspberryLedTip = connect(mapStateToProps, actionCreators)(ConfigureRaspberryLedComponent);

const ConfigureAddOnTipComponent = () => (
  <MenderTooltipClickable
    className="tooltip help"
    style={{ top: '10%', left: '75%' }}
    title={
      <p>
        Mender deploys the configuration attributes using the same mechanisms as software updates. The configuration is stored as a JSON file at
        <code>/var/lib/mender-configure/device-config.json</code> on the device and then all the scripts in{' '}
        <code>/usr/lib/mender-configure/apply-device-config.d/</code> are executed to apply the configuration attributes. To add a new configuration attribute,
        you simply need to input it in the UI and add a script to that directory that applies it accordingly. Read more about how it works in the{' '}
        <DocsLink path="add-ons/configure" title="Configure documentation" />.
      </p>
    }
  >
    <HelpIcon />
  </MenderTooltipClickable>
);

export const ConfigureAddOnTip = connect(mapStateToProps, actionCreators)(ConfigureAddOnTipComponent);

export const NameTagTip = () => (
  <MenderTooltip
    arrow
    title={
      <>
        The <i>Name</i> tag will be available as a device indentifier too.
      </>
    }
  >
    <div className="tooltip help" style={{ top: '15%', left: '85%' }}>
      <HelpIcon />
    </div>
  </MenderTooltip>
);

1	// Copyright 2017 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 from 'react';
15	import { connect } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import { Help as HelpIcon, InfoOutlined as InfoIcon } from '@mui/icons-material';
19
20	import { setSnackbar } from '../../actions/appActions';
21	import { toggleHelptips } from '../../actions/userActions';
22	import { getDeviceById } from '../../selectors';
23	import ConfigurationObject from '../common/configurationobject';
24	import DocsLink from '../common/docslink';
25	import MenderTooltip, { MenderTooltipClickable } from '../common/mendertooltip';
26
27	const actionCreators = { setSnackbar, toggleHelptips };	22✔
28	const mapStateToProps = (state, ownProps) => ({ device: getDeviceById(state, ownProps.deviceId) });	49✔
29
30	const HideHelptipsButton = ({ toggleHelptips }) => (	22✔
31	<p>	×
32	<a className="hidehelp" onClick={toggleHelptips}>
33	Hide all help tips
34	</a>
35	</p>
36	);
37
38	const AuthExplainComponent = () => (	22✔
39	<MenderTooltipClickable	1✔
40	placement="left"
41	className="absolute clickable"
42	style={{ right: 0, top: -70 }}
43	title={
44	<>
45	<h3>Device authorization status</h3>
46	<p>
47	Each device sends an authentication request containing its identity attributes and its current public key. You can accept, reject or dismiss these
48	requests to determine the authorization status of the device.
49	</p>
50	<p>
51	In cases such as key rotation, each device may have more than one identity/key combination listed. See the documentation for more on{' '}
52	<DocsLink path="overview/device-authentication" title="Device authentication" />.
53	</p>
54	</>
55	}
56	>
57	<InfoIcon />
58	</MenderTooltipClickable>
59	);
60	export const AuthExplainButton = connect(mapStateToProps, actionCreators)(AuthExplainComponent);	22✔
61
62	const AuthButtonComponent = ({ highlightHelp, toggleHelptips }) => (	22✔
63	<MenderTooltipClickable	1✔
64	className={highlightHelp ? 'tooltip help highlight' : 'tooltip help'}	1!
65	style={{ left: '75%', top: 0 }}
66	title={
67	<div style={{ whiteSpace: 'normal' }}>
68	<h3>Authorize devices</h3>
69	<hr />
70	<p>
71	Expand this section to view the authentication options for this device. You can decide whether to accept it, reject it, or just dismiss this device
72	for now.
73	</p>
74	<p>
75	See the documentation for more on <DocsLink path="overview/device-authentication" title="Device authentication" />.
76	</p>
77	<HideHelptipsButton toggleHelptips={toggleHelptips} />
78	</div>
79	}
80	>
81	<HelpIcon />
82	</MenderTooltipClickable>
83	);
84	export const AuthButton = connect(mapStateToProps, actionCreators)(AuthButtonComponent);	22✔
85
86	const AddGroupComponent = ({ toggleHelptips }) => (	22✔
87	<MenderTooltipClickable	1✔
88	className="tooltip help"
89	style={{ bottom: -10 }}
90	title={
91	<>
92	<h3>Device groups</h3>
93	<hr />
94	<p>
95	It is possible to create groups of devices. Once you have created a group and added one or more devices to it, you can deploy an update to that
96	specific group only.
97	</p>
98	<p>To avoid accidents, Mender only allows a device to be in one group at the time.</p>
99	<p>
100	You can find out additional information about device groups in <Link to="/help/devices">the help section</Link>.
101	</p>
102	<HideHelptipsButton toggleHelptips={toggleHelptips} />
103	</>
104	}
105	>
106	<HelpIcon />
107	</MenderTooltipClickable>
108	);
109	export const AddGroup = connect(mapStateToProps, actionCreators)(AddGroupComponent);	22✔
110
111	const ExpandDeviceComponent = ({ toggleHelptips }) => (	22✔
112	<MenderTooltipClickable	5✔
113	className="tooltip help"
114	style={{ left: 'inherit', right: '45px' }}
115	title={
116	<>
117	<h3>Device inventory</h3>
118	<hr />
119	<p>
120	Mender automatically collects identity and inventory information from connected devices. You can view this information by clicking on a device to
121	expand the row.
122	</p>
123	<p>
124	Which information is collected about devices is fully configurable;{' '}
125	<DocsLink path="client-installation/identity" title="see the documentation for how to configure this" />.
126	</p>
127	<HideHelptipsButton toggleHelptips={toggleHelptips} />
128	</>
129	}
130	>
131	<HelpIcon />
132	</MenderTooltipClickable>
133	);
134	export const ExpandDevice = connect(mapStateToProps, actionCreators)(ExpandDeviceComponent);	22✔
135
136	const ExpandArtifactComponent = ({ toggleHelptips }) => (	22✔
137	<MenderTooltipClickable	3✔
138	className="tooltip help"
139	title={
140	<>
141	<h3>Device type compatibility</h3>
142	<hr />
143	<p>
144	Mender Artifacts have <b>Device types compatible</b> as part of their metadata. All devices report which device type they are, as part of their
145	inventory information. During a deployment, Mender makes sure that a device will only download and install an Artifact it is compatible with.
146	</p>
147	<p>You can click on each Artifact in the Release to expand the row and view more information about it.</p>
148	<p>
149	For more information on how to specify the device type compatibility and other artifact metadata,{' '}
150	<DocsLink path="artifact-creation/create-an-artifact" title="see the documentation" />.
151	</p>
152	<HideHelptipsButton toggleHelptips={toggleHelptips} />
153	</>
154	}
155	>
156	<HelpIcon />
157	</MenderTooltipClickable>
158	);
159	export const ExpandArtifact = connect(mapStateToProps, actionCreators)(ExpandArtifactComponent);	22✔
160
161	const DeviceSupportTipComponent = () => (	22✔
162	<MenderTooltipClickable	4✔
163	className="tooltip help"
164	style={{ bottom: '2.5%', left: '88%' }}
165	title={
166	<p>
167	The steps in the guide should work on most operating systems in the Debian family (e.g. Debian, Ubuntu, Raspberry Pi OS) and devices based on ARMv6 or
168	newer (e.g. Raspberry Pi 2/3/4, Beaglebone). Visit <DocsLink path="overview/device-support" title="our documentation" /> for more information about
169	device support.
170	</p>
171	}
172	>
173	<HelpIcon />
174	</MenderTooltipClickable>
175	);
176
177	export const DeviceSupportTip = connect(mapStateToProps, actionCreators)(DeviceSupportTipComponent);	22✔
178
179	const ConfigureTimezoneTipComponent = ({ anchor, device, toggleHelptips }) => {	22✔
180	const { attributes = {} } = device;	1!
181	if (!['qemux86-64', 'raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {	2!
182	return null;	×
183	}
184	return (	1✔
185	<MenderTooltipClickable
186	className="fadeIn tooltip help"
187	style={anchor}
188	title={
189	<>
190	To see the effects of applying a configuration to your device you can set one of the below values to modify the timezone of your device. While all
191	values from <i>timedatectl list-timezones</i> will work, to easily see the impact of the changed value you can use one of the following values:
192	<ul>
193	<li>Europe/Oslo</li>
194	<li>America/Los_Angeles</li>
195	<li>Asia/Tokyo</li>
196	</ul>
197	Once the configuration has been applied you can see the effect by opening the Remote Terminal to the device and executing the <i>date</i> command.
198	<HideHelptipsButton toggleHelptips={toggleHelptips} />
199	</>
200	}
201	>
202	<HelpIcon />
203	</MenderTooltipClickable>
204	);
205	};
206
207	export const ConfigureTimezoneTip = connect(mapStateToProps, actionCreators)(ConfigureTimezoneTipComponent);	22✔
208
209	const ConfigureRaspberryLedComponent = ({ anchor, device, setSnackbar, toggleHelptips }) => {	22✔
210	const { attributes = {} } = device;	1!
211	if (!['raspberry', 'rpi'].some(type => attributes.device_type?.some(deviceType => deviceType.startsWith(type)))) {	1!
212	return null;	×
213	}
214	return (	1✔
215	<MenderTooltipClickable
216	className="fadeIn tooltip help"
217	style={anchor}
218	title={
219	<>
220	To see the effects of applying a configuration to your device you can set one of the below values to modify the behaviour of your Raspberry Pi green
221	status LED
222	<ConfigurationObject
223	className="margin-top-small margin-bottom-small"
224	config={{
225	mmc0: 'The default, which blinks the led on storage activity',
226	on: 'Turn on the light permanently',
227	off: 'Turn off the light permanently',
228	heartbeat: 'Enable heartbeat blinking'
229	}}
230	compact
231	setSnackbar={setSnackbar}
232	/>
233	There are other possible values, but we won't advertise them here. See
234	<a href="http://www.d3noob.org/2020/07/controlling-activity-led-on-raspberry-pi.html" target="_blank" rel="noopener noreferrer">
235	this blog post
236	</a>{' '}
237	or{' '}
238	<a href="https://www.raspberrypi.org/forums/viewtopic.php?t=273194#p1658930" target="_blank" rel="noopener noreferrer">
239	in the Raspberry Pi forums
240	</a>{' '}
241	for more information.
242	<HideHelptipsButton toggleHelptips={toggleHelptips} />
243	</>
244	}
245	>
246	<HelpIcon />
247	</MenderTooltipClickable>
248	);
249	};
250
251	export const ConfigureRaspberryLedTip = connect(mapStateToProps, actionCreators)(ConfigureRaspberryLedComponent);	22✔
252
253	const ConfigureAddOnTipComponent = () => (	22✔
254	<MenderTooltipClickable	1✔
255	className="tooltip help"
256	style={{ top: '10%', left: '75%' }}
257	title={
258	<p>
259	Mender deploys the configuration attributes using the same mechanisms as software updates. The configuration is stored as a JSON file at
260	<code>/var/lib/mender-configure/device-config.json</code> on the device and then all the scripts in{' '}
261	<code>/usr/lib/mender-configure/apply-device-config.d/</code> are executed to apply the configuration attributes. To add a new configuration attribute,
262	you simply need to input it in the UI and add a script to that directory that applies it accordingly. Read more about how it works in the{' '}
263	<DocsLink path="add-ons/configure" title="Configure documentation" />.
264	</p>
265	}
266	>
267	<HelpIcon />
268	</MenderTooltipClickable>
269	);
270
271	export const ConfigureAddOnTip = connect(mapStateToProps, actionCreators)(ConfigureAddOnTipComponent);	22✔
272
273	export const NameTagTip = () => (	22✔
274	<MenderTooltip	×
275	arrow
276	title={
277	<>
278	The <i>Name</i> tag will be available as a device indentifier too.
279	</>
280	}
281	>
282	<div className="tooltip help" style={{ top: '15%', left: '85%' }}>
283	<HelpIcon />
284	</div>
285	</MenderTooltip>
286	);

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