-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
test: add ErrorModal tests and story #2325
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
Changes from 1 commit
0428ee5
ecbfbee
e6fec7b
754c841
f9c4800
cbe4672
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import React from 'react'; | ||
|
||
import ErrorModal from './ErrorModal'; | ||
|
||
export default { | ||
title: 'IDE/ErrorModal', | ||
component: ErrorModal, | ||
argTypes: { | ||
type: { | ||
options: [ | ||
'forceAuthentication', | ||
'staleSession', | ||
'staleProject', | ||
'oauthError' | ||
], | ||
control: { type: 'select' } | ||
}, | ||
service: { | ||
options: ['google', 'github'], | ||
control: { type: 'select' } | ||
}, | ||
closeModal: { action: 'closed' } | ||
} | ||
}; | ||
|
||
const Template = (args) => <ErrorModal {...args} />; | ||
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. 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. Oh interesting. I'm still familiarising myself with the components in the application. I was wondering where the overlay was 😄 It would make a nicer story seeing the modal represented with the overlay. 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 to try it again after the theming changes in #2326. I think the way that they SCSS gets generated is that it creates selectors like 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. Honestly it feels like a bit of a naming mistake that this is called It could potentially be modified so that it takes the overlay's |
||
|
||
export const ForceAuthenticationErrorModal = Template.bind({}); | ||
ForceAuthenticationErrorModal.args = { | ||
type: 'forceAuthentication' | ||
}; | ||
lindapaiste marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
export const StaleSessionErrorModal = Template.bind({}); | ||
StaleSessionErrorModal.args = { | ||
type: 'staleSession' | ||
}; | ||
|
||
export const StaleProjectErrorModal = Template.bind({}); | ||
StaleProjectErrorModal.args = { | ||
type: 'staleProject' | ||
}; | ||
|
||
export const OauthErrorModal = Template.bind({}); | ||
OauthErrorModal.args = { | ||
type: 'oauthError', | ||
service: 'google' | ||
}; |
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.
I think it might be better to define these options in the
propTypes
of the component rather than here. If we do it that way then Storybook will pick up on the options automatically and we'll also get the validation inprop-types
.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.
The action wasn't picked up with this 😞 so left that argType.
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.
Yeah when I was playing around with it I left the
closeModal
in. I'm not aware of a trick for those, at least not yet.FYI, if you want to keep it as a dropdown rather than radio buttons (I don't think it matters?) then you can provide a partial config like
service: { control: { type: 'select' } }
which specifies thecontrol
and it will still infer theoptions
.