Have you ever been working on an Angular project and you are running tests and you get the following error:\n![\"known-element-error\"](\"https://paulmfischer.dev/posts/NO_ERRORS_SCHEMA/known-element-error.png\")
\nThis error is Angular telling you that for that specific test, it found an element in the template that it doesn't know about. Instead of trying to render the element, it throws an error. This error is due to the test module setup not including an import for that component or module that contains the unknown element.
For the example error above, this is what my app.component.html file looks like (parts removed for brevity)
<h1>Hello, {{ title }}</h1>\n<p>Congratulations! Your app is running. 🎉</p>\n<profile></profile>\n<profile> is another Angular component that I have created to contain some other functionality. When the application runs, angular knows about this element due to it being registered to the main application. But the test module does not know about it so we get the error!
Here is what my app.component.spec.ts file looks like (again, parts removed for brevity)
describe('AppComponent', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [AppComponent],\n }).compileComponents();\n });\n});\nTypically you would fix this error by adding the component or module to the tests TestBed.configureTestingModule setup like so
describe('AppComponent', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [AppComponent, ProfileComponent],\n }).compileComponents();\n });\n});\nor if the component lives in another module
\ndescribe('AppComponent', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [AppComponent, ProfileModule],\n }).compileComponents();\n });\n});\nThe main problem with this, is that you need to add an import for every component or module for every component that would be rendered down the render path, not just direct descendants. So you testing module setup can become massive at times!
\nI recently found a third option that makes your setup a little cleaner. Specify NO_ERRORS_SCHEME in the test module setup like so
describe('AppComponent', () => {\n beforeEach(async () => {\n await TestBed.configureTestingModule({\n imports: [AppComponent],\n schemas: [NO_ERRORS_SCHEMA],\n }).compileComponents();\n });\n});\nSo what is NO_ERRORS_SCHEMA doing here? Well if we look at the API documentation it tells us that
\n\nThis schema allows you to ignore the errors related to any unknown elements or properties in a template. The usage of this schema is generally discouraged because it prevents useful validation and may hide real errors in your template. Consider using the CUSTOM_ELEMENTS_SCHEMA instead.
\n
Now when you run your tests, Angular will no longer throw an ...is not a known element error. But there is a bit more going on here, when Angular encounters an unknown element, it will render the element as an empty tag and move on. So it allows you to write shallow component tests which is super powerful if you want your tests to only focus on the component in question and not all the child components it utilizes.
Keep in mind that using NO_ERRORS_SCHEMA does have some trade-offs as listed in the Developer Guide. One of those trades-offs is
\n\n", "url": "https://paulmfischer.dev/posts/NO_ERRORS_SCHEMA/", "title": "Angular - Utilizing NO_ERRORS_SCHEMA in tests", "summary": "Have you ever been working on an Angular project and you are running tests and you get the following error:\n\nThis error is Angular telling you that for that specific test, it found an element in the template that it doesn't know about. Instead of trying to render the element, it throws an error. This error is due to the test module setup not including an import for that component or module that contains the unknown element.", "date_modified": "2024-03-28T05:00:00.000Z", "date_published": "2024-03-28T05:00:00.000Z", "author": { "name": "Paul Fischer" } }, { "id": "https://paulmfischer.dev/posts/github-actions%5Bbot%5D-denied/", "content_html": "The NO_ERRORS_SCHEMA also prevents the compiler from telling you about the missing components and attributes that you omitted inadvertently or misspelled. You could waste hours chasing phantom bugs that the compiler would have caught in an instant.\nwhich could lead to some headaches if you rely on the test framework to validate all your changes.
\n
I have been working on setting up GitHub Pages for myself and trying out a few themes. Finally settled on the chirpy theme. Chirpy has a starter project that you can generate your repository from. So off I went creating a new repo based on the starter project, pulled my new repository down, made a few changes, committed the changes and then pushed my changes.
\nPretty painless process surprisingly which is awesome.
\nThe only issue is that chirpy requires the use of GitHub actions to do the build/deploy phase. No problem, Github Actions are enabled for repositories by default. Watching the actions run after pushing my change only to see that it failed! Clicking into the failed continuous-delivery job to see the console logs and it has the following at the end.
\n![\"cd-failed-deploy\"](\"https://paulmfischer.dev/posts/github-actions%5Bbot%5D-denied/actions-failed.png\")
My first thought is that I need to grant the github-actions[bot] access to my repository, but how? Did some quick googling and basically nothing on how to give the bot access to my repository so that it can push changes. Looked around in my repositories settings a bit and finally stumbled upon the Workflow permissions section under Settings -> Actions -> General.
![\"settings-actions-general\"](\"https://paulmfischer.dev/posts/github-actions%5Bbot%5D-denied/setting-guide-1.png\")
Under the Workflow permissions section the value Read repository contents permission is selected which only allows read access for the github-actions[bot]. So simply changing the selection to Read and write permissions and saving to grant the github-actions[bot] read/write access to my repository.
![\"settings-actions-general\"](\"https://paulmfischer.dev/posts/github-actions%5Bbot%5D-denied/setting-guide-2.png\")
From there, head back to my failed job, click the Re-run jobs dropdown, then Re-run all jobs for the job to run again. This time the action completed without failure and I could complete the setup of the chirpy theme and I am off an running!
\n", "url": "https://paulmfischer.dev/posts/github-actions%5Bbot%5D-denied/", "title": "github-actions[bot] denied access to repo", "summary": "I have been working on setting up GitHub Pages for myself and trying out a few themes. Finally settled on the chirpy theme. Chirpy has a starter project that you can generate your repository from. So off I went creating a new repo based on the starter project, pulled my new repository down, made a few changes, committed the changes and then pushed my changes.", "date_modified": "2022-05-10T05:00:00.000Z", "date_published": "2022-05-10T05:00:00.000Z", "author": { "name": "Paul Fischer" } }, { "id": "https://paulmfischer.dev/posts/Generic-Component-Blazor/", "content_html": "Continuing on my Blazor exploration, today I am exploring building a generic component. I started out building an autocomplete component for a single entity. It works great for the single entity PublisherViewModel but it does me no good if I want to have an autocomplete for another entity like AuthorViewModel.
So lets first look at the non-generic autocomplete component (Autocomplete.razor):
@using MediaSet.Shared\n\n<div class=\"autocomplete\" @onblur=\"@LostFocus\">\n <label for=\"search\">Search Publishers</label>\n <InputText id=\"Search\" Class=\"form-control\" @bind-Value=\"@SearchValue\" @oninput=\"@FilterResults\" @onfocus=\"@Focused\" />\n @if (DisplayResults)\n {\n <div class=\"list-group\">\n @foreach (var item in FilteredCollection(SearchValue))\n {\n <button type=\"button\" class=\"list-group-item list-group-item-action\" @onclick=\"@(async (e) => await SetSelectedItem(item))\">\n @item.Name\n </button>\n }\n </div>\n }\n</div>\n\n@code {\n []\n private IEnumerable<PublisherViewModel> Publishers { get; set; }\n\n []\n private EventCallback<PublisherViewModel> OnItemSelected { get; set; }\n\n private string SearchValue { get; set; }\n private bool DisplayResults { get; set; } = false;\n\n private void FilterResults(UIChangeEventArgs ev)\n {\n SearchValue = (string)ev.Value;\n }\n\n private void Focused()\n {\n DisplayResults = true;\n }\n\n private void LostFocus()\n {\n DisplayResults = false;\n }\n\n private IEnumerable<PublisherViewModel> FilteredCollection(string searchVal)\n {\n return Publishers.Select(x => new PublisherViewModel {\n Id = x.Id,\n Name = x.Name\n }).Where(x => string.IsNullOrEmpty(searchVal) || x.Name.Contains(searchVal));\n }\n\n private async Task SetSelectedItem(PublisherViewModel itemSelected)\n {\n SearchValue = itemSelected.Name;\n DisplayResults = false;\n await OnItemSelected.InvokeAsync(itemSelected);\n base.StateHasChanged();\n }\n}\nThe non-generic part about this auto complete that we need to pull out is the PublisherViewModel. To do that we need to specify a type parameter. In Blazor, we specify a type parameter for the component at the top of the component like so:
@typeparam TEntity\nNow we can start to use that type parameter throughout the component and make the component a generic component.\nThere are a few things we need to change, for one, we need to update the signature of FilteredCollection like so
private IEnumerable<selectitem> FilteredCollection(string searchVal)\nYou will notice that it now returns IEnumerable<SelectItem> instead of IEnumerable<TEntity>. Internally to the autocomplete I am creating a new class like so:
private class SelectItem\n{\n public int Id { get; set; }\n public string Name { get; set; }\n public TItem Item { get; set; }\n}\nI am doing this mainly because I am doing the filtering inside the autocomplete. To truly make this generic, we could remove the filtering so the autocomplete cares nothing at all about the types but I wanted to make this a simple autocomplete that doesn't require a lot of extra code to make work. The other reason I created an internal class is because this version of Blazor that I am using (v3 preview 6) we cannot put a type constraint on our generic type. If we could use type constraints then we could enforce the collections of objects would have to be of an interface or abstract class that defines a few properties to be used in the autocomplete like so:
\npublic class IEntity\n{\n int Id { get; set; }\n string Name { get; set; }\n}\nThis would then make our filter logic easier to work with since we wouldn't need an internal class and we also would not have to use reflection to get to the properties. There are a few other adjustments to be made such as making the search label an input Parameter, using a RenderFragment for the text in the autocomplete result list. And then the last thing is to return the actual TEntity item on selection.
So our new generic autocomplete component looks like the following:
\n@typeparam TEntity\n\n<div class=\"autocomplete\" @onblur=\"@LostFocus\">\n <label for=\"search\">@Title</label>\n <InputText id=\"Search\" Class=\"form-control\" @bind-Value=\"@SearchValue\" @oninput=\"@FilterResults\" @onfocus=\"@Focused\" />\n @if (DisplayResults)\n {\n <div class=\"list-group\">\n @foreach (var item in FilteredCollection(SearchValue))\n {\n <button type=\"button\" class=\"list-group-item list-group-item-action\" @onclick=\"@(async (e) => await SetSelectedItem(item))\">@ItemTemplate(item.Item)</button>\n }\n </div>\n }\n</div>\n\n@code {\n []\n private string Title { get; set; } = \"Search:\";\n\n []\n RenderFragment<TEntity> ItemTemplate { get; set; }\n\n []\n private IEnumerable<TEntity> Collection { get; set; }\n\n []\n private EventCallback<TEntity> OnItemSelected { get; set; }\n\n private string SearchValue { get; set; }\n private bool DisplayResults { get; set; } = false;\n\n private void FilterResults(UIChangeEventArgs ev)\n {\n SearchValue = (string)ev.Value;\n }\n\n private void Focused()\n {\n DisplayResults = true;\n }\n\n private void LostFocus()\n {\n DisplayResults = false;\n }\n\n private IEnumerable<SelectItem> FilteredCollection(string searchVal)\n {\n return Collection.Select(x => new SelectItem {\n Id = (int)x.GetType().GetProperty(\"Id\")?.GetValue(x, null),\n Name = (string)x.GetType().GetProperty(\"Name\")?.GetValue(x, null),\n Item = x\n }).Where(x => string.IsNullOrEmpty(searchVal) || x.Name.Contains(searchVal));\n }\n\n private async Task SetSelectedItem(SelectItem itemSelected)\n {\n SearchValue = itemSelected.Name;\n Value = itemSelected.Item;\n DisplayResults = false;\n await OnItemSelected.InvokeAsync(itemSelected.Item);\n base.StateHasChanged();\n }\n\n private class SelectItem\n {\n public int Id { get; set; }\n public string Name { get; set; }\n public TEntity Item { get; set; }\n }\n}\nSo that is the transformation I made to a component built for a single entity to a generic component. There are some additional things I could of added like server side filtering, the ability to add a new value that is not in the results list. But I will leave that for another day.
\n", "url": "https://paulmfischer.dev/posts/Generic-Component-Blazor/", "title": "Generic Components in Blazor", "summary": "Continuing on my Blazor exploration, today I am exploring building a generic component. I started out building an autocomplete component for a single entity. It works great for the single entity PublisherViewModel but it does me no good if I want to have an autocomplete for another entity like AuthorViewModel.", "date_modified": "2019-06-21T05:00:00.000Z", "date_published": "2019-06-21T05:00:00.000Z", "author": { "name": "Paul Fischer" } } ] }