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

83.33

/src/js/components/helptips/onboardingtips.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 from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

import { ArrowUpward as ArrowUpwardIcon, Close as CloseIcon, Schedule as HelpIcon } from '@mui/icons-material';
import { IconButton } from '@mui/material';

import { bindActionCreators } from 'redux';

import { setShowDismissOnboardingTipsDialog } from '../../actions/onboardingActions';
import { setShowConnectingDialog } from '../../actions/userActions';
import { ALL_DEVICES } from '../../constants/deviceConstants';
import { MenderTooltipClickable } from '../common/mendertooltip';

export const WelcomeSnackTip = React.forwardRef(({ progress, setSnackbar }, ref) => {
  const onClose = () => setSnackbar('');
  const messages = {
    1: (
      <div>
        Welcome to Mender! Follow the{' '}
        <div className="onboard-icon">
          <ArrowUpwardIcon />
        </div>{' '}
        tutorial tips on screen to:
      </div>
    ),
    2: <div>Next up</div>,
    3: <div>Next up</div>,
    4: <div>Success!</div>
  };
  return (
    <div className="onboard-snack" ref={ref}>
      <IconButton onClick={onClose} size="large">
        <CloseIcon fontSize="small" />
      </IconButton>
      <div className="flexbox">
        {messages[progress]}
        <ol>
          {['Connect a device', 'Deploy an Application Update', 'Create your own Release and deploy it'].map((item, index) => {
            let classNames = '';
            if (index < progress) {
              classNames = 'bold';
              if (index < progress - 1) {
                classNames = 'completed';
              }
            }
            return (
              <li className={classNames} key={`onboarding-step-${index}`}>
                {index + 1}. {item}
              </li>
            );
          })}
        </ol>
      </div>
    </div>
  );
});
WelcomeSnackTip.displayName = 'WelcomeSnackTip';

const DevicePendingTipComponent = ({ setShowConnectingDialog, setShowDismissOnboardingTipsDialog }) => (
  <div style={{ display: 'grid', placeItems: 'center' }}>
    <MenderTooltipClickable
      onboarding
      title={
        <>
          <p>It may take a few moments before your device appears.</p>
          <b className="clickable" onClick={() => setShowConnectingDialog(true)}>
            Open the tutorial
          </b>{' '}
          again or <Link to="/help/get-started">go to the help pages</Link> if you have problems.
          <div className="flexbox">
            <div style={{ flexGrow: 1 }} />
            <b className="clickable" onClick={() => setShowDismissOnboardingTipsDialog(true)}>
              Dismiss
            </b>
          </div>
        </>
      }
    >
      <div className="onboard-icon">
        <HelpIcon />
      </div>
    </MenderTooltipClickable>
  </div>
);

const mappedActionCreators = dispatch => {
  return bindActionCreators({ setShowConnectingDialog, setShowDismissOnboardingTipsDialog }, dispatch);
};

export const DevicePendingTip = connect(null, mappedActionCreators)(DevicePendingTipComponent);

export const GetStartedTip = () => <div>Click here to get started!</div>;

export const DashboardOnboardingState = () => (
  <div>This should be your device, asking for permission to join the server. Inspect its identity details, then check it to accept it!</div>
);

export const DevicesPendingAcceptingOnboarding = () => <div>If you recognize this device as your own, you can accept it</div>;

export const DashboardOnboardingPendings = () => <div>Next accept your device</div>;

export const DevicesAcceptedOnboarding = () => (
  <div>
    <b>Good job! Your first device is connected!</b>
    <p>
      Your device is now <b>accepted</b>! It&apos;s now going to share device details with the server.
    </p>
    Click to expand the device and see more
  </div>
);

export const ApplicationUpdateReminderTip = () => (
  <div>
    <b>Deploy your first Application update</b>
    <p>
      To continue to make a demo deployment to this device click the <Link to="/releases">Releases</Link> tab
    </p>
  </div>
);

export const UploadPreparedArtifactTip = ({ demoArtifactLink }) => (
  <div>
    Download our prepared demo Artifact from <a href={demoArtifactLink}>here</a> to upload it to your profile.
  </div>
);

export const ArtifactIncludedOnboarding = ({ artifactIncluded }) => (
  <div>
    {artifactIncluded ? 'We have included' : 'Now you have'} a Mender artifact with a simple Application update for you to test with.
    <p>Click on it for more details.</p>
  </div>
);

export const ArtifactIncludedDeployOnboarding = () => <div>Let&apos;s deploy this Release to your device now</div>;

export const SchedulingArtifactSelection = ({ selectedRelease }) => <div>{`Select the ${selectedRelease.Name} release we included.`}</div>;

export const SchedulingAllDevicesSelection = () => (
  <div>
    Select &apos;All devices&apos; for now.<p>You can learn how to create device groups later.</p>
  </div>
);

export const SchedulingGroupSelection = ({ createdGroup }) => <div>{`Select the ${createdGroup} device group you just made.`}</div>;

export const SchedulingReleaseToDevices = ({ selectedDevice, selectedGroup, selectedRelease }) => (
  <div>{`Create the deployment! This will deploy the ${selectedRelease.Name} Artifact to ${
    selectedDevice ? selectedDevice.id : selectedGroup || ALL_DEVICES
  }`}</div>
);

export const DeploymentsInprogress = () => <div>Your deployment is in progress. Click to view a report</div>;

export const DeploymentsPast = () => <div>Your deployment has finished, click here to view it</div>;

export const DeploymentsPastCompletedFailure = () => (
  <div>Your deployment has finished, but it looks like there was a problem. Click to view the deployment report, where you can see the error log.</div>
);

export const UploadNewArtifactTip = ({ setShowCreateArtifactDialog }) => (
  <div>
    Click &apos;Upload&apos; to upload the file and create your new Release.
    <p>
      You can <a onClick={() => setShowCreateArtifactDialog(true)}>view the instructions again</a> if you need help creating the <i>index.html</i> file.
    </p>
  </div>
);

export const UploadNewArtifactDialogUpload = () => (
  <div>
    Drag or select your new <i>index.html</i> file here to upload it.
  </div>
);

export const UploadNewArtifactDialogDestination = () => (
  <div>
    We have prefilled this for you, for the demo - it is the destination on your device where the new <i>index.html</i> file will be installed.
  </div>
);

export const UploadNewArtifactDialogDeviceType = () => (
  <div>
    Enter the device types this will be compatible with. For the demo, you just need to select the device type of your demo device.
    <br />
    Then click &apos;Next&apos; below.
  </div>
);

export const UploadNewArtifactDialogClick = () => <div>Now click &apos;Upload Artifact&apos; to finish this step!</div>;

export const UploadNewArtifactDialogReleaseName = () => (
  <div>Now name your Release: for the demo you could call it something like &quot;hello-world&quot;.</div>
);

export const ArtifactModifiedOnboarding = () => (
  <div>
    Your uploaded Artifact is now part of a new &apos;Release&apos;.
    <p>Now create a deployment with this Release!</p>
  </div>
);

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 from 'react';
15	import { connect } from 'react-redux';
16	import { Link } from 'react-router-dom';
17
18	import { ArrowUpward as ArrowUpwardIcon, Close as CloseIcon, Schedule as HelpIcon } from '@mui/icons-material';
19	import { IconButton } from '@mui/material';
20
21	import { bindActionCreators } from 'redux';
22
23	import { setShowDismissOnboardingTipsDialog } from '../../actions/onboardingActions';
24	import { setShowConnectingDialog } from '../../actions/userActions';
25	import { ALL_DEVICES } from '../../constants/deviceConstants';
26	import { MenderTooltipClickable } from '../common/mendertooltip';
27
28	export const WelcomeSnackTip = React.forwardRef(({ progress, setSnackbar }, ref) => {	187✔
29	const onClose = () => setSnackbar('');	1✔
30	const messages = {	1✔
31	1: (
32	<div>
33	Welcome to Mender! Follow the{' '}
34	<div className="onboard-icon">
35	<ArrowUpwardIcon />
36	</div>{' '}
37	tutorial tips on screen to:
38	</div>
39	),
40	2: <div>Next up</div>,
41	3: <div>Next up</div>,
42	4: <div>Success!</div>
43	};
44	return (	1✔
45	<div className="onboard-snack" ref={ref}>
46	<IconButton onClick={onClose} size="large">
47	<CloseIcon fontSize="small" />
48	</IconButton>
49	<div className="flexbox">
50	{messages[progress]}
51	<ol>
52	{['Connect a device', 'Deploy an Application Update', 'Create your own Release and deploy it'].map((item, index) => {
53	let classNames = '';	3✔
54	if (index < progress) {	3!
55	classNames = 'bold';	×
56	if (index < progress - 1) {	×
57	classNames = 'completed';	×
58	}
59	}
60	return (	3✔
61	<li className={classNames} key={`onboarding-step-${index}`}>
62	{index + 1}. {item}
63	</li>
64	);
65	})}
66	</ol>
67	</div>
68	</div>
69	);
70	});
71	WelcomeSnackTip.displayName = 'WelcomeSnackTip';	187✔
72
73	const DevicePendingTipComponent = ({ setShowConnectingDialog, setShowDismissOnboardingTipsDialog }) => (	187✔
74	<div style={{ display: 'grid', placeItems: 'center' }}>	1✔
75	<MenderTooltipClickable
76	onboarding
77	title={
78	<>
79	<p>It may take a few moments before your device appears.</p>
80	<b className="clickable" onClick={() => setShowConnectingDialog(true)}>	×
81	Open the tutorial
82	</b>{' '}
83	again or <Link to="/help/get-started">go to the help pages</Link> if you have problems.
84	<div className="flexbox">
85	<div style={{ flexGrow: 1 }} />
86	<b className="clickable" onClick={() => setShowDismissOnboardingTipsDialog(true)}>	×
87	Dismiss
88	</b>
89	</div>
90	</>
91	}
92	>
93	<div className="onboard-icon">
94	<HelpIcon />
95	</div>
96	</MenderTooltipClickable>
97	</div>
98	);
99
100	const mappedActionCreators = dispatch => {	187✔
101	return bindActionCreators({ setShowConnectingDialog, setShowDismissOnboardingTipsDialog }, dispatch);	1✔
102	};
103
104	export const DevicePendingTip = connect(null, mappedActionCreators)(DevicePendingTipComponent);	187✔
105
106	export const GetStartedTip = () => <div>Click here to get started!</div>;	187✔
107
108	export const DashboardOnboardingState = () => (	187✔
109	<div>This should be your device, asking for permission to join the server. Inspect its identity details, then check it to accept it!</div>	1✔
110	);
111
112	export const DevicesPendingAcceptingOnboarding = () => <div>If you recognize this device as your own, you can accept it</div>;	187✔
113
114	export const DashboardOnboardingPendings = () => <div>Next accept your device</div>;	187✔
115
116	export const DevicesAcceptedOnboarding = () => (	187✔
117	<div>	1✔
118	<b>Good job! Your first device is connected!</b>
119	<p>
120	Your device is now <b>accepted</b>! It's now going to share device details with the server.
121	</p>
122	Click to expand the device and see more
123	</div>
124	);
125
126	export const ApplicationUpdateReminderTip = () => (	187✔
127	<div>	1✔
128	<b>Deploy your first Application update</b>
129	<p>
130	To continue to make a demo deployment to this device click the <Link to="/releases">Releases</Link> tab
131	</p>
132	</div>
133	);
134
135	export const UploadPreparedArtifactTip = ({ demoArtifactLink }) => (	187✔
136	<div>	1✔
137	Download our prepared demo Artifact from <a href={demoArtifactLink}>here</a> to upload it to your profile.
138	</div>
139	);
140
141	export const ArtifactIncludedOnboarding = ({ artifactIncluded }) => (	187✔
142	<div>	1✔
143	{artifactIncluded ? 'We have included' : 'Now you have'} a Mender artifact with a simple Application update for you to test with.	1!
144	<p>Click on it for more details.</p>
145	</div>
146	);
147
148	export const ArtifactIncludedDeployOnboarding = () => <div>Let's deploy this Release to your device now</div>;	187✔
149
150	export const SchedulingArtifactSelection = ({ selectedRelease }) => <div>{`Select the ${selectedRelease.Name} release we included.`}</div>;	187✔
151
152	export const SchedulingAllDevicesSelection = () => (	187✔
153	<div>	1✔
154	Select 'All devices' for now.<p>You can learn how to create device groups later.</p>
155	</div>
156	);
157
158	export const SchedulingGroupSelection = ({ createdGroup }) => <div>{`Select the ${createdGroup} device group you just made.`}</div>;	187✔
159
160	export const SchedulingReleaseToDevices = ({ selectedDevice, selectedGroup, selectedRelease }) => (	187✔
161	<div>{`Create the deployment! This will deploy the ${selectedRelease.Name} Artifact to ${	1✔
162	selectedDevice ? selectedDevice.id : selectedGroup \|\| ALL_DEVICES	3!
163	}`}</div>
164	);
165
166	export const DeploymentsInprogress = () => <div>Your deployment is in progress. Click to view a report</div>;	187✔
167
168	export const DeploymentsPast = () => <div>Your deployment has finished, click here to view it</div>;	187✔
169
170	export const DeploymentsPastCompletedFailure = () => (	187✔
171	<div>Your deployment has finished, but it looks like there was a problem. Click to view the deployment report, where you can see the error log.</div>	1✔
172	);
173
174	export const UploadNewArtifactTip = ({ setShowCreateArtifactDialog }) => (	187✔
175	<div>	1✔
176	Click 'Upload' to upload the file and create your new Release.
177	<p>
178	You can <a onClick={() => setShowCreateArtifactDialog(true)}>view the instructions again</a> if you need help creating the <i>index.html</i> file.	×
179	</p>
180	</div>
181	);
182
183	export const UploadNewArtifactDialogUpload = () => (	187✔
184	<div>	1✔
185	Drag or select your new <i>index.html</i> file here to upload it.
186	</div>
187	);
188
189	export const UploadNewArtifactDialogDestination = () => (	187✔
190	<div>	1✔
191	We have prefilled this for you, for the demo - it is the destination on your device where the new <i>index.html</i> file will be installed.
192	</div>
193	);
194
195	export const UploadNewArtifactDialogDeviceType = () => (	187✔
196	<div>	1✔
197	Enter the device types this will be compatible with. For the demo, you just need to select the device type of your demo device.
198	<br />
199	Then click 'Next' below.
200	</div>
201	);
202
203	export const UploadNewArtifactDialogClick = () => <div>Now click 'Upload Artifact' to finish this step!</div>;	187✔
204
205	export const UploadNewArtifactDialogReleaseName = () => (	187✔
206	<div>Now name your Release: for the demo you could call it something like "hello-world".</div>	1✔
207	);
208
209	export const ArtifactModifiedOnboarding = () => (	187✔
210	<div>	1✔
211	Your uploaded Artifact is now part of a new 'Release'.
212	<p>Now create a deployment with this Release!</p>
213	</div>
214	);

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