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

68.42

/src/js/components/devices/widgets/attribute-autocomplete.js

// Copyright 2022 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, { useCallback, useEffect, useRef, useState } from 'react';

// material ui
import { Autocomplete, TextField, createFilterOptions } from '@mui/material';

import { TIMEOUTS } from '../../../constants/appConstants';
import { getFilterLabelByKey } from './filters';

const textFieldStyle = { marginTop: 0, marginBottom: 15 };

const defaultScope = 'inventory';

const getOptionLabel = option => option.value || option.key || option;

const FilterOption = (props, option) => {
  let content = getOptionLabel(option);
  if (option.category === 'recently used') {
    content = (
      <div className="flexbox center-aligned space-between" style={{ width: '100%' }}>
        <div>{content}</div>
        <div className="muted slightly-smaller">({option.scope})</div>
      </div>
    );
  }
  return <li {...props}>{content}</li>;
};

const optionsFilter = createFilterOptions();

const filterOptions = (options, params) => {
  const filtered = optionsFilter(options, params);
  if (filtered.length !== 1 && params.inputValue !== '') {
    filtered.push({
      inputValue: params.inputValue,
      key: 'custom',
      value: `Use "${params.inputValue}"`,
      category: 'custom',
      priority: 99
    });
  }
  return filtered;
};

const defaultFilter = { key: '', scope: defaultScope };

export const AttributeAutoComplete = ({ attributes, disabled, filter = defaultFilter, label = 'Attribute', onRemove, onSelect }) => {
  const [key, setKey] = useState(filter.key); // this refers to the selected filter with key as the id
  const [options, setOptions] = useState([]);
  const [reset, setReset] = useState(true);
  const [scope, setScope] = useState(filter.scope);
  const timer = useRef();

  useEffect(() => {
    return () => {
      clearTimeout(timer.current);
    };
  }, []);

  useEffect(() => {
    setKey('');
    setScope(defaultScope);
    setOptions(attributes.sort((a, b) => a.priority - b.priority));
  }, [attributes.length, reset]);

  useEffect(() => {
    setKey(filter.key);
  }, [filter.key]);

  useEffect(() => {
    clearTimeout(timer.current);
    timer.current = setTimeout(() => onSelect({ key, scope }), TIMEOUTS.debounceDefault);
  }, [key, scope]);

  const updateFilterKey = (value, selectedScope) => {
    if (!value) {
      return removeFilter();
    }
    const { key = value, scope: fallbackScope } = attributes.find(filter => filter.key === value) ?? {};
    setKey(key);
    setScope(selectedScope || fallbackScope);
  };

  const removeFilter = useCallback(() => {
    if (key) {
      onRemove({ key, scope });
    }
    setReset(!reset);
  }, [key, onRemove, reset, setReset, scope]);

  return (
    <Autocomplete
      autoComplete
      autoHighlight
      autoSelect
      disabled={disabled}
      freeSolo
      filterSelectedOptions
      filterOptions={filterOptions}
      getOptionLabel={getOptionLabel}
      groupBy={option => option.category}
      renderOption={FilterOption}
      id="filter-selection"
      includeInputInList={true}
      onChange={(e, changedValue) => {
        const { inputValue, key = changedValue, scope } = changedValue || {};
        if (inputValue) {
          // only circumvent updateFilterKey if we deal with a custom attribute - those will be treated as inventory attributes
          setKey(inputValue);
          return setScope(defaultScope);
        }
        updateFilterKey(key, scope);
      }}
      options={options}
      renderInput={params => <TextField {...params} label={label} style={textFieldStyle} />}
      key={reset}
      value={getFilterLabelByKey(key, attributes)}
    />
  );
};

export default AttributeAutoComplete;

1	// Copyright 2022 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, { useCallback, useEffect, useRef, useState } from 'react';
15
16	// material ui
17	import { Autocomplete, TextField, createFilterOptions } from '@mui/material';
18
19	import { TIMEOUTS } from '../../../constants/appConstants';
20	import { getFilterLabelByKey } from './filters';
21
22	const textFieldStyle = { marginTop: 0, marginBottom: 15 };	13✔
23
24	const defaultScope = 'inventory';	13✔
25
26	const getOptionLabel = option => option.value \|\| option.key \|\| option;	292✔
27
28	const FilterOption = (props, option) => {	13✔
29	let content = getOptionLabel(option);	60✔
30	if (option.category === 'recently used') {	60!
31	content = (	×
32	<div className="flexbox center-aligned space-between" style={{ width: '100%' }}>
33	<div>{content}</div>
34	<div className="muted slightly-smaller">({option.scope})</div>
35	</div>
36	);
37	}
38	return <li {...props}>{content}</li>;	60✔
39	};
40
41	const optionsFilter = createFilterOptions();	13✔
42
43	const filterOptions = (options, params) => {	13✔
44	const filtered = optionsFilter(options, params);	9✔
45	if (filtered.length !== 1 && params.inputValue !== '') {	9✔
46	filtered.push({	5✔
47	inputValue: params.inputValue,
48	key: 'custom',
49	value: `Use "${params.inputValue}"`,
50	category: 'custom',
51	priority: 99
52	});
53	}
54	return filtered;	9✔
55	};
56
57	const defaultFilter = { key: '', scope: defaultScope };	13✔
58
59	export const AttributeAutoComplete = ({ attributes, disabled, filter = defaultFilter, label = 'Attribute', onRemove, onSelect }) => {	13!
60	const [key, setKey] = useState(filter.key); // this refers to the selected filter with key as the id	14✔
61	const [options, setOptions] = useState([]);	14✔
62	const [reset, setReset] = useState(true);	14✔
63	const [scope, setScope] = useState(filter.scope);	14✔
64	const timer = useRef();	14✔
65
66	useEffect(() => {	14✔
67	return () => {	4✔
68	clearTimeout(timer.current);	4✔
69	};
70	}, []);
71
72	useEffect(() => {	14✔
73	setKey('');	6✔
74	setScope(defaultScope);	6✔
75	setOptions(attributes.sort((a, b) => a.priority - b.priority));	28✔
76	}, [attributes.length, reset]);
77
78	useEffect(() => {	14✔
79	setKey(filter.key);	4✔
80	}, [filter.key]);
81
82	useEffect(() => {	14✔
83	clearTimeout(timer.current);	6✔
84	timer.current = setTimeout(() => onSelect({ key, scope }), TIMEOUTS.debounceDefault);	6✔
85	}, [key, scope]);
86
87	const updateFilterKey = (value, selectedScope) => {	14✔
88	if (!value) {	×
89	return removeFilter();	×
90	}
91	const { key = value, scope: fallbackScope } = attributes.find(filter => filter.key === value) ?? {};	×
92	setKey(key);	×
93	setScope(selectedScope \|\| fallbackScope);	×
94	};
95
96	const removeFilter = useCallback(() => {	14✔
97	if (key) {	×
98	onRemove({ key, scope });	×
99	}
100	setReset(!reset);	×
101	}, [key, onRemove, reset, setReset, scope]);
102
103	return (	14✔
104	<Autocomplete
105	autoComplete
106	autoHighlight
107	autoSelect
108	disabled={disabled}
109	freeSolo
110	filterSelectedOptions
111	filterOptions={filterOptions}
112	getOptionLabel={getOptionLabel}
113	groupBy={option => option.category}	60✔
114	renderOption={FilterOption}
115	id="filter-selection"
116	includeInputInList={true}
117	onChange={(e, changedValue) => {
118	const { inputValue, key = changedValue, scope } = changedValue \|\| {};	1!
119	if (inputValue) {	1!
120	// only circumvent updateFilterKey if we deal with a custom attribute - those will be treated as inventory attributes
121	setKey(inputValue);	1✔
122	return setScope(defaultScope);	1✔
123	}
124	updateFilterKey(key, scope);	×
125	}}
126	options={options}
127	renderInput={params => <TextField {...params} label={label} style={textFieldStyle} />}	25✔
128	key={reset}
129	value={getFilterLabelByKey(key, attributes)}
130	/>
131	);
132	};
133
134	export default AttributeAutoComplete;

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