-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5771 from nextcloud-libraries/fix/dialog-label
fix(NcDialog): Ensure the dialog is correctly labelled by its name
- Loading branch information
Showing
11 changed files
with
356 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
/** | ||
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors | ||
* SPDX-License-Identifier: AGPL-3.0-or-later | ||
*/ | ||
|
||
import { mount } from 'cypress/vue2' | ||
import NcAppSettingsDialog from '../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue' | ||
import NcAppSettingsSection from '../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue' | ||
import { defineComponent } from 'vue' | ||
|
||
describe('NcAppSettingsDialog', () => { | ||
it('Dialog is correctly labelled', () => { | ||
mount(NcAppSettingsDialog, { | ||
propsData: { | ||
open: true, | ||
name: 'My settings dialog', | ||
}, | ||
slots: { | ||
default: defineComponent({ | ||
render: (h) => h(NcAppSettingsSection, { props: { name: 'First section', id: 'first' } }) | ||
}) | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'My settings dialog' }).should('exist') | ||
}) | ||
|
||
it('Dialog sections are correctly labelled', () => { | ||
mount(NcAppSettingsDialog, { | ||
propsData: { | ||
open: true, | ||
name: 'My settings dialog', | ||
showNavigation: true, | ||
}, | ||
slots: { | ||
default: defineComponent({ | ||
render: (h) => h(NcAppSettingsSection, { props: { name: 'First section', id: 'first' } }, ['The section content']) | ||
}) | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'My settings dialog' }).should('exist') | ||
cy.findByRole('dialog', { name: 'My settings dialog' }) | ||
.findByRole('region', { name: 'First section' }) | ||
.should('exist') | ||
.and('contain.text', 'The section content') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
/** | ||
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors | ||
* SPDX-License-Identifier: AGPL-3.0-or-later | ||
*/ | ||
|
||
import { mount } from 'cypress/vue2' | ||
import NcDialog from '../../src/components/NcDialog/NcDialog.vue' | ||
|
||
describe('NcDialog', () => { | ||
it('Dialog is correctly labelled', () => { | ||
mount(NcDialog, { | ||
propsData: { | ||
show: true, | ||
name: 'My dialog', | ||
}, | ||
slots: { | ||
default: 'Text', | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'My dialog' }).should('exist') | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
/** | ||
* SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors | ||
* SPDX-License-Identifier: AGPL-3.0-or-later | ||
*/ | ||
|
||
import { mount } from 'cypress/vue2' | ||
import NcModal from '../../src/components/NcModal/NcModal.vue' | ||
import type { Component } from 'vue' | ||
|
||
describe('NcModal', () => { | ||
it('Modal is labelled correctly if name is set', () => { | ||
mount(NcModal, { | ||
propsData: { | ||
show: true, | ||
name: 'My modal', | ||
size: 'small', | ||
}, | ||
slots: { | ||
default: 'Text', | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'My modal' }).should('exist') | ||
}) | ||
|
||
it('Modal is labelled correctly if `labelId` is set', () => { | ||
mount(NcModal, { | ||
propsData: { | ||
show: true, | ||
size: 'small', | ||
labelId: 'my-id', | ||
}, | ||
slots: { | ||
default: '<h2 id="my-id">Labelled dialog</h2>', | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'Labelled dialog' }).should('exist') | ||
}) | ||
|
||
it('Modal is labelled correctly if `labelId` and `name` are set', () => { | ||
mount(NcModal, { | ||
propsData: { | ||
show: true, | ||
size: 'small', | ||
name: 'My modal', | ||
labelId: 'my-id', | ||
}, | ||
slots: { | ||
default: '<h2 id="my-id">Real name</h2>', | ||
}, | ||
}) | ||
|
||
cy.findByRole('dialog', { name: 'Real name' }).should('exist') | ||
}) | ||
|
||
it('close button is visible when content is scrolled', () => { | ||
mount(NcModal, { | ||
propsData: { | ||
show: true, | ||
size: 'small', | ||
name: 'Name', | ||
}, | ||
slots: { | ||
// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view | ||
default: { | ||
render: (h) => | ||
h('div', [ | ||
h('div', { style: 'height: 100vh;' }), | ||
h('div', { attrs: { 'data-cy': 'bottom' } }), | ||
]), | ||
} as Component, | ||
}, | ||
}) | ||
|
||
cy.get('[data-cy="bottom"]').scrollIntoView() | ||
cy.get('button.modal-container__close').should('be.visible') | ||
}) | ||
}) |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.