fix(NcCheckboxRadioSwitch): only bind aria attributes to the input

.reuse/dep5

@@ -7,7 +7,7 @@ Files: package.json package-lock.json .github/pull_request_template.md
 Copyright: Nextcloud GmbH and Nextcloud contributors
 License: AGPL-3.0-or-later
 
-Files: styleguide/assets/icons.css styleguide/assets/server.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap
+Files: styleguide/assets/icons.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap
 Copyright: Nextcloud GmbH and Nextcloud contributors
 License: AGPL-3.0-or-later
 

cypress/commands.d.ts

@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { mount } from '@cypress/vue2'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom commands
+declare global {
+ // eslint-disable-next-line @typescript-eslint/no-namespace
+ namespace Cypress {
+ interface Chainable {
+ mount: typeof mount
+ }
+ }
+}
+
+export {}

cypress/component/NcCheckboxRadioSwitch.cy.ts

@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import NcCheckboxRadioSwitch from '../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
+
+describe('NcCheckboxRadioSwitch', () => {
+ it('Sets attributes correctly', () => {
+ cy.mount({
+ render: (h) => h(NcCheckboxRadioSwitch, {
+ // TODO: With Vue3 move class and style to attrs
+ class: 'my-class',
+ style: 'background: red;',
+ attrs: {
+ 'aria-describedby': 'unique-id',
+ 'data-my-attribute': 'yes',
+ },
+ }, ['My checkbox']),
+ }).then(({ wrapper }) => {
+ // Class and style belong the wrapper
+ expect(wrapper.classes('my-class')).to.be.true
+ // expect(wrapper.attributes('style')).to.equal('background: red;')
+ // Custom data attributes too
+ expect(wrapper.attributes('data-my-attribute')).to.equal('yes')
+ // real HTML attributes are passed to the real checkbox
+ expect(wrapper.attributes('aria-describedby')).to.be.undefined
+ })
+
+ cy.findByRole('checkbox').should('have.attr', 'aria-describedby', 'unique-id')
+ })
+})

cypress/support/commands.ts

@@ -3,8 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { mount } from '@cypress/vue2'
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command'
 
 import '@testing-library/cypress/add-commands'
 
 addCompareSnapshotCommand()
+
+// Example use:
+// cy.mount(MyComponent)
+Cypress.Commands.add('mount', mount)

cypress/support/component.ts

@@ -10,22 +10,3 @@ import '../../styleguide/assets/icons.css'
 
 // cypress commands
 import './commands'
-import { mount } from '@cypress/vue2'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-
-declare global {
- // eslint-disable-next-line @typescript-eslint/no-namespace
- namespace Cypress {
- interface Chainable {
- mount: typeof mount
- }
- }
-}
-
-// Example use:
-// cy.mount(MyComponent)
-Cypress.Commands.add('mount', mount)

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -258,7 +258,7 @@ export default {
  class="checkbox-radio-switch"
  :style="cssVars"
  :type="isButtonType ? 'button' : null"
- v-bind="isButtonType ? $attrs : {}"
+ v-bind="isButtonType ? $attrs : dataAttrs"
  v-on="isButtonType ? listeners : null">
  <input v-if="!isButtonType"
  :id="id"
@@ -272,7 +272,7 @@ export default {
  :indeterminate.prop="hasIndeterminate ? indeterminate : null"
  :required="required"
  :name="name"
- v-bind="$attrs"
+ v-bind="nonDataAttrs"
  v-on="listeners">
  <NcCheckboxContent :id="id"
  class="checkbox-radio-switch__content"
@@ -450,6 +450,18 @@ export default {
  emits: ['update:checked'],
 
  computed: {
+ dataAttrs() {
+ // filter all data attributes
+ return Object.fromEntries(Object.entries(this.$attrs)
+ .filter(([key]) => key.startsWith('data-')))
+ },
+
+ nonDataAttrs() {
+ // filter all non-data attributes
+ return Object.fromEntries(Object.entries(this.$attrs)
+ .filter(([key]) => !key.startsWith('data-')))
+ },
+
  isButtonType() {
  return this.type === TYPE_BUTTON
  },

tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js

@@ -17,19 +17,25 @@ describe('NcCheckboxRadioSwitch', () => {
  expect(wrapper.text()).toContain('Test')
  })
 
- it('forwards aria-invalid and aria-errormessage to input', () => {
+ it('forwards all but data- attributes to the input', () => {
  const wrapper = shallowMount(NcCheckboxRadioSwitch, {
  slots: {
  default: 'Test',
  },
  attrs: {
  'aria-invalid': 'true',
  'aria-errormessage': 'id-test',
+ 'data-test': 'checkbox-test-data-attr',
+ title: 'Test title',
  },
  })
 
  const input = wrapper.find('input')
  expect(input.attributes('aria-invalid')).toBe('true')
  expect(input.attributes('aria-errormessage')).toBe('id-test')
+ expect(input.attributes('title')).toBe('Test title')
+ expect(input.attributes('data-test')).not.toBe('checkbox-test-data-attr')
+ expect(wrapper.attributes('data-test')).toBe('checkbox-test-data-attr')
+ expect(wrapper.attributes('title')).not.toBe('Test title')
  })
 })