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)
| { | |
| "viewer": { | |
| "name": "Viewer", | |
| "description": "Read only access to all users", | |
| "entity_instances": [ | |
| { | |
| "id": "UUID-A" | |
| }, | |
| { | |
| "id": "UUID-B" |
| #!/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; } || |
| 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 |
| cy.get('.button').click().then(() => { | |
| cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'click-forgot-password-link') | |
| }) |
| # Current package.json has "vue": "^3.0.0" | |
| ❯ npm install vue@3.1.4 | |
| npm ERR! code ERESOLVE | |
| npm ERR! ERESOLVE unable to resolve dependency tree | |
| npm ERR! | |
| npm ERR! Found: vue@3.1.4 | |
| npm ERR! node_modules/vue | |
| npm ERR! vue@"3.1.4" from the root project | |
| npm ERR! peer vue@"3.x" from @fortawesome/vue-fontawesome@3.0.0-3 |
| /** | |
| * 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 | |
| }; |
| // 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 |
| /** | |
| * 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 |
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.