@eturnity/eturnity_reusable_components 9.25.10 → 9.25.12

package/README.md

@@ -212,3 +212,16 @@ Example:
 ```bash
 npm run promote:provided-files-tag -- --version=9.15.2
 ```
+
+## Testing
+
+Unit tests are Jest + `@vue/test-utils`, co-located with each component as
+`componentName.spec.js`. Run a single spec with `pnpm test <path>` or the full
+suite with `pnpm test`. See [`docs/component-testing.md`](docs/component-testing.md)
+for how we write tests (conventions, the TDD workflow, and using Claude Code).
+
+## CI and pull requests
+
+Opening or updating a pull request runs **Bitbucket Pipelines** ([`bitbucket-pipelines.yml`](bitbucket-pipelines.yml)): install with pnpm, **`pnpm test`**, then **`pnpm run build`**. PRs are expected to pass this pipeline.
+
+**Blocking merges on failure** is configured in **Bitbucket repository settings** (not in this repo): enable merge checks that require a successful pull-request build—for example a minimum number of successful builds for the PR, or “require passing pipelines” if your plan supports it. Until that is enabled, a red pipeline is visible but may not stop merges automatically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.25.10",
+  "version": "9.25.12",
   "files": [
     "dist",
     "src"
@@ -25,8 +25,7 @@
     "test-coverage": "jest --coverage",
     "merge-remote-master": "node scripts/merge-remote-master.js",
     "prepack": "npm run verify:provided-files && npm run verify:provided-docs",
-    "maintain:components": "command -v agent >/dev/null 2>&1 && agent -p \"Run the UpdateTestsAndStories skill on all .vue files in src/components/\" --trust || echo '⚠️  Cursor CLI (agent) not found — skipping maintenance (run manually in Cursor)'",
-    "prepublishOnly": "npm run maintain:components && npm run test && npm run build && npm run verify:provided-files && npm run verify:provided-docs"
+    "prepublishOnly": "npm run test && npm run build && npm run verify:provided-files && npm run verify:provided-docs"
   },
   "peerDependencies": {
     "date-fns": "^3.0.0 || ^4.0.0",

package/src/components/buttons/closeButton/closeButton.spec.js

@@ -0,0 +1,34 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import CloseButton from '@/components/buttons/closeButton'
+
+// Canonical example spec for the reusable component library.
+// Reference for: mount, data-id / data-qa-id selectors, structural assertions.
+// `theme` and `$gettext` are provided globally by jest.setup.js, so specs do
+// not need to re-provide them.
+
+describe('CloseButton', () => {
+  const mountButton = (props = {}) => mount(CloseButton, { props })
+
+  it('renders the two crossing lines inside the container', () => {
+    const container = mountButton({ dataId: 'close_btn' }).find(
+      '[data-id="close_btn"]'
+    )
+    expect(container.exists()).toBe(true)
+    expect(container.findAll('div')).toHaveLength(2)
+  })
+
+  it('exposes dataId and dataQaId as data attributes', () => {
+    const wrapper = mountButton({ dataId: 'close_btn', dataQaId: 'qa_close' })
+    expect(wrapper.find('[data-id="close_btn"]').exists()).toBe(true)
+    expect(wrapper.find('[data-qa-id="qa_close"]').exists()).toBe(true)
+  })
+
+  it('applies a generated style class to each line', () => {
+    const lines = mountButton({ dataId: 'close_btn' })
+      .find('[data-id="close_btn"]')
+      .findAll('div')
+    expect(lines).toHaveLength(2)
+    lines.forEach((line) => expect(line.classes().length).toBeGreaterThan(0))
+  })
+})

package/src/components/buttons/splitButtons/index.vue

@@ -70,7 +70,7 @@
     },
   })
 
-  const emit = defineEmits(['update:modelValue'])
+  const emit = defineEmits(['update:modelValue', 'click'])
 
   const getButtonPosition = computed(() => (index) => {
     if (index === 0) return 'first'

package/src/components/buttons/splitButtons/splitButtons.spec.js

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import SplitButtons from '@/components/buttons/splitButtons'
+
+describe('SplitButtons', () => {
+  const options = [
+    { label: 'Monthly', value: 'monthly' },
+    { label: 'Yearly', value: 'yearly' },
+  ]
+
+  const mountButtons = (props = {}) =>
+    mount(SplitButtons, {
+      props: { options, modelValue: 'monthly', dataIdKey: 'billing', ...props },
+    })
+
+  it('renders one button per option with its label', () => {
+    const buttons = mountButtons().findAll('button')
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0].text()).toBe('Monthly')
+    expect(buttons[1].text()).toBe('Yearly')
+  })
+
+  it('builds the data-id-key from the key and the option value', () => {
+    const wrapper = mountButtons()
+    expect(wrapper.find('[data-id-key="billing_monthly"]').exists()).toBe(true)
+    expect(wrapper.find('[data-id-key="billing_yearly"]').exists()).toBe(true)
+  })
+
+  it('emits update:modelValue with the clicked option value', async () => {
+    const wrapper = mountButtons()
+    await wrapper.findAll('button')[1].trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toEqual([['yearly']])
+  })
+
+  it('emits a declared click event with the clicked option value', async () => {
+    const wrapper = mountButtons()
+    await wrapper.findAll('button')[1].trigger('click')
+    expect(wrapper.emitted('click')).toEqual([['yearly']])
+  })
+})

package/src/components/errorMessage/errorMessage.spec.js

@@ -1,34 +1,34 @@
+/* eslint-disable */
 import { mount } from '@vue/test-utils'
 import ErrorMessage from '@/components/errorMessage'
-import theme from '@/assets/theme'
-
-/* eslint-disable */
 
-describe('ErrorMessage Component', () => {
-  let wrapper
-
-  beforeEach(() => {
-    wrapper = mount(ErrorMessage, {
-      props: {},
+describe('ErrorMessage', () => {
+  const mountMessage = (props = {}) =>
+    mount(ErrorMessage, {
+      props,
       slots: {
         default: '<div data-test-id="fake-msg">testing</div>',
       },
-      global: {
-        provide: {
-          theme,
-        },
-      },
     })
+
+  it('renders the default slot content', () => {
+    const wrapper = mountMessage()
+    const message = wrapper.find('[data-test-id="fake-msg"]')
+    expect(message.exists()).toBe(true)
+    expect(message.text()).toBe('testing')
   })
 
-  test('renders ErrorMessage component with default props', () => {
-    expect(wrapper.findAll('[data-test-id="fake-msg"]').length).toBe(1)
+  it('uses the documented default props', () => {
+    const wrapper = mountMessage()
+    expect(wrapper.props('isRelative')).toBe(false)
+    expect(wrapper.props('marginTop')).toBe('13px')
   })
 
-  test('applies the correct CSS class for styling', async () => {
-    wrapper.setProps({ marginTop: '20px' })
+  it('renders different overlay styling for absolute (default) vs relative', () => {
+    const overlayClassOf = (props) =>
+      mountMessage(props).find('[data-test-id="fake-msg"]').element
+        .parentElement.className
 
-    await wrapper.vm.$nextTick()
-    expect(wrapper.props().marginTop).toBe('20px')
+    expect(overlayClassOf()).not.toBe(overlayClassOf({ isRelative: true }))
   })
 })

package/src/components/inputs/inputText/index.vue

@@ -125,8 +125,8 @@
       props.theme.colors[props.labelFontColor]
         ? props.theme.colors[props.labelFontColor]
         : props.labelFontColor
-          ? props.labelFontColor
-          : props.theme.colors.eturnityGrey};
+        ? props.labelFontColor
+        : props.theme.colors.eturnityGrey};
 
     font-size: ${(props) =>
       props.fontSize ? props.fontSize : inputLabelFontSize};
@@ -172,29 +172,29 @@
       props.noBorder
         ? 'none'
         : props.isError
-          ? '1px solid ' + props.theme.colors.red
-          : props.borderColor
-            ? props.theme.colors[props.borderColor]
-              ? '1px solid ' + props.theme.colors[props.borderColor]
-              : '1px solid ' + props.borderColor
-            : '1px solid ' + props.theme.colors.grey4};
+        ? '1px solid ' + props.theme.colors.red
+        : props.borderColor
+        ? props.theme.colors[props.borderColor]
+          ? '1px solid ' + props.theme.colors[props.borderColor]
+          : '1px solid ' + props.borderColor
+        : '1px solid ' + props.theme.colors.grey4};
     padding: ${(props) =>
       props.isError
         ? '11px 25px 11px 10px'
         : props.inputType === 'password'
-          ? '11px 25px 11px 10px'
-          : props.defaultPadding
-            ? '10px 35px 10px 15px'
-            : '11px 5px 11px 10px'};
+        ? '11px 25px 11px 10px'
+        : props.defaultPadding
+        ? '10px 35px 10px 15px'
+        : '11px 5px 11px 10px'};
     border-radius: 4px;
     position: relative;
-    font-size: ${(props) => (props.fontSize ? props.fontSize : '14px')};
+    font-size: ${(props) => (props.fontSize ? props.fontSize : '13px')};
     color: ${(props) =>
       props.isDisabled
         ? props.theme.colors.grey2
         : props.fontColor
-          ? props.fontColor + ' !important'
-          : props.theme.semanticColors.grey[900]};
+        ? props.fontColor + ' !important'
+        : props.theme.semanticColors.grey[900]};
 
     width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
     min-width: ${(props) => (props.minWidth ? props.minWidth : 'unset')};
@@ -208,8 +208,8 @@
           ? props.disabledBackgroundColor + ' !important'
           : props.theme.colors.grey5
         : props.backgroundColor
-          ? props.backgroundColor + ' !important'
-          : props.theme.colors.white};
+        ? props.backgroundColor + ' !important'
+        : props.theme.colors.white};
     &::placeholder {
       color: ${(props) => props.theme.colors.grey2};
     }

package/src/components/projectMarker/index.vue

@@ -3,8 +3,8 @@
     <PillWrapper
       v-if="markerData && markerData.translations[activeLanguage]"
       :cursor="editionAllowed ? 'pointer' : cursor"
-      :with-date="!!date"
       :truncate-label="truncateLabel"
+      :with-date="!!date"
       @click="editionAllowed ? (activated = !activated) : null"
     >
       <PillContent :truncate-label="truncateLabel">
@@ -58,19 +58,23 @@
       :prevent-outside-close="true"
       @on-close="closeDeleteModal"
     >
-      <ModalContainer>
-        <PageTitle :text="$gettext('delete_confirm_text')" />
-        <PageSubtitle :text="$gettext('delete_confirm_subtext')" />
-        <CtaContainer>
-          <MainButton :text="$gettext('Delete')" @click="onDelete" />
+      <ModalContent>
+        <ModalTitle>
+          {{ $gettext('delete_confirm_text') }}
+        </ModalTitle>
+        <ModalBody>
+          {{ $gettext('delete_confirm_subtext') }}
+        </ModalBody>
+        <ModalButtonContainer>
           <MainButton
             :text="$gettext('Cancel')"
-            type="primary"
+            type="tertiary"
             variant="cancel"
             @click="closeDeleteModal"
           />
-        </CtaContainer>
-      </ModalContainer>
+          <MainButton :text="$gettext('Delete')" @click="onDelete" />
+        </ModalButtonContainer>
+      </ModalContent>
     </Modal>
   </PageContainer>
 </template>
@@ -94,9 +98,11 @@
   import vClickOutside from 'click-outside-vue3'
   import Icon from '../icon'
   import Modal from '../modals/modal'
-  import PageTitle from '../pageTitle'
+  import ModalContent from '../modals/modalContent'
+  import ModalTitle from '../modals/modalTitle'
+  import ModalBody from '../modals/modalBody'
+  import ModalButtonContainer from '../modals/modalButtonContainer'
   import DeleteIcon from '../deleteIcon'
-  import PageSubtitle from '../pageSubtitle'
   import MainButton from '../buttons/mainButton'
 
   const PageContainerProps = { truncateLabel: Boolean }
@@ -113,17 +119,6 @@
     `}
   `
 
-  const ModalContainer = styled.div`
-    padding: 40px;
-    min-width: 500px;
-  `
-
-  const CtaContainer = styled.div`
-    display: flex;
-    gap: 20px;
-    margin-top: 30px;
-  `
-
   const PillWrapperProps = {
     withDate: Boolean,
     cursor: String,
@@ -281,10 +276,10 @@
       IconContainer,
       Icon,
       Modal,
-      ModalContainer,
-      CtaContainer,
-      PageTitle,
-      PageSubtitle,
+      ModalButtonContainer,
+      ModalTitle,
+      ModalBody,
+      ModalContent,
       MainButton,
       PillDate,
       MarkerName,