[build] upgrade eslint to 9.37.0 (#88)

Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/88
Co-authored-by: Zoë Bijl <moiety@noreply.codeberg.org>
Co-committed-by: Zoë Bijl <moiety@noreply.codeberg.org>

app/javascript/mastodon/components/__tests__/autosuggest_emoji-test.jsx

@@ -1,12 +1,12 @@
-import renderer from 'react-test-renderer';
+import renderer from "react-test-renderer";
 
-import AutosuggestEmoji from '../autosuggest_emoji';
+import AutosuggestEmoji from "../autosuggest_emoji";
 
-describe('<AutosuggestEmoji />', () => {
-  it('renders native emoji', () => {
+describe("<AutosuggestEmoji />", () => {
+  it("renders native emoji", () => {
     const emoji = {
-      native: '💙',
-      colons: ':foobar:',
+      native: "💙",
+      colons: ":foobar:",
     };
     const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
     const tree      = component.toJSON();
@@ -14,12 +14,12 @@ describe('<AutosuggestEmoji />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders emoji with custom url', () => {
+  it("renders emoji with custom url", () => {
     const emoji = {
       custom: true,
-      imageUrl: 'http://example.com/emoji.png',
-      native: 'foobar',
-      colons: ':foobar:',
+      imageUrl: "http://example.com/emoji.png",
+      native: "foobar",
+      colons: ":foobar:",
     };
     const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
     const tree      = component.toJSON();

app/javascript/mastodon/components/__tests__/avatar-test.jsx

@@ -1,22 +1,22 @@
-import { fromJS } from 'immutable';
+import { fromJS } from "immutable";
 
-import renderer from 'react-test-renderer';
+import renderer from "react-test-renderer";
 
-import { Avatar } from '../avatar';
+import { Avatar } from "../avatar";
 
-describe('<Avatar />', () => {
+describe("<Avatar />", () => {
   const account = fromJS({
-    username: 'alice',
-    acct: 'alice',
-    display_name: 'Alice',
-    avatar: '/animated/alice.gif',
-    avatar_static: '/static/alice.jpg',
+    username: "alice",
+    acct: "alice",
+    display_name: "Alice",
+    avatar: "/animated/alice.gif",
+    avatar_static: "/static/alice.jpg",
   });
 
   const size     = 100;
 
-  describe('Autoplay', () => {
-    it('renders a animated avatar', () => {
+  describe("Autoplay", () => {
+    it("renders a animated avatar", () => {
       const component = renderer.create(<Avatar account={account} animate size={size} />);
       const tree      = component.toJSON();
 
@@ -24,8 +24,8 @@ describe('<Avatar />', () => {
     });
   });
 
-  describe('Still', () => {
-    it('renders a still avatar', () => {
+  describe("Still", () => {
+    it("renders a still avatar", () => {
       const component = renderer.create(<Avatar account={account} size={size} />);
       const tree      = component.toJSON();
 

app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx

@@ -1,27 +1,27 @@
-import { fromJS } from 'immutable';
+import { fromJS } from "immutable";
 
-import renderer from 'react-test-renderer';
+import renderer from "react-test-renderer";
 
-import { AvatarOverlay } from '../avatar_overlay';
+import { AvatarOverlay } from "../avatar_overlay";
 
-describe('<AvatarOverlay', () => {
+describe("<AvatarOverlay", () => {
   const account = fromJS({
-    username: 'alice',
-    acct: 'alice',
-    display_name: 'Alice',
-    avatar: '/animated/alice.gif',
-    avatar_static: '/static/alice.jpg',
+    username: "alice",
+    acct: "alice",
+    display_name: "Alice",
+    avatar: "/animated/alice.gif",
+    avatar_static: "/static/alice.jpg",
   });
 
   const friend = fromJS({
-    username: 'eve',
-    acct: 'eve@blackhat.lair',
-    display_name: 'Evelyn',
-    avatar: '/animated/eve.gif',
-    avatar_static: '/static/eve.jpg',
+    username: "eve",
+    acct: "eve@blackhat.lair",
+    display_name: "Evelyn",
+    avatar: "/animated/eve.gif",
+    avatar_static: "/static/eve.jpg",
   });
 
-  it('renders a overlay avatar', () => {
+  it("renders a overlay avatar", () => {
     const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
     const tree      = component.toJSON();
 

app/javascript/mastodon/components/__tests__/button-test.jsx

@@ -1,48 +1,48 @@
-import { render, fireEvent, screen } from '@testing-library/react';
-import renderer from 'react-test-renderer';
+import { render, fireEvent, screen } from "@testing-library/react";
+import renderer from "react-test-renderer";
 
-import Button from '../button';
+import Button from "../button";
 
-describe('<Button />', () => {
-  it('renders a button element', () => {
+describe("<Button />", () => {
+  it("renders a button element", () => {
     const component = renderer.create(<Button />);
     const tree      = component.toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders the given text', () => {
-    const text      = 'foo';
+  it("renders the given text", () => {
+    const text      = "foo";
     const component = renderer.create(<Button text={text} />);
     const tree      = component.toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('handles click events using the given handler', () => {
+  it("handles click events using the given handler", () => {
     const handler = jest.fn();
     render(<Button onClick={handler}>button</Button>);
-    fireEvent.click(screen.getByText('button'));
+    fireEvent.click(screen.getByText("button"));
 
-    expect(handler.mock.calls.length).toEqual(1);
+    expect(handler.mock.calls).toHaveLength(1);
   });
 
-  it('does not handle click events if props.disabled given', () => {
+  it("does not handle click events if props.disabled given", () => {
     const handler = jest.fn();
     render(<Button onClick={handler} disabled>button</Button>);
-    fireEvent.click(screen.getByText('button'));
+    fireEvent.click(screen.getByText("button"));
 
-    expect(handler.mock.calls.length).toEqual(0);
+    expect(handler.mock.calls).toHaveLength(0);
   });
 
-  it('renders a disabled attribute if props.disabled given', () => {
+  it("renders a disabled attribute if props.disabled given", () => {
     const component = renderer.create(<Button disabled />);
     const tree      = component.toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders the children', () => {
+  it("renders the children", () => {
     const children  = <p>children</p>;
     const component = renderer.create(<Button>{children}</Button>);
     const tree      = component.toJSON();
@@ -50,8 +50,8 @@ describe('<Button />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders the props.text instead of children', () => {
-    const text      = 'foo';
+  it("renders the props.text instead of children", () => {
+    const text      = "foo";
     const children  = <p>children</p>;
     const component = renderer.create(<Button text={text}>{children}</Button>);
     const tree      = component.toJSON();
@@ -59,14 +59,14 @@ describe('<Button />', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders class="button--block" if props.block given', () => {
+  it("renders class=\"button--block\" if props.block given", () => {
     const component = renderer.create(<Button block />);
     const tree      = component.toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
-  it('adds class "button-secondary" if props.secondary given', () => {
+  it("adds class \"button-secondary\" if props.secondary given", () => {
     const component = renderer.create(<Button secondary />);
     const tree      = component.toJSON();
 

app/javascript/mastodon/components/__tests__/display_name-test.jsx

@@ -1,15 +1,15 @@
-import { fromJS }  from 'immutable';
+import { fromJS }  from "immutable";
 
-import renderer from 'react-test-renderer';
+import renderer from "react-test-renderer";
 
-import { DisplayName } from '../display_name';
+import { DisplayName } from "../display_name";
 
-describe('<DisplayName />', () => {
-  it('renders display name + account name', () => {
+describe("<DisplayName />", () => {
+  it("renders display name + account name", () => {
     const account = fromJS({
-      username: 'bar',
-      acct: 'bar@baz',
-      display_name_html: '<p>Foo</p>',
+      username: "bar",
+      acct: "bar@baz",
+      display_name_html: "<p>Foo</p>",
     });
     const component = renderer.create(<DisplayName account={account} />);
     const tree      = component.toJSON();

app/javascript/mastodon/components/__tests__/hashtag_bar.tsx

@@ -1,7 +1,7 @@
-import { fromJS } from 'immutable';
+import { fromJS } from "immutable";
 
-import type { StatusLike } from '../hashtag_bar';
-import { computeHashtagBarForStatus } from '../hashtag_bar';
+import  { type StatusLike } from "../hashtag_bar";
+import { computeHashtagBarForStatus } from "../hashtag_bar";
 
 function createStatus(
   content: string,
@@ -12,43 +12,43 @@ function createStatus(
   return fromJS({
     tags: hashtags.map((name) => ({ name })),
     contentHtml: content,
-    media_attachments: hasMedia ? ['fakeMedia'] : [],
+    media_attachments: hasMedia ? ["fakeMedia"] : [],
     spoiler_text: spoilerText,
   }) as unknown as StatusLike; // need to force the type here, as it is not properly defined
 }
 
-describe('computeHashtagBarForStatus', () => {
-  it('does nothing when there are no tags', () => {
-    const status = createStatus('<p>Simple text</p>', []);
+describe("computeHashtagBarForStatus", () => {
+  it("does nothing when there are no tags", () => {
+    const status = createStatus("<p>Simple text</p>", []);
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Simple text</p>"`,
+      "\"<p>Simple text</p>\"",
     );
   });
 
-  it('displays out of band hashtags in the bar', () => {
+  it("displays out of band hashtags in the bar", () => {
     const status = createStatus(
-      '<p>Simple text <a href="test">#hashtag</a></p>',
-      ['hashtag', 'test'],
+      "<p>Simple text <a href=\"test\">#hashtag</a></p>",
+      ["hashtag", "test"],
     );
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
-    expect(hashtagsInBar).toEqual(['test']);
+    expect(hashtagsInBar).toEqual(["test"]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Simple text <a href="test">#hashtag</a></p>"`,
+      "\"<p>Simple text <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 
-  it('does not truncate the contents when the last child is a text node', () => {
+  it("does not truncate the contents when the last child is a text node", () => {
     const status = createStatus(
-      'this is a #<a class="zrl" href="https://example.com/search?tag=test">test</a>. Some more text',
-      ['test'],
+      "this is a #<a class=\"zrl\" href=\"https://example.com/search?tag=test\">test</a>. Some more text",
+      ["test"],
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -56,29 +56,29 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"this is a #<a class="zrl" href="https://example.com/search?tag=test">test</a>. Some more text"`,
+      "\"this is a #<a class=\"zrl\" href=\"https://example.com/search?tag=test\">test</a>. Some more text\"",
     );
   });
 
-  it('extract tags from the last line', () => {
+  it("extract tags from the last line", () => {
     const status = createStatus(
-      '<p>Simple text</p><p><a href="test">#hashtag</a></p>',
-      ['hashtag'],
+      "<p>Simple text</p><p><a href=\"test\">#hashtag</a></p>",
+      ["hashtag"],
     );
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
-    expect(hashtagsInBar).toEqual(['hashtag']);
+    expect(hashtagsInBar).toEqual(["hashtag"]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Simple text</p>"`,
+      "\"<p>Simple text</p>\"",
     );
   });
 
-  it('does not include tags from content', () => {
+  it("does not include tags from content", () => {
     const status = createStatus(
-      '<p>Simple text with a <a href="test">#hashtag</a></p><p><a href="test">#hashtag</a></p>',
-      ['hashtag'],
+      "<p>Simple text with a <a href=\"test\">#hashtag</a></p><p><a href=\"test\">#hashtag</a></p>",
+      ["hashtag"],
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -86,14 +86,14 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Simple text with a <a href="test">#hashtag</a></p>"`,
+      "\"<p>Simple text with a <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 
-  it('works with one line status and hashtags', () => {
+  it("works with one line status and hashtags", () => {
     const status = createStatus(
-      '<p><a href="test">#test</a>. And another <a href="test">#hashtag</a></p>',
-      ['hashtag', 'test'],
+      "<p><a href=\"test\">#test</a>. And another <a href=\"test\">#hashtag</a></p>",
+      ["hashtag", "test"],
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -101,44 +101,44 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p><a href="test">#test</a>. And another <a href="test">#hashtag</a></p>"`,
+      "\"<p><a href=\"test\">#test</a>. And another <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 
-  it('de-duplicate accentuated characters with case differences', () => {
+  it("de-duplicate accentuated characters with case differences", () => {
     const status = createStatus(
-      '<p>Text</p><p><a href="test">#éaa</a> <a href="test">#Éaa</a></p>',
-      ['éaa'],
+      "<p>Text</p><p><a href=\"test\">#éaa</a> <a href=\"test\">#Éaa</a></p>",
+      ["éaa"],
     );
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
-    expect(hashtagsInBar).toEqual(['Éaa']);
+    expect(hashtagsInBar).toEqual(["Éaa"]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Text</p>"`,
+      "\"<p>Text</p>\"",
     );
   });
 
-  it('handles server-side normalized tags with accentuated characters', () => {
+  it("handles server-side normalized tags with accentuated characters", () => {
     const status = createStatus(
-      '<p>Text</p><p><a href="test">#éaa</a> <a href="test">#Éaa</a></p>',
-      ['eaa'], // The server may normalize the hashtags in the `tags` attribute
+      "<p>Text</p><p><a href=\"test\">#éaa</a> <a href=\"test\">#Éaa</a></p>",
+      ["eaa"], // The server may normalize the hashtags in the `tags` attribute
     );
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
-    expect(hashtagsInBar).toEqual(['Éaa']);
+    expect(hashtagsInBar).toEqual(["Éaa"]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Text</p>"`,
+      "\"<p>Text</p>\"",
     );
   });
 
-  it('does not display in bar a hashtag in content with a case difference', () => {
+  it("does not display in bar a hashtag in content with a case difference", () => {
     const status = createStatus(
-      '<p>Text <a href="test">#Éaa</a></p><p><a href="test">#éaa</a></p>',
-      ['éaa'],
+      "<p>Text <a href=\"test\">#Éaa</a></p><p><a href=\"test\">#éaa</a></p>",
+      ["éaa"],
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -146,14 +146,14 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>Text <a href="test">#Éaa</a></p>"`,
+      "\"<p>Text <a href=\"test\">#Éaa</a></p>\"",
     );
   });
 
-  it('does not modify a status with a line of hashtags only', () => {
+  it("does not modify a status with a line of hashtags only", () => {
     const status = createStatus(
-      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
-      ['test', 'hashtag'],
+      "<p><a href=\"test\">#test</a>  <a href=\"test\">#hashtag</a></p>",
+      ["test", "hashtag"],
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -161,14 +161,14 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>"`,
+      "\"<p><a href=\"test\">#test</a>  <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 
-  it('puts the hashtags in the bar if a status content has hashtags in the only line and has a media', () => {
+  it("puts the hashtags in the bar if a status content has hashtags in the only line and has a media", () => {
     const status = createStatus(
-      '<p>This is my content! <a href="test">#hashtag</a></p>',
-      ['hashtag'],
+      "<p>This is my content! <a href=\"test\">#hashtag</a></p>",
+      ["hashtag"],
       true,
     );
 
@@ -177,30 +177,30 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p>This is my content! <a href="test">#hashtag</a></p>"`,
+      "\"<p>This is my content! <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 
-  it('puts the hashtags in the bar if a status content is only hashtags and has a media', () => {
+  it("puts the hashtags in the bar if a status content is only hashtags and has a media", () => {
     const status = createStatus(
-      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
-      ['test', 'hashtag'],
+      "<p><a href=\"test\">#test</a>  <a href=\"test\">#hashtag</a></p>",
+      ["test", "hashtag"],
       true,
     );
 
     const { hashtagsInBar, statusContentProps } =
       computeHashtagBarForStatus(status);
 
-    expect(hashtagsInBar).toEqual(['test', 'hashtag']);
-    expect(statusContentProps.statusContent).toMatchInlineSnapshot(`""`);
+    expect(hashtagsInBar).toEqual(["test", "hashtag"]);
+    expect(statusContentProps.statusContent).toMatchInlineSnapshot("\"\"");
   });
 
-  it('does not use the hashtag bar if the status content is only hashtags, has a CW and a media', () => {
+  it("does not use the hashtag bar if the status content is only hashtags, has a CW and a media", () => {
     const status = createStatus(
-      '<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>',
-      ['test', 'hashtag'],
+      "<p><a href=\"test\">#test</a>  <a href=\"test\">#hashtag</a></p>",
+      ["test", "hashtag"],
       true,
-      'My CW text',
+      "My CW text",
     );
 
     const { hashtagsInBar, statusContentProps } =
@@ -208,7 +208,7 @@ describe('computeHashtagBarForStatus', () => {
 
     expect(hashtagsInBar).toEqual([]);
     expect(statusContentProps.statusContent).toMatchInlineSnapshot(
-      `"<p><a href="test">#test</a>  <a href="test">#hashtag</a></p>"`,
+      "\"<p><a href=\"test\">#test</a>  <a href=\"test\">#hashtag</a></p>\"",
     );
   });
 });