-
-
Notifications
You must be signed in to change notification settings - Fork 632
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: adding unit tests for form and slack folders #1775
Changes from 22 commits
088daad
1974d17
03a1ab3
5eb0cbe
75cee21
cbc26d0
d5e6ac2
0a46499
4201220
a09d3bb
2fab661
e9c3fba
6a7278d
5ac4eb2
f9dd4b1
9f128ec
1118e07
2b15a06
3570ce5
98b696e
6f54585
6eca29e
bd59003
5509480
ac6f7c9
5179ac9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { mount } from 'cypress/react'; | ||
import Select from '../../../components/form/Select'; | ||
|
||
describe('Select Component', () => { | ||
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(<Select onChange={onChange} options={options} />); | ||
|
||
cy.get('[data-testid="Select-form"]').select('option2'); | ||
cy.get('@onChange').should('be.calledOnceWith', 'option2'); | ||
}); | ||
|
||
it('should render options correctly', () => { | ||
mount(<Select options={options} selected="option2" />); | ||
|
||
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'); | ||
}); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(<Slack />); | ||
|
||
// 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') | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use a sample avatar icon as well from the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure , the author images ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you brief a little bit more about this ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have added dummy path for avatar , in assets folder where can I get the image ? |
||
] | ||
|
||
mount( | ||
<SlackMessage avatar={ avatarSrc } name={ name } text={ text } reactions={ reactions } /> | ||
) | ||
|
||
|
||
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) | ||
}) | ||
}) | ||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rename this file to
Message.cy.js
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done