adamdehaven

Utilizing Vite + Vue and Cypress Component Test Runner, how would you stub a composable function since you can't stub the default export?

I can't find a decent example that doesn't utilize Babel, and the only solution we have come up with is exporting an object with methods that can be stubbed, which, to be honest, would be a large refactor.

// Composable function
import { ref } from 'vue'

export default function useToggle (initialValue = false) {
 const enabled = ref(initialValue)

adamdehaven

{
  "viewer": {
    "name": "Viewer",
    "description": "Read only access to all users",
    "entity_instances": [
      {
        "id": "UUID-A"
      },
      {
        "id": "UUID-B"

adamdehaven

#!/usr/bin/env bash
mapfile -t words < <(grep -x '[a-z]\{5\}' "${WORDLIST:-/usr/share/dict/words}")
word=${words[RANDOM % ${#words[@]}]} pool=abcdefghijklmnopqrstuvwxyz
for ((round=1; round <= ${ROUNDS:=6}; round++)); do
	while chars="" && read -rp "$round/$ROUNDS: " guess || exit 1; do
		case " ${words[@]} " in *" ${guess,,} "*) guess=${guess,,}; break; esac
	done; for ((i=0; i < ${#word}; i++)); do
		[[ ${word:i:1} != ${guess:i:1} ]] && chars+=${word:i:1}
	done; i=0; while char=${guess:i:1} && ((i < ${#guess})) ; do
		{ [[ ${word:i++:1} == $char ]] && color=2; } ||

adamdehaven

import Login from 'Login.vue'
import win from 'window.ts'

it('pre-populates the email input from search params', () => {
  // Stub search params
  cy.stub(win, 'getLocationSearch').returns(`?email=${encodeURIComponent(user.email)}`)

  mount(Login)

  // Email input should be pre-populated

adamdehaven

cy.get('.button').click().then(() => {
  cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'click-forgot-password-link')
})

adamdehaven

# Current package.json has "vue": "^3.0.0"

❯ npm install [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR!   vue@"3.1.4" from the root project
npm ERR!   peer vue@"3.x" from @fortawesome/[email protected]

adamdehaven

/**
 * Return the value of a URL parameter
 * @param url String 
 * @param key String
 */
const getUrlParam = (url, key) => {
  const results = new RegExp('[?&]' + key + '=([^&#]*)').exec(url)
  return results ? decodeURI(results[1]) : null
};

adamdehaven

// Expand/collapse section
const toggleCollapse = (e) => {
    const header = e.target;
    const contentId = header.getAttribute("data-section");
    if (contentId) {
        const content = document.getElementById(contentId);
        if (content.classList.contains("is-active")) {
            content.style.maxHeight = "";
        } else {
            content.style.maxHeight = content.scrollHeight + 500 + "px"; // Add 500 to account for changing viewport size

adamdehaven

/**
 * Returns an array of objects with no duplicates
 * @param {Array} arr Array of Objects
 * @param {Array} keyProps Array of keys to determine uniqueness
 */
function uniqueArrayofObjects(arr, keyProps) {
    return Object.values(arr.reduce((uniqueMap, entry) => {
        const key = keyProps.map(k => entry[k]).join('|')
        if (!(key in uniqueMap)) uniqueMap[key] = entry
        return uniqueMap

adamdehaven

Parallax Star background in CSS

Using a very simple sass function, and CSS animation keyframes, built parallax scrolling stars in space. The sass function creates a random star field on each load.

SASS function: https://coderwall.com/p/nqxusa by Kushagra Gour @chinchang457

Forked from Saransh Sinha's Pen Parallax Star background in CSS.