Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

chore(CI): reenable test:projects:cra-ts #608

Merged
merged 5 commits into from
Dec 14, 2018
Merged

chore(CI): reenable test:projects:cra-ts #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
179363b
chore(CI): reenable `test:projects:cra-ts`
layershifter Dec 13, 2018
009b581
restore log util
layershifter Dec 13, 2018
5cd42fe
minor fixes
layershifter Dec 13, 2018
b8dd05f
Merge branch 'master' of https://github.com/stardust-ui/react into ch…
layershifter Dec 13, 2018
a0a4d87
Merge branch 'master' into chore/reenable-project-test
layershifter Dec 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 37 additions & 80 deletions build/gulp/tasks/test-projects.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as debug from 'debug'
import * as fs from 'fs'
import { series, task } from 'gulp'
import { parallel, series, task } from 'gulp'
import * as path from 'path'
import sh from '../sh'
import * as rimraf from 'rimraf'
Expand All @@ -10,22 +9,22 @@ import * as tmp from 'tmp'

const { paths } = config

const log = msg => {
Copy link
Contributor

Choose a reason for hiding this comment

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

now the output is indistinguishable, it is very hard to understand what is going on and immediately find the step necessary:

image

It will significantly complicate debugging scenarios

Copy link
Member Author

Choose a reason for hiding this comment

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

Agree, I restored your logger

const log = (context: string) => (message: string) => {
console.log()
console.log('='.repeat(80))
console.log('CRA TS:', msg)
console.log(`${context} : ${message}`)
console.log('='.repeat(80))
}

export const createPackageFilename = () => tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' })
export const publishPackage = async () => {
const filename = tmp.tmpNameSync({ prefix: 'stardust-', postfix: '.tgz' })
await sh(`yarn pack --filename ${filename}`)

export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)

export const buildAndPackStardust = async (packageFilename: string) => {
await sh('yarn build:dist')
await sh(`yarn pack --filename ${packageFilename}`)
return filename
}

export const runIn = path => cmd => sh(`cd ${path} && ${cmd}`)

const createReactApp = async (atTempDirectory: string, appName: string): Promise<string> => {
const atDirectorySubpath = paths.withRootAt(atTempDirectory)

Expand Down Expand Up @@ -59,89 +58,50 @@ const createReactApp = async (atTempDirectory: string, appName: string): Promise
// - Update the App.tsx to include some stardust imports
// - Try and run a build
task('test:projects:cra-ts', async () => {
const appTSX = `import {
Avatar,
Button,
Header,
Image,
Input,
Popup,
Provider,
themes
} from '@stardust-ui/react';
import * as React from 'react';

class App extends React.Component {
public render() {
return (
<Provider theme={themes.teams}>
<div>
<Popup trigger={<Button content="Popup" />} content="Popup content" />
<Avatar src="//placehold.it" />
<Button content="Click me" />
<Header content="This is " />
<Image src="//placehold.it" />
<Input placeholder="Type here" />
</div>
</Provider>
);
}
}

export default App;
`
Copy link
Member Author

Choose a reason for hiding this comment

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

We have now a separate folder for this 👍

//////// PREPARE STARDUST PACKAGE ///////
log('STEP 0. Preparing Stardust package..')

const packageFilename = createPackageFilename()
const logger = log('test:projects:cra-ts')
const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/cra')

await buildAndPackStardust(packageFilename)
log(`Stardust package is published: ${packageFilename}`)
const packageFilename = await publishPackage()
logger(`✔️Package was published: ${packageFilename}`)

try {
//////// CREATE TEST REACT APP ///////
log('STEP 1. Create test React project with TSX scripts..')
//////// CREATE TEST REACT APP ///////
logger('STEP 1. Create test React project with TSX scripts..')

const testAppPath = paths.withRootAt(
await createReactApp(tmp.dirSync({ prefix: 'stardust-' }).name, 'test-app'),
)
const testAppPath = paths.withRootAt(
await createReactApp(tmp.dirSync({ prefix: 'stardust-' }).name, 'test-app'),
)

const runInTestApp = runIn(testAppPath())
log(`Test React project is successfully created: ${testAppPath()}`)
const runInTestApp = runIn(testAppPath())
logger(`Test React project is successfully created: ${testAppPath()}`)

//////// ADD STARDUST AS A DEPENDENCY ///////
log('STEP 2. Add Stardust dependency to test project..')
//////// ADD STARDUST AS A DEPENDENCY ///////
logger('STEP 2. Add Stardust dependency to test project..')

await runInTestApp(`yarn add ${packageFilename}`)
log("Stardust is successfully added as test project's dependency.")
await runInTestApp(`yarn add ${packageFilename}`)
logger("Stardust is successfully added as test project's dependency.")

//////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE ///////
log("STEP 3. Reference Stardust components in test project's App.tsx")
fs.writeFileSync(testAppPath('src', 'App.tsx'), appTSX)
//////// REFERENCE STARDUST COMPONENTS IN TEST APP's MAIN FILE ///////
logger("STEP 3. Reference Stardust components in test project's App.tsx")
fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx'))

//////// BUILD TEST PROJECT ///////
log('STEP 4. Build test project..')
await runInTestApp(`yarn build`)
//////// BUILD TEST PROJECT ///////
logger('STEP 4. Build test project..')
await runInTestApp(`yarn build`)

log('Test project is built successfully!')
} finally {
fs.unlinkSync(packageFilename)
}
logger('Test project is built successfully!')
})

task('test:projects:rollup', async () => {
const logger = debug('bundle:rollup')
logger.enabled = true
const logger = log('test:projects:rollup')

const packageFilename = createPackageFilename()
const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/rollup')

await buildAndPackStardust(packageFilename)
logger(`✔️Stardust UI package was prepared: ${packageFilename}`)

const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name

logger(`✔️Temporary directory was created: ${tmpDirectory}`)

const packageFilename = await publishPackage()
logger(`✔️Package was published: ${packageFilename}`)

const dependencies = [
'rollup',
'rollup-plugin-replace',
Expand All @@ -166,8 +126,5 @@ task('test:projects:rollup', async () => {

task(
'test:projects',
series(
// 'test:projects:cra-ts', Temporary disabled
'test:projects:rollup',
),
series('build:dist', parallel('test:projects:cra-ts', 'test:projects:rollup')),
)
21 changes: 21 additions & 0 deletions build/gulp/tasks/test-projects/cra/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Avatar, Button, Header, Image, Input, Popup, Provider, themes } from '@stardust-ui/react'
import * as React from 'react'

class App extends React.Component {
public render() {
return (
<Provider theme={themes.teams}>
<div>
<Popup trigger={<Button content="Popup" />} content="Popup content" />
<Avatar src="//placehold.it" />
<Button content="Click me" />
<Header content="This is " />
<Image src="//placehold.it" />
<Input placeholder="Type here" />
</div>
</Provider>
)
}
}

export default App