- { reaction.icon ? (
) : (
{reaction.emoji}) }
-
{reaction.count}
+
+ { reaction.icon ? (
) : (
{reaction.emoji}) }
+
{reaction.count}
))
}
diff --git a/components/slack/index.js b/components/slack/index.js
index 7ccacd972c7..27a49ef2b53 100644
--- a/components/slack/index.js
+++ b/components/slack/index.js
@@ -22,7 +22,7 @@ export default function Slack({
+
{
+ const options = [
+ { value: 'option1', text: 'Option 1' },
+ { value: 'option2', text: 'Option 2' },
+ { value: 'option3', text: 'Option 3' },
+ ];
+
+ it('should call onChange when an option is selected', () => {
+ const onChange = cy.stub().as('onChange');
+ mount();
+
+ cy.get('[data-testid="Select-form"]').select('option2');
+ cy.get('@onChange').should('be.calledOnceWith', 'option2');
+ });
+
+ it('should render options correctly', () => {
+ mount();
+
+ cy.get('[data-testid="Select-form"]')
+ .find('[data-testid="Option-form"]')
+ .should(($options) => {
+ expect($options).to.have.length(3);
+
+ const optionValues = $options.map((_, el) => Cypress.$(el).val()).get();
+ expect(optionValues).to.deep.eq(['option1', 'option2', 'option3']);
+
+ const selectedOption = $options.filter(':selected');
+ expect(selectedOption).to.have.length(1);
+ expect(selectedOption.text()).to.eq('Option 2');
+ });
+ });
+});
diff --git a/cypress/test/slack/Message.cy.js b/cypress/test/slack/Message.cy.js
new file mode 100644
index 00000000000..87b81e67456
--- /dev/null
+++ b/cypress/test/slack/Message.cy.js
@@ -0,0 +1,37 @@
+import { mount } from '@cypress/react'
+import SlackMessage from '../../../components/slack/Message'
+describe('SlackMessage component', () => {
+ it('renders the SlackMessage component correctly', () => {
+ const avatarSrc = '../../../public/img/avatars/dalelane.webp' // Replace
+ const name = 'John Doe'
+ const text = 'Hello, world!'
+ const reactions = [
+ { emoji: '👍', count: 5 },
+ { emoji: '❤️', count: 3 },
+ // Add more reactions
+ ]
+
+ mount(
+
+ )
+
+
+ cy.get('[data-testid="SlackMessage-main-div"]').should('exist')
+ cy.get('[ data-testid="SlackMessage-img"]').should('have.attr', 'src', avatarSrc)
+ cy.get('[data-testid="SlackMessage-name"]').should('contain', name)
+ cy.get('[data-testid="SlackMessage-text"]').should('contain', text)
+
+ // Check the reaction elements
+ reactions.forEach((reaction, index) => {
+ cy.get('[data-testid="SlackMessage-reaction"]').eq(index).as('reactionElement')
+
+ if (reaction.icon) {
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-reactionIcon"]').should('have.attr', 'src', reaction.icon)
+ } else {
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-span"]').should('contain', reaction.emoji)
+ }
+
+ cy.get('@reactionElement').find('[data-testid="SlackMessage-count"]').should('contain', reaction.count)
+ })
+ })
+})
diff --git a/cypress/test/slack/index.cy.js b/cypress/test/slack/index.cy.js
new file mode 100644
index 00000000000..4a7c2698c33
--- /dev/null
+++ b/cypress/test/slack/index.cy.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { mount } from 'cypress/react';
+import Slack from '../../../components/slack/index';
+
+describe('Slack Component', () => {
+ it('renders the Slack messages correctly', () => {
+ mount();
+
+ // Verify the first Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-1').should('exist')
+
+ // Verify the second Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-2').should('exist')
+
+ // Verify the third Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-3').should('exist')
+
+ // Verify the fourth Slack message
+ cy.get('[data-testid="SlackMessage"]').eq(0).as('message-4').should('exist')
+ });
+});