Gathering detailed insights and metrics for @fluentui/react-conformance
Gathering detailed insights and metrics for @fluentui/react-conformance
Gathering detailed insights and metrics for @fluentui/react-conformance
Gathering detailed insights and metrics for @fluentui/react-conformance
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
npm install @fluentui/react-conformance
Typescript
Module System
Node Version
NPM Version
@fluentui/react-monaco-editor v1.7.348
Updated on Jul 11, 2025
@fluentui/react-docsite-components v8.13.230
Updated on Jul 11, 2025
@fluentui/react-charting v5.24.12
Updated on Jul 11, 2025
@fluentui/chart-utilities v1.1.21
Updated on Jul 11, 2025
@fluentui/codemods v8.4.28
Updated on Jul 10, 2025
@fluentui/react-tooltip v9.7.6
Updated on Jul 07, 2025
TypeScript (95%)
JavaScript (2.07%)
MDX (1.96%)
SCSS (0.59%)
HTML (0.21%)
CSS (0.17%)
Shell (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
NOASSERTION License
19,400 Stars
19,659 Commits
2,813 Forks
286 Watchers
108 Branches
908 Contributors
Updated on Jul 13, 2025
Latest Version
0.20.0
Package Id
@fluentui/react-conformance@0.20.0
Unpacked Size
247.09 kB
Size
55.54 kB
File Count
31
NPM Version
10.8.2
Node Version
20.19.0
Published on
May 14, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
A tool used to run standardized tests which follow Fluent UI React's component guidelines. It also can be extended and allows for adding your own conformance tests.
Add isConformant within your package and configure any globally applied test options.
my-proj/
├─ common/
│ ├─ isConformant.ts 👈
├─ src/
├─ node_modules/
├─ package.json
1import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; 2import type { IsConformantOptions } from '@fluentui/react-conformance'; 3 4export function isConformant<TProps = {}>( 5 testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string }, 6) { 7 const defaultOptions: Partial<IsConformantOptions<TProps>> = { 8 componentPath: require.main?.filename.replace('.test', ''), 9 // 👆 Put any required test options here ( ex: componentPath, asPropHandlesRef, ... ) 10 }; 11 12 baseIsConformant(defaultOptions, testInfo); 13}
Within your component's test file:
my-proj/
├─ common/
├─ src/
│ ├─ components
│ │ ├─ Foo
│ │ │ ├─ ...
│ │ │ ├─ Foo.test 👈
├─ node_modules/
├─ package.json
Import the isConformant file that you just created:
1import { isConformant } from '../../common/isConformant';
2
3describe('Foo', () => {
4 isConformant({
5 Component: Foo,
6 displayName: 'Foo',
7 disabledTests: [],
8 // 👆 For tests that don't fit the guidelines of your component you can disable them.
9 });
10});
By default isConformant
inspects a component's immediate parent container. Because React Portals are typically rendered outside this container components using Portals will fail conformance. For example the component-has-static-classnames-object
tests inspect the rendered DOM for certain class names but, with default settings, will fail for anything rendered into a Portal.
Portals can be inspected by providing a getTargetElement
function to isConformant
.
1
2// Assume that `Foo` is a component that renders a Portal.
3// It takes a prop called `idForPortal` that renders the
4// provided id in the Portal, allowing it to be looked up
5// via `getPortalElement()`.
6
7const getPortalElement = (result, attr) => {
8 return result.baseElement.querySelector("#portal-id");
9};
10
11describe('Foo', () => {
12 isConformant({
13 Component: Foo,
14 displayName: 'Foo'
15 requiredProps: { idForPortal: "portal-id" },
16 getTargetElement: getPortalElement
17 });
18});
No vulnerabilities found.
Reason
30 commit(s) out of 30 and 22 issue activity out of 30 found in the last 90 days -- score normalized to 10
Reason
no vulnerabilities detected
Reason
update tool detected
Details
Reason
security policy file detected
Details
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
GitHub code reviews found for 28 commits out of the last 30 -- score normalized to 9
Details
Reason
branch protection is not maximal on development and all release branches
Details
Reason
dependency not pinned by hash detected -- score normalized to 5
Details
Reason
no badge detected
Reason
dangerous workflow patterns detected
Details
Reason
non read-only tokens detected in GitHub workflows
Details
Reason
project is not fuzzed
Score
Last Scanned on 2022-08-15
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More