app/frontend/comments/vote_button_component.test.tsx in decidim-comments-0.21.0 vs app/frontend/comments/vote_button_component.test.tsx in decidim-comments-0.22.0

@@ -11,47 +11,53 @@
     voteAction.calls.reset();
     preventDefault.calls.reset();
   });
 
   it("should render the number of votes passed as a prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find("button").text()).toMatch(/10/);
   });
 
   it("should render a button with the given buttonClassName", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find("button.vote-button").exists()).toBeTruthy();
   });
 
   it("should render a Icon component with the correct name prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     expect(wrapper.find(Icon).prop("name")).toEqual("vote-icon");
   });
 
+  it("should render a button with the text as title attribute and screen reader visible element", () => {
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
+    expect(wrapper.find("button").prop("title")).toBe("Test");
+    expect(wrapper.find("button span.show-for-sr").text()).toEqual("Test");
+  });
+
   it("should call the voteAction prop on click", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={true} />);
     wrapper.find("button").simulate("click");
     expect(voteAction).toHaveBeenCalled();
   });
 
   it("should disable the button based on the disabled prop", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={true} userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} userLoggedIn={true} />);
     expect(wrapper.find("button").props()).toHaveProperty("disabled");
   });
 
   it("should render a button with the given selectedClass", () => {
-    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" userLoggedIn={true} />);
+    const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} disabled={true} selectedClass="is-vote-selected" userLoggedIn={true} />);
     expect(wrapper.find(".is-vote-selected").exists()).toBeTruthy();
   });
 
   describe("when userLoggedIn prop is false", () => {
     it("should add data-open prop as 'loginModal' to the button", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={false} />);
+      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
       expect(wrapper.find("button").prop("data-open")).toBe("loginModal");
     });
 
     it("should call the event preventDefault method", () => {
-      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" voteAction={voteAction} userLoggedIn={false} />);
+      const wrapper = shallow(<VoteButton votes={10} buttonClassName="vote-button" iconName="vote-icon" text="Test" voteAction={voteAction} userLoggedIn={false} />);
       wrapper.find("button").simulate("click", { preventDefault });
       expect(preventDefault).toHaveBeenCalled();
     });
   });
 });