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.

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

Support beforeInitialisation() options, multiple modules #4330

Merged
merged 3 commits into from
Oct 17, 2023

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Oct 13, 2023

This PR is split out from #4266 and includes:

  1. Support custom beforeInitialisation() browser options
  2. Support multiple $modules being initialised in renderAndInitialise()

This follows a "Custom Puppeteer browser options" discussion on Slack and first suggested by @romaricpascal

Custom initialisation example

Render a single button but clone it before both are initialised together

const examples = await getExamples('button')

// Render single button
renderAndInitialise(page, 'button', {
  params: examples.default,

  // Duplicate button before initialisation
  beforeInitialisation($module, { className }) {
    const $button1 = $module
    
    // Create 2nd button
    const $button2 = el.cloneNode(true)

    // Append 2nd button, configure
    $button1.parentNode.appendChild($button2)
    $button2.setAttribute('class', className)
  },
  
  // Pass custom options to browser
  beforeInitialisationOptions: {
    className: 'govuk-button--dodgy'
  }
})

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4330 October 13, 2023 12:34 Inactive
@github-actions
Copy link

github-actions bot commented Oct 13, 2023

📋 Stats

File sizes

File Size
dist/govuk-frontend-4.6.0.min.css 118.07 KiB
dist/govuk-frontend-4.6.0.min.js 47.1 KiB
dist/govuk-frontend-ie8-4.6.0.min.css 79.27 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 75.42 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 70.83 KiB
packages/govuk-frontend/dist/govuk/all.mjs 3.84 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.99 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 36.73 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.3 KiB

Modules

File Size
all.mjs 67.15 KiB
components/accordion/accordion.mjs 20.61 KiB
components/button/button.mjs 4.55 KiB
components/character-count/character-count.mjs 20.73 KiB
components/checkboxes/checkboxes.mjs 5.69 KiB
components/error-summary/error-summary.mjs 5.85 KiB
components/exit-this-page/exit-this-page.mjs 15.49 KiB
components/header/header.mjs 3.84 KiB
components/notification-banner/notification-banner.mjs 4.39 KiB
components/radios/radios.mjs 4.68 KiB
components/skip-link/skip-link.mjs 3.73 KiB
components/tabs/tabs.mjs 9.41 KiB

View stats and visualisations on the review app


Action run for e9842b7

@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4330 October 13, 2023 13:44 Inactive
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4330 October 13, 2023 13:46 Inactive
Adds a new `context` browser option using `@template` to “carry through” the types used in tests into `beforeInitialisation()` parameters
For example, test HTML with two buttons will now see both initialised
For example, test HTML with multiple components will only match the one being tested
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4330 October 13, 2023 16:42 Inactive
@colinrotherham colinrotherham self-assigned this Oct 16, 2023
new namespace[exportName]($module, options.config)
// Loop and initialise all $modules or use default
// selector `null` return value when none found
;($modules.length ? $modules : [null]).forEach(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this semi-colon doing something fancy?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah caught me out too

It's a Prettier protection against those parentheses () becoming a function call
https://prettier.io/docs/en/rationale#semicolons

ESLint does it too but not nearly as much

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, fair enough.

Copy link
Contributor

@domoscargin domoscargin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like this, enables a lot more shenanigans before we actually run the test, and lays the ground for removing the Review app from tests in the future if we want to.

One tiny comment which I think is either a typo or is doing something I don't understand, but otherwise hot to trot.

@colinrotherham colinrotherham merged commit dd74830 into main Oct 17, 2023
@colinrotherham colinrotherham deleted the puppeteer-arguments branch October 17, 2023 14:37
owenatgov pushed a commit that referenced this pull request Oct 18, 2023
Support `beforeInitialisation()` options, multiple modules
@colinrotherham colinrotherham removed their assignment Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

Throw errors during Accordion initialisation if key HTML elements are missing
3 participants