Skip to content
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.

Sign up for GitHub

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

add more tests #9688

Merged
merged 9 commits into from
Sep 12, 2023
Merged

add more tests #9688

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ff6820
add more tests
Sep 12, 2023
2f97776
update changelog item
Sep 12, 2023
f0c5daf
update snapshots
Sep 12, 2023
27557a0
switch to mock
Sep 12, 2023
1c623cb
Fix input
Sep 12, 2023
369d62f
fix
Sep 12, 2023
ed7fe38
simplify
Sep 12, 2023
570d9db
rm wrong auto import originated by ide
Sep 12, 2023
d83b0c8
beautify
Sep 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions changelog/unreleased/enhancement-add-password-policy-compatibility
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ Additionally we added a show/hide toggle button to password input field
https://github.com/owncloud/web/pull/9682
https://github.com/owncloud/web/pull/9634
https://github.com/owncloud/web/pull/9686
https://github.com/owncloud/web/pull/9688
https://github.com/owncloud/web/issues/9638
https://github.com/owncloud/web/issues/9657
57 changes: 56 additions & 1 deletion packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,32 @@ const defaultProps = {
label: 'label'
}

class basicPasswordPolicy {
verified = false

rules = [{ minLength: {} }]
check(password) {
const result = password.length >= 8
this.verified = result
return result
}

missing(password) {
const result = this.check(password)
this.verified = result
return {
rules: [
{
code: 'minLength',
message: 'At least %{param1} characters',
format: ['8'],
verified: result
}
]
}
}
}

Object.assign(navigator, {
clipboard: {
writeText: jest.fn(),
Expand Down Expand Up @@ -65,7 +91,6 @@ describe('OcTextInput', () => {
it('should not exist if type is not "password" or no value entered', () => {
const wrapper = getMountedWrapper()
expect(wrapper.find(selectors.copyPasswordBtn).exists()).toBeFalsy()

const wrapper2 = getMountedWrapper({ props: { type: 'password' } })
expect(wrapper2.find(selectors.copyPasswordBtn).exists()).toBeFalsy()
})
Expand Down Expand Up @@ -103,6 +128,36 @@ describe('OcTextInput', () => {
expect(wrapper.find(selectors.inputField).attributes().type).toBe('password')
})
})
describe('password policy', () => {
it('should emit "passwordChallengeFailed" if password does not match criteria', async () => {
const wrapper = getMountedWrapper({
props: { type: 'password', passwordPolicy: new basicPasswordPolicy() }
})
await wrapper.find(selectors.inputField).setValue('pass')
expect(wrapper.emitted('passwordChallengeCompleted')).toBeFalsy()
})
it('should emit "passwordChallengeCompleted" if password matches criteria', async () => {
const wrapper = getMountedWrapper({
props: { type: 'password', passwordPolicy: new basicPasswordPolicy() }
})
await wrapper.find(selectors.inputField).setValue('password123')
expect(wrapper.emitted('passwordChallengeCompleted')).toBeTruthy()
})
it('displays error state if password does not match criteria', async () => {
const wrapper = getMountedWrapper({
props: { type: 'password', passwordPolicy: new basicPasswordPolicy() }
})
await wrapper.find(selectors.inputField).setValue('pass')
expect(wrapper.html()).toMatchSnapshot()
})
it('displays success state if password matches criteria', async () => {
const wrapper = getMountedWrapper({
props: { type: 'password', passwordPolicy: new basicPasswordPolicy() }
})
await wrapper.find(selectors.inputField).setValue('password123')
expect(wrapper.html()).toMatchSnapshot()
})
})
})

describe('when a description message is provided', () => {
Expand Down
81 changes: 81 additions & 0 deletions packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`OcTextInput password input field password policy displays error state if password does not match criteria 1`] = `
<div class="">
<label class="oc-label" for="oc-textinput-17"></label>
<div class="oc-position-relative">
<!--v-if-->
<div class="oc-text-input-password-wrapper">
<input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-17" type="password">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default" type="button">
<!--v-if-->
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-s oc-icon-passive">
<!---->
</span>
</button>
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default" type="button">
<!--v-if-->
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-s oc-icon-passive">
<!---->
</span>
</button>
</div>
<portal to="app.design-system.password-policy">
<div class="oc-text-small oc-flex oc-flex-column">
<span>Please enter a password that meets the following criteria:</span>
<div class="oc-flex oc-flex-middle">
<span class="oc-icon oc-icon-s oc-icon-danger">
<!---->
</span>
<span class="oc-text-input-danger">At least 8 characters</span>
</div>
</div>
</portal>
<!--v-if-->
</div>
<!--v-if-->
<portal-target name="app.design-system.password-policy"></portal-target>
</div>
`;

exports[`OcTextInput password input field password policy displays success state if password matches criteria 1`] = `
<div class="">
<label class="oc-label" for="oc-textinput-18"></label>
<div class="oc-position-relative">
<!--v-if-->
<div class="oc-text-input-password-wrapper">
<input aria-invalid="false" class="oc-text-input oc-input oc-rounded" id="oc-textinput-18" type="password">
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default" type="button">
<!--v-if-->
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-s oc-icon-passive">
<!---->
</span>
</button>
<button class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default" type="button">
<!--v-if-->
<!-- @slot Content of the button -->
<span class="oc-icon oc-icon-s oc-icon-passive">
<!---->
</span>
</button>
</div>
<portal to="app.design-system.password-policy">
<div class="oc-text-small oc-flex oc-flex-column">
<span>Please enter a password that meets the following criteria:</span>
<div class="oc-flex oc-flex-middle">
<span class="oc-icon oc-icon-s oc-icon-success">
<!---->
</span>
<span class="oc-text-input-success">At least 8 characters</span>
</div>
</div>
</portal>
<!--v-if-->
</div>
<!--v-if-->
<portal-target name="app.design-system.password-policy"></portal-target>
</div>
`;