feat(linter): Refine test for no-distracting-elements (#1824)

Added support for component settings for eslint-plugin-jsx-a11y
no-distracting-elements rule based on
https://github.com/oxc-project/oxc/pull/1668 PR.
Updated the test cases.
This commit is contained in:
Tapan Prakash 2023-12-26 17:45:37 +05:30 committed by GitHub
parent c1bac34c76
commit 0280e06f59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 49 additions and 16 deletions

View file

@ -6,7 +6,7 @@ use oxc_span::Span;
use oxc_diagnostics::miette::{self, Diagnostic};
use crate::{rule::Rule, LintContext};
use crate::{rule::Rule, utils::get_element_type, LintContext};
#[derive(Debug, Error, Diagnostic)]
#[error(
@ -55,8 +55,11 @@ impl Rule for NoDistractingElements {
fn run<'a>(&self, node: &AstNode<'a>, ctx: &LintContext<'a>) {
let AstKind::JSXOpeningElement(jsx_el) = node.kind() else { return };
let JSXElementName::Identifier(iden) = &jsx_el.name else { return };
let Some(element_type) = get_element_type(ctx, jsx_el) else {
return;
};
let name = iden.name.as_str();
let name = element_type.as_str();
if let "marquee" | "blink" = name {
ctx.diagnostic(NoDistractingElementsDiagnostic(iden.span));
@ -67,25 +70,41 @@ impl Rule for NoDistractingElements {
#[test]
fn test() {
use crate::tester::Tester;
fn config() -> serde_json::Value {
serde_json::json!([2,{
"ignoreNonDOM": true
}])
}
fn settings() -> serde_json::Value {
serde_json::json!({
"jsx-a11y": {
"components": {
"Blink": "blink",
"Marquee": "marquee"
}
}
})
}
let pass = vec![
(r"<div />", None),
(r"<Marquee />", None),
(r"<div marquee />", None),
(r"<Blink />", None),
(r"<div blink />", None),
(r"<div />", None, None),
(r"<Marquee />", None, None),
(r"<div marquee />", None, None),
(r"<Blink />", None, None),
(r"<div blink />", None, None),
];
let fail = vec![
(r"<marquee />", None),
(r"<marquee {...props} />", None),
(r"<marquee lang={undefined} />", None),
(r"<blink />", None),
(r"<blink {...props} />", None),
(r"<blink foo={undefined} />", None),
(r"<marquee />", None, None),
(r"<marquee {...props} />", None, None),
(r"<marquee lang={undefined} />", None, None),
(r"<blink />", None, None),
(r"<blink {...props} />", None, None),
(r"<blink foo={undefined} />", None, None),
(r"<Blink />", Some(config()), Some(settings())),
(r"<Marquee />", Some(config()), Some(settings())),
];
Tester::new(NoDistractingElements::NAME, pass, fail)
.with_jsx_a11y_plugin(true)
.test_and_snapshot();
Tester::new_with_settings(NoDistractingElements::NAME, pass, fail).test_and_snapshot();
}

View file

@ -45,4 +45,18 @@ expression: no_distracting_elements
╰────
help: Replace the <marquee> or <blink> element with alternative, more accessible ways to achieve your desired visual effects.
⚠ eslint-plugin-jsx-a11y(no-distracting-elements): Do not use <marquee> or <blink> elements as they can create visual accessibility issues and are deprecated.
╭─[no_distracting_elements.tsx:1:1]
1 │ <Blink />
· ─────
╰────
help: Replace the <marquee> or <blink> element with alternative, more accessible ways to achieve your desired visual effects.
⚠ eslint-plugin-jsx-a11y(no-distracting-elements): Do not use <marquee> or <blink> elements as they can create visual accessibility issues and are deprecated.
╭─[no_distracting_elements.tsx:1:1]
1 │ <Marquee />
· ───────
╰────
help: Replace the <marquee> or <blink> element with alternative, more accessible ways to achieve your desired visual effects.