{"action":"created","issue":{"url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/1","repository_url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test","labels_url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/1/comments","events_url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/1/events","html_url":"https://github.com/bahmutov/cypress-angular-unit-test/issues/1","id":326312230,"node_id":"MDU6SXNzdWUzMjYzMTIyMzA=","number":1,"title":"How to scaffold a component in the test iframe?","user":{"login":"bahmutov","id":2212006,"node_id":"MDQ6VXNlcjIyMTIwMDY=","avatar_url":"https://avatars1.githubusercontent.com/u/2212006?v=4","gravatar_id":"","url":"https://api.github.com/users/bahmutov","html_url":"https://github.com/bahmutov","followers_url":"https://api.github.com/users/bahmutov/followers","following_url":"https://api.github.com/users/bahmutov/following{/other_user}","gists_url":"https://api.github.com/users/bahmutov/gists{/gist_id}","starred_url":"https://api.github.com/users/bahmutov/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bahmutov/subscriptions","organizations_url":"https://api.github.com/users/bahmutov/orgs","repos_url":"https://api.github.com/users/bahmutov/repos","events_url":"https://api.github.com/users/bahmutov/events{/privacy}","received_events_url":"https://api.github.com/users/bahmutov/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2018-05-24T22:01:45Z","updated_at":"2018-07-23T22:16:36Z","closed_at":null,"author_association":"OWNER","body":"The `mount` function exposed by this package should mount the given component under test in the iframe's window. For example, here is the same code from https://github.com/bahmutov/cypress-angularjs-unit-test\r\n\r\n```js\r\nexport const mount = function (template, modules = []) {\r\n  if (arguments.length === 1) {\r\n    // test did not pass a template, just list of modules\r\n    modules = template\r\n    template = ''\r\n  }\r\n\r\n  // must inject into a \"div\" and not into \"document\" directly,\r\n  // Angular.js goes up to \"html\" parent element\r\n  // and stores its state there, affecting every test afterwards\r\n  const html = `\r\n    <head>\r\n      <meta charset=\"UTF-8\">\r\n    </head>\r\n    <body>\r\n      <div id=\"app\">\r\n        ${template}\r\n      </div>\r\n    </body>\r\n  `\r\n\r\n  const document = cy.state('document')\r\n  document.write(html)\r\n  document.close()\r\n\r\n  cy.window().then(w => {\r\n    w.angular = angular\r\n    cy.log('Angular.js', w.angular.version.full)\r\n    const el = document.getElementById('app')\r\n    w.angular.bootstrap(el, modules)\r\n  })\r\n}\r\n```\r\n\r\nIn this repo, I could not find how to scaffold Angular component on demand. See [cypress/integration/spec.ts](cypress/integration/spec.ts) currently. I am trying to put the component into the test iframe and start the app\r\n\r\n```typescript\r\n  beforeEach(() => {\r\n    const html = `\r\n      <head>\r\n        <meta charset=\"UTF-8\">\r\n      </head>\r\n      <body>\r\n        <app-root></app-root>\r\n      </body>\r\n    `\r\n    const document = (cy as any).state('document')\r\n    document.write(html)\r\n    document.close()\r\n\r\n    cy.get('app-root').then(el$ => {\r\n      platformBrowserDynamic()\r\n        .bootstrapModule(AppModule)\r\n        .then(function (moduleRef) {\r\n          moduleRef.instance.app.bootstrap(AppComponent, el$.get(0))\r\n        })\r\n    })\r\n  })\r\n\r\n  it('works', () => {})\r\n```\r\n\r\nBut so far - no luck.\r\n\r\n## steps to reproduce\r\n\r\n- Clone this repo\r\n- `npm install`\r\n- `npx cypress open` starts Cypress GUI\r\n- click on `spec.ts` file and it will run the test\r\n\r\nAttention @igorminar"},"comment":{"url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/comments/407219063","html_url":"https://github.com/bahmutov/cypress-angular-unit-test/issues/1#issuecomment-407219063","issue_url":"https://api.github.com/repos/bahmutov/cypress-angular-unit-test/issues/1","id":407219063,"node_id":"MDEyOklzc3VlQ29tbWVudDQwNzIxOTA2Mw==","user":{"login":"meDavid","id":1251712,"node_id":"MDQ6VXNlcjEyNTE3MTI=","avatar_url":"https://avatars0.githubusercontent.com/u/1251712?v=4","gravatar_id":"","url":"https://api.github.com/users/meDavid","html_url":"https://github.com/meDavid","followers_url":"https://api.github.com/users/meDavid/followers","following_url":"https://api.github.com/users/meDavid/following{/other_user}","gists_url":"https://api.github.com/users/meDavid/gists{/gist_id}","starred_url":"https://api.github.com/users/meDavid/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/meDavid/subscriptions","organizations_url":"https://api.github.com/users/meDavid/orgs","repos_url":"https://api.github.com/users/meDavid/repos","events_url":"https://api.github.com/users/meDavid/events{/privacy}","received_events_url":"https://api.github.com/users/meDavid/received_events","type":"User","site_admin":false},"created_at":"2018-07-23T22:16:36Z","updated_at":"2018-07-23T22:16:36Z","author_association":"NONE","body":"@bahmutov Is there a way to make cypress look for the *.spec.ts files in the /src/** directories instead of the cypress/integration directory?"}}
{"actor":{"display_login":"meDavid"}}