get a few CSS tests passing. will need to do SSR before doing the rest

pull/1839/head
Rich Harris 7 years ago
parent 68464ca94f
commit aca79ac531

@ -1,7 +1,6 @@
import assert from 'assert'; import * as assert from 'assert';
import * as fs from 'fs'; import * as fs from 'fs';
import { parse } from 'acorn'; import { env, normalizeHtml, svelte } from '../helpers.js';
import { addLineNumbers, env, normalizeHtml, svelte } from '../helpers.js';
function tryRequire(file) { function tryRequire(file) {
try { try {
@ -23,16 +22,7 @@ function normalizeWarning(warning) {
return warning; return warning;
} }
function checkCodeIsValid(code) { describe.only('css', () => {
try {
parse(code);
} catch (err) {
console.error(addLineNumbers(code));
throw new Error(err.message);
}
}
describe('css', () => {
fs.readdirSync('test/css/samples').forEach(dir => { fs.readdirSync('test/css/samples').forEach(dir => {
if (dir[0] === '.') return; if (dir[0] === '.') return;
@ -51,64 +41,54 @@ describe('css', () => {
.replace(/\s+$/, ''); .replace(/\s+$/, '');
const expectedWarnings = (config.warnings || []).map(normalizeWarning); const expectedWarnings = (config.warnings || []).map(normalizeWarning);
const domWarnings = []; const warnings = [];
const ssrWarnings = [];
const dom = svelte.compile(
input,
Object.assign(config, {
format: 'iife',
name: 'SvelteComponent',
onwarn: warning => {
domWarnings.push(warning);
}
})
);
const ssr = svelte.compile( const { js, css } = svelte.compile(
input, input,
Object.assign(config, { Object.assign(config, {
format: 'iife', format: 'cjs',
generate: 'ssr',
name: 'SvelteComponent', name: 'SvelteComponent',
onwarn: warning => { onwarn: warning => {
ssrWarnings.push(warning); warnings.push(warning);
} }
}) })
); );
// check the code is valid // we do this here, rather than in the expected.html !== null
checkCodeIsValid(dom.js.code); // block, to verify that valid code was generated
checkCodeIsValid(ssr.js.code); const fn = new Function('module', 'exports', 'require', js.code);
assert.equal(dom.css.code, ssr.css.code); console.log(warnings);
console.log(expectedWarnings);
assert.deepEqual(warnings.map(normalizeWarning), expectedWarnings);
assert.deepEqual( fs.writeFileSync(`test/css/samples/${dir}/_actual.css`, css.code);
domWarnings.map(normalizeWarning),
ssrWarnings.map(normalizeWarning)
);
assert.deepEqual(domWarnings.map(normalizeWarning), expectedWarnings);
fs.writeFileSync(`test/css/samples/${dir}/_actual.css`, dom.css.code);
const expected = { const expected = {
html: read(`test/css/samples/${dir}/expected.html`), html: read(`test/css/samples/${dir}/expected.html`),
css: read(`test/css/samples/${dir}/expected.css`) css: read(`test/css/samples/${dir}/expected.css`)
}; };
assert.equal(dom.css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css); assert.equal(css.code.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz'), expected.css);
// verify that the right elements have scoping selectors // verify that the right elements have scoping selectors
if (expected.html !== null) { if (expected.html !== null) {
const window = env(); const window = env();
// dom const module = { exports: {} };
fn(module, module.exports, id => {
if (id === 'svelte') return require('../../index.js');
if (id.startsWith('svelte/')) return require(id.replace('svelte', '../../'));
return require(id);
});
const { default: Component, $render } = module.exports;
try { try {
const Component = eval( // dom
`(function () { ${dom.js.code}; return SvelteComponent; }())`
);
const target = window.document.querySelector('main'); const target = window.document.querySelector('main');
new Component({ target, data: config.data }); new Component({ target, props: config.props });
const html = target.innerHTML; const html = target.innerHTML;
fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html); fs.writeFileSync(`test/css/samples/${dir}/_actual.html`, html);
@ -119,26 +99,17 @@ describe('css', () => {
); );
window.document.head.innerHTML = ''; // remove added styles window.document.head.innerHTML = ''; // remove added styles
} catch (err) {
console.log(dom.js.code);
throw err;
}
// ssr
try {
const component = eval(
`(function () { ${ssr.js.code}; return SvelteComponent; }())`
);
// ssr
assert.equal( assert.equal(
normalizeHtml( normalizeHtml(
window, window,
component.render(config.data).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz') $render(config.props).html.replace(/svelte(-ref)?-[a-z0-9]+/g, (m, $1) => $1 ? m : 'svelte-xyz')
), ),
normalizeHtml(window, expected.html) normalizeHtml(window, expected.html)
); );
} catch (err) { } catch (err) {
console.log(ssr.js.code); console.log(js.code);
throw err; throw err;
} }
} }

@ -2,7 +2,7 @@ import * as fs from "fs";
import * as assert from "assert"; import * as assert from "assert";
import { svelte, loadConfig, tryToLoadJson } from "../helpers.js"; import { svelte, loadConfig, tryToLoadJson } from "../helpers.js";
describe.only("validate", () => { describe("validate", () => {
fs.readdirSync("test/validator/samples").forEach(dir => { fs.readdirSync("test/validator/samples").forEach(dir => {
if (dir[0] === ".") return; if (dir[0] === ".") return;

Loading…
Cancel
Save