How do I set up Quixote with Karma? - css

Quixote looks really cool. Am having a bit of trouble getting it working with Karma. I tried emulating Bjorn's example but am getting this error:
Error: Mismatched anonymous define() module: function () {var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
In my karma.conf.js, I have:
files: [
'www/latest/tests/lib/jasmine-beforeAll.js',
'www/latest/tests/lib/sinon-1.7.3.js',
'www/latest/tests/test-main.js',
{pattern: 'www/latest/vendor/**/*.js', included: false},
{pattern: 'www/latest/app/**/*.js', included: false},
{pattern: 'www/latest/tests/lib/*.js', included: false},
{pattern: 'www/latest/tests/specs/**/*.js', included: false},
'node_modules/quixote/dist/*.js'
],
Then in my test, I have
var quixote = require("../../../../node_modules/quixote/dist/quixote.js");
(this seems redundant as having Quixote in files hash would make it globally available but wanted to follow Bjorn's example to the letter).

Here's a plugin I made, please file tickets if it doesn't work for you. https://github.com/woldie/karma-quixote
npm install --save-dev karma-quixote

Related

Is there any way to use #next/env in codegen.yaml?

I was wondering if there was a way to use #next/env to replace variables in codegen.yaml when i run yarn codegen:
graphql-codegen -r dotenv/config --config codegen.yml - this is codegen example to load dot env
graphql-codegen -r #next/env --config codegen.yml - this is what i want to achieve
When i call it, i get
${SERVER_API_URL}/graphql goes as undefined/graphql
My usecase is:
# .env
HOST=https
API_DOMAIN=example.com
SERVER_API_URL=$HOST://$API_DOMAIN
# codegen.yaml
schema: ${SERVER_API_URL}/graphql
Why use #next/env? it replaces variables in .env, i'm attaching documentation sample from next.js documentation:
Note: Next.js will automatically expand variables ($VAR) inside of
your .env* files. This allows you to reference other secrets, like so:
# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
If you are trying to use a variable with a $ in the actual value, it needs to be escaped like so: \$.
For example:
# .env
A=abc
# becomes "preabc"
WRONG=pre$A
# becomes "pre$A"
CORRECT=pre\$A
source: https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables
You can't use #next/env directly via -r flag. However you still have couple of alternatives. For example, you can address the required .env file directly:
DOTENV_CONFIG_PATH=./.env.local graphql-codegen --config codegen.yml -r dotenv/config
If you still want to use #next/env, you can convert your codegen.yml to codegen.js and import #next/env. For example, my original YML:
overwrite: true
schema:
- https://graphql.fauna.com/graphql:
headers:
Authorization: 'Bearer ${FAUNA_ADMIN_KEY}'
documents: null
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-graphql-request
./graphql.schema.json:
plugins:
- 'introspection'
I re-wrote it as JS:
const { loadEnvConfig } = require('#next/env')
loadEnvConfig(process.cwd())
module.exports = {
overwrite: true,
schema: {
'https://graphql.fauna.com/graphql': {
headers: {
Authorization: `Bearer ${process.env.FAUNA_ADMIN_KEY}`,
},
},
},
documents: null,
generates: {
'src/generated/graphql.ts': {
plugins: [
'typescript',
'typescript-operations',
'typescript-graphql-request',
],
},
'./graphql.schema.json': { plugins: ['introspection'] },
},
}
and then generated the code using graphql-codegen --config codegen.js.
Here is an issue on Github that helped me.

Swift Package Manager - binaryTarget with .zip file fails to validate

I tried different approaches to add a binaryTarget to a Swift package - 2 of them worked out fine (Target1 and Target2 in the example), but third approach (Target3) that should also work according to documentation does not validate: unsupported extension for binary target 'Target3'; valid extensions are: xcframework
For not bloating the repo too much with every binary release I would prefer the zip approach here... - Anyone got it working with a binaryTarget and a .zip file in path: added to the Package repository, or any hints what I'm doing wrong here?
(Xcode 12.4, t3.zip containing only the .xcframework at root level)
// swift-tools-version:5.3
// The swift-tools-version declares the minimum version of Swift required to build this package.
import PackageDescription
let package = Package(
name: "StackoverflowExamplePackage",
platforms: [
.iOS(.v9)
],
products: [
.library(
name: "Lib1",
targets: ["Target1"]),
.library(
name: "Lib2",
targets: ["Target2", "Target3"]),
],
dependencies: [
// .package(url: /* package url */, from: "1.0.0"),
],
targets: [
.binaryTarget(
name: "Target1",
url: "https://myurl.example.com/t1-xcframework.zip",
checksum: "777ddd6381e2201b7eb778b72f373f77e1190fd9dc9503f703e37c86d3b89674"
),
.binaryTarget(name: "Target2", path: "./Binaries/t2.xcframework"),
.binaryTarget(name: "Target3", path: "./Binaries/t3.zip"),
]
)
Zip archive support for local binary targets in SPM was merged last year in October and has been finally released along with Xcode 13.3.

Using glob patterns not for default Grunt keys

1. Summary
I can't set grunt-clean-console plugin, that it works for all my .html files.
2. Details
grunt-clean-console check browser console errors for .html files.
I want to check browser console errors for all .html files of my site. In official descripition I read, how plugin works for specific values of url key. I have many pages in my site; I don't want add each .html file separately. But I can't find, how I can use patterns.
I find, that I can use patterns for built-in Grunt cwd, src, dest keys. But how I can use glob (or another) patterns for custom keys as url of this plugin?
3. Data
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/index.html'
return
example project configuration:
output
│ 404.html
│ index.html
│
├───KiraFirstFolder
│ KiraFirstfile.html
│
└───KiraSecondFolder
KiraSecondFile.html
If I set specific values for url key without patterns as in example above, grunt-clean-console successfully works:
phantomjs: opening page output/index.html
phantomjs: Checking errors after sleeping for 5000ms
ok output/index.html
phantomjs process exited with code 0
Done.
3.1. Steps to reproduce
I run in console:
grunt clean-console --verbose
4. Not helped
4.1. Globbing
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: 'output/**/*.html'
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
phantomjs: loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.
4.2. Building the object dinamically
Official documentation
Gruntfile.coffee (example):
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url:
files: [
expand: true
cwd: "output/"
src: ['**/*.html']
dest: "output/"
]
return
output:
File: [no files]
Options: urls=[], timeout=5, url=["output/**/*.html"]
Fatal error: missing url
4.3. Templates
Official documentation
Gruntfile.coffee:
module.exports = (grunt) ->
grunt.loadNpmTasks 'grunt-clean-console'
grunt.initConfig
'clean-console':
all:
options:
url: '<%= kiratemplate %>'
kiratemplate: ['output/**/*.html'],
return
output:
phantomjs: opening page http://output/**/*.html
phantomjs: Unable to load resource (#1URL:http://output/**/*.html)
phantomjs: phantomjs://code/runner.js:30 in onResourceError
Error code: 3. Description: Host output not found
phantomjs://code/runner.js:31 in onResourceError
loading page http://output/**/*.html status fail
phantomjs://code/runner.js:50
phantomjs process exited with code 1
url output/**/*.html has 1 error(s)
>> one of the urls failed clean-console check
Warning: Task "clean-console:all" failed. Use --force to continue.
Aborted due to warnings.
Create a function before the grunt.initConfig part that utilizes grunt.file.expand. For instance:
Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks 'grunt-clean-console'
// Add this function...
function getFiles() { return grunt.file.expand('output/**/*.html'); }
grunt.initConfig({
'clean-console': {
all: {
options: {
url: getFiles() // <-- invoke the function here.
}
}
}
// ...
});
// ...
}
Notes:
The getFiles function returns an array of file paths for all .html files matching the given glob pattern, i.e. 'output/**/*.html'.
The value of the options.url property is set to getFiles() to invoke the function.

how to use multiple mochacov reporters in single Gruntfile and get the coverage report

Currently am switching between html-cov and json-cov in my gruntfile and running the command
grunt mochacov:all > coverage.html
(or)
grunt mochacov:all > coverage.json
Here is the json portion of config from my Gruntfile.js :
mochacov : {
options : {
reporter : 'json-cov',
//reporter : 'travis-cov',
require : ['should'],
timeout: 250000,
//quiet : true,
output : 'coverage.json',
},
all: ['test/test-*.js']
},
Is there anyway using which i can get both coverage.html and coverage.json in the output by default by specifying both html-cov and json-cov somehow?
Sadly, looks like by default grunt-mocha-cov doesn't support this, as the reporter only accepts a 'string' (per the docs).
Theoretically this should be possible with a grunt multitask.
I have found out the answer for the same :-
This is what we need to have in our Gruntfile.js
mochacov: {
jsoncoverage: {
options: {
reporter: 'json-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.json'
},
all: ['test/test-*.js']
},
htmlcoverage: {
options: {
reporter: 'html-cov',
//reporter : 'travis-cov',
require: ['should'],
timeout: 250000,
//quiet : true,
output: 'reports/coverage.html'
},
all: ['test/test-*.js']
}
}
//and then the following line needs to be there :
grunt.registerTask('mochacoverage', ['mochacov:jsoncoverage', 'mochacov:htmlcoverage']);
Then we can run it using grunt mochacoverage and it will do both html and json

Requirejs optimization with grunt

I am trying to create a requirejs optimization config with grunt and almond. Here's the config:
requirejs:
build:
options:
almond: true
dir: 'build'
appDir: ''
baseUrl: '../client'
wrap: true
include: '../client/main'
keepBuildDir: true
paths:
underscore: 'client/vendor/underscore'
jquery : 'client/vendor/jquery'
backbone : 'client/vendor/backbone'
Folder Structure:
Error:
C:\Users\User\Documents\Source\Project>grunt requirejs
Running "requirejs:build" (requirejs) task
>> Error: ENOENT, no such file or directory
>> 'C:\Users\User\Documents\Source\Project\build\models\MenuItem.js'
>> In module tree:
>> ../client/main
Warning: RequireJS failed. Use --force to continue.
Main.js code (written in coffeescript)
requirejs.config(
baseUrl: "client"
shim:
'backbone':
deps: ['jquery']
exports: 'Backbone'
'jquery':
exports: '$'
'underscore':
exports: '_'
paths:
jquery: 'vendor/jquery-1.11.0'
underscore: 'vendor/underscore'
backbone: 'vendor/backbone'
)
define 'start', ()->
window.types =
Models: {}
Collections: {}
Views: {}
null
require ['models/MenuItem', 'views/MenuItem'], (MenuItemModel, MenuItemView)->
view = new MenuItemView(
new MenuItemModel(),
"#app",
'first'
)
view.render();
null
I want to compile my entire project spread across multiple js files into a single file in a way that requirejs would not be needed. I am trying to do this using almond js but the build task does not look for referenced files relative to the path of referring file. Please help me with the correct configuration.

Resources