ci: switch to GH actions and npm (#138)

Author: timdeschryver

.circleci/config.yml

@@ -0,0 +1,23 @@
+name: ci
+
+on: pull_request
+
+jobs:
+  build_and_test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: install
+        run: npm install
+      - name: build
+        run: npm run build --skip-nx-cache
+      - name: test
+        run: npm run test --ci --code-coverage

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: release
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  release:
+    if: github.repository == 'testing-library/angular-testing-library'
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: install
+        run: npm install
+      - name: build
+        run: npm run build --skip-nx-cache
+      - name: test
+        run: npm run test --ci --code-coverage
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.github/workflows/release.yml

@@ -1 +1,2 @@
-registry=http://registry.npmjs.org/
+registry=http://registry.npmjs.org/
+package-lock=false

.npmrc

@@ -78,7 +78,7 @@
           "options": {
             "jestConfig": "apps/example-app/jest.config.js",
             "tsConfig": "apps/example-app/tsconfig.spec.json",
-            "setupFile": "apps/example-app/setup-jest.ts"
+            "setupFile": "apps/example-app/test-setup.ts"
           }
         }
       }
@@ -134,7 +134,7 @@
           "options": {
             "jestConfig": "projects/testing-library/jest.config.js",
             "tsConfig": "projects/testing-library/tsconfig.spec.json",
-            "setupFile": "projects/testing-library/setup-jest.ts"
+            "setupFile": "projects/testing-library/test-setup.ts"
           }
         }
       }
@@ -181,7 +181,7 @@
           "options": {
             "jestConfig": "projects/jest-utils/jest.config.js",
             "tsConfig": "projects/jest-utils/tsconfig.spec.json",
-            "setupFile": "projects/jest-utils/setup-jest.ts"
+            "setupFile": "projects/jest-utils/test-setup.ts"
           }
         }
       }

angular.json

@@ -11,7 +11,7 @@ test('is possible to fill in a form and verify error messages (with the help of
 
   const nameControl = screen.getByLabelText(/name/i);
   const scoreControl = screen.getByRole('spinbutton', { name: /score/i });
-  const colorControl = screen.getByRole('listbox', { name: /color/i });
+  const colorControl = screen.getByRole('combobox', { name: /color/i });
   const errors = screen.getByRole('alert');
 
   expect(errors).toContainElement(screen.queryByText('name is required'));

apps/example-app/app/examples/04-forms-with-material.spec.ts

@@ -21,7 +21,7 @@ test('works with provideMockStore', async () => {
   const store = TestBed.inject(MockStore);
   store.dispatch = jest.fn();
 
-  fireEvent.click(screen.getByRole('listitem', { name: /seven/i }));
+  fireEvent.click(screen.getByText(/seven/i));
 
   expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

apps/example-app/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -10,7 +10,7 @@ export const selectItems = createSelector(
   selector: 'app-fixture',
   template: `
     <ul>
-      <li *ngFor="let item of items | async" (click)="send(item)" [attr.aria-label]="item">{{ item }}</li>
+      <li *ngFor="let item of items | async" (click)="send(item)">{{ item }}</li>
     </ul>
   `,
 })

apps/example-app/app/examples/07-with-ngrx-mock-store.ts

@@ -1,10 +1,10 @@
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/angular';
 
-import { CdkVirtualScrollOverviewExample } from './13-scrolling.component';
+import { CdkVirtualScrollOverviewExampleComponent } from './13-scrolling.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
 test('should scroll to load more items', async () => {
-  await render(CdkVirtualScrollOverviewExample, {
+  await render(CdkVirtualScrollOverviewExampleComponent, {
     imports: [ScrollingModule],
   });
 

apps/example-app/app/examples/13-scrolling.component.spec.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  selector: 'cdk-virtual-scroll-overview-example',
+  selector: 'app-cdk-virtual-scroll-overview-example',
   template: `
     <cdk-virtual-scroll-viewport itemSize="50" class="example-viewport" data-testid="scroll-viewport">
       <div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
@@ -22,6 +22,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CdkVirtualScrollOverviewExample {
+export class CdkVirtualScrollOverviewExampleComponent {
   items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
 }